From 1558ab09bcb5679af5939d10ae031442077b0692 Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Wed, 8 Apr 2026 21:24:27 +1000
Subject: [PATCH 01/12] fix: update card ui

---
 .../src/containers/theme-studio/index.tsx     |   4 +-
 .../theme-studio/preview-components.tsx       | 519 +++++++++++-------
 .../containers/theme-studio/theme-studio.scss | 300 +++++++++-
 packages/react/src/cascader/style/index.scss  |   1 +
 .../react/src/date-picker/style/index.scss    |   4 +
 .../react/src/form/demo/OtherControls.tsx     |  15 +-
 .../react/src/form/demo/SizeAlignment.tsx     |  63 +++
 packages/react/src/form/index.md              |  13 +-
 packages/react/src/form/index.zh_CN.md        |  15 +-
 .../react/src/native-select/style/_mixin.scss |   4 +-
 .../react/src/native-select/style/index.scss  |  12 +-
 packages/react/src/select/style/index.scss    |   4 +
 .../__snapshots__/textarea.test.tsx.snap      |  46 +-
 .../src/textarea/__tests__/textarea.test.tsx  |  48 ++
 packages/react/src/textarea/demo/Resize.tsx   |  16 +
 packages/react/src/textarea/index.md          |  15 +-
 packages/react/src/textarea/index.zh_CN.md    |  15 +-
 packages/react/src/textarea/style/index.scss  |  69 ++-
 packages/react/src/textarea/textarea.tsx      | 108 +++-
 packages/react/src/textarea/types.ts          |  13 +-
 .../react/src/time-picker/style/index.scss    |   4 +
 21 files changed, 1026 insertions(+), 262 deletions(-)
 create mode 100644 packages/react/src/form/demo/SizeAlignment.tsx
 create mode 100644 packages/react/src/textarea/demo/Resize.tsx

diff --git a/apps/docs/src/containers/theme-studio/index.tsx b/apps/docs/src/containers/theme-studio/index.tsx
index b634583c..31ed0408 100644
--- a/apps/docs/src/containers/theme-studio/index.tsx
+++ b/apps/docs/src/containers/theme-studio/index.tsx
@@ -194,9 +194,7 @@ const ThemeStudioPage = (): React.ReactElement => {
               </div>
             </div>
 
-            <div className={`theme-studio__preview theme-studio__preview_${draft.mode}`}>
-              {renderPreview(draft.activeTemplate, draft.fields, draft.activeSection)}
-            </div>
+            {renderPreview(draft.activeTemplate, draft.fields, draft.activeSection)}
           </main>
         </div>
 
diff --git a/apps/docs/src/containers/theme-studio/preview-components.tsx b/apps/docs/src/containers/theme-studio/preview-components.tsx
index 9528fcc1..243c88cb 100644
--- a/apps/docs/src/containers/theme-studio/preview-components.tsx
+++ b/apps/docs/src/containers/theme-studio/preview-components.tsx
@@ -4,9 +4,9 @@ import {
   Avatar,
   Button,
   Card,
-  Calendar,
   Checkbox,
   DatePicker,
+  Divider,
   Flex,
   Grid,
   Input,
@@ -19,7 +19,7 @@ import {
   Tag,
   Textarea,
   Typography,
-  Waterfall,
+  Calendar,
 } from '@tiny-design/react';
 import {
   ChartContainer,
@@ -27,26 +27,10 @@ import {
   ChartTooltipContent,
   type ChartConfig,
 } from '@tiny-design/charts';
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts';
 import { swatchTextStyle } from './editor-fields';
 import type { ThemeEditorFields, ThemeEditorSection, ThemePreviewTemplate } from './types';
-
-const exerciseData = [
-  { day: 'Mon', minutes: 34 },
-  { day: 'Tue', minutes: 52 },
-  { day: 'Wed', minutes: 49 },
-  { day: 'Thu', minutes: 63 },
-  { day: 'Fri', minutes: 58 },
-  { day: 'Sat', minutes: 71 },
-  { day: 'Sun', minutes: 66 },
-];
-
-const exerciseChartConfig: ChartConfig = {
-  minutes: {
-    label: 'Minutes',
-    color: 'var(--ty-chart-1)',
-  },
-};
+import { IconGithub, IconGoogle } from '@tiny-design/icons';
 
 const revenueData = [
   { month: 'Jan', revenue: 4200, target: 3800 },
@@ -68,6 +52,82 @@ const revenueChartConfig: ChartConfig = {
   },
 };
 
+const cardsRevenueData = [
+  { month: 'Jan', value: 8.4 },
+  { month: 'Feb', value: 7.2 },
+  { month: 'Mar', value: 7.8 },
+  { month: 'Apr', value: 6.9 },
+  { month: 'May', value: 7.4 },
+  { month: 'Jun', value: 8.1 },
+  { month: 'Jul', value: 12.4 },
+];
+
+const cardsRevenueChartConfig: ChartConfig = {
+  value: {
+    label: 'Revenue',
+    color: 'var(--ty-chart-4)',
+  },
+};
+
+const moveGoalData = [
+  { key: 'm1', dayLabel: 'M', value: 280 },
+  { key: 't1', dayLabel: 'T', value: 340 },
+  { key: 'w1', dayLabel: 'W', value: 220 },
+  { key: 'th1', dayLabel: 'T', value: 310 },
+  { key: 'f1', dayLabel: 'F', value: 360 },
+  { key: 's1', dayLabel: 'S', value: 240 },
+  { key: 'su1', dayLabel: 'S', value: 300 },
+  { key: 'm2', dayLabel: 'M', value: 330 },
+  { key: 't2', dayLabel: 'T', value: 260 },
+  { key: 'w2', dayLabel: 'W', value: 320 },
+  { key: 'th2', dayLabel: 'T', value: 350 },
+  { key: 'f2', dayLabel: 'F', value: 290 },
+];
+
+const moveGoalChartConfig: ChartConfig = {
+  value: {
+    label: 'Calories',
+    color: 'var(--ty-chart-1)',
+  },
+};
+
+const cardsExerciseData = [
+  { month: 'Mar', personal: 18, average: 22 },
+  { month: 'Apr', personal: 14, average: 18 },
+  { month: 'May', personal: 58, average: 26 },
+  { month: 'Jun', personal: 28, average: 24 },
+  { month: 'Jul', personal: 22, average: 20 },
+  { month: 'Aug', personal: 26, average: 23 },
+];
+
+const cardsExerciseChartConfig: ChartConfig = {
+  personal: {
+    label: 'You',
+    color: 'var(--ty-chart-2)',
+  },
+  average: {
+    label: 'Average',
+    color: 'var(--ty-chart-5)',
+  },
+};
+
+const subscriptionsData = [
+  { month: 'Jan', value: 400 },
+  { month: 'Feb', value: 620 },
+  { month: 'Mar', value: 980 },
+  { month: 'Apr', value: 1480 },
+  { month: 'May', value: 1910 },
+  { month: 'Jun', value: 880 },
+  { month: 'Jul', value: 2350 },
+];
+
+const subscriptionsChartConfig: ChartConfig = {
+  value: {
+    label: 'Subscriptions',
+    color: 'var(--editor-card-foreground)',
+  },
+};
+
 function MetricsStrip({
   items = [
     ['Total Revenue', '$15,231.89', '+20.1% from last month'],
@@ -154,103 +214,124 @@ function LiveResponsePanel({ fields }: { fields: ThemeEditorFields }): React.Rea
 }
 
 function CardsPreview(): React.ReactElement {
-  const items = [
-    {
-      key: 'metric-revenue',
-      children: (
-        <Card title="Total Revenue" className="theme-studio__card-metric">
-          <Card.Content>
-            <div className="theme-studio__metric theme-studio__metric_preview">
-              <span>Total Revenue</span>
-              <strong>$15,231.89</strong>
-              <small>+20.1% from last month</small>
-            </div>
-          </Card.Content>
-        </Card>
-      ),
-    },
-    {
-      key: 'metric-subscriptions',
-      children: (
-        <Card title="Subscriptions" className="theme-studio__card-metric">
-          <Card.Content>
-            <div className="theme-studio__metric theme-studio__metric_preview">
-              <span>Subscriptions</span>
-              <strong>+2,350</strong>
-              <small>+180.1% from last month</small>
-            </div>
-          </Card.Content>
-        </Card>
-      ),
-    },
-    {
-      key: 'upgrade',
-      children: (
-        <Card title="Upgrade your subscription" className="theme-studio__card-tall theme-studio__preview-card">
+  return (
+    <div className="theme-studio__cards-scene">
+      <div className="theme-studio__cards-column">
+        <div className="theme-studio__cards-top-pair">
+          <Card className="theme-studio__cards-panel theme-studio__cards-panel_revenue">
+            <Card.Content>
+              <div className="theme-studio__cards-panel-head">
+                <div>
+                  <Typography.Text strong>Total Revenue</Typography.Text>
+                  <Typography.Text type="secondary">+20.1% from last month</Typography.Text>
+                </div>
+              </div>
+              <Typography.Heading level={2}>$15,231.89</Typography.Heading>
+              <ChartContainer config={cardsRevenueChartConfig} style={{ height: 72, width: '100%' }}>
+                <LineChart data={cardsRevenueData} margin={{ top: 10, right: 6, left: -22, bottom: 0 }}>
+                  <XAxis dataKey="month" hide />
+                  <YAxis hide domain={['dataMin - 1', 'dataMax + 1']} />
+                  <ChartTooltip cursor={false} content={<ChartTooltipContent labelKey="month" />} />
+                  <Line
+                    type="monotone"
+                    dataKey="value"
+                    stroke="var(--color-value)"
+                    strokeWidth={2}
+                    dot={false}
+                  />
+                </LineChart>
+              </ChartContainer>
+            </Card.Content>
+          </Card>
+
+          <Card className="theme-studio__cards-panel theme-studio__cards-panel_revenue">
+            <Card.Content>
+              <div className="theme-studio__cards-panel-head">
+                <div>
+                  <Typography.Text strong>Subscriptions</Typography.Text>
+                  <Typography.Text type="secondary">+180.1% from last month</Typography.Text>
+                </div>
+              </div>
+              <Typography.Heading level={2}>+2,350</Typography.Heading>
+              <ChartContainer config={subscriptionsChartConfig} style={{ height: 72, width: '100%' }}>
+                <AreaChart data={subscriptionsData} margin={{ top: 8, right: 4, left: -18, bottom: 0 }}>
+                  <defs>
+                    <linearGradient id="subscriptionsFill" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="10%" stopColor="var(--color-value)" stopOpacity={0.18} />
+                      <stop offset="100%" stopColor="var(--color-value)" stopOpacity={0.02} />
+                    </linearGradient>
+                  </defs>
+                  <XAxis dataKey="month" hide />
+                  <YAxis hide />
+                  <ChartTooltip cursor={false} content={<ChartTooltipContent labelKey="month" />} />
+                  <Area
+                    type="monotone"
+                    dataKey="value"
+                    stroke="var(--color-value)"
+                    fill="url(#subscriptionsFill)"
+                    strokeWidth={2}
+                  />
+                </AreaChart>
+              </ChartContainer>
+            </Card.Content>
+          </Card>
+        </div>
+
+        <Card className="theme-studio__cards-panel">
           <Card.Content>
-            <div className="theme-studio__card-kicker-row">
-              <Tag color="warning">Billing</Tag>
-              <Typography.Text type="secondary">Update your seat plan before the next invoice.</Typography.Text>
+            <div className="theme-studio__cards-copy-block">
+              <Typography.Text strong>Upgrade your subscription</Typography.Text>
+              <Typography.Text type="secondary">
+                You are currently on the free plan. Upgrade to the pro plan to get access to all features.
+              </Typography.Text>
             </div>
-            <Typography.Paragraph>
-              You are currently on the free plan. Upgrade to the pro plan to get access to all features.
-            </Typography.Paragraph>
             <div className="theme-studio__form-stack">
-              <Input placeholder="Name" defaultValue="Evil Rabbit" />
-              <Input placeholder="Email" defaultValue="m@example.com" />
+              <Flex gap="sm">
+                <Input placeholder="Name" defaultValue="Evil Rabbit" />
+                <Input placeholder="Email" defaultValue="m@example.com" />
+              </Flex>
               <Input placeholder="Card Number" defaultValue="1234 1234 1234 1234" />
               <Flex gap="sm">
-                <Input placeholder="MM/YY" />
-                <Input placeholder="CVC" />
+                <Input placeholder="MM/YY" defaultValue="06/25" />
+                <Input placeholder="CVC" defaultValue="001" />
               </Flex>
-              <div>
-                <Typography.Text strong>Plan</Typography.Text>
-                <Typography.Paragraph>Select the plan that best fits your needs.</Typography.Paragraph>
-                <Radio.Group defaultValue="starter">
-                  <Flex vertical gap="sm">
-                    <Radio value="starter">Starter Plan</Radio>
-                    <Radio value="pro">Pro Plan</Radio>
-                  </Flex>
-                </Radio.Group>
-              </div>
-              <Textarea rows={2} placeholder="Enter notes" />
+              <Radio.Group defaultValue="starter">
+                <div className="theme-studio__cards-plan-grid">
+                  <div className="theme-studio__cards-plan-option">
+                    <Radio value="starter">
+                      <div>
+                        <strong>Starter Plan</strong>
+                        <small>Perfect for small businesses.</small>
+                      </div>
+                    </Radio>
+                  </div>
+                  <div className="theme-studio__cards-plan-option">
+                    <Radio value="pro">
+                      <div>
+                        <strong>Pro Plan</strong>
+                        <small>More features and storage.</small>
+                      </div>
+                    </Radio>
+                  </div>
+                </div>
+              </Radio.Group>
+              <Textarea rows={3} placeholder="Enter notes" />
               <Checkbox defaultChecked>I agree to the terms and conditions</Checkbox>
               <Checkbox>Allow us to send you emails</Checkbox>
-              <Flex gap="sm">
+              <div className="theme-studio__cards-actions-end">
                 <Button>Cancel</Button>
                 <Button btnType="primary">Upgrade Plan</Button>
-              </Flex>
+              </div>
             </div>
           </Card.Content>
         </Card>
-      ),
-    },
-    {
-      key: 'account',
-      children: (
-        <Card title="Create an account" className="theme-studio__card-tall theme-studio__preview-card">
+
+        <Card className="theme-studio__cards-panel">
           <Card.Content>
-            <Typography.Paragraph>Enter your email below to create your account.</Typography.Paragraph>
-            <div className="theme-studio__mail-compose theme-studio__mail-compose_auth">
-              <Button>GitHub</Button>
-              <Button>Google</Button>
-            </div>
-            <Typography.Text type="secondary">OR CONTINUE WITH</Typography.Text>
-            <div className="theme-studio__form-stack">
-              <Input placeholder="m@example.com" />
-              <Input placeholder="Password" type="password" />
-              <Button btnType="primary">Create account</Button>
+            <div className="theme-studio__cards-copy-block">
+              <Typography.Text strong>Team Members</Typography.Text>
+              <Typography.Text type="secondary">Invite your team members to collaborate.</Typography.Text>
             </div>
-          </Card.Content>
-        </Card>
-      ),
-    },
-    {
-      key: 'team',
-      children: (
-        <Card title="Team Members" className="theme-studio__preview-card">
-          <Card.Content>
-            <Typography.Paragraph>Invite your team members to collaborate.</Typography.Paragraph>
             <div className="theme-studio__member-list">
               {[
                 ['Sofia Davis', 'm@example.com', 'Owner'],
@@ -263,27 +344,30 @@ function CardsPreview(): React.ReactElement {
                     <Typography.Text strong>{name}</Typography.Text>
                     <Typography.Text type="secondary">{email}</Typography.Text>
                   </div>
-                  <Tag>{role}</Tag>
+                  <Select defaultValue={role.toLowerCase()} size="sm" className="theme-studio__cards-member-select">
+                    <Select.Option value="owner">Owner</Select.Option>
+                    <Select.Option value="developer">Developer</Select.Option>
+                    <Select.Option value="billing">Billing</Select.Option>
+                  </Select>
                 </div>
               ))}
             </div>
           </Card.Content>
         </Card>
-      ),
-    },
-    {
-      key: 'cookies',
-      children: (
-        <Card title="Cookie Settings" className="theme-studio__preview-card">
+
+        <Card className="theme-studio__cards-panel">
           <Card.Content>
-            <Typography.Paragraph>Manage your cookie settings here.</Typography.Paragraph>
+            <div className="theme-studio__cards-copy-block">
+              <Typography.Text strong>Cookie Settings</Typography.Text>
+              <Typography.Text type="secondary">Manage your cookie settings here.</Typography.Text>
+            </div>
             <div className="theme-studio__settings-list">
               <div className="theme-studio__settings-row">
                 <div>
                   <Typography.Text strong>Strictly Necessary</Typography.Text>
                   <Typography.Text type="secondary">These cookies are essential in order to use the website and use its features.</Typography.Text>
                 </div>
-                <Switch />
+                <Switch defaultChecked />
               </div>
               <div className="theme-studio__settings-row">
                 <div>
@@ -296,107 +380,150 @@ function CardsPreview(): React.ReactElement {
             </div>
           </Card.Content>
         </Card>
-      ),
-    },
-    {
-      key: 'calendar',
-      children: (
-        <Card title="June 2025" className="theme-studio__preview-card">
+
+        <div className="theme-studio__cards-bottom-pair">
+          <Card className="theme-studio__cards-panel theme-studio__cards-panel_calendar">
+            <Card.Content>
+              <Calendar value={new Date(2025, 5, 6)} fullscreen={false} />
+            </Card.Content>
+          </Card>
+
+          <Card className="theme-studio__cards-panel theme-studio__cards-panel_goal">
+            <Card.Content>
+              <div className="theme-studio__cards-copy-block">
+                <Typography.Text strong>Move Goal</Typography.Text>
+                <Typography.Text type="secondary">Set your daily activity goal.</Typography.Text>
+              </div>
+              <div className="theme-studio__cards-goal-header">
+                <Button size="sm" className="theme-studio__cards-goal-circle">-</Button>
+                <div className="theme-studio__goal-display">
+                  <span>350</span>
+                  <small>CALORIES/DAY</small>
+                </div>
+                <Button size="sm" className="theme-studio__cards-goal-circle">+</Button>
+              </div>
+              <ChartContainer config={moveGoalChartConfig} style={{ height: 82, width: '100%' }}>
+                <BarChart data={moveGoalData} margin={{ top: 8, right: 0, left: 0, bottom: 0 }}>
+                  <XAxis dataKey="dayLabel" hide />
+                  <YAxis hide />
+                  <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+                  <Bar dataKey="value" fill="var(--color-value)" radius={[2, 2, 2, 2]} barSize={10} />
+                </BarChart>
+              </ChartContainer>
+              <Button btnType="primary">Set Goal</Button>
+            </Card.Content>
+          </Card>
+        </div>
+      </div>
+
+      <div className="theme-studio__cards-column">
+        <Card className="theme-studio__cards-panel">
+          <Card.Content>
+            <div className="theme-studio__cards-copy-block">
+              <Typography.Text strong>Create an account</Typography.Text>
+              <Typography.Text type="secondary">Enter your email below to create your account</Typography.Text>
+            </div>
+            <div className="theme-studio__cards-auth-actions">
+              <Button><IconGithub /> GitHub</Button>
+              <Button><IconGoogle /> Google</Button>
+            </div>
+            <Divider className="theme-studio__cards-divider-label">OR CONTINUE WITH</Divider>
+            <div className="theme-studio__form-stack">
+              <Input placeholder="Email" defaultValue="m@example.com" />
+              <Input placeholder="Password" type="password" />
+              <Button btnType="primary">Create account</Button>
+            </div>
+          </Card.Content>
+        </Card>
+
+        <Card className="theme-studio__cards-panel">
           <Card.Content>
-            <Calendar value={new Date(2025, 5, 18)} fullscreen={false} />
+            <div className="theme-studio__member-row theme-studio__member-row_compact">
+              <Avatar>S</Avatar>
+              <div className="theme-studio__member-copy">
+                <Typography.Text strong>Sofia Davis</Typography.Text>
+                <Typography.Text type="secondary">m@example.com</Typography.Text>
+              </div>
+              <Button size="sm" btnType="ghost">+</Button>
+            </div>
+            <div className="theme-studio__chat-thread">
+              <Card bordered={false} className="theme-studio__chat-bubble theme-studio__chat-bubble_in">
+                <Card.Content>Hi, how can I help you today?</Card.Content>
+              </Card>
+              <Card bordered={false} className="theme-studio__chat-bubble theme-studio__chat-bubble_out">
+                <Card.Content>Hey, I&apos;m having trouble with my account.</Card.Content>
+              </Card>
+              <Card bordered={false} className="theme-studio__chat-bubble theme-studio__chat-bubble_in">
+                <Card.Content>What seems to be the problem?</Card.Content>
+              </Card>
+              <Card bordered={false} className="theme-studio__chat-bubble theme-studio__chat-bubble_out">
+                <Card.Content>I can&apos;t log in.</Card.Content>
+              </Card>
+            </div>
+            <Input placeholder="Type your message..." />
           </Card.Content>
         </Card>
-      ),
-    },
-    {
-      key: 'goal',
-      children: (
-        <Card title="Move Goal" className="theme-studio__preview-card">
+
+        <Card className="theme-studio__cards-inline-card">
           <Card.Content>
-            <Typography.Paragraph>Set your daily activity goal.</Typography.Paragraph>
-            <div className="theme-studio__goal-display">
-              <span>350</span>
-              <small>Calories/day</small>
+            <div className="theme-studio__cards-inline-card-head">
+              <Typography.Text strong>tweakcn</Typography.Text>
+              <Button size="sm" btnType="ghost">Star</Button>
             </div>
-            <Flex gap="sm" justify="space-between">
-              <Button>Decrease</Button>
-              <Button btnType="primary">Increase</Button>
-            </Flex>
-            <div className="theme-studio__goal-footer">
-              <Button btnType="primary" style={{ width: '100%' }}>Set Goal</Button>
+            <Typography.Text type="secondary">
+              A visual editor for shadcn/ui components with beautiful themes. Accessible. Customizable. Open Source.
+            </Typography.Text>
+            <div className="theme-studio__cards-meta-row">
+              <Tag>TypeScript</Tag>
+              <Typography.Text type="secondary">20k</Typography.Text>
+              <Typography.Text type="secondary">Updated April 2023</Typography.Text>
             </div>
           </Card.Content>
         </Card>
-      ),
-    },
-    {
-      key: 'exercise',
-      children: (
-        <Card title="Exercise Minutes" className="theme-studio__preview-card">
+
+        <Card className="theme-studio__cards-inline-card">
           <Card.Content>
-            <Typography.Paragraph>
-              Your exercise minutes are ahead of where you normally are.
-            </Typography.Paragraph>
-            <ChartContainer config={exerciseChartConfig} style={{ height: 220, width: '100%' }}>
-              <AreaChart data={exerciseData} margin={{ top: 12, right: 8, left: -20, bottom: 0 }}>
-                <defs>
-                  <linearGradient id="minutesFill" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="var(--color-minutes)" stopOpacity={0.35} />
-                    <stop offset="95%" stopColor="var(--color-minutes)" stopOpacity={0.02} />
-                  </linearGradient>
-                </defs>
+            <Typography.Heading level={5}>Date picker with range</Typography.Heading>
+            <Typography.Text type="secondary">Select a date range.</Typography.Text>
+            <DatePicker range defaultValue={[new Date(2022, 0, 20), new Date(2022, 1, 9)]} />
+          </Card.Content>
+        </Card>
+
+        <Card className="theme-studio__cards-panel">
+          <Card.Content>
+            <div className="theme-studio__cards-copy-block">
+              <Typography.Text strong>Exercise Minutes</Typography.Text>
+              <Typography.Text type="secondary">
+                Your exercise minutes are ahead of where you normally are.
+              </Typography.Text>
+            </div>
+            <ChartContainer config={cardsExerciseChartConfig} style={{ height: 146, width: '100%' }}>
+              <LineChart data={cardsExerciseData} margin={{ top: 8, right: 4, left: -22, bottom: 0 }}>
                 <CartesianGrid vertical={false} />
-                <XAxis dataKey="day" tickLine={false} axisLine={false} />
+                <XAxis dataKey="month" tickLine={false} axisLine={false} />
                 <YAxis tickLine={false} axisLine={false} />
                 <ChartTooltip content={<ChartTooltipContent />} />
-                <Area
+                <Line
                   type="monotone"
-                  dataKey="minutes"
-                  stroke="var(--color-minutes)"
-                  fill="url(#minutesFill)"
-                  strokeWidth={2}
+                  dataKey="personal"
+                  stroke="var(--color-personal)"
+                  strokeWidth={2.2}
+                  dot={{ r: 2.6, strokeWidth: 0, fill: 'var(--color-personal)' }}
+                  activeDot={{ r: 3.6, strokeWidth: 0, fill: 'var(--color-personal)' }}
                 />
-              </AreaChart>
+                <Line
+                  type="monotone"
+                  dataKey="average"
+                  stroke="var(--color-average)"
+                  strokeWidth={1.6}
+                  dot={{ r: 2.2, strokeWidth: 0, fill: 'var(--color-average)' }}
+                  activeDot={{ r: 3.4, strokeWidth: 0, fill: 'var(--color-average)' }}
+                />
+              </LineChart>
             </ChartContainer>
           </Card.Content>
         </Card>
-      ),
-    },
-    {
-      key: 'controls',
-      children: (
-        <Card title="Selection Controls" className="theme-studio__preview-card">
-          <Card.Content>
-            <div className="theme-studio__form-stack">
-              <DatePicker placeholder="Launch date" defaultValue={new Date(2025, 5, 18)} />
-              <Select defaultValue="pro">
-                <Select.Option value="starter">Starter</Select.Option>
-                <Select.Option value="pro">Pro</Select.Option>
-                <Select.Option value="scale">Scale</Select.Option>
-              </Select>
-              <Radio.Group defaultValue="b">
-                <Flex gap="sm">
-                  <Radio value="a">A</Radio>
-                  <Radio value="b">B</Radio>
-                </Flex>
-              </Radio.Group>
-              <Checkbox defaultChecked>Enable automation</Checkbox>
-              <Switch />
-            </div>
-          </Card.Content>
-        </Card>
-      ),
-    },
-  ];
-
-  return (
-    <div className="theme-studio__preview-stack">
-      <Waterfall
-        className="theme-studio__cards-waterfall"
-        columns={{ xs: 1, md: 1, xl: 2 }}
-        gutter={[18, 18]}
-        items={items}
-      />
+      </div>
     </div>
   );
 }
@@ -772,7 +899,7 @@ export function renderPreview(
 
   return (
     <div className="theme-studio__preview-stack">
-      {(section === 'colors' || section === 'typography' || section === 'other') ? <LiveResponsePanel fields={fields} /> : null}
+      {(template !== 'cards' && (section === 'colors' || section === 'typography' || section === 'other')) ? <LiveResponsePanel fields={fields} /> : null}
       {content}
     </div>
   );
diff --git a/apps/docs/src/containers/theme-studio/theme-studio.scss b/apps/docs/src/containers/theme-studio/theme-studio.scss
index 4b200041..f8754357 100644
--- a/apps/docs/src/containers/theme-studio/theme-studio.scss
+++ b/apps/docs/src/containers/theme-studio/theme-studio.scss
@@ -76,10 +76,7 @@
 }
 
 .theme-studio__import-textarea {
-  min-height: min(56vh, 620px);
-  max-height: min(56vh, 620px);
-  overflow: auto;
-  resize: vertical;
+  min-height: 50vh;
 }
 
 .theme-studio__topbar-actions {
@@ -598,6 +595,146 @@
   gap: var(--theme-studio-block-gap);
 }
 
+.theme-studio__cards-scene {
+  display: grid;
+  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
+  gap: 14px;
+  align-items: start;
+}
+
+.theme-studio__cards-column {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+}
+
+.theme-studio__cards-top-grid,
+.theme-studio__cards-top-pair,
+.theme-studio__cards-bottom-pair {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  align-items: stretch;
+}
+
+.theme-studio__cards-bottom-pair {
+  margin-top: auto;
+}
+
+.theme-studio__cards-panel.ty-card,
+.theme-studio__cards-inline-card.ty-card {
+  border-radius: calc(var(--editor-card-radius) + 2px);
+}
+
+.theme-studio__cards-panel.ty-card > .ty-card__body,
+.theme-studio__cards-inline-card.ty-card > .ty-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+}
+
+.theme-studio__cards-panel .ty-typography-heading {
+  margin: 0;
+}
+
+.theme-studio__cards-panel .ty-input,
+.theme-studio__cards-panel .ty-textarea {
+  width: 100%;
+}
+
+.theme-studio__cards-panel > .ty-card__body > .ty-btn,
+.theme-studio__cards-panel .theme-studio__form-stack > .ty-btn {
+  width: 100%;
+}
+
+.theme-studio__cards-panel_revenue.ty-card > .ty-card__body {
+  gap: 6px;
+  min-height: 132px;
+}
+
+.theme-studio__cards-panel_goal.ty-card > .ty-card__body {
+  gap: 10px;
+  min-height: 172px;
+}
+
+.theme-studio__cards-panel-head,
+.theme-studio__cards-copy-block {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.theme-studio__cards-panel-head .ty-typography-text-secondary,
+.theme-studio__cards-copy-block .ty-typography-text-secondary,
+.theme-studio__cards-inline-card .ty-typography-text-secondary {
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.theme-studio__cards-plan-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.theme-studio__cards-plan-option {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  padding: 8px;
+  border-radius: 8px;
+  border: 1px solid var(--editor-border);
+  background: color-mix(in srgb, var(--editor-card), var(--editor-base) 8%);
+}
+
+.theme-studio__cards-plan-option strong,
+.theme-studio__cards-plan-option small {
+  display: block;
+}
+
+.theme-studio__cards-plan-option small {
+  margin-top: 2px;
+  color: var(--editor-muted-foreground);
+}
+
+.theme-studio__cards-actions-end,
+.theme-studio__cards-auth-actions,
+.theme-studio__cards-share-row,
+.theme-studio__cards-inline-card-head,
+.theme-studio__cards-goal-actions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.theme-studio__cards-actions-end {
+  justify-content: flex-end;
+}
+
+.theme-studio__cards-auth-actions .ty-btn {
+  flex: 1 1 0;
+}
+
+.theme-studio__cards-divider-label {
+  font-size: 10px;
+  color: var(--editor-muted-foreground);
+}
+
+.theme-studio__cards-panel_calendar.ty-card > .ty-card__body {
+  min-height: 172px;
+  padding: 10px;
+}
+
+.theme-studio__cards-panel_calendar .ty-calendar {
+  width: 100%;
+}
+
+.theme-studio__cards-panel_calendar .ty-calendar_card {
+  border: 0;
+}
+
 .theme-studio__preview-grid_cards > * {
   min-height: 188px;
 }
@@ -644,22 +781,168 @@
 .theme-studio__goal-display {
   display: flex;
   flex-direction: column;
-  margin: 14px 0;
+  margin: 0;
+  align-items: center;
 }
 
 .theme-studio__goal-display span {
-  font-size: 36px;
+  font-size: 34px;
   font-weight: 700;
+  line-height: 1;
 }
 
 .theme-studio__goal-display small {
+  font-size: 10px;
+  letter-spacing: 0.08em;
   color: var(--editor-muted-foreground);
 }
 
+.theme-studio__cards-goal-header {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr) 28px;
+  align-items: center;
+  gap: 8px;
+}
+
+.theme-studio__cards-goal-circle.ty-btn {
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 999px;
+}
+
+.theme-studio__cards-goal-circle.ty-btn .ty-btn__content {
+  justify-content: center;
+}
+
 .theme-studio__goal-footer {
   margin-top: 10px;
 }
 
+.theme-studio__cards-table {
+  display: flex;
+  flex-direction: column;
+}
+
+.theme-studio__cards-table-head,
+.theme-studio__cards-table-row {
+  display: grid;
+  grid-template-columns: 18px 88px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+}
+
+.theme-studio__cards-table-head {
+  padding: 0 0 8px 0;
+  font-size: 11px;
+  color: var(--editor-muted-foreground);
+}
+
+.theme-studio__cards-table-row {
+  padding: 9px 0;
+  border-top: 1px solid var(--editor-border);
+}
+
+.theme-studio__cards-table-row .ty-checkbox {
+  justify-self: start;
+}
+
+.theme-studio__cards-table-status,
+.theme-studio__cards-table-email {
+  min-width: 0;
+}
+
+.theme-studio__cards-table-email {
+  overflow: hidden;
+  color: var(--editor-muted-foreground);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.theme-studio__cards-people-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.theme-studio__cards-people-list .theme-studio__member-row {
+  padding-block: 10px;
+  border-top: 1px solid var(--editor-border);
+}
+
+.theme-studio__cards-people-list .theme-studio__member-row:first-child {
+  border-top: 0;
+  padding-top: 0;
+}
+
+.theme-studio__cards-inline-card.ty-card > .ty-card__body small {
+  color: var(--editor-muted-foreground);
+}
+
+.theme-studio__cards-chat-head {
+  margin-bottom: 2px;
+}
+
+.theme-studio__member-row_compact {
+  padding: 0;
+}
+
+.theme-studio__cards-meta-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.theme-studio__cards-panel .theme-studio__member-row {
+  gap: 10px;
+  padding: 8px 0;
+  align-items: center;
+}
+
+.theme-studio__cards-panel .theme-studio__member-copy .ty-typography-text-secondary {
+  font-size: 10px;
+}
+
+.theme-studio__cards-panel .ty-avatar {
+  flex: 0 0 auto;
+}
+
+.theme-studio__cards-member-select,
+.theme-studio__cards-inline-action,
+.theme-studio__cards-report-select,
+.theme-studio__cards-share-row .ty-btn,
+.theme-studio__cards-inline-card-head .ty-btn {
+  width: auto !important;
+  flex: 0 0 auto;
+}
+
+.theme-studio__cards-member-select {
+  min-width: 86px;
+}
+
+.theme-studio__cards-report-select {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.theme-studio__cards-inline-action.ty-btn {
+  min-width: 78px;
+}
+
+.theme-studio__cards-panel .ty-input,
+.theme-studio__cards-panel .ty-textarea {
+  font-size: 12px;
+}
+
+.theme-studio__cards-panel .ty-radio {
+  align-items: flex-start;
+}
+
+.theme-studio__cards-panel .ty-radio__label {
+  width: 100%;
+}
+
 .theme-studio__member-row {
   display: flex;
   align-items: center;
@@ -1233,6 +1516,11 @@
   .theme-studio__pricing-grid {
     grid-template-columns: 1fr;
   }
+
+  .theme-studio__cards-scene,
+  .theme-studio__cards-top-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 900px) {
diff --git a/packages/react/src/cascader/style/index.scss b/packages/react/src/cascader/style/index.scss
index d059694e..0bcb05d2 100644
--- a/packages/react/src/cascader/style/index.scss
+++ b/packages/react/src/cascader/style/index.scss
@@ -32,6 +32,7 @@
     display: flex;
     align-items: center;
     width: 100%;
+    box-sizing: border-box;
     border: 1px solid var(--ty-cascader-border);
     border-radius: var(--ty-cascader-radius);
     background: var(--ty-cascader-bg);
diff --git a/packages/react/src/date-picker/style/index.scss b/packages/react/src/date-picker/style/index.scss
index f4836a4e..6ba9b4f0 100755
--- a/packages/react/src/date-picker/style/index.scss
+++ b/packages/react/src/date-picker/style/index.scss
@@ -12,6 +12,8 @@ $dp: #{$prefix}-date-picker;
     display: inline-flex;
     align-items: center;
     width: 100%;
+    height: var(--ty-height-md);
+    box-sizing: border-box;
     padding: var(--ty-picker-input-padding-md);
     border: 1px solid var(--ty-picker-input-border);
     border-radius: var(--ty-picker-input-radius);
@@ -89,6 +91,7 @@ $dp: #{$prefix}-date-picker;
 
   // ---- Sizes ----
   &_sm &__input {
+    height: var(--ty-height-sm);
     padding: var(--ty-picker-input-padding-sm);
     font-size: 12px;
   }
@@ -98,6 +101,7 @@ $dp: #{$prefix}-date-picker;
   }
 
   &_lg &__input {
+    height: var(--ty-height-lg);
     padding: var(--ty-picker-input-padding-lg);
     font-size: 16px;
   }
diff --git a/packages/react/src/form/demo/OtherControls.tsx b/packages/react/src/form/demo/OtherControls.tsx
index 2badf97c..78e9030d 100644
--- a/packages/react/src/form/demo/OtherControls.tsx
+++ b/packages/react/src/form/demo/OtherControls.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   Form,
-  Input,
   InputNumber,
   Switch,
   Checkbox,
@@ -17,6 +16,12 @@ import {
 } from '@tiny-design/react';
 
 export default function OtherControlsDemo() {
+  const fruitOptions = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+  ];
+
   return (
     <Form
       onFinish={(values) => console.log(values)}
@@ -105,11 +110,7 @@ export default function OtherControlsDemo() {
       >
         <Select
           placeholder="Pick a fruit"
-          options={[
-            { value: 'apple', label: 'Apple' },
-            { value: 'banana', label: 'Banana' },
-            { value: 'cherry', label: 'Cherry' },
-          ]}
+          options={fruitOptions}
         />
       </Form.Item>
       <Form.Item
@@ -142,4 +143,4 @@ export default function OtherControlsDemo() {
       </Form.Item>
     </Form>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/form/demo/SizeAlignment.tsx b/packages/react/src/form/demo/SizeAlignment.tsx
new file mode 100644
index 00000000..f821e5a9
--- /dev/null
+++ b/packages/react/src/form/demo/SizeAlignment.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import {
+  Input,
+  AutoComplete,
+  Select,
+  NativeSelect,
+  DatePicker,
+  TimePicker,
+  Cascader,
+  InputNumber,
+  Radio,
+} from '@tiny-design/react';
+
+const fruitOptions = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+];
+
+const cascaderOptions = [
+  {
+    value: 'fruits',
+    label: 'Fruits',
+    children: fruitOptions,
+  },
+];
+
+const sizeOptions = ['sm', 'md', 'lg'] as const;
+
+export default function SizeAlignmentDemo() {
+  const [size, setSize] = useState<(typeof sizeOptions)[number]>('md');
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <Radio.Group value={size} onChange={(value) => setSize(value as (typeof sizeOptions)[number])}>
+        <Radio value="sm">Small</Radio>
+        <Radio value="md">Medium</Radio>
+        <Radio value="lg">Large</Radio>
+      </Radio.Group>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+          gap: 12,
+          alignItems: 'center',
+        }}
+      >
+        <Input size={size} placeholder="Input" />
+        <AutoComplete size={size} options={fruitOptions} placeholder="AutoComplete" />
+        <Select size={size} placeholder="Select" options={fruitOptions} />
+        <NativeSelect size={size} defaultValue="banana">
+          <option value="apple">Apple</option>
+          <option value="banana">Banana</option>
+          <option value="cherry">Cherry</option>
+        </NativeSelect>
+        <DatePicker size={size} placeholder="DatePicker" />
+        <TimePicker size={size} placeholder="TimePicker" />
+        <Cascader size={size} options={cascaderOptions} placeholder="Cascader" />
+        <InputNumber size={size} defaultValue={10} />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react/src/form/index.md b/packages/react/src/form/index.md
index aef0e59e..9e731e23 100644
--- a/packages/react/src/form/index.md
+++ b/packages/react/src/form/index.md
@@ -14,6 +14,8 @@ import ModalDemo from './demo/Modal';
 import ModalSource from './demo/Modal.tsx?raw';
 import AsyncSubmitDemo from './demo/AsyncSubmit';
 import AsyncSubmitSource from './demo/AsyncSubmit.tsx?raw';
+import SizeAlignmentDemo from './demo/SizeAlignment';
+import SizeAlignmentSource from './demo/SizeAlignment.tsx?raw';
 import OtherControlsDemo from './demo/OtherControls';
 import OtherControlsSource from './demo/OtherControls.tsx?raw';
 import StepFormDemo from './demo/StepForm';
@@ -117,6 +119,15 @@ Simulate an async form submission with loading state.
   </Column>
 </Layout>
 
+<Demo>
+### Size Alignment
+
+Compare the height consistency of input-like controls across `sm`, `md`, and `lg`.
+
+<DemoBlock component={SizeAlignmentDemo} source={SizeAlignmentSource} />
+
+</Demo>
+
 <Demo>
 ### Other Form Controls
 
@@ -197,4 +208,4 @@ Form field component for data bidirectional binding, validation and layout.
 | pattern           | regex pattern                                             | RegExp                                        |
 | transform         | transform value to the rule before validation             | (value) => any                                |
 | validator         | customize validation rule                                 | (value) => boolean &#124; `Promise<boolean>`  |
-| whitespace        | failed if only has whitespace                             | boolean                                       |
\ No newline at end of file
+| whitespace        | failed if only has whitespace                             | boolean                                       |
diff --git a/packages/react/src/form/index.zh_CN.md b/packages/react/src/form/index.zh_CN.md
index 75bb95c4..cd0fe88d 100644
--- a/packages/react/src/form/index.zh_CN.md
+++ b/packages/react/src/form/index.zh_CN.md
@@ -14,6 +14,8 @@ import ModalDemo from './demo/Modal';
 import ModalSource from './demo/Modal.tsx?raw';
 import AsyncSubmitDemo from './demo/AsyncSubmit';
 import AsyncSubmitSource from './demo/AsyncSubmit.tsx?raw';
+import SizeAlignmentDemo from './demo/SizeAlignment';
+import SizeAlignmentSource from './demo/SizeAlignment.tsx?raw';
 import OtherControlsDemo from './demo/OtherControls';
 import OtherControlsSource from './demo/OtherControls.tsx?raw';
 import StepFormDemo from './demo/StepForm';
@@ -117,11 +119,22 @@ const { Item, useForm, FormInstance } = Form;
   </Column>
 </Layout>
 
+<Demo>
+### 尺寸对齐
+
+对比输入类控件在 `sm`、`md`、`lg` 三种尺寸下的高度是否一致。
+
+<DemoBlock component={SizeAlignmentDemo} source={SizeAlignmentSource} />
+
+</Demo>
+
+<Demo>
 ### 其他表单控件
 
 一个多功能的示例。
 
 <DemoBlock component={OtherControlsDemo} source={OtherControlsSource} />
+</Demo>
 
 <Demo>
 ### 分步表单
@@ -194,4 +207,4 @@ const { Item, useForm, FormInstance } = Form;
 | pattern           | 正则表达式                                        | RegExp                                        |
 | transform         | 校验前对值进行转换                                | (value) => any                                |
 | validator         | 自定义校验规则                                    | (value) => boolean &#124; `Promise<boolean>`  |
-| whitespace        | 仅包含空格时是否校验失败                           | boolean                                       |
\ No newline at end of file
+| whitespace        | 仅包含空格时是否校验失败                           | boolean                                       |
diff --git a/packages/react/src/native-select/style/_mixin.scss b/packages/react/src/native-select/style/_mixin.scss
index 55dfc211..cb853af8 100644
--- a/packages/react/src/native-select/style/_mixin.scss
+++ b/packages/react/src/native-select/style/_mixin.scss
@@ -1,4 +1,6 @@
-@mixin native-size($padding, $font-size){
+@mixin native-size($height, $padding, $font-size){
+  height: $height;
   padding: $padding;
   font-size: $font-size;
+  line-height: calc(#{$height} - 2px);
 }
diff --git a/packages/react/src/native-select/style/index.scss b/packages/react/src/native-select/style/index.scss
index a47b5c5a..17677c23 100755
--- a/packages/react/src/native-select/style/index.scss
+++ b/packages/react/src/native-select/style/index.scss
@@ -4,13 +4,13 @@
 $select-arrow: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij4gIDxwYXRoIGZpbGw9IiMzOTNFNDgiIGQ9Ik0wLjIyMiw1LjYxMyBMNS40NTEsMC4yMjMgQzUuNzU2MjEyMDksLTAuMDc0MzYzMjMzMyA2LjI0Mjc4NzkxLC0wLjA3NDM2MzIzMzMgNi41NDgsMC4yMjMgTDExLjc3OCw1LjYxMyBDMTIuMTgsNi4wMjcgMTIuMDI1LDYuNjY3IDExLjQwNyw2LjY2NyBMMC41OTIsNi42NjcgQy0wLjAyNCw2LjY2NyAtMC4xOCw2LjAyNyAwLjIyMiw1LjYxMyBaIE0wLjU5Miw5LjMzMyBMMTEuNDA3LDkuMzMzIEMxMi4wMjUsOS4zMzMgMTIuMTgsOS45NzMgMTEuNzc3LDEwLjM4NyBMNi41NDcsMTUuNzc3IEM2LjI0MTkxMjU4LDE2LjA3MzcxNDMgNS43NTYwODc0MiwxNi4wNzM3MTQzIDUuNDUxLDE1Ljc3NyBMMC4yMjIsMTAuMzg3IEMtMC4xOCw5Ljk3MyAtMC4wMjQsOS4zMzMgMC41OTIsOS4zMzMgWiIvPjwvc3ZnPg==';
 
 .#{$prefix}-select-native {
-  display: inline-flex;
+  display: inline-block;
   appearance: none;
   cursor: pointer;
   color: var(--ty-native-select-color);
+  width: 100%;
   min-width: 200px;
   margin: 0;
-  line-height: 18px;
   vertical-align: middle;
   box-sizing: border-box;
   border: 1px solid var(--ty-native-select-border);
@@ -18,7 +18,7 @@ $select-arrow: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcm
   background-color: var(--ty-native-select-bg);
   background-image: url($select-arrow);
   background-repeat: no-repeat, repeat;
-  background-position: right 0.7em top 50%, 0 0;
+  background-position: right 8px center, 0 0;
   background-size: 0.62em auto, 100%;
   transition: all 0.3s;
   outline: none;
@@ -52,14 +52,14 @@ $select-arrow: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcm
   }
 
   &_sm {
-    @include native-size(var(--ty-native-select-sm-padding), var(--ty-native-select-font-size-sm));
+    @include native-size(var(--ty-height-sm), 0 24px 0 8px, var(--ty-native-select-font-size-sm));
   }
 
   &_md {
-    @include native-size(var(--ty-native-select-md-padding), var(--ty-native-select-font-size-md));
+    @include native-size(var(--ty-height-md), 0 28px 0 10px, var(--ty-native-select-font-size-md));
   }
 
   &_lg {
-    @include native-size(var(--ty-native-select-lg-padding), var(--ty-native-select-font-size-lg));
+    @include native-size(var(--ty-height-lg), 0 32px 0 12px, var(--ty-native-select-font-size-lg));
   }
 }
diff --git a/packages/react/src/select/style/index.scss b/packages/react/src/select/style/index.scss
index 7525fb26..cd621d45 100644
--- a/packages/react/src/select/style/index.scss
+++ b/packages/react/src/select/style/index.scss
@@ -19,18 +19,21 @@
   }
 
   &_sm .#{$prefix}-select__selector {
+    height: var(--ty-select-height-sm, var(--ty-height-sm));
     min-height: var(--ty-select-height-sm, var(--ty-height-sm));
     font-size: var(--ty-select-font-size-sm, var(--ty-font-size-sm));
     padding: 0 var(--ty-select-padding-inline-end-sm, 24px) 0 var(--ty-select-padding-inline-start-sm, 8px);
   }
 
   &_md .#{$prefix}-select__selector {
+    height: var(--ty-select-height-md, var(--ty-height-md));
     min-height: var(--ty-select-height-md, var(--ty-height-md));
     font-size: var(--ty-select-font-size-md, var(--ty-font-size-base));
     padding: 0 var(--ty-select-padding-inline-end-md, 28px) 0 var(--ty-select-padding-inline-start-md, 10px);
   }
 
   &_lg .#{$prefix}-select__selector {
+    height: var(--ty-select-height-lg, var(--ty-height-lg));
     min-height: var(--ty-select-height-lg, var(--ty-height-lg));
     font-size: var(--ty-select-font-size-lg, var(--ty-font-size-lg));
     padding: 0 var(--ty-select-padding-inline-end-lg, 32px) 0 var(--ty-select-padding-inline-start-lg, 12px);
@@ -38,6 +41,7 @@
 
   &_multiple {
     .#{$prefix}-select__selector {
+      height: auto;
       padding-right: var(--ty-select-multiple-padding-inline-end, 28px);
     }
 
diff --git a/packages/react/src/textarea/__tests__/__snapshots__/textarea.test.tsx.snap b/packages/react/src/textarea/__tests__/__snapshots__/textarea.test.tsx.snap
index 32bbc408..96be0632 100644
--- a/packages/react/src/textarea/__tests__/__snapshots__/textarea.test.tsx.snap
+++ b/packages/react/src/textarea/__tests__/__snapshots__/textarea.test.tsx.snap
@@ -2,8 +2,48 @@
 
 exports[`<Textarea /> should match the snapshot 1`] = `
 <DocumentFragment>
-  <textarea
-    class="ty-textarea"
-  />
+  <div
+    class="ty-textarea-container ty-textarea-container_with-footer ty-textarea-container_with-custom-resize"
+  >
+    <textarea
+      class="ty-textarea"
+    />
+    <span
+      class="ty-textarea-container__footer"
+    >
+      <span
+        aria-orientation="vertical"
+        class="ty-textarea-container__resize-handle"
+        role="separator"
+      >
+        <svg
+          fill="none"
+          height="14"
+          viewBox="0 0 14 14"
+          width="14"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5 10.5L10.5 5"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-width="1.25"
+          />
+          <path
+            d="M7.5 11L11 7.5"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-width="1.25"
+          />
+          <path
+            d="M10 11L11 10"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-width="1.25"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
 </DocumentFragment>
 `;
diff --git a/packages/react/src/textarea/__tests__/textarea.test.tsx b/packages/react/src/textarea/__tests__/textarea.test.tsx
index 0009cb06..9b14b81c 100644
--- a/packages/react/src/textarea/__tests__/textarea.test.tsx
+++ b/packages/react/src/textarea/__tests__/textarea.test.tsx
@@ -24,4 +24,52 @@ describe('<Textarea />', () => {
     fireEvent.change(textarea, { target: { value: 'test' } });
     expect(fn).toHaveBeenCalledTimes(1);
   });
+
+  it('should render resize handle by default', () => {
+    const { container } = render(<Textarea />);
+    expect(container.querySelector('.ty-textarea-container__resize-handle')).toBeInTheDocument();
+  });
+
+  it('should not render resize handle when resizable is false', () => {
+    const { container } = render(<Textarea resizable={false} />);
+    expect(container.querySelector('.ty-textarea-container__resize-handle')).not.toBeInTheDocument();
+  });
+
+  it('should not render resize handle when disabled', () => {
+    const { container } = render(<Textarea disabled />);
+    expect(container.querySelector('.ty-textarea-container__resize-handle')).not.toBeInTheDocument();
+  });
+
+  it('should render custom resizeHandle', () => {
+    const { container } = render(<Textarea resizeHandle={<span data-testid="custom-handle">drag</span>} />);
+    const handle = container.querySelector('.ty-textarea-container__resize-handle');
+    expect(handle).toBeInTheDocument();
+    expect(handle?.querySelector('[data-testid="custom-handle"]')).toBeInTheDocument();
+  });
+
+  it('should use default resize handle when no custom resizeHandle is provided', () => {
+    const { container } = render(<Textarea />);
+    expect(container.querySelector('.ty-textarea-container__resize-handle svg')).toBeInTheDocument();
+  });
+
+  it('should allow shrinking after growing with custom resize handle', () => {
+    const { container } = render(<Textarea />);
+    const wrapper = container.querySelector('.ty-textarea-container') as HTMLDivElement;
+    const handle = container.querySelector('.ty-textarea-container__resize-handle') as HTMLSpanElement;
+
+    Object.defineProperty(wrapper, 'offsetHeight', {
+      configurable: true,
+      get: () => Number.parseInt(wrapper.style.height || '80', 10),
+    });
+
+    fireEvent.mouseDown(handle, { clientY: 100 });
+    fireEvent.mouseMove(document, { clientY: 160 });
+    expect(wrapper.style.height).toBe('140px');
+    fireEvent.mouseUp(document);
+
+    fireEvent.mouseDown(handle, { clientY: 160 });
+    fireEvent.mouseMove(document, { clientY: 40 });
+    expect(wrapper.style.height).toBe('80px');
+    fireEvent.mouseUp(document);
+  });
 });
diff --git a/packages/react/src/textarea/demo/Resize.tsx b/packages/react/src/textarea/demo/Resize.tsx
new file mode 100644
index 00000000..c6672d59
--- /dev/null
+++ b/packages/react/src/textarea/demo/Resize.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Textarea } from '@tiny-design/react';
+
+export default function ResizeDemo() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <Textarea rows={3} placeholder="Default resize handle" />
+      <Textarea rows={3} placeholder="Not resizable" resizable={false} />
+      <Textarea
+        rows={3}
+        placeholder="Custom vertical resize handle"
+        resizeHandle={<span style={{ fontSize: 12, lineHeight: 1 }}>≡</span>}
+      />
+    </div>
+  );
+}
diff --git a/packages/react/src/textarea/index.md b/packages/react/src/textarea/index.md
index 99991ad7..ebcada0d 100755
--- a/packages/react/src/textarea/index.md
+++ b/packages/react/src/textarea/index.md
@@ -2,6 +2,8 @@ import BasicDemo from './demo/Basic';
 import BasicSource from './demo/Basic.tsx?raw';
 import CountDemo from './demo/Count';
 import CountSource from './demo/Count.tsx?raw';
+import ResizeDemo from './demo/Resize';
+import ResizeSource from './demo/Resize.tsx?raw';
 
 # Textarea
 
@@ -29,6 +31,15 @@ A simple textarea.
 
 <DemoBlock component={BasicDemo} source={BasicSource} />
 
+    </Demo>
+    <Demo>
+
+### Resize
+
+Use `resizable` to control whether the textarea can be resized vertically. Use `resizeHandle` to replace the default resize handle.
+
+<DemoBlock component={ResizeDemo} source={ResizeSource} />
+
     </Demo>
   </Column>
   <Column>
@@ -55,5 +66,7 @@ Use `limit` to limit the word amount. Also you can use `counter` to customise li
 | limit        | limit the number of character    | number                                       | false   |
 | counter      | customise the count node         | function: (count: number) => React.ReactNode |         |
 | disabled     | disabled the component           | boolean                                      |         |
+| resizable    | whether the textarea is resizable | boolean                                    | true    |
+| resizeHandle | custom resize handle element     | React.ReactNode                              |         |
 | style	       | style object of container object |                                              |         |
-| className    | className of container           | string                                       |         |
\ No newline at end of file
+| className    | className of container           | string                                       |         |
diff --git a/packages/react/src/textarea/index.zh_CN.md b/packages/react/src/textarea/index.zh_CN.md
index c1e7c257..1cb57f35 100644
--- a/packages/react/src/textarea/index.zh_CN.md
+++ b/packages/react/src/textarea/index.zh_CN.md
@@ -2,6 +2,8 @@ import BasicDemo from './demo/Basic';
 import BasicSource from './demo/Basic.tsx?raw';
 import CountDemo from './demo/Count';
 import CountSource from './demo/Count.tsx?raw';
+import ResizeDemo from './demo/Resize';
+import ResizeSource from './demo/Resize.tsx?raw';
 
 # Textarea 文本域
 
@@ -29,6 +31,15 @@ import { Textarea } from 'tiny-design';
 
 <DemoBlock component={BasicDemo} source={BasicSource} />
 
+    </Demo>
+    <Demo>
+
+### 缩放
+
+使用 `resizable` 控制文本域是否仅支持垂直方向缩放。使用 `resizeHandle` 可替换默认缩放手柄。
+
+<DemoBlock component={ResizeDemo} source={ResizeSource} />
+
     </Demo>
   </Column>
   <Column>
@@ -55,5 +66,7 @@ import { Textarea } from 'tiny-design';
 | limit        | 字符数量限制             | number                                       | false   |
 | counter      | 自定义计数节点           | function: (count: number) => React.ReactNode |         |
 | disabled     | 是否禁用组件             | boolean                                      |         |
+| resizable    | 是否可缩放               | boolean                                      | true    |
+| resizeHandle | 自定义缩放手柄           | React.ReactNode                              |         |
 | style	       | 容器的样式对象           |                                              |         |
-| className    | 容器的类名               | string                                       |         |
\ No newline at end of file
+| className    | 容器的类名               | string                                       |         |
diff --git a/packages/react/src/textarea/style/index.scss b/packages/react/src/textarea/style/index.scss
index d80ccba4..48509f19 100755
--- a/packages/react/src/textarea/style/index.scss
+++ b/packages/react/src/textarea/style/index.scss
@@ -5,7 +5,8 @@
   @include input-default;
 
   padding: var(--ty-textarea-padding);
-  overflow: hidden;
+  overflow: auto;
+  resize: none;
 
   &_disabled {
     @include input-default-disabled;
@@ -13,16 +14,66 @@
 
   &-container {
     position: relative;
+    display: inline-block;
+    width: 100%;
 
-    .#{$prefix}-textarea {
-      padding-bottom: var(--ty-textarea-padding-bottom-with-counter);
+    &_with-footer {
+      .#{$prefix}-textarea {
+        display: block;
+        padding-bottom: var(--ty-textarea-padding-bottom-with-counter);
+      }
+    }
+
+    &_with-custom-resize {
+      .#{$prefix}-textarea {
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        padding-bottom: max(var(--ty-textarea-padding-bottom-with-counter), 26px);
+      }
+    }
+
+    &__footer {
+      position: absolute;
+      bottom: 1px;
+      left: var(--ty-textarea-counter-offset-inline-end);
+      right: 1px;
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-end;
+      gap: 12px;
+      pointer-events: none;
+    }
+
+    &__counter {
+      font-size: 12px;
+      color: color-mix(in srgb, var(--ty-textarea-counter-color) 88%, transparent);
+      line-height: 1.1;
+      margin-right: auto;
+      white-space: nowrap;
+    }
+
+    &__resize-handle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      cursor: ns-resize;
+      user-select: none;
+      pointer-events: auto;
+      flex: none;
+      color: color-mix(in srgb, var(--ty-color-text-tertiary, #999) 92%, transparent);
+      opacity: 0.82;
+      transition: color 0.2s ease, opacity 0.2s ease;
+
+      &:hover {
+        color: var(--ty-color-text-secondary, #666);
+        opacity: 1;
+      }
 
-      &__counter {
-        position: absolute;
-        bottom: var(--ty-textarea-counter-offset-bottom);
-        right: var(--ty-textarea-counter-offset-inline-end);
-        font-size: var(--ty-textarea-counter-font-size);
-        color: var(--ty-textarea-counter-color);
+      svg {
+        display: block;
       }
     }
   }
diff --git a/packages/react/src/textarea/textarea.tsx b/packages/react/src/textarea/textarea.tsx
index 583fc9e0..2b041e35 100755
--- a/packages/react/src/textarea/textarea.tsx
+++ b/packages/react/src/textarea/textarea.tsx
@@ -1,12 +1,22 @@
-import React, { useContext, useState, forwardRef } from 'react';
+import React, { useContext, useState, useRef, useCallback, forwardRef } from 'react';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
 import { TextareaProps } from './types';
 
+const DefaultResizeHandle = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5 10.5L10.5 5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
+    <path d="M7.5 11L11 7.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
+    <path d="M10 11L11 10" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
+  </svg>
+);
+
 const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((props, ref) => {
   const {
     disabled = false,
+    resizable = true,
+    resizeHandle,
     prefixCls: customisedCls,
     limit,
     counter,
@@ -24,37 +34,64 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((props, ref) =>
     [`${prefixCls}_disabled`]: disabled,
   });
   const [count, setCount] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const minHeightRef = useRef<number | null>(null);
 
   const textareaOnChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setCount(e.currentTarget.value.length);
     onChange && onChange(e.currentTarget.value, e);
   };
 
-  if (limit || counter) {
-    return (
-      <span className={`${prefixCls}-container`}>
-        <textarea
-          {...otherProps}
-          ref={ref}
-          maxLength={limit}
-          rows={rows}
-          value={value}
-          defaultValue={defaultValue}
-          disabled={disabled}
-          className={cls}
-          style={style}
-          onChange={textareaOnChange}
-        />
-        <span className={`${prefixCls}__counter`}>
-          {counter && typeof counter === 'function' ? counter(count) : `${count}/${limit}`}
-        </span>
-      </span>
-    );
-  } else {
-    return (
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      const container = containerRef.current;
+      if (!container) return;
+
+      const startY = e.clientY;
+      const startHeight = container.offsetHeight;
+      if (minHeightRef.current == null) {
+        minHeightRef.current = Math.max(startHeight, 32);
+      }
+      const minHeight = minHeightRef.current;
+
+      const onMouseMove = (moveEvent: MouseEvent) => {
+        container.style.height = `${Math.max(startHeight + (moveEvent.clientY - startY), minHeight)}px`;
+      };
+
+      const onMouseUp = () => {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+      };
+
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+    },
+    []
+  );
+
+  const showResizeHandle = resizable && !disabled;
+  const showCounter = !!(limit || counter);
+  const showFooter = showCounter || showResizeHandle;
+  const containerCls = classNames(`${prefixCls}-container`, {
+    [`${prefixCls}-container_with-footer`]: showFooter,
+    [`${prefixCls}-container_with-custom-resize`]: showResizeHandle,
+  });
+
+  return (
+    <div
+      ref={(node) => {
+        containerRef.current = node;
+        if (node && minHeightRef.current == null && node.offsetHeight > 0) {
+          minHeightRef.current = Math.max(node.offsetHeight, 32);
+        }
+      }}
+      className={containerCls}
+    >
       <textarea
-        {...props}
+        {...otherProps}
         ref={ref}
+        maxLength={limit}
         rows={rows}
         value={value}
         defaultValue={defaultValue}
@@ -63,8 +100,27 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((props, ref) =>
         style={style}
         onChange={textareaOnChange}
       />
-    );
-  }
+      {showFooter && (
+        <span className={`${prefixCls}-container__footer`}>
+          {showCounter && (
+            <span className={`${prefixCls}-container__counter`}>
+              {counter && typeof counter === 'function' ? counter(count) : `${count}/${limit}`}
+            </span>
+          )}
+          {showResizeHandle && (
+            <span
+              className={`${prefixCls}-container__resize-handle`}
+              onMouseDown={handleMouseDown}
+              role="separator"
+              aria-orientation="vertical"
+            >
+              {resizeHandle ?? <DefaultResizeHandle />}
+            </span>
+          )}
+        </span>
+      )}
+    </div>
+  );
 });
 
 Textarea.displayName = 'Textarea';
diff --git a/packages/react/src/textarea/types.ts b/packages/react/src/textarea/types.ts
index 9dc115c1..938d718b 100644
--- a/packages/react/src/textarea/types.ts
+++ b/packages/react/src/textarea/types.ts
@@ -1,7 +1,9 @@
 import React from 'react';
 import { BaseProps } from '../_utils/props';
 
-export interface TextareaProps extends BaseProps {
+export interface TextareaProps
+  extends BaseProps,
+    Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
   rows?: number;
   limit?: number;
   counter?: (count?: number) => React.ReactNode;
@@ -9,4 +11,13 @@ export interface TextareaProps extends BaseProps {
   value?: string;
   onChange?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
   disabled?: boolean;
+  /**
+   * Whether the textarea is resizable.
+   */
+  resizable?: boolean;
+  /**
+   * Custom resize handle element rendered at the bottom-right corner for vertical resizing.
+   * When provided, replaces the default resize grip icon.
+   */
+  resizeHandle?: React.ReactNode;
 }
diff --git a/packages/react/src/time-picker/style/index.scss b/packages/react/src/time-picker/style/index.scss
index 89e04996..72bd323c 100755
--- a/packages/react/src/time-picker/style/index.scss
+++ b/packages/react/src/time-picker/style/index.scss
@@ -12,6 +12,8 @@ $tp: #{$prefix}-time-picker;
     display: inline-flex;
     align-items: center;
     width: 100%;
+    height: var(--ty-height-md);
+    box-sizing: border-box;
     padding: var(--ty-picker-input-padding-md);
     border: 1px solid var(--ty-picker-input-border);
     border-radius: var(--ty-picker-input-radius);
@@ -94,6 +96,7 @@ $tp: #{$prefix}-time-picker;
 
   // ---- Sizes ----
   &_sm &__input {
+    height: var(--ty-height-sm);
     padding: var(--ty-picker-input-padding-sm);
     font-size: 12px;
   }
@@ -103,6 +106,7 @@ $tp: #{$prefix}-time-picker;
   }
 
   &_lg &__input {
+    height: var(--ty-height-lg);
     padding: var(--ty-picker-input-padding-lg);
     font-size: 16px;
   }

From ccf230457985ea8e279ec8272fc169cf3fe0a2b6 Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Wed, 8 Apr 2026 22:36:48 +1000
Subject: [PATCH 02/12] fix: unify field and button size

---
 .../src/containers/theme-studio/defaults.ts   |   8 +-
 .../containers/theme-studio/editor-draft.ts   |   8 +-
 .../theme-studio/sidebar-content.tsx          |  12 +-
 .../theme-studio/theme-document-adapter.ts    |  61 +++++++-
 .../docs/src/containers/theme-studio/types.ts |   8 +-
 .../__snapshots__/autocomplete.test.tsx.snap  |   2 +-
 .../__snapshots__/button-group.test.tsx.snap  |   2 +-
 packages/react/src/button/button-group.tsx    |   1 +
 packages/react/src/button/button.tsx          |   1 +
 packages/react/src/button/style/_mixin.scss   |  11 +-
 packages/react/src/button/style/index.scss    |  38 +++--
 packages/react/src/cascader/style/index.scss  |  18 +--
 .../react/src/date-picker/style/index.scss    |  16 +--
 .../react/src/input-number/style/index.scss   |  41 +++---
 .../__snapshots__/input.test.tsx.snap         |   2 +-
 .../react/src/input/input-group-addon.tsx     |   8 +-
 packages/react/src/input/input-group.tsx      |   2 +-
 packages/react/src/input/input.tsx            |  45 +++---
 packages/react/src/input/style/index.scss     | 132 ++++++++++++++----
 packages/react/src/input/types.ts             |   6 +-
 .../react/src/native-select/style/index.scss  |  18 ++-
 packages/react/src/select/style/index.scss    |  24 ++--
 .../react/src/time-picker/style/index.scss    |  16 +--
 packages/tokens/scss/_constants.scss          |  12 +-
 packages/tokens/source/components/button.json |  50 +++++--
 packages/tokens/source/components/input.json  |  40 ++++--
 .../tokens/source/semantic/control-group.json |  22 +++
 packages/tokens/source/semantic/control.json  |  67 +++++++++
 28 files changed, 493 insertions(+), 178 deletions(-)
 create mode 100644 packages/tokens/source/semantic/control-group.json
 create mode 100644 packages/tokens/source/semantic/control.json

diff --git a/apps/docs/src/containers/theme-studio/defaults.ts b/apps/docs/src/containers/theme-studio/defaults.ts
index b3f26112..3c4ed3a2 100644
--- a/apps/docs/src/containers/theme-studio/defaults.ts
+++ b/apps/docs/src/containers/theme-studio/defaults.ts
@@ -55,8 +55,12 @@ export const DEFAULT_FIELDS: ThemeEditorFields = {
   buttonRadius: '999px',
   inputRadius: '14px',
   cardRadius: '22px',
-  buttonPaddingX: '18px',
-  inputHeight: '40px',
+  fieldButtonPaddingXSm: '8px',
+  fieldButtonPaddingXMd: '8px',
+  fieldButtonPaddingXLg: '8px',
+  fieldButtonHeightSm: '24px',
+  fieldButtonHeightMd: '32px',
+  fieldButtonHeightLg: '40px',
   cardPadding: '24px',
 };
 
diff --git a/apps/docs/src/containers/theme-studio/editor-draft.ts b/apps/docs/src/containers/theme-studio/editor-draft.ts
index 52838ecb..a044c759 100644
--- a/apps/docs/src/containers/theme-studio/editor-draft.ts
+++ b/apps/docs/src/containers/theme-studio/editor-draft.ts
@@ -126,8 +126,12 @@ export function buildPreviewVars(fields: ThemeEditorFields): React.CSSProperties
     '--editor-button-radius': fields.buttonRadius,
     '--editor-input-radius': fields.inputRadius,
     '--editor-card-radius': fields.cardRadius,
-    '--editor-button-padding-x': fields.buttonPaddingX,
-    '--editor-input-height': fields.inputHeight,
+    '--editor-field-button-padding-x-sm': fields.fieldButtonPaddingXSm,
+    '--editor-field-button-padding-x-md': fields.fieldButtonPaddingXMd,
+    '--editor-field-button-padding-x-lg': fields.fieldButtonPaddingXLg,
+    '--editor-field-button-height-sm': fields.fieldButtonHeightSm,
+    '--editor-field-button-height-md': fields.fieldButtonHeightMd,
+    '--editor-field-button-height-lg': fields.fieldButtonHeightLg,
     '--editor-card-padding': fields.cardPadding,
   } as React.CSSProperties;
 }
diff --git a/apps/docs/src/containers/theme-studio/sidebar-content.tsx b/apps/docs/src/containers/theme-studio/sidebar-content.tsx
index 152d0f89..e0e7af23 100644
--- a/apps/docs/src/containers/theme-studio/sidebar-content.tsx
+++ b/apps/docs/src/containers/theme-studio/sidebar-content.tsx
@@ -172,8 +172,8 @@ export function ThemeStudioSidebarContent({
               <strong>{draft.fields.radius}</strong>
             </div>
             <div className="theme-studio__summary-card">
-              <span>Input</span>
-              <strong>{draft.fields.inputHeight}</strong>
+              <span>Fields & Buttons</span>
+              <strong>{`${draft.fields.fieldButtonHeightSm} / ${draft.fields.fieldButtonHeightMd} / ${draft.fields.fieldButtonHeightLg}`}</strong>
             </div>
             <div className="theme-studio__summary-card">
               <span>Padding</span>
@@ -192,8 +192,12 @@ export function ThemeStudioSidebarContent({
 
         <div className="theme-studio__group-card">
           <Typography.Text strong>Density</Typography.Text>
-          <SliderField label="Button Padding X" value={draft.fields.buttonPaddingX} onChange={(next) => updateField('buttonPaddingX', next)} config={{ min: 8, max: 32, step: 1, unit: 'px' }} />
-          <SliderField label="Input Height" value={draft.fields.inputHeight} onChange={(next) => updateField('inputHeight', next)} config={{ min: 32, max: 56, step: 1, unit: 'px' }} />
+          <SliderField label="Field & Button Padding / Small" value={draft.fields.fieldButtonPaddingXSm} onChange={(next) => updateField('fieldButtonPaddingXSm', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
+          <SliderField label="Field & Button Padding / Medium" value={draft.fields.fieldButtonPaddingXMd} onChange={(next) => updateField('fieldButtonPaddingXMd', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
+          <SliderField label="Field & Button Padding / Large" value={draft.fields.fieldButtonPaddingXLg} onChange={(next) => updateField('fieldButtonPaddingXLg', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
+          <SliderField label="Field & Button Height / Small" value={draft.fields.fieldButtonHeightSm} onChange={(next) => updateField('fieldButtonHeightSm', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
+          <SliderField label="Field & Button Height / Medium" value={draft.fields.fieldButtonHeightMd} onChange={(next) => updateField('fieldButtonHeightMd', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
+          <SliderField label="Field & Button Height / Large" value={draft.fields.fieldButtonHeightLg} onChange={(next) => updateField('fieldButtonHeightLg', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
           <SliderField label="Card Padding" value={draft.fields.cardPadding} onChange={(next) => updateField('cardPadding', next)} config={{ min: 12, max: 40, step: 1, unit: 'px' }} />
         </div>
 
diff --git a/apps/docs/src/containers/theme-studio/theme-document-adapter.ts b/apps/docs/src/containers/theme-studio/theme-document-adapter.ts
index 5aa9f469..60e5cd9c 100644
--- a/apps/docs/src/containers/theme-studio/theme-document-adapter.ts
+++ b/apps/docs/src/containers/theme-studio/theme-document-adapter.ts
@@ -158,8 +158,19 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'button.text.default': fields.baseForeground,
         'button.text.default-hover': fields.baseForeground,
         'button.text.default-active': fields.baseForeground,
+        'control.height.sm': fields.fieldButtonHeightSm,
+        'control.height.md': fields.fieldButtonHeightMd,
+        'control.height.lg': fields.fieldButtonHeightLg,
+        'control.padding-inline.sm': fields.fieldButtonPaddingXSm,
+        'control.padding-inline.md': fields.fieldButtonPaddingXMd,
+        'control.padding-inline.lg': fields.fieldButtonPaddingXLg,
         'button.radius': fields.buttonRadius,
-        'button.padding-inline-md': fields.buttonPaddingX,
+        'button.height.sm': fields.fieldButtonHeightSm,
+        'button.height.md': fields.fieldButtonHeightMd,
+        'button.height.lg': fields.fieldButtonHeightLg,
+        'button.padding-inline-sm': fields.fieldButtonPaddingXSm,
+        'button.padding-inline-md': fields.fieldButtonPaddingXMd,
+        'button.padding-inline-lg': fields.fieldButtonPaddingXLg,
         'card.bg': fields.card,
         'card.bg.filled': fields.secondary,
         'card.border': fields.border,
@@ -176,7 +187,12 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'input.border.focus': fields.ring,
         'input.shadow.focus': fields.shadowFocus,
         'input.radius': fields.inputRadius,
-        'input.height.md': fields.inputHeight,
+        'input.height.sm': fields.fieldButtonHeightSm,
+        'input.height.md': fields.fieldButtonHeightMd,
+        'input.height.lg': fields.fieldButtonHeightLg,
+        'input.padding-inline-sm': fields.fieldButtonPaddingXSm,
+        'input.padding-inline-md': fields.fieldButtonPaddingXMd,
+        'input.padding-inline-lg': fields.fieldButtonPaddingXLg,
         'select.bg': fields.base,
         'select.color': fields.baseForeground,
         'select.border': fields.input,
@@ -184,7 +200,12 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'select.border.focus': fields.ring,
         'select.shadow.focus': fields.shadowFocus,
         'select.radius': fields.inputRadius,
-        'select.height.md': fields.inputHeight,
+        'select.height.sm': fields.fieldButtonHeightSm,
+        'select.height.md': fields.fieldButtonHeightMd,
+        'select.height.lg': fields.fieldButtonHeightLg,
+        'select.padding-inline-start.sm': fields.fieldButtonPaddingXSm,
+        'select.padding-inline-start.md': fields.fieldButtonPaddingXMd,
+        'select.padding-inline-start.lg': fields.fieldButtonPaddingXLg,
         'select.dropdown-bg': fields.popover,
         'select.option.active-bg': fields.muted,
         'select.option.selected-bg': fields.accent,
@@ -197,6 +218,9 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'picker.input-color-placeholder': fields.mutedForeground,
         'picker.input-color-muted': fields.mutedForeground,
         'picker.input-radius': fields.inputRadius,
+        'picker.input-padding.sm': `0 ${fields.fieldButtonPaddingXSm}`,
+        'picker.input-padding.md': `0 ${fields.fieldButtonPaddingXMd}`,
+        'picker.input-padding.lg': `0 ${fields.fieldButtonPaddingXLg}`,
         'picker.dropdown-bg': fields.popover,
         'picker.dropdown-radius': fields.cardRadius,
         'picker.header-border': fields.border,
@@ -241,6 +265,12 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'calendar.panel-cell-color-selected': fields.primaryForeground,
         'calendar.panel-cell-bg-selected': fields.primary,
         'calendar.today-link-color': fields.primary,
+        'cascader.height.sm': fields.fieldButtonHeightSm,
+        'cascader.height.md': fields.fieldButtonHeightMd,
+        'cascader.height.lg': fields.fieldButtonHeightLg,
+        'cascader.padding.sm': `0 calc(${fields.fieldButtonPaddingXSm} + 20px) 0 ${fields.fieldButtonPaddingXSm}`,
+        'cascader.padding.md': `0 calc(${fields.fieldButtonPaddingXMd} + 20px) 0 ${fields.fieldButtonPaddingXMd}`,
+        'cascader.padding.lg': `0 calc(${fields.fieldButtonPaddingXLg} + 20px) 0 ${fields.fieldButtonPaddingXLg}`,
         'checkbox.bg': fields.base,
         'checkbox.border': fields.input,
         'checkbox.border.hover': fields.ring,
@@ -255,6 +285,9 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'switch.bg.checked': fields.primary,
         'switch.thumb-border': fields.mutedForeground,
         'switch.thumb-border.checked': fields.primary,
+        'input-number.height.sm': fields.fieldButtonHeightSm,
+        'input-number.height.md': fields.fieldButtonHeightMd,
+        'input-number.height.lg': fields.fieldButtonHeightLg,
         'segmented.bg': fields.muted,
         'segmented.active-bg': fields.card,
         'segmented.radius': fields.inputRadius,
@@ -373,8 +406,26 @@ export function buildDraftFromThemeDocument(theme: ThemeDocument): ThemeEditorDr
       buttonRadius: readToken(theme, 'border-radius', 'button.radius') ?? baseFields.buttonRadius,
       inputRadius: readToken(theme, 'border-radius', 'input.radius') ?? baseFields.inputRadius,
       cardRadius: readToken(theme, 'border-radius', 'card.radius') ?? baseFields.cardRadius,
-      buttonPaddingX: readToken(theme, 'spacing-4', 'button.padding-inline-md') ?? baseFields.buttonPaddingX,
-      inputHeight: readToken(theme, 'height-md', 'input.height.md') ?? baseFields.inputHeight,
+      fieldButtonPaddingXSm:
+        readToken(theme, 'control.padding-inline.sm', 'button.padding-inline-sm')
+        ?? baseFields.fieldButtonPaddingXSm,
+      fieldButtonPaddingXMd:
+        readToken(theme, 'control.padding-inline.md', 'button.padding-inline-md')
+        ?? readToken(theme, 'spacing-4')
+        ?? baseFields.fieldButtonPaddingXMd,
+      fieldButtonPaddingXLg:
+        readToken(theme, 'control.padding-inline.lg', 'button.padding-inline-lg')
+        ?? baseFields.fieldButtonPaddingXLg,
+      fieldButtonHeightSm:
+        readToken(theme, 'control.height.sm', 'input.height.sm')
+        ?? baseFields.fieldButtonHeightSm,
+      fieldButtonHeightMd:
+        readToken(theme, 'control.height.md', 'input.height.md')
+        ?? readToken(theme, 'height-md')
+        ?? baseFields.fieldButtonHeightMd,
+      fieldButtonHeightLg:
+        readToken(theme, 'control.height.lg', 'input.height.lg')
+        ?? baseFields.fieldButtonHeightLg,
       cardPadding: readToken(theme, 'spacing-5', 'card.body-padding') ?? baseFields.cardPadding,
     },
   };
diff --git a/apps/docs/src/containers/theme-studio/types.ts b/apps/docs/src/containers/theme-studio/types.ts
index 8bde0d5a..f97417c0 100644
--- a/apps/docs/src/containers/theme-studio/types.ts
+++ b/apps/docs/src/containers/theme-studio/types.ts
@@ -57,8 +57,12 @@ export interface ThemeEditorFields {
   buttonRadius: string;
   inputRadius: string;
   cardRadius: string;
-  buttonPaddingX: string;
-  inputHeight: string;
+  fieldButtonPaddingXSm: string;
+  fieldButtonPaddingXMd: string;
+  fieldButtonPaddingXLg: string;
+  fieldButtonHeightSm: string;
+  fieldButtonHeightMd: string;
+  fieldButtonHeightLg: string;
   cardPadding: string;
 }
 
diff --git a/packages/react/src/auto-complete/__tests__/__snapshots__/autocomplete.test.tsx.snap b/packages/react/src/auto-complete/__tests__/__snapshots__/autocomplete.test.tsx.snap
index e01d6fcb..51fd4bac 100644
--- a/packages/react/src/auto-complete/__tests__/__snapshots__/autocomplete.test.tsx.snap
+++ b/packages/react/src/auto-complete/__tests__/__snapshots__/autocomplete.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`<AutoComplete /> should match the snapshot 1`] = `
     >
       <input
         class="ty-input__input"
-        style="padding-left: 7px; padding-right: 7px;"
+        style="--ty-input-padding-inline-start-extra: 0px; --ty-input-padding-inline-end-extra: 0px;"
         value=""
       />
     </div>
diff --git a/packages/react/src/button/__tests__/__snapshots__/button-group.test.tsx.snap b/packages/react/src/button/__tests__/__snapshots__/button-group.test.tsx.snap
index 23f7e38e..f8c19bd4 100644
--- a/packages/react/src/button/__tests__/__snapshots__/button-group.test.tsx.snap
+++ b/packages/react/src/button/__tests__/__snapshots__/button-group.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ButtonGroup /> should match the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="ty-btn-group ty-btn-group_default"
+    class="ty-btn-group ty-btn-group_default ty-btn-group_md"
   >
     <button
       class="ty-btn ty-btn_md ty-btn_default"
diff --git a/packages/react/src/button/button-group.tsx b/packages/react/src/button/button-group.tsx
index e1cfa903..fd01c271 100755
--- a/packages/react/src/button/button-group.tsx
+++ b/packages/react/src/button/button-group.tsx
@@ -25,6 +25,7 @@ const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
       {
         [`${prefixCls}_round`]: round,
         [`${prefixCls}_${btnType}`]: btnType,
+        [`${prefixCls}_${btnSize}`]: btnSize,
       },
       className
     );
diff --git a/packages/react/src/button/button.tsx b/packages/react/src/button/button.tsx
index c48bd371..a35f88ef 100644
--- a/packages/react/src/button/button.tsx
+++ b/packages/react/src/button/button.tsx
@@ -32,6 +32,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props: ButtonPr
       [`${prefixCls}_round`]: round,
       [`${prefixCls}_disabled`]: disabled,
       [`${prefixCls}_loading`]: loading,
+      [`${prefixCls}_icon-only`]: !children && (loading || !!icon),
     },
     className
   );
diff --git a/packages/react/src/button/style/_mixin.scss b/packages/react/src/button/style/_mixin.scss
index 499d5106..e7051357 100755
--- a/packages/react/src/button/style/_mixin.scss
+++ b/packages/react/src/button/style/_mixin.scss
@@ -46,8 +46,13 @@
   }
 }
 
-@mixin btn-size($padding, $font-size, $height) {
-  padding: $padding;
-  font-size: $font-size;
+@mixin btn-size($padding-inline, $font-size, $height, $gap, $icon-size) {
+  --ty-button-height-current: #{$height};
+  --ty-button-gap-current: #{$gap};
+  --ty-button-icon-size-current: #{$icon-size};
+
   height: $height;
+  padding: 0 $padding-inline;
+  font-size: $font-size;
+  gap: $gap;
 }
diff --git a/packages/react/src/button/style/index.scss b/packages/react/src/button/style/index.scss
index f3eec9d9..2ef433e7 100755
--- a/packages/react/src/button/style/index.scss
+++ b/packages/react/src/button/style/index.scss
@@ -33,16 +33,14 @@ $btn-prefix: #{$prefix}-btn;
     pointer-events: none;
     line-height: var(--ty-button-line-height, var(--ty-line-height-base));
     vertical-align: middle;
-
-    & + span {
-      margin-left: .3em;
-    }
+    font-size: var(--ty-button-icon-size-current, 1em);
   }
 
   &__children {
     display: flex;
     align-items: center;
     justify-content: center;
+    min-width: 0;
   }
 
   // Types
@@ -148,7 +146,9 @@ $btn-prefix: #{$prefix}-btn;
     @include btn-size(
       var(--ty-button-padding-inline-sm, $btn-padding-sm),
       var(--ty-button-font-size-sm, var(--ty-font-size-sm)),
-      var(--ty-button-height-sm, var(--ty-height-sm))
+      var(--ty-button-height-sm, var(--ty-height-sm)),
+      var(--ty-button-gap-sm, 4px),
+      var(--ty-button-icon-size-sm, 14px)
     );
   }
 
@@ -156,7 +156,9 @@ $btn-prefix: #{$prefix}-btn;
     @include btn-size(
       var(--ty-button-padding-inline-md, $btn-padding-md),
       var(--ty-button-font-size-md, var(--ty-font-size-base)),
-      var(--ty-button-height-md, var(--ty-height-md))
+      var(--ty-button-height-md, var(--ty-height-md)),
+      var(--ty-button-gap-md, 6px),
+      var(--ty-button-icon-size-md, 16px)
     );
   }
 
@@ -164,10 +166,18 @@ $btn-prefix: #{$prefix}-btn;
     @include btn-size(
       var(--ty-button-padding-inline-lg, $btn-padding-lg),
       var(--ty-button-font-size-lg, var(--ty-font-size-lg)),
-      var(--ty-button-height-lg, var(--ty-height-lg))
+      var(--ty-button-height-lg, var(--ty-height-lg)),
+      var(--ty-button-gap-lg, 8px),
+      var(--ty-button-icon-size-lg, 18px)
     );
   }
 
+  &_icon-only {
+    width: var(--ty-button-height-current);
+    min-width: var(--ty-button-height-current);
+    padding-inline: 0;
+  }
+
   &_block {
     width: 100%;
 
@@ -215,21 +225,21 @@ $btn-prefix: #{$prefix}-btn;
     float: left;
 
     & + .#{$btn-prefix} {
-      margin-left: -1px;
+      margin-left: calc(-1 * var(--ty-control-group-border-width, 1px));
     }
 
     &:hover {
-      z-index: 1;
+      z-index: var(--ty-control-group-focus-z-index, 1);
     }
 
     &:first-child {
-      border-top-left-radius: var(--ty-button-radius, var(--ty-border-radius));
-      border-bottom-left-radius: var(--ty-button-radius, var(--ty-border-radius));
+      border-top-left-radius: var(--ty-control-group-radius, var(--ty-button-radius, var(--ty-border-radius)));
+      border-bottom-left-radius: var(--ty-control-group-radius, var(--ty-button-radius, var(--ty-border-radius)));
     }
 
     &:last-child {
-      border-top-right-radius: var(--ty-button-radius, var(--ty-border-radius));
-      border-bottom-right-radius: var(--ty-button-radius, var(--ty-border-radius));
+      border-top-right-radius: var(--ty-control-group-radius, var(--ty-button-radius, var(--ty-border-radius)));
+      border-bottom-right-radius: var(--ty-control-group-radius, var(--ty-button-radius, var(--ty-border-radius)));
     }
   }
 
@@ -254,7 +264,7 @@ $btn-prefix: #{$prefix}-btn;
   &_danger {
     .#{$btn-prefix} {
       &:not(:first-child) {
-        border-left-color: var(--ty-button-group-divider-color, var(--ty-color-border-secondary));
+        border-left-color: var(--ty-button-group-divider-color, var(--ty-control-group-divider-color, var(--ty-color-border-secondary)));
       }
     }
   }
diff --git a/packages/react/src/cascader/style/index.scss b/packages/react/src/cascader/style/index.scss
index 0bcb05d2..3118b0ae 100644
--- a/packages/react/src/cascader/style/index.scss
+++ b/packages/react/src/cascader/style/index.scss
@@ -11,21 +11,21 @@
   }
 
   &_sm &__selector {
-    height: var(--ty-cascader-height-sm);
-    font-size: var(--ty-cascader-font-size-sm);
-    padding: var(--ty-cascader-padding-sm);
+    height: var(--ty-cascader-height-sm, var(--ty-control-height-sm, var(--ty-height-sm)));
+    font-size: var(--ty-cascader-font-size-sm, var(--ty-control-font-size-sm, var(--ty-font-size-sm)));
+    padding: var(--ty-cascader-padding-sm, 0 calc(var(--ty-control-padding-inline-sm, 8px) + 20px) 0 var(--ty-control-padding-inline-sm, 8px));
   }
 
   &_md &__selector {
-    height: var(--ty-cascader-height-md);
-    font-size: var(--ty-cascader-font-size-md);
-    padding: var(--ty-cascader-padding-md);
+    height: var(--ty-cascader-height-md, var(--ty-control-height-md, var(--ty-height-md)));
+    font-size: var(--ty-cascader-font-size-md, var(--ty-control-font-size-md, var(--ty-font-size-base)));
+    padding: var(--ty-cascader-padding-md, 0 calc(var(--ty-control-padding-inline-md, 12px) + 20px) 0 var(--ty-control-padding-inline-md, 12px));
   }
 
   &_lg &__selector {
-    height: var(--ty-cascader-height-lg);
-    font-size: var(--ty-cascader-font-size-lg);
-    padding: var(--ty-cascader-padding-lg);
+    height: var(--ty-cascader-height-lg, var(--ty-control-height-lg, var(--ty-height-lg)));
+    font-size: var(--ty-cascader-font-size-lg, var(--ty-control-font-size-lg, var(--ty-font-size-lg)));
+    padding: var(--ty-cascader-padding-lg, 0 calc(var(--ty-control-padding-inline-lg, 16px) + 20px) 0 var(--ty-control-padding-inline-lg, 16px));
   }
 
   &__selector {
diff --git a/packages/react/src/date-picker/style/index.scss b/packages/react/src/date-picker/style/index.scss
index 6ba9b4f0..eb7ef8bb 100755
--- a/packages/react/src/date-picker/style/index.scss
+++ b/packages/react/src/date-picker/style/index.scss
@@ -12,9 +12,9 @@ $dp: #{$prefix}-date-picker;
     display: inline-flex;
     align-items: center;
     width: 100%;
-    height: var(--ty-height-md);
+    height: var(--ty-control-height-md, var(--ty-height-md));
     box-sizing: border-box;
-    padding: var(--ty-picker-input-padding-md);
+    padding: var(--ty-picker-input-padding-md, 0 var(--ty-control-padding-inline-md, 12px));
     border: 1px solid var(--ty-picker-input-border);
     border-radius: var(--ty-picker-input-radius);
     background: var(--ty-picker-input-bg);
@@ -91,9 +91,9 @@ $dp: #{$prefix}-date-picker;
 
   // ---- Sizes ----
   &_sm &__input {
-    height: var(--ty-height-sm);
-    padding: var(--ty-picker-input-padding-sm);
-    font-size: 12px;
+    height: var(--ty-control-height-sm, var(--ty-height-sm));
+    padding: var(--ty-picker-input-padding-sm, 0 var(--ty-control-padding-inline-sm, 8px));
+    font-size: var(--ty-control-font-size-sm, var(--ty-font-size-sm));
   }
 
   &_sm &__input-field {
@@ -101,9 +101,9 @@ $dp: #{$prefix}-date-picker;
   }
 
   &_lg &__input {
-    height: var(--ty-height-lg);
-    padding: var(--ty-picker-input-padding-lg);
-    font-size: 16px;
+    height: var(--ty-control-height-lg, var(--ty-height-lg));
+    padding: var(--ty-picker-input-padding-lg, 0 var(--ty-control-padding-inline-lg, 16px));
+    font-size: var(--ty-control-font-size-lg, var(--ty-font-size-lg));
   }
 
   &_lg &__input-field {
diff --git a/packages/react/src/input-number/style/index.scss b/packages/react/src/input-number/style/index.scss
index 7ac30eb9..01abb7d3 100755
--- a/packages/react/src/input-number/style/index.scss
+++ b/packages/react/src/input-number/style/index.scss
@@ -6,6 +6,10 @@
   box-sizing: border-box;
   width: 100%;
 
+  --ty-input-number-height-current: var(--ty-input-number-height-md, var(--ty-control-height-md, var(--ty-height-md)));
+  --ty-input-number-font-size-current: var(--ty-input-number-font-size-md, var(--ty-control-font-size-md, var(--ty-font-size-base)));
+  --ty-input-number-padding-inline-current: var(--ty-input-padding-inline-md, var(--ty-control-padding-inline-md, 12px));
+
   &:hover {
     .#{$prefix}-input-number__controls {
       opacity: 1;
@@ -15,8 +19,11 @@
   &__input {
     @include input-default;
 
-    padding-left: var(--ty-input-number-input-padding-inline-start);
-    padding-right: var(--ty-input-number-input-padding-inline-end);
+    height: var(--ty-input-number-height-current);
+    font-size: var(--ty-input-number-font-size-current);
+    line-height: var(--ty-line-height-base);
+    padding-left: var(--ty-input-number-input-padding-inline-start, var(--ty-input-number-padding-inline-current));
+    padding-right: var(--ty-input-number-input-padding-inline-end, calc(var(--ty-input-number-padding-inline-current) + 20px));
 
     &::-webkit-inner-spin-button,
     &::-webkit-outer-spin-button {
@@ -82,33 +89,21 @@
   }
 
   &_sm {
-    .#{$prefix}-input-number {
-      &__input {
-        font-size: var(--ty-input-number-font-size-sm);
-        height: var(--ty-input-number-height-sm);
-        line-height: var(--ty-input-number-height-sm);
-      }
-    }
+    --ty-input-number-height-current: var(--ty-input-number-height-sm, var(--ty-control-height-sm, var(--ty-height-sm)));
+    --ty-input-number-font-size-current: var(--ty-input-number-font-size-sm, var(--ty-control-font-size-sm, var(--ty-font-size-sm)));
+    --ty-input-number-padding-inline-current: var(--ty-input-padding-inline-sm, var(--ty-control-padding-inline-sm, 8px));
   }
 
   &_md {
-    .#{$prefix}-input-number {
-      &__input {
-        font-size: var(--ty-input-number-font-size-md);
-        height: var(--ty-input-number-height-md);
-        line-height: var(--ty-input-number-height-md);
-      }
-    }
+    --ty-input-number-height-current: var(--ty-input-number-height-md, var(--ty-control-height-md, var(--ty-height-md)));
+    --ty-input-number-font-size-current: var(--ty-input-number-font-size-md, var(--ty-control-font-size-md, var(--ty-font-size-base)));
+    --ty-input-number-padding-inline-current: var(--ty-input-padding-inline-md, var(--ty-control-padding-inline-md, 12px));
   }
 
   &_lg {
-    .#{$prefix}-input-number {
-      &__input {
-        font-size: var(--ty-input-number-font-size-lg);
-        height: var(--ty-input-number-height-lg);
-        line-height: var(--ty-input-number-height-lg);
-      }
-    }
+    --ty-input-number-height-current: var(--ty-input-number-height-lg, var(--ty-control-height-lg, var(--ty-height-lg)));
+    --ty-input-number-font-size-current: var(--ty-input-number-font-size-lg, var(--ty-control-font-size-lg, var(--ty-font-size-lg)));
+    --ty-input-number-padding-inline-current: var(--ty-input-padding-inline-lg, var(--ty-control-padding-inline-lg, 16px));
   }
 
   &_disabled {
diff --git a/packages/react/src/input/__tests__/__snapshots__/input.test.tsx.snap b/packages/react/src/input/__tests__/__snapshots__/input.test.tsx.snap
index ee2458dc..84955518 100644
--- a/packages/react/src/input/__tests__/__snapshots__/input.test.tsx.snap
+++ b/packages/react/src/input/__tests__/__snapshots__/input.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<Input /> should match the snapshot 1`] = `
   >
     <input
       class="ty-input__input"
-      style="padding-left: 7px; padding-right: 7px;"
+      style="--ty-input-padding-inline-start-extra: 0px; --ty-input-padding-inline-end-extra: 0px;"
       value=""
     />
   </div>
diff --git a/packages/react/src/input/input-group-addon.tsx b/packages/react/src/input/input-group-addon.tsx
index 8c05d4f3..0e2775d1 100755
--- a/packages/react/src/input/input-group-addon.tsx
+++ b/packages/react/src/input/input-group-addon.tsx
@@ -19,8 +19,14 @@ const InputGroupAddon = (props: InputGroupAddonProps): React.ReactElement => {
   const configContext = useContext(ConfigContext);
   const prefixCls = getPrefixCls('input-group-addon', configContext.prefixCls, customisedCls);
   const inputSize = props.size || configContext.componentSize || size;
+  const childDisplayName = React.isValidElement(children) ? (children.type as any)?.displayName : null;
+  const isControlChild = childDisplayName === 'Input'
+    || childDisplayName === 'Button'
+    || childDisplayName === 'Select'
+    || childDisplayName === 'InputNumber';
   const cls = classNames(prefixCls, className, `${prefixCls}_${inputSize}`, {
     [`${prefixCls}_no-border`]: noBorder,
+    [`${prefixCls}_control`]: isControlChild,
   });
 
   if (React.isValidElement(children)) {
@@ -28,7 +34,7 @@ const InputGroupAddon = (props: InputGroupAddonProps): React.ReactElement => {
       <div className={cls} style={style}>
         {React.Children.map(children, (child: React.ReactElement) => {
           const displayName = (child.type as any)?.displayName;
-          if (displayName === 'Input' || displayName === 'Button' || displayName === 'Select') {
+          if (displayName === 'Input' || displayName === 'Button' || displayName === 'Select' || displayName === 'InputNumber') {
             const childProps: Partial<InputProps> = {
               disabled,
               size: inputSize as SizeType,
diff --git a/packages/react/src/input/input-group.tsx b/packages/react/src/input/input-group.tsx
index f923208c..b62bb4f6 100755
--- a/packages/react/src/input/input-group.tsx
+++ b/packages/react/src/input/input-group.tsx
@@ -16,8 +16,8 @@ const InputGroup = (props: InputGroupProps): React.ReactElement => {
   } = props;
   const configContext = useContext(ConfigContext);
   const prefixCls = getPrefixCls('input-group', configContext.prefixCls, customisedCls);
-  const cls = classNames(prefixCls, className);
   const inputSize = props.size || configContext.componentSize || size;
+  const cls = classNames(prefixCls, `${prefixCls}_${inputSize}`, className);
 
   return (
     <div {...otherProps} className={cls}>
diff --git a/packages/react/src/input/input.tsx b/packages/react/src/input/input.tsx
index 1cedfb36..48da8d0d 100644
--- a/packages/react/src/input/input.tsx
+++ b/packages/react/src/input/input.tsx
@@ -5,8 +5,6 @@ import { getPrefixCls } from '../_utils/general';
 import { CloseCircle } from '../_utils/components';
 import { InputProps } from './types';
 
-const DEFAULT_MARGIN = 16; // 8px * 2
-
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (props: InputProps, ref): JSX.Element => {
     const {
@@ -36,7 +34,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const [value, setValue] = useState<string>(
       'value' in props ? (props.value as string) : defaultValue
     );
-    const [inputPadding, setInputPadding] = useState({ paddingLeft: '7px', paddingRight: '7px' });
+    const [inputPaddingExtra, setInputPaddingExtra] = useState({
+      start: '0px',
+      end: '0px',
+    });
 
     const inputOnChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
       const val = e.currentTarget.value;
@@ -57,10 +58,11 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     };
 
     const renderClearButton = (): ReactNode => {
+      const clearIconSize = inputSize === 'sm' ? 14 : inputSize === 'lg' ? 18 : 16;
       if (clearable && value && value.length > 0) {
         return (
           <span className={`${prefixCls}__clear-btn`} onClick={clearBtnOnClick}>
-            <CloseCircle size={16} color="#BFBFBF" />
+            <CloseCircle size={clearIconSize} color="#BFBFBF" />
           </span>
         );
       }
@@ -71,24 +73,26 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       const prefixNode = prefixRef.current;
       const suffixNode = suffixRef.current;
 
-      const prefixWidth = prefixNode && prefixNode.offsetWidth;
-      const suffixWidth = suffixNode && suffixNode.offsetWidth;
-      const padding = { ...inputPadding };
+      const getAffixExtra = (node: HTMLDivElement | null) => {
+        if (!node) return '0px';
+        const styles = window.getComputedStyle(node);
+        const marginStart = Number.parseFloat(styles.marginLeft) || 0;
+        const marginEnd = Number.parseFloat(styles.marginRight) || 0;
+        return `${node.offsetWidth + marginStart + marginEnd}px`;
+      };
 
-      if (prefixWidth) {
-        padding.paddingLeft = prefixWidth + DEFAULT_MARGIN + 'px';
-      }
-      if (suffixWidth) {
-        padding.paddingRight = suffixWidth + DEFAULT_MARGIN + 'px';
-      }
+      const nextPaddingExtra = {
+        start: getAffixExtra(prefixNode),
+        end: getAffixExtra(suffixNode),
+      };
 
       if (
-        padding.paddingLeft !== inputPadding.paddingLeft ||
-        padding.paddingRight !== inputPadding.paddingRight
+        nextPaddingExtra.start !== inputPaddingExtra.start ||
+        nextPaddingExtra.end !== inputPaddingExtra.end
       ) {
-        setInputPadding(padding);
+        setInputPaddingExtra(nextPaddingExtra);
       }
-    }, [inputPadding]);
+    }, [clearable, inputPaddingExtra.end, inputPaddingExtra.start, inputSize, prefix, suffix, value]);
 
     useEffect(() => {
       'value' in props && typeof props.value !== 'undefined' && setValue(props.value);
@@ -107,7 +111,12 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           value={value}
           disabled={disabled}
           className={`${prefixCls}__input`}
-          style={{ paddingLeft: inputPadding.paddingLeft, paddingRight: inputPadding.paddingRight }}
+          style={
+            {
+              '--ty-input-padding-inline-start-extra': inputPaddingExtra.start,
+              '--ty-input-padding-inline-end-extra': inputPaddingExtra.end,
+            } as React.CSSProperties
+          }
           onChange={inputOnChange}
           onKeyDown={inputOnKeydown}
         />
diff --git a/packages/react/src/input/style/index.scss b/packages/react/src/input/style/index.scss
index c56c993a..d644a8ce 100755
--- a/packages/react/src/input/style/index.scss
+++ b/packages/react/src/input/style/index.scss
@@ -7,8 +7,17 @@
   width: 100%;
   color: var(--ty-input-color, var(--ty-color-text));
 
+  --ty-input-padding-inline-start-extra: 0px;
+  --ty-input-padding-inline-end-extra: 0px;
+
   &__input {
     @include input-default;
+
+    height: var(--ty-input-height-current, var(--ty-input-height-md, var(--ty-height-md)));
+    font-size: var(--ty-input-font-size-current, var(--ty-input-font-size-md, var(--ty-font-size-base)));
+    padding-left: calc(var(--ty-input-padding-inline-current, var(--ty-input-padding-inline-md, #{$input-md-padding})) + var(--ty-input-padding-inline-start-extra, 0px));
+    padding-right: calc(var(--ty-input-padding-inline-current, var(--ty-input-padding-inline-md, #{$input-md-padding})) + var(--ty-input-padding-inline-end-extra, 0px));
+    line-height: var(--ty-input-line-height, var(--ty-line-height-base));
   }
 
   &__prefix,
@@ -31,49 +40,33 @@
   &__clear-btn {
     display: inline-block;
     color: var(--ty-input-clear-color, var(--ty-color-text-quaternary));
-    width: var(--ty-input-clear-size, 1em);
-    height: var(--ty-input-clear-size, 1em);
+    width: var(--ty-input-clear-size-current, var(--ty-input-clear-size, 1em));
+    height: var(--ty-input-clear-size-current, var(--ty-input-clear-size, 1em));
     position: relative;
     top: 2px;
     cursor: pointer;
+    flex-shrink: 0;
   }
 
   &_sm {
-    .#{$prefix}-input {
-      &__input {
-        font-size: var(--ty-input-font-size-sm, var(--ty-font-size-sm));
-        height: var(--ty-input-height-sm, var(--ty-height-sm));
-        line-height: var(--ty-input-height-sm, var(--ty-height-sm));
-      }
-
-      &__clear-btn {
-        transform: scale(0.7);
-      }
-    }
+    --ty-input-height-current: var(--ty-input-height-sm, var(--ty-height-sm));
+    --ty-input-font-size-current: var(--ty-input-font-size-sm, var(--ty-font-size-sm));
+    --ty-input-padding-inline-current: var(--ty-input-padding-inline-sm, #{$input-sm-padding});
+    --ty-input-clear-size-current: var(--ty-input-clear-size-sm, var(--ty-input-clear-size, 14px));
   }
 
   &_md {
-    .#{$prefix}-input {
-      &__input {
-        font-size: var(--ty-input-font-size-md, var(--ty-font-size-base));
-        height: var(--ty-input-height-md, var(--ty-height-md));
-        line-height: var(--ty-input-height-md, var(--ty-height-md));
-      }
-
-      &__clear-btn {
-        transform: scale(0.8);
-      }
-    }
+    --ty-input-height-current: var(--ty-input-height-md, var(--ty-height-md));
+    --ty-input-font-size-current: var(--ty-input-font-size-md, var(--ty-font-size-base));
+    --ty-input-padding-inline-current: var(--ty-input-padding-inline-md, #{$input-md-padding});
+    --ty-input-clear-size-current: var(--ty-input-clear-size-md, var(--ty-input-clear-size, 16px));
   }
 
   &_lg {
-    .#{$prefix}-input {
-      &__input {
-        font-size: var(--ty-input-font-size-lg, var(--ty-font-size-lg));
-        height: var(--ty-input-height-lg, var(--ty-height-lg));
-        line-height: var(--ty-input-height-lg, var(--ty-height-lg));
-      }
-    }
+    --ty-input-height-current: var(--ty-input-height-lg, var(--ty-height-lg));
+    --ty-input-font-size-current: var(--ty-input-font-size-lg, var(--ty-font-size-lg));
+    --ty-input-padding-inline-current: var(--ty-input-padding-inline-lg, #{$input-lg-padding});
+    --ty-input-clear-size-current: var(--ty-input-clear-size-lg, var(--ty-input-clear-size, 18px));
   }
 
   &_disabled {
@@ -88,6 +81,7 @@
   display: flex;
   box-sizing: border-box;
   position: relative;
+  align-items: stretch;
 
   & > .#{$prefix}-input-group-addon {
     display: flex;
@@ -95,6 +89,25 @@
     justify-content: center;
   }
 
+  & > * {
+    position: relative;
+    min-width: 0;
+    flex-shrink: 0;
+
+    &:not(:first-child) {
+      margin-left: calc(-1 * var(--ty-control-group-border-width, 1px));
+    }
+
+    &:hover {
+      z-index: var(--ty-control-group-focus-z-index, 1);
+    }
+  }
+
+  & > .#{$prefix}-input,
+  & > .#{$prefix}-input-number {
+    flex: 1;
+  }
+
   &_sm {
     height: var(--ty-input-height-sm, var(--ty-height-sm));
   }
@@ -131,6 +144,50 @@
       }
     }
   }
+
+  & > .#{$prefix}-btn,
+  & > .#{$prefix}-input-group-addon.#{$prefix}-input-group-addon_control > .#{$prefix}-btn,
+  & > .#{$prefix}-input-group-addon.#{$prefix}-input-group-addon_control > .#{$prefix}-select,
+  & > .#{$prefix}-input-group-addon.#{$prefix}-input-group-addon_control > .#{$prefix}-input,
+  & > .#{$prefix}-input-group-addon.#{$prefix}-input-group-addon_control > .#{$prefix}-input-number {
+    height: 100%;
+  }
+
+  & > :not(:first-child) {
+    .#{$prefix}-btn,
+    .#{$prefix}-input__input,
+    .#{$prefix}-input-number__input {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  & > :not(:last-child) {
+    .#{$prefix}-btn,
+    .#{$prefix}-input__input,
+    .#{$prefix}-input-number__input {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  & > :first-child {
+    .#{$prefix}-btn,
+    .#{$prefix}-input__input,
+    .#{$prefix}-input-number__input {
+      border-top-left-radius: var(--ty-control-group-radius, var(--ty-control-radius, var(--ty-border-radius)));
+      border-bottom-left-radius: var(--ty-control-group-radius, var(--ty-control-radius, var(--ty-border-radius)));
+    }
+  }
+
+  & > :last-child {
+    .#{$prefix}-btn,
+    .#{$prefix}-input__input,
+    .#{$prefix}-input-number__input {
+      border-top-right-radius: var(--ty-control-group-radius, var(--ty-control-radius, var(--ty-border-radius)));
+      border-bottom-right-radius: var(--ty-control-group-radius, var(--ty-control-radius, var(--ty-border-radius)));
+    }
+  }
 }
 
 .#{$prefix}-input-group-addon {
@@ -178,4 +235,17 @@
     border: none;
     padding: 0;
   }
+
+  &_control {
+    padding: 0;
+    background-color: transparent;
+
+    & > .#{$prefix}-btn,
+    & > .#{$prefix}-select,
+    & > .#{$prefix}-input,
+    & > .#{$prefix}-input-number {
+      height: 100%;
+      border-radius: 0;
+    }
+  }
 }
diff --git a/packages/react/src/input/types.ts b/packages/react/src/input/types.ts
index 0929f93d..4dfc34d1 100644
--- a/packages/react/src/input/types.ts
+++ b/packages/react/src/input/types.ts
@@ -22,14 +22,14 @@ export interface InputGroupProps
     React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
   size?: SizeType;
   disabled?: boolean;
-  children: React.ReactElement;
+  children: React.ReactNode;
 }
 
 export interface InputGroupAddonProps
   extends BaseProps,
     React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
-  noBorder: boolean;
+  noBorder?: boolean;
   disabled?: boolean;
   size?: SizeType;
-  children: React.ReactElement;
+  children: React.ReactNode;
 }
diff --git a/packages/react/src/native-select/style/index.scss b/packages/react/src/native-select/style/index.scss
index 17677c23..5f0010f2 100755
--- a/packages/react/src/native-select/style/index.scss
+++ b/packages/react/src/native-select/style/index.scss
@@ -52,14 +52,26 @@ $select-arrow: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcm
   }
 
   &_sm {
-    @include native-size(var(--ty-height-sm), 0 24px 0 8px, var(--ty-native-select-font-size-sm));
+    @include native-size(
+      var(--ty-control-height-sm, var(--ty-height-sm)),
+      0 calc(var(--ty-control-padding-inline-sm, 8px) + 16px) 0 var(--ty-control-padding-inline-sm, 8px),
+      var(--ty-native-select-font-size-sm, var(--ty-control-font-size-sm, var(--ty-font-size-sm)))
+    );
   }
 
   &_md {
-    @include native-size(var(--ty-height-md), 0 28px 0 10px, var(--ty-native-select-font-size-md));
+    @include native-size(
+      var(--ty-control-height-md, var(--ty-height-md)),
+      0 calc(var(--ty-control-padding-inline-md, 12px) + 16px) 0 var(--ty-control-padding-inline-md, 12px),
+      var(--ty-native-select-font-size-md, var(--ty-control-font-size-md, var(--ty-font-size-base)))
+    );
   }
 
   &_lg {
-    @include native-size(var(--ty-height-lg), 0 32px 0 12px, var(--ty-native-select-font-size-lg));
+    @include native-size(
+      var(--ty-control-height-lg, var(--ty-height-lg)),
+      0 calc(var(--ty-control-padding-inline-lg, 16px) + 16px) 0 var(--ty-control-padding-inline-lg, 16px),
+      var(--ty-native-select-font-size-lg, var(--ty-control-font-size-lg, var(--ty-font-size-lg)))
+    );
   }
 }
diff --git a/packages/react/src/select/style/index.scss b/packages/react/src/select/style/index.scss
index cd621d45..259ba66d 100644
--- a/packages/react/src/select/style/index.scss
+++ b/packages/react/src/select/style/index.scss
@@ -19,24 +19,24 @@
   }
 
   &_sm .#{$prefix}-select__selector {
-    height: var(--ty-select-height-sm, var(--ty-height-sm));
-    min-height: var(--ty-select-height-sm, var(--ty-height-sm));
-    font-size: var(--ty-select-font-size-sm, var(--ty-font-size-sm));
-    padding: 0 var(--ty-select-padding-inline-end-sm, 24px) 0 var(--ty-select-padding-inline-start-sm, 8px);
+    height: var(--ty-select-height-sm, var(--ty-control-height-sm, var(--ty-height-sm)));
+    min-height: var(--ty-select-height-sm, var(--ty-control-height-sm, var(--ty-height-sm)));
+    font-size: var(--ty-select-font-size-sm, var(--ty-control-font-size-sm, var(--ty-font-size-sm)));
+    padding: 0 var(--ty-select-padding-inline-end-sm, calc(var(--ty-control-padding-inline-sm, 8px) + 16px)) 0 var(--ty-select-padding-inline-start-sm, var(--ty-control-padding-inline-sm, 8px));
   }
 
   &_md .#{$prefix}-select__selector {
-    height: var(--ty-select-height-md, var(--ty-height-md));
-    min-height: var(--ty-select-height-md, var(--ty-height-md));
-    font-size: var(--ty-select-font-size-md, var(--ty-font-size-base));
-    padding: 0 var(--ty-select-padding-inline-end-md, 28px) 0 var(--ty-select-padding-inline-start-md, 10px);
+    height: var(--ty-select-height-md, var(--ty-control-height-md, var(--ty-height-md)));
+    min-height: var(--ty-select-height-md, var(--ty-control-height-md, var(--ty-height-md)));
+    font-size: var(--ty-select-font-size-md, var(--ty-control-font-size-md, var(--ty-font-size-base)));
+    padding: 0 var(--ty-select-padding-inline-end-md, calc(var(--ty-control-padding-inline-md, 12px) + 18px)) 0 var(--ty-select-padding-inline-start-md, var(--ty-control-padding-inline-md, 12px));
   }
 
   &_lg .#{$prefix}-select__selector {
-    height: var(--ty-select-height-lg, var(--ty-height-lg));
-    min-height: var(--ty-select-height-lg, var(--ty-height-lg));
-    font-size: var(--ty-select-font-size-lg, var(--ty-font-size-lg));
-    padding: 0 var(--ty-select-padding-inline-end-lg, 32px) 0 var(--ty-select-padding-inline-start-lg, 12px);
+    height: var(--ty-select-height-lg, var(--ty-control-height-lg, var(--ty-height-lg)));
+    min-height: var(--ty-select-height-lg, var(--ty-control-height-lg, var(--ty-height-lg)));
+    font-size: var(--ty-select-font-size-lg, var(--ty-control-font-size-lg, var(--ty-font-size-lg)));
+    padding: 0 var(--ty-select-padding-inline-end-lg, calc(var(--ty-control-padding-inline-lg, 16px) + 20px)) 0 var(--ty-select-padding-inline-start-lg, var(--ty-control-padding-inline-lg, 16px));
   }
 
   &_multiple {
diff --git a/packages/react/src/time-picker/style/index.scss b/packages/react/src/time-picker/style/index.scss
index 72bd323c..3be2101a 100755
--- a/packages/react/src/time-picker/style/index.scss
+++ b/packages/react/src/time-picker/style/index.scss
@@ -12,9 +12,9 @@ $tp: #{$prefix}-time-picker;
     display: inline-flex;
     align-items: center;
     width: 100%;
-    height: var(--ty-height-md);
+    height: var(--ty-control-height-md, var(--ty-height-md));
     box-sizing: border-box;
-    padding: var(--ty-picker-input-padding-md);
+    padding: var(--ty-picker-input-padding-md, 0 var(--ty-control-padding-inline-md, 12px));
     border: 1px solid var(--ty-picker-input-border);
     border-radius: var(--ty-picker-input-radius);
     background: var(--ty-picker-input-bg);
@@ -96,9 +96,9 @@ $tp: #{$prefix}-time-picker;
 
   // ---- Sizes ----
   &_sm &__input {
-    height: var(--ty-height-sm);
-    padding: var(--ty-picker-input-padding-sm);
-    font-size: 12px;
+    height: var(--ty-control-height-sm, var(--ty-height-sm));
+    padding: var(--ty-picker-input-padding-sm, 0 var(--ty-control-padding-inline-sm, 8px));
+    font-size: var(--ty-control-font-size-sm, var(--ty-font-size-sm));
   }
 
   &_sm &__input-field {
@@ -106,9 +106,9 @@ $tp: #{$prefix}-time-picker;
   }
 
   &_lg &__input {
-    height: var(--ty-height-lg);
-    padding: var(--ty-picker-input-padding-lg);
-    font-size: 16px;
+    height: var(--ty-control-height-lg, var(--ty-height-lg));
+    padding: var(--ty-picker-input-padding-lg, 0 var(--ty-control-padding-inline-lg, 16px));
+    font-size: var(--ty-control-font-size-lg, var(--ty-font-size-lg));
   }
 
   &_lg &__input-field {
diff --git a/packages/tokens/scss/_constants.scss b/packages/tokens/scss/_constants.scss
index 73ff2c9e..762e349f 100644
--- a/packages/tokens/scss/_constants.scss
+++ b/packages/tokens/scss/_constants.scss
@@ -13,9 +13,9 @@ $badge-size: var(--ty-badge-size) !default;
 $badge-dot-size: var(--ty-badge-dot-size) !default;
 
 // Button
-$btn-padding-sm: var(--ty-button-padding-inline-sm) !default;
-$btn-padding-md: var(--ty-button-padding-inline-md) !default;
-$btn-padding-lg: var(--ty-button-padding-inline-lg) !default;
+$btn-padding-sm: var(--ty-button-padding-inline-sm, var(--ty-control-padding-inline-sm)) !default;
+$btn-padding-md: var(--ty-button-padding-inline-md, var(--ty-control-padding-inline-md)) !default;
+$btn-padding-lg: var(--ty-button-padding-inline-lg, var(--ty-control-padding-inline-lg)) !default;
 $btn-loading-opacity: var(--ty-button-loading-opacity) !default;
 $btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
 
@@ -33,9 +33,9 @@ $description-md-padding-hr: var(--ty-descriptions-md-padding-hr) !default;
 $description-lg-padding-hr: var(--ty-descriptions-lg-padding-hr) !default;
 
 // Input
-$input-sm-padding: var(--ty-input-padding-inline-sm) !default;
-$input-md-padding: var(--ty-input-padding-inline-md) !default;
-$input-lg-padding: var(--ty-input-padding-inline-lg) !default;
+$input-sm-padding: var(--ty-input-padding-inline-sm, var(--ty-control-padding-inline-sm)) !default;
+$input-md-padding: var(--ty-input-padding-inline-md, var(--ty-control-padding-inline-md)) !default;
+$input-lg-padding: var(--ty-input-padding-inline-lg, var(--ty-control-padding-inline-lg)) !default;
 
 // Menu
 $menu-item-padding-vertical: var(--ty-menu-item-padding-vertical) !default;
diff --git a/packages/tokens/source/components/button.json b/packages/tokens/source/components/button.json
index 2310b7ae..0e72ddb9 100644
--- a/packages/tokens/source/components/button.json
+++ b/packages/tokens/source/components/button.json
@@ -1,6 +1,6 @@
 {
   "button.radius": {
-    "$value": "{border-radius}",
+    "$value": "{control.radius}",
     "$type": "dimension",
     "description": "Button border radius.",
     "fallback": "--ty-border-radius"
@@ -45,56 +45,86 @@
     "description": "Overlay opacity during button loading state."
   },
   "button.font-size-sm": {
-    "$value": "{font-size-sm}",
+    "$value": "{control.font-size.sm}",
     "$type": "dimension",
     "description": "Small button font size.",
     "fallback": "--ty-font-size-sm"
   },
   "button.font-size-md": {
-    "$value": "{font-size-base}",
+    "$value": "{control.font-size.md}",
     "$type": "dimension",
     "description": "Medium button font size.",
     "fallback": "--ty-font-size-base"
   },
   "button.font-size-lg": {
-    "$value": "{font-size-lg}",
+    "$value": "{control.font-size.lg}",
     "$type": "dimension",
     "description": "Large button font size.",
     "fallback": "--ty-font-size-lg"
   },
   "button.height.sm": {
-    "$value": "{height-sm}",
+    "$value": "{control.height.sm}",
     "$type": "dimension",
     "description": "Small button height.",
     "fallback": "--ty-height-sm"
   },
   "button.height.md": {
-    "$value": "{height-md}",
+    "$value": "{control.height.md}",
     "$type": "dimension",
     "description": "Medium button height.",
     "fallback": "--ty-height-md"
   },
   "button.height.lg": {
-    "$value": "{height-lg}",
+    "$value": "{control.height.lg}",
     "$type": "dimension",
     "description": "Large button height.",
     "fallback": "--ty-height-lg"
   },
   "button.padding-inline-sm": {
-    "$value": "{spacing-3}",
+    "$value": "{control.padding-inline.sm}",
     "$type": "dimension",
     "description": "Small button inline padding."
   },
   "button.padding-inline-md": {
-    "$value": "{spacing-4}",
+    "$value": "{control.padding-inline.md}",
     "$type": "dimension",
     "description": "Medium button inline padding."
   },
   "button.padding-inline-lg": {
-    "$value": "{spacing-5}",
+    "$value": "{control.padding-inline.lg}",
     "$type": "dimension",
     "description": "Large button inline padding."
   },
+  "button.gap-sm": {
+    "$value": "{control.gap.sm}",
+    "$type": "dimension",
+    "description": "Small button content gap."
+  },
+  "button.gap-md": {
+    "$value": "{control.gap.md}",
+    "$type": "dimension",
+    "description": "Medium button content gap."
+  },
+  "button.gap-lg": {
+    "$value": "{control.gap.lg}",
+    "$type": "dimension",
+    "description": "Large button content gap."
+  },
+  "button.icon-size-sm": {
+    "$value": "14px",
+    "$type": "dimension",
+    "description": "Small button icon size."
+  },
+  "button.icon-size-md": {
+    "$value": "16px",
+    "$type": "dimension",
+    "description": "Medium button icon size."
+  },
+  "button.icon-size-lg": {
+    "$value": "18px",
+    "$type": "dimension",
+    "description": "Large button icon size."
+  },
   "button.bg.default": {
     "$value": "{color-bg-container}",
     "$type": "color",
diff --git a/packages/tokens/source/components/input.json b/packages/tokens/source/components/input.json
index a9f7debd..580fff68 100644
--- a/packages/tokens/source/components/input.json
+++ b/packages/tokens/source/components/input.json
@@ -1,6 +1,6 @@
 {
   "input.radius": {
-    "$value": "{border-radius}",
+    "$value": "{control.radius}",
     "$type": "dimension",
     "description": "Input border radius.",
     "fallback": "--ty-border-radius"
@@ -81,56 +81,76 @@
     "fallback": "--ty-color-text-quaternary"
   },
   "input.font-size-sm": {
-    "$value": "{font-size-sm}",
+    "$value": "{control.font-size.sm}",
     "$type": "dimension",
     "description": "Small input font size.",
     "fallback": "--ty-font-size-sm"
   },
   "input.font-size-md": {
-    "$value": "{font-size-base}",
+    "$value": "{control.font-size.md}",
     "$type": "dimension",
     "description": "Medium input font size.",
     "fallback": "--ty-font-size-base"
   },
   "input.font-size-lg": {
-    "$value": "{font-size-lg}",
+    "$value": "{control.font-size.lg}",
     "$type": "dimension",
     "description": "Large input font size.",
     "fallback": "--ty-font-size-lg"
   },
   "input.height.sm": {
-    "$value": "{height-sm}",
+    "$value": "{control.height.sm}",
     "$type": "dimension",
     "description": "Small input height.",
     "fallback": "--ty-height-sm"
   },
   "input.height.md": {
-    "$value": "{height-md}",
+    "$value": "{control.height.md}",
     "$type": "dimension",
     "description": "Medium input height.",
     "fallback": "--ty-height-md"
   },
   "input.height.lg": {
-    "$value": "{height-lg}",
+    "$value": "{control.height.lg}",
     "$type": "dimension",
     "description": "Large input height.",
     "fallback": "--ty-height-lg"
   },
   "input.padding-inline-sm": {
-    "$value": "{spacing-3}",
+    "$value": "{control.padding-inline.sm}",
     "$type": "dimension",
     "description": "Small input inline padding."
   },
   "input.padding-inline-md": {
-    "$value": "{spacing-4}",
+    "$value": "{control.padding-inline.md}",
     "$type": "dimension",
     "description": "Medium input inline padding."
   },
   "input.padding-inline-lg": {
-    "$value": "{spacing-5}",
+    "$value": "{control.padding-inline.lg}",
     "$type": "dimension",
     "description": "Large input inline padding."
   },
+  "input.affix-gap": {
+    "$value": "{spacing-3}",
+    "$type": "dimension",
+    "description": "Additional spacing reserved around input affixes."
+  },
+  "input.clear-size-sm": {
+    "$value": "14px",
+    "$type": "dimension",
+    "description": "Small clear button square size."
+  },
+  "input.clear-size-md": {
+    "$value": "16px",
+    "$type": "dimension",
+    "description": "Medium clear button square size."
+  },
+  "input.clear-size-lg": {
+    "$value": "18px",
+    "$type": "dimension",
+    "description": "Large clear button square size."
+  },
   "input.text.disabled": {
     "$value": "{color-text-quaternary}",
     "$type": "color",
diff --git a/packages/tokens/source/semantic/control-group.json b/packages/tokens/source/semantic/control-group.json
new file mode 100644
index 00000000..d06d04bb
--- /dev/null
+++ b/packages/tokens/source/semantic/control-group.json
@@ -0,0 +1,22 @@
+{
+  "control-group.radius": {
+    "$value": "{control.radius}",
+    "$type": "dimension",
+    "description": "Radius applied to the outer corners of grouped controls."
+  },
+  "control-group.border-width": {
+    "$value": "1px",
+    "$type": "dimension",
+    "description": "Shared border width used when attaching grouped controls."
+  },
+  "control-group.divider-color": {
+    "$value": "{color-border-secondary}",
+    "$type": "color",
+    "description": "Divider color between grouped controls."
+  },
+  "control-group.focus-z-index": {
+    "$value": "1",
+    "$type": "number",
+    "description": "Stacking level for hovered or focused grouped controls."
+  }
+}
diff --git a/packages/tokens/source/semantic/control.json b/packages/tokens/source/semantic/control.json
new file mode 100644
index 00000000..dfbe8d5d
--- /dev/null
+++ b/packages/tokens/source/semantic/control.json
@@ -0,0 +1,67 @@
+{
+  "control.radius": {
+    "$value": "{border-radius}",
+    "$type": "dimension",
+    "description": "Default interactive control radius."
+  },
+  "control.height.sm": {
+    "$value": "{height-sm}",
+    "$type": "dimension",
+    "description": "Small control height."
+  },
+  "control.height.md": {
+    "$value": "{height-md}",
+    "$type": "dimension",
+    "description": "Medium control height."
+  },
+  "control.height.lg": {
+    "$value": "{height-lg}",
+    "$type": "dimension",
+    "description": "Large control height."
+  },
+  "control.font-size.sm": {
+    "$value": "{font-size-sm}",
+    "$type": "dimension",
+    "description": "Small control font size."
+  },
+  "control.font-size.md": {
+    "$value": "{font-size-base}",
+    "$type": "dimension",
+    "description": "Medium control font size."
+  },
+  "control.font-size.lg": {
+    "$value": "{font-size-lg}",
+    "$type": "dimension",
+    "description": "Large control font size."
+  },
+  "control.padding-inline.sm": {
+    "$value": "{spacing-3}",
+    "$type": "dimension",
+    "description": "Small control horizontal padding."
+  },
+  "control.padding-inline.md": {
+    "$value": "{spacing-4}",
+    "$type": "dimension",
+    "description": "Medium control horizontal padding."
+  },
+  "control.padding-inline.lg": {
+    "$value": "{spacing-5}",
+    "$type": "dimension",
+    "description": "Large control horizontal padding."
+  },
+  "control.gap.sm": {
+    "$value": "4px",
+    "$type": "dimension",
+    "description": "Small control content gap."
+  },
+  "control.gap.md": {
+    "$value": "6px",
+    "$type": "dimension",
+    "description": "Medium control content gap."
+  },
+  "control.gap.lg": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Large control content gap."
+  }
+}

From e7b998c481426f087137459c4ef963720c250918 Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Thu, 9 Apr 2026 09:08:57 +1000
Subject: [PATCH 03/12] fix: component styles

---
 .../src/containers/theme-studio/defaults.ts   |  28 ++--
 .../containers/theme-studio/editor-draft.ts   |  18 ++-
 .../containers/theme-studio/editor-fields.tsx |   9 +-
 .../theme-studio/preview-components.tsx       |   3 +-
 .../theme-studio/sidebar-content.tsx          |  76 ++++++++--
 .../theme-studio/theme-document-adapter.ts    | 143 +++++++++++-------
 .../containers/theme-studio/theme-studio.scss |  21 ++-
 .../theme-studio/tweakcn-runtime-presets.ts   |   4 +-
 .../docs/src/containers/theme-studio/types.ts |  20 ++-
 packages/react/src/avatar/style/index.scss    |   1 +
 .../react/src/date-picker/style/index.scss    |   6 +-
 packages/react/src/radio/style/index.scss     |   1 +
 packages/react/src/switch/style/index.scss    |   1 +
 packages/react/src/table/style/index.scss     |  24 ++-
 .../react/src/time-picker/style/index.scss    |   6 +-
 packages/tokens/scss/themes/_dark.scss        |   4 +-
 packages/tokens/scss/themes/_light.scss       |   4 +-
 packages/tokens/source/components/button.json |   4 +-
 .../tokens/source/components/checkbox.json    |   2 +-
 packages/tokens/source/components/table.json  |   5 +
 packages/tokens/source/semantic/size.json     |   4 +-
 21 files changed, 265 insertions(+), 119 deletions(-)

diff --git a/apps/docs/src/containers/theme-studio/defaults.ts b/apps/docs/src/containers/theme-studio/defaults.ts
index 3c4ed3a2..d8ecb58d 100644
--- a/apps/docs/src/containers/theme-studio/defaults.ts
+++ b/apps/docs/src/containers/theme-studio/defaults.ts
@@ -49,19 +49,25 @@ export const DEFAULT_FIELDS: ThemeEditorFields = {
   h1Size: '40px',
   h2Size: '32px',
   letterSpacing: '-0.02em',
-  radius: '14px',
+  radius: '0.3rem',
   shadowCard: '0 20px 55px rgba(17, 24, 39, 0.08)',
   shadowFocus: '0 0 0 3px rgba(110, 65, 191, 0.22)',
-  buttonRadius: '999px',
-  inputRadius: '14px',
-  cardRadius: '22px',
-  fieldButtonPaddingXSm: '8px',
-  fieldButtonPaddingXMd: '8px',
-  fieldButtonPaddingXLg: '8px',
-  fieldButtonHeightSm: '24px',
-  fieldButtonHeightMd: '32px',
-  fieldButtonHeightLg: '40px',
-  cardPadding: '24px',
+  buttonRadius: '0.3rem',
+  inputRadius: '0.3rem',
+  cardRadius: '0.3rem',
+  fieldPaddingSm: '8px',
+  fieldPaddingMd: '8px',
+  fieldPaddingLg: '8px',
+  buttonPaddingSm: '8px',
+  buttonPaddingMd: '15px',
+  buttonPaddingLg: '20px',
+  fieldHeightSm: '24px',
+  fieldHeightMd: '35px',
+  fieldHeightLg: '44px',
+  buttonHeightSm: '24px',
+  buttonHeightMd: '35px',
+  buttonHeightLg: '44px',
+  cardPadding: '18px',
 };
 
 export function createDraft(
diff --git a/apps/docs/src/containers/theme-studio/editor-draft.ts b/apps/docs/src/containers/theme-studio/editor-draft.ts
index a044c759..ac88092a 100644
--- a/apps/docs/src/containers/theme-studio/editor-draft.ts
+++ b/apps/docs/src/containers/theme-studio/editor-draft.ts
@@ -126,12 +126,18 @@ export function buildPreviewVars(fields: ThemeEditorFields): React.CSSProperties
     '--editor-button-radius': fields.buttonRadius,
     '--editor-input-radius': fields.inputRadius,
     '--editor-card-radius': fields.cardRadius,
-    '--editor-field-button-padding-x-sm': fields.fieldButtonPaddingXSm,
-    '--editor-field-button-padding-x-md': fields.fieldButtonPaddingXMd,
-    '--editor-field-button-padding-x-lg': fields.fieldButtonPaddingXLg,
-    '--editor-field-button-height-sm': fields.fieldButtonHeightSm,
-    '--editor-field-button-height-md': fields.fieldButtonHeightMd,
-    '--editor-field-button-height-lg': fields.fieldButtonHeightLg,
+    '--editor-field-padding-sm': fields.fieldPaddingSm,
+    '--editor-field-padding-md': fields.fieldPaddingMd,
+    '--editor-field-padding-lg': fields.fieldPaddingLg,
+    '--editor-button-padding-sm': fields.buttonPaddingSm,
+    '--editor-button-padding-md': fields.buttonPaddingMd,
+    '--editor-button-padding-lg': fields.buttonPaddingLg,
+    '--editor-field-height-sm': fields.fieldHeightSm,
+    '--editor-field-height-md': fields.fieldHeightMd,
+    '--editor-field-height-lg': fields.fieldHeightLg,
+    '--editor-button-height-sm': fields.buttonHeightSm,
+    '--editor-button-height-md': fields.buttonHeightMd,
+    '--editor-button-height-lg': fields.buttonHeightLg,
     '--editor-card-padding': fields.cardPadding,
   } as React.CSSProperties;
 }
diff --git a/apps/docs/src/containers/theme-studio/editor-fields.tsx b/apps/docs/src/containers/theme-studio/editor-fields.tsx
index df668c10..008d82fb 100644
--- a/apps/docs/src/containers/theme-studio/editor-fields.tsx
+++ b/apps/docs/src/containers/theme-studio/editor-fields.tsx
@@ -9,7 +9,7 @@ export function swatchTextStyle(background: string, foreground: string): React.C
   };
 }
 
-function parseSliderValue(value: string, unit?: 'px' | 'em'): number | undefined {
+function parseSliderValue(value: string, unit?: 'px' | 'em' | 'rem'): number | undefined {
   if (unit === 'px') {
     const match = /^(-?\d+(?:\.\d+)?)px$/.exec(value.trim());
     return match ? Number(match[1]) : undefined;
@@ -20,11 +20,16 @@ function parseSliderValue(value: string, unit?: 'px' | 'em'): number | undefined
     return match ? Number(match[1]) : undefined;
   }
 
+  if (unit === 'rem') {
+    const match = /^(-?\d+(?:\.\d+)?)rem$/.exec(value.trim());
+    return match ? Number(match[1]) : undefined;
+  }
+
   const parsed = Number(value);
   return Number.isNaN(parsed) ? undefined : parsed;
 }
 
-function formatSliderValue(value: number, unit?: 'px' | 'em'): string {
+function formatSliderValue(value: number, unit?: 'px' | 'em' | 'rem'): string {
   if (!unit) return String(value);
   return `${value}${unit}`;
 }
diff --git a/apps/docs/src/containers/theme-studio/preview-components.tsx b/apps/docs/src/containers/theme-studio/preview-components.tsx
index 243c88cb..c699500e 100644
--- a/apps/docs/src/containers/theme-studio/preview-components.tsx
+++ b/apps/docs/src/containers/theme-studio/preview-components.tsx
@@ -444,7 +444,6 @@ function CardsPreview(): React.ReactElement {
                 <Typography.Text strong>Sofia Davis</Typography.Text>
                 <Typography.Text type="secondary">m@example.com</Typography.Text>
               </div>
-              <Button size="sm" btnType="ghost">+</Button>
             </div>
             <div className="theme-studio__chat-thread">
               <Card bordered={false} className="theme-studio__chat-bubble theme-studio__chat-bubble_in">
@@ -460,7 +459,7 @@ function CardsPreview(): React.ReactElement {
                 <Card.Content>I can&apos;t log in.</Card.Content>
               </Card>
             </div>
-            <Input placeholder="Type your message..." />
+            <Input size='lg' placeholder="Type your message..." />
           </Card.Content>
         </Card>
 
diff --git a/apps/docs/src/containers/theme-studio/sidebar-content.tsx b/apps/docs/src/containers/theme-studio/sidebar-content.tsx
index e0e7af23..53196c2a 100644
--- a/apps/docs/src/containers/theme-studio/sidebar-content.tsx
+++ b/apps/docs/src/containers/theme-studio/sidebar-content.tsx
@@ -172,8 +172,12 @@ export function ThemeStudioSidebarContent({
               <strong>{draft.fields.radius}</strong>
             </div>
             <div className="theme-studio__summary-card">
-              <span>Fields & Buttons</span>
-              <strong>{`${draft.fields.fieldButtonHeightSm} / ${draft.fields.fieldButtonHeightMd} / ${draft.fields.fieldButtonHeightLg}`}</strong>
+              <span>Fields</span>
+              <strong>{`${draft.fields.fieldHeightSm} / ${draft.fields.fieldHeightMd} / ${draft.fields.fieldHeightLg}`}</strong>
+            </div>
+            <div className="theme-studio__summary-card">
+              <span>Buttons</span>
+              <strong>{`${draft.fields.buttonHeightSm} / ${draft.fields.buttonHeightMd} / ${draft.fields.buttonHeightLg}`}</strong>
             </div>
             <div className="theme-studio__summary-card">
               <span>Padding</span>
@@ -184,21 +188,65 @@ export function ThemeStudioSidebarContent({
 
         <div className="theme-studio__group-card">
           <Typography.Text strong>Shape</Typography.Text>
-          <SliderField label="Global Radius" value={draft.fields.radius} onChange={(next) => updateField('radius', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
-          <SliderField label="Button Radius" value={draft.fields.buttonRadius} onChange={(next) => updateField('buttonRadius', next)} config={{ min: 0, max: 999, step: 1, unit: 'px' }} />
-          <SliderField label="Input Radius" value={draft.fields.inputRadius} onChange={(next) => updateField('inputRadius', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
-          <SliderField label="Card Radius" value={draft.fields.cardRadius} onChange={(next) => updateField('cardRadius', next)} config={{ min: 0, max: 40, step: 1, unit: 'px' }} />
+          <SliderField label="Global Radius" value={draft.fields.radius} onChange={(next) => updateField('radius', next)} config={{ min: 0, max: 2, step: 0.0625, unit: 'rem' }} />
+          <SliderField label="Button Radius" value={draft.fields.buttonRadius} onChange={(next) => updateField('buttonRadius', next)} config={{ min: 0, max: 4, step: 0.0625, unit: 'rem' }} />
+          <SliderField label="Input Radius" value={draft.fields.inputRadius} onChange={(next) => updateField('inputRadius', next)} config={{ min: 0, max: 2, step: 0.0625, unit: 'rem' }} />
+          <SliderField label="Card Radius" value={draft.fields.cardRadius} onChange={(next) => updateField('cardRadius', next)} config={{ min: 0, max: 2.5, step: 0.0625, unit: 'rem' }} />
         </div>
 
         <div className="theme-studio__group-card">
-          <Typography.Text strong>Density</Typography.Text>
-          <SliderField label="Field & Button Padding / Small" value={draft.fields.fieldButtonPaddingXSm} onChange={(next) => updateField('fieldButtonPaddingXSm', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
-          <SliderField label="Field & Button Padding / Medium" value={draft.fields.fieldButtonPaddingXMd} onChange={(next) => updateField('fieldButtonPaddingXMd', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
-          <SliderField label="Field & Button Padding / Large" value={draft.fields.fieldButtonPaddingXLg} onChange={(next) => updateField('fieldButtonPaddingXLg', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
-          <SliderField label="Field & Button Height / Small" value={draft.fields.fieldButtonHeightSm} onChange={(next) => updateField('fieldButtonHeightSm', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
-          <SliderField label="Field & Button Height / Medium" value={draft.fields.fieldButtonHeightMd} onChange={(next) => updateField('fieldButtonHeightMd', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
-          <SliderField label="Field & Button Height / Large" value={draft.fields.fieldButtonHeightLg} onChange={(next) => updateField('fieldButtonHeightLg', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
-          <SliderField label="Card Padding" value={draft.fields.cardPadding} onChange={(next) => updateField('cardPadding', next)} config={{ min: 12, max: 40, step: 1, unit: 'px' }} />
+          <div className="theme-studio__section-header">
+            <Typography.Text strong>Density</Typography.Text>
+            <Typography.Text type="secondary">Tune spacing and heights for fields, buttons, and cards.</Typography.Text>
+          </div>
+          <div className="theme-studio__group-fields">
+            <Typography.Text className="theme-studio__subgroup-title">Fields</Typography.Text>
+            <SliderField label="Field Height / Medium" value={draft.fields.fieldHeightMd} onChange={(next) => updateField('fieldHeightMd', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
+            <SliderField label="Field Padding / Medium" value={draft.fields.fieldPaddingMd} onChange={(next) => updateField('fieldPaddingMd', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
+            <Collapse bordered={false} className="theme-studio__advanced-collapse" defaultActiveKey={[]}>
+              <Panel
+                itemKey="field-density-advanced"
+                header={(
+                  <div className="theme-studio__section-header theme-studio__section-header_inline">
+                    <Typography.Text strong>Advanced Sizes</Typography.Text>
+                    <Typography.Text type="secondary">Small and large field density.</Typography.Text>
+                  </div>
+                )}
+              >
+                <SliderField label="Field Height / Small" value={draft.fields.fieldHeightSm} onChange={(next) => updateField('fieldHeightSm', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
+                <SliderField label="Field Height / Large" value={draft.fields.fieldHeightLg} onChange={(next) => updateField('fieldHeightLg', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
+                <SliderField label="Field Padding / Small" value={draft.fields.fieldPaddingSm} onChange={(next) => updateField('fieldPaddingSm', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
+                <SliderField label="Field Padding / Large" value={draft.fields.fieldPaddingLg} onChange={(next) => updateField('fieldPaddingLg', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
+              </Panel>
+            </Collapse>
+          </div>
+
+          <div className="theme-studio__group-fields">
+            <Typography.Text className="theme-studio__subgroup-title">Buttons</Typography.Text>
+            <SliderField label="Button Height / Medium" value={draft.fields.buttonHeightMd} onChange={(next) => updateField('buttonHeightMd', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
+            <SliderField label="Button Padding / Medium" value={draft.fields.buttonPaddingMd} onChange={(next) => updateField('buttonPaddingMd', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
+            <Collapse bordered={false} className="theme-studio__advanced-collapse" defaultActiveKey={[]}>
+              <Panel
+                itemKey="button-density-advanced"
+                header={(
+                  <div className="theme-studio__section-header theme-studio__section-header_inline">
+                    <Typography.Text strong>Advanced Sizes</Typography.Text>
+                    <Typography.Text type="secondary">Small and large button density.</Typography.Text>
+                  </div>
+                )}
+              >
+                <SliderField label="Button Height / Small" value={draft.fields.buttonHeightSm} onChange={(next) => updateField('buttonHeightSm', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
+                <SliderField label="Button Height / Large" value={draft.fields.buttonHeightLg} onChange={(next) => updateField('buttonHeightLg', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
+                <SliderField label="Button Padding / Small" value={draft.fields.buttonPaddingSm} onChange={(next) => updateField('buttonPaddingSm', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
+                <SliderField label="Button Padding / Large" value={draft.fields.buttonPaddingLg} onChange={(next) => updateField('buttonPaddingLg', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
+              </Panel>
+            </Collapse>
+          </div>
+
+          <div className="theme-studio__group-fields">
+            <Typography.Text className="theme-studio__subgroup-title">Cards</Typography.Text>
+            <SliderField label="Card Padding" value={draft.fields.cardPadding} onChange={(next) => updateField('cardPadding', next)} config={{ min: 12, max: 40, step: 1, unit: 'px' }} />
+          </div>
         </div>
 
         <div className="theme-studio__group-card">
diff --git a/apps/docs/src/containers/theme-studio/theme-document-adapter.ts b/apps/docs/src/containers/theme-studio/theme-document-adapter.ts
index 60e5cd9c..7dfa083a 100644
--- a/apps/docs/src/containers/theme-studio/theme-document-adapter.ts
+++ b/apps/docs/src/containers/theme-studio/theme-document-adapter.ts
@@ -158,19 +158,19 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'button.text.default': fields.baseForeground,
         'button.text.default-hover': fields.baseForeground,
         'button.text.default-active': fields.baseForeground,
-        'control.height.sm': fields.fieldButtonHeightSm,
-        'control.height.md': fields.fieldButtonHeightMd,
-        'control.height.lg': fields.fieldButtonHeightLg,
-        'control.padding-inline.sm': fields.fieldButtonPaddingXSm,
-        'control.padding-inline.md': fields.fieldButtonPaddingXMd,
-        'control.padding-inline.lg': fields.fieldButtonPaddingXLg,
+        'control.height.sm': fields.fieldHeightSm,
+        'control.height.md': fields.fieldHeightMd,
+        'control.height.lg': fields.fieldHeightLg,
+        'control.padding-inline.sm': fields.fieldPaddingSm,
+        'control.padding-inline.md': fields.fieldPaddingMd,
+        'control.padding-inline.lg': fields.fieldPaddingLg,
         'button.radius': fields.buttonRadius,
-        'button.height.sm': fields.fieldButtonHeightSm,
-        'button.height.md': fields.fieldButtonHeightMd,
-        'button.height.lg': fields.fieldButtonHeightLg,
-        'button.padding-inline-sm': fields.fieldButtonPaddingXSm,
-        'button.padding-inline-md': fields.fieldButtonPaddingXMd,
-        'button.padding-inline-lg': fields.fieldButtonPaddingXLg,
+        'button.height.sm': fields.buttonHeightSm,
+        'button.height.md': fields.buttonHeightMd,
+        'button.height.lg': fields.buttonHeightLg,
+        'button.padding-inline-sm': fields.buttonPaddingSm,
+        'button.padding-inline-md': fields.buttonPaddingMd,
+        'button.padding-inline-lg': fields.buttonPaddingLg,
         'card.bg': fields.card,
         'card.bg.filled': fields.secondary,
         'card.border': fields.border,
@@ -187,12 +187,12 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'input.border.focus': fields.ring,
         'input.shadow.focus': fields.shadowFocus,
         'input.radius': fields.inputRadius,
-        'input.height.sm': fields.fieldButtonHeightSm,
-        'input.height.md': fields.fieldButtonHeightMd,
-        'input.height.lg': fields.fieldButtonHeightLg,
-        'input.padding-inline-sm': fields.fieldButtonPaddingXSm,
-        'input.padding-inline-md': fields.fieldButtonPaddingXMd,
-        'input.padding-inline-lg': fields.fieldButtonPaddingXLg,
+        'input.height.sm': fields.fieldHeightSm,
+        'input.height.md': fields.fieldHeightMd,
+        'input.height.lg': fields.fieldHeightLg,
+        'input.padding-inline-sm': fields.fieldPaddingSm,
+        'input.padding-inline-md': fields.fieldPaddingMd,
+        'input.padding-inline-lg': fields.fieldPaddingLg,
         'select.bg': fields.base,
         'select.color': fields.baseForeground,
         'select.border': fields.input,
@@ -200,15 +200,16 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'select.border.focus': fields.ring,
         'select.shadow.focus': fields.shadowFocus,
         'select.radius': fields.inputRadius,
-        'select.height.sm': fields.fieldButtonHeightSm,
-        'select.height.md': fields.fieldButtonHeightMd,
-        'select.height.lg': fields.fieldButtonHeightLg,
-        'select.padding-inline-start.sm': fields.fieldButtonPaddingXSm,
-        'select.padding-inline-start.md': fields.fieldButtonPaddingXMd,
-        'select.padding-inline-start.lg': fields.fieldButtonPaddingXLg,
+        'select.height.sm': fields.fieldHeightSm,
+        'select.height.md': fields.fieldHeightMd,
+        'select.height.lg': fields.fieldHeightLg,
+        'select.padding-inline-start.sm': fields.fieldPaddingSm,
+        'select.padding-inline-start.md': fields.fieldPaddingMd,
+        'select.padding-inline-start.lg': fields.fieldPaddingLg,
         'select.dropdown-bg': fields.popover,
         'select.option.active-bg': fields.muted,
         'select.option.selected-bg': fields.accent,
+        'table.radius': fields.radius,
         'picker.input-bg': fields.base,
         'picker.input-border': fields.input,
         'picker.input-border-hover': fields.ring,
@@ -218,9 +219,9 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'picker.input-color-placeholder': fields.mutedForeground,
         'picker.input-color-muted': fields.mutedForeground,
         'picker.input-radius': fields.inputRadius,
-        'picker.input-padding.sm': `0 ${fields.fieldButtonPaddingXSm}`,
-        'picker.input-padding.md': `0 ${fields.fieldButtonPaddingXMd}`,
-        'picker.input-padding.lg': `0 ${fields.fieldButtonPaddingXLg}`,
+        'picker.input-padding.sm': `0 ${fields.fieldPaddingSm}`,
+        'picker.input-padding.md': `0 ${fields.fieldPaddingMd}`,
+        'picker.input-padding.lg': `0 ${fields.fieldPaddingLg}`,
         'picker.dropdown-bg': fields.popover,
         'picker.dropdown-radius': fields.cardRadius,
         'picker.header-border': fields.border,
@@ -265,15 +266,16 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'calendar.panel-cell-color-selected': fields.primaryForeground,
         'calendar.panel-cell-bg-selected': fields.primary,
         'calendar.today-link-color': fields.primary,
-        'cascader.height.sm': fields.fieldButtonHeightSm,
-        'cascader.height.md': fields.fieldButtonHeightMd,
-        'cascader.height.lg': fields.fieldButtonHeightLg,
-        'cascader.padding.sm': `0 calc(${fields.fieldButtonPaddingXSm} + 20px) 0 ${fields.fieldButtonPaddingXSm}`,
-        'cascader.padding.md': `0 calc(${fields.fieldButtonPaddingXMd} + 20px) 0 ${fields.fieldButtonPaddingXMd}`,
-        'cascader.padding.lg': `0 calc(${fields.fieldButtonPaddingXLg} + 20px) 0 ${fields.fieldButtonPaddingXLg}`,
+        'cascader.height.sm': fields.fieldHeightSm,
+        'cascader.height.md': fields.fieldHeightMd,
+        'cascader.height.lg': fields.fieldHeightLg,
+        'cascader.padding.sm': `0 calc(${fields.fieldPaddingSm} + 20px) 0 ${fields.fieldPaddingSm}`,
+        'cascader.padding.md': `0 calc(${fields.fieldPaddingMd} + 20px) 0 ${fields.fieldPaddingMd}`,
+        'cascader.padding.lg': `0 calc(${fields.fieldPaddingLg} + 20px) 0 ${fields.fieldPaddingLg}`,
         'checkbox.bg': fields.base,
         'checkbox.border': fields.input,
         'checkbox.border.hover': fields.ring,
+        'checkbox.radius': fields.radius,
         'checkbox.bg.checked': fields.primary,
         'checkbox.border.checked': fields.primary,
         'checkbox.indicator-color': fields.primaryForeground,
@@ -285,12 +287,12 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'switch.bg.checked': fields.primary,
         'switch.thumb-border': fields.mutedForeground,
         'switch.thumb-border.checked': fields.primary,
-        'input-number.height.sm': fields.fieldButtonHeightSm,
-        'input-number.height.md': fields.fieldButtonHeightMd,
-        'input-number.height.lg': fields.fieldButtonHeightLg,
+        'input-number.height.sm': fields.fieldHeightSm,
+        'input-number.height.md': fields.fieldHeightMd,
+        'input-number.height.lg': fields.fieldHeightLg,
         'segmented.bg': fields.muted,
         'segmented.active-bg': fields.card,
-        'segmented.radius': fields.inputRadius,
+        'segmented.radius': fields.radius,
         'tag.bg': fields.secondary,
         'tag.color': fields.secondaryForeground,
         'tag.border': fields.border,
@@ -339,6 +341,18 @@ function readToken(theme: ThemeDocument, semanticKey: string, componentKey?: str
   return undefined;
 }
 
+function readComponentFirst(theme: ThemeDocument, componentKey: string, semanticKey?: string): string | undefined {
+  const component = theme.tokens?.components?.[componentKey];
+  if (component != null) return String(component);
+
+  if (semanticKey) {
+    const semantic = theme.tokens?.semantic?.[semanticKey];
+    if (semantic != null) return String(semantic);
+  }
+
+  return undefined;
+}
+
 export function buildDraftFromThemeDocument(theme: ThemeDocument): ThemeEditorDraft {
   const presetId = inferPresetIdFromThemeDocument(theme);
   const mode = theme.mode === 'dark' ? 'dark' : 'light';
@@ -406,26 +420,45 @@ export function buildDraftFromThemeDocument(theme: ThemeDocument): ThemeEditorDr
       buttonRadius: readToken(theme, 'border-radius', 'button.radius') ?? baseFields.buttonRadius,
       inputRadius: readToken(theme, 'border-radius', 'input.radius') ?? baseFields.inputRadius,
       cardRadius: readToken(theme, 'border-radius', 'card.radius') ?? baseFields.cardRadius,
-      fieldButtonPaddingXSm:
-        readToken(theme, 'control.padding-inline.sm', 'button.padding-inline-sm')
-        ?? baseFields.fieldButtonPaddingXSm,
-      fieldButtonPaddingXMd:
-        readToken(theme, 'control.padding-inline.md', 'button.padding-inline-md')
+      fieldPaddingSm:
+        readComponentFirst(theme, 'input.padding-inline-sm', 'control.padding-inline.sm')
+        ?? baseFields.fieldPaddingSm,
+      fieldPaddingMd:
+        readComponentFirst(theme, 'input.padding-inline-md', 'control.padding-inline.md')
         ?? readToken(theme, 'spacing-4')
-        ?? baseFields.fieldButtonPaddingXMd,
-      fieldButtonPaddingXLg:
-        readToken(theme, 'control.padding-inline.lg', 'button.padding-inline-lg')
-        ?? baseFields.fieldButtonPaddingXLg,
-      fieldButtonHeightSm:
-        readToken(theme, 'control.height.sm', 'input.height.sm')
-        ?? baseFields.fieldButtonHeightSm,
-      fieldButtonHeightMd:
-        readToken(theme, 'control.height.md', 'input.height.md')
+        ?? baseFields.fieldPaddingMd,
+      fieldPaddingLg:
+        readComponentFirst(theme, 'input.padding-inline-lg', 'control.padding-inline.lg')
+        ?? baseFields.fieldPaddingLg,
+      buttonPaddingSm:
+        readComponentFirst(theme, 'button.padding-inline-sm', 'control.padding-inline.sm')
+        ?? baseFields.buttonPaddingSm,
+      buttonPaddingMd:
+        readComponentFirst(theme, 'button.padding-inline-md', 'control.padding-inline.md')
+        ?? baseFields.buttonPaddingMd,
+      buttonPaddingLg:
+        readComponentFirst(theme, 'button.padding-inline-lg', 'control.padding-inline.lg')
+        ?? baseFields.buttonPaddingLg,
+      fieldHeightSm:
+        readComponentFirst(theme, 'input.height.sm', 'control.height.sm')
+        ?? baseFields.fieldHeightSm,
+      fieldHeightMd:
+        readComponentFirst(theme, 'input.height.md', 'control.height.md')
+        ?? readToken(theme, 'height-md')
+        ?? baseFields.fieldHeightMd,
+      fieldHeightLg:
+        readComponentFirst(theme, 'input.height.lg', 'control.height.lg')
+        ?? baseFields.fieldHeightLg,
+      buttonHeightSm:
+        readComponentFirst(theme, 'button.height.sm', 'control.height.sm')
+        ?? baseFields.buttonHeightSm,
+      buttonHeightMd:
+        readComponentFirst(theme, 'button.height.md', 'control.height.md')
         ?? readToken(theme, 'height-md')
-        ?? baseFields.fieldButtonHeightMd,
-      fieldButtonHeightLg:
-        readToken(theme, 'control.height.lg', 'input.height.lg')
-        ?? baseFields.fieldButtonHeightLg,
+        ?? baseFields.buttonHeightMd,
+      buttonHeightLg:
+        readComponentFirst(theme, 'button.height.lg', 'control.height.lg')
+        ?? baseFields.buttonHeightLg,
       cardPadding: readToken(theme, 'spacing-5', 'card.body-padding') ?? baseFields.cardPadding,
     },
   };
diff --git a/apps/docs/src/containers/theme-studio/theme-studio.scss b/apps/docs/src/containers/theme-studio/theme-studio.scss
index f8754357..74cc4dbc 100644
--- a/apps/docs/src/containers/theme-studio/theme-studio.scss
+++ b/apps/docs/src/containers/theme-studio/theme-studio.scss
@@ -231,6 +231,18 @@
   gap: 8px;
 }
 
+.theme-studio__subgroup-title {
+  display: block;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--editor-muted-foreground);
+}
+
 .theme-studio__field {
   display: block;
 }
@@ -413,6 +425,7 @@
 }
 
 .theme-studio__advanced-collapse {
+  margin-bottom: 12px;
   border: 1px solid var(--ty-color-border-secondary, var(--ty-color-border));
   border-radius: 12px;
   background: linear-gradient(
@@ -639,8 +652,7 @@
   margin: 0;
 }
 
-.theme-studio__cards-panel .ty-input,
-.theme-studio__cards-panel .ty-textarea {
+.theme-studio__cards-panel .ty-input {
   width: 100%;
 }
 
@@ -930,11 +942,6 @@
   min-width: 78px;
 }
 
-.theme-studio__cards-panel .ty-input,
-.theme-studio__cards-panel .ty-textarea {
-  font-size: 12px;
-}
-
 .theme-studio__cards-panel .ty-radio {
   align-items: flex-start;
 }
diff --git a/apps/docs/src/containers/theme-studio/tweakcn-runtime-presets.ts b/apps/docs/src/containers/theme-studio/tweakcn-runtime-presets.ts
index 444367ef..033345ef 100644
--- a/apps/docs/src/containers/theme-studio/tweakcn-runtime-presets.ts
+++ b/apps/docs/src/containers/theme-studio/tweakcn-runtime-presets.ts
@@ -41,7 +41,7 @@ export const TWEAKCN_RUNTIME_PRESET_SOURCES: TweakcnRuntimePresetSource[] = [
         "chart-3": "#52c41a",
         "chart-4": "#ff9800",
         "chart-5": "#f44336",
-        "radius": "0.625rem",
+        "radius": "0.3rem",
         "sidebar": "#fafafa",
         "sidebar-foreground": "rgba(0, 0, 0, 0.85)",
         "sidebar-primary": "#6e41bf",
@@ -93,7 +93,7 @@ export const TWEAKCN_RUNTIME_PRESET_SOURCES: TweakcnRuntimePresetSource[] = [
         "chart-3": "#49aa19",
         "chart-4": "#d89614",
         "chart-5": "#d32029",
-        "radius": "0.625rem",
+        "radius": "0.3rem",
         "sidebar": "#1f1f1f",
         "sidebar-foreground": "rgba(255, 255, 255, 0.85)",
         "sidebar-primary": "#9065d0",
diff --git a/apps/docs/src/containers/theme-studio/types.ts b/apps/docs/src/containers/theme-studio/types.ts
index f97417c0..173db777 100644
--- a/apps/docs/src/containers/theme-studio/types.ts
+++ b/apps/docs/src/containers/theme-studio/types.ts
@@ -57,12 +57,18 @@ export interface ThemeEditorFields {
   buttonRadius: string;
   inputRadius: string;
   cardRadius: string;
-  fieldButtonPaddingXSm: string;
-  fieldButtonPaddingXMd: string;
-  fieldButtonPaddingXLg: string;
-  fieldButtonHeightSm: string;
-  fieldButtonHeightMd: string;
-  fieldButtonHeightLg: string;
+  fieldPaddingSm: string;
+  fieldPaddingMd: string;
+  fieldPaddingLg: string;
+  buttonPaddingSm: string;
+  buttonPaddingMd: string;
+  buttonPaddingLg: string;
+  fieldHeightSm: string;
+  fieldHeightMd: string;
+  fieldHeightLg: string;
+  buttonHeightSm: string;
+  buttonHeightMd: string;
+  buttonHeightLg: string;
   cardPadding: string;
 }
 
@@ -92,7 +98,7 @@ export type SliderFieldConfig = {
   min: number;
   max: number;
   step: number;
-  unit?: 'px' | 'em';
+  unit?: 'px' | 'em' | 'rem';
 };
 
 export type ThemeEditorColorGroup = {
diff --git a/packages/react/src/avatar/style/index.scss b/packages/react/src/avatar/style/index.scss
index 4086b4ad..3a0e63e5 100755
--- a/packages/react/src/avatar/style/index.scss
+++ b/packages/react/src/avatar/style/index.scss
@@ -12,6 +12,7 @@
   position: relative;
   vertical-align: middle;
   user-select: none;
+  flex-shrink: 0;
   border: var(--ty-avatar-border-width) solid var(--ty-avatar-border);
 
   &__img {
diff --git a/packages/react/src/date-picker/style/index.scss b/packages/react/src/date-picker/style/index.scss
index eb7ef8bb..74ef3038 100755
--- a/packages/react/src/date-picker/style/index.scss
+++ b/packages/react/src/date-picker/style/index.scss
@@ -33,17 +33,21 @@ $dp: #{$prefix}-date-picker;
 
   &__input-field {
     flex: 1;
+    margin: 0;
+    padding: 0;
     border: none;
     outline: none;
     background: transparent;
     font-size: inherit;
     font-family: inherit;
+    line-height: inherit;
     color: var(--ty-picker-input-color);
     cursor: pointer;
     min-width: var(--ty-picker-input-min-width-date-md);
 
     &::placeholder {
-      color: var(--ty-picker-input-color-placeholder);
+      color: var(--ty-input-placeholder, var(--ty-picker-input-color-placeholder, var(--ty-color-text-placeholder)));
+      opacity: 1;
     }
 
     &:disabled {
diff --git a/packages/react/src/radio/style/index.scss b/packages/react/src/radio/style/index.scss
index 59eaee5e..38a7f57d 100644
--- a/packages/react/src/radio/style/index.scss
+++ b/packages/react/src/radio/style/index.scss
@@ -23,6 +23,7 @@
   &__inner {
     box-sizing: border-box;
     display: flex;
+    flex-shrink: 0;
     width: var(--ty-radio-size, 16px);
     height: var(--ty-radio-size, 16px);
     border-radius: 100%;
diff --git a/packages/react/src/switch/style/index.scss b/packages/react/src/switch/style/index.scss
index 38a6e357..2611a1b8 100644
--- a/packages/react/src/switch/style/index.scss
+++ b/packages/react/src/switch/style/index.scss
@@ -5,6 +5,7 @@
   display: inline-block;
   box-sizing: border-box;
   position: relative;
+  flex-shrink: 0;
   cursor: pointer;
 
   &__bg {
diff --git a/packages/react/src/table/style/index.scss b/packages/react/src/table/style/index.scss
index e3e2b88d..110f916b 100644
--- a/packages/react/src/table/style/index.scss
+++ b/packages/react/src/table/style/index.scss
@@ -8,6 +8,12 @@
     overflow-x: auto;
   }
 
+  &_bordered &__wrapper {
+    border: 1px solid var(--ty-table-border);
+    border-radius: var(--ty-table-radius, var(--ty-border-radius));
+    overflow: hidden;
+  }
+
   &__table {
     width: 100%;
     border-collapse: collapse;
@@ -15,11 +21,13 @@
   }
 
   &_bordered &__table {
-    border: 1px solid var(--ty-table-border);
+    border-collapse: separate;
+    border-spacing: 0;
   }
 
   &_bordered &__cell {
-    border: 1px solid var(--ty-table-border);
+    border-right: 1px solid var(--ty-table-border);
+    border-bottom: 1px solid var(--ty-table-border);
   }
 
   &_sm &__cell {
@@ -55,6 +63,18 @@
     }
   }
 
+  &_bordered &__row .#{$prefix}-table__cell:last-child {
+    border-right: 0;
+  }
+
+  &_bordered &__thead tr .#{$prefix}-table__cell:last-child {
+    border-right: 0;
+  }
+
+  &_bordered &__tbody .#{$prefix}-table__row:last-child .#{$prefix}-table__cell {
+    border-bottom: 0;
+  }
+
   &__cell {
     text-align: left;
     vertical-align: middle;
diff --git a/packages/react/src/time-picker/style/index.scss b/packages/react/src/time-picker/style/index.scss
index 3be2101a..6f0861c4 100755
--- a/packages/react/src/time-picker/style/index.scss
+++ b/packages/react/src/time-picker/style/index.scss
@@ -37,17 +37,21 @@ $tp: #{$prefix}-time-picker;
 
   &__input-field {
     flex: 1;
+    margin: 0;
+    padding: 0;
     border: none;
     outline: none;
     background: transparent;
     font-size: inherit;
     font-family: inherit;
+    line-height: inherit;
     color: var(--ty-picker-input-color);
     cursor: pointer;
     min-width: var(--ty-picker-input-min-width-time-md);
 
     &::placeholder {
-      color: var(--ty-picker-input-color-placeholder);
+      color: var(--ty-input-placeholder, var(--ty-picker-input-color-placeholder, var(--ty-color-text-placeholder)));
+      opacity: 1;
     }
 
     &:disabled {
diff --git a/packages/tokens/scss/themes/_dark.scss b/packages/tokens/scss/themes/_dark.scss
index 6df5a485..6ee08c9f 100644
--- a/packages/tokens/scss/themes/_dark.scss
+++ b/packages/tokens/scss/themes/_dark.scss
@@ -425,8 +425,8 @@ $dark-theme: (
   // ---- Sizing ----
   border-radius: 2px,
   height-sm: 24px,
-  height-md: 32px,
-  height-lg: 42px,
+  height-md: 35px,
+  height-lg: 44px,
   spacer: 1rem,
 
   // ---- Chart ----
diff --git a/packages/tokens/scss/themes/_light.scss b/packages/tokens/scss/themes/_light.scss
index 27016f60..d143ffe4 100644
--- a/packages/tokens/scss/themes/_light.scss
+++ b/packages/tokens/scss/themes/_light.scss
@@ -425,8 +425,8 @@ $light-theme: (
   // ---- Sizing ----
   border-radius: 2px,
   height-sm: 24px,
-  height-md: 32px,
-  height-lg: 42px,
+  height-md: 35px,
+  height-lg: 44px,
   spacer: 1rem,
 
   // ---- Chart ----
diff --git a/packages/tokens/source/components/button.json b/packages/tokens/source/components/button.json
index 0e72ddb9..b802c52f 100644
--- a/packages/tokens/source/components/button.json
+++ b/packages/tokens/source/components/button.json
@@ -86,12 +86,12 @@
     "description": "Small button inline padding."
   },
   "button.padding-inline-md": {
-    "$value": "{control.padding-inline.md}",
+    "$value": "15px",
     "$type": "dimension",
     "description": "Medium button inline padding."
   },
   "button.padding-inline-lg": {
-    "$value": "{control.padding-inline.lg}",
+    "$value": "20px",
     "$type": "dimension",
     "description": "Large button inline padding."
   },
diff --git a/packages/tokens/source/components/checkbox.json b/packages/tokens/source/components/checkbox.json
index 213d26e0..bcb07dfc 100644
--- a/packages/tokens/source/components/checkbox.json
+++ b/packages/tokens/source/components/checkbox.json
@@ -5,7 +5,7 @@
     "description": "Checkbox control size."
   },
   "checkbox.radius": {
-    "$value": "2px",
+    "$value": "{border-radius}",
     "$type": "dimension",
     "description": "Checkbox control border radius."
   },
diff --git a/packages/tokens/source/components/table.json b/packages/tokens/source/components/table.json
index bc26da74..e7d4b7e6 100644
--- a/packages/tokens/source/components/table.json
+++ b/packages/tokens/source/components/table.json
@@ -28,6 +28,11 @@
     "$type": "color",
     "description": "Table border color."
   },
+  "table.radius": {
+    "$value": "{border-radius}",
+    "$type": "dimension",
+    "description": "Table border radius."
+  },
   "table.cell-padding.sm": {
     "$value": "8px",
     "$type": "dimension",
diff --git a/packages/tokens/source/semantic/size.json b/packages/tokens/source/semantic/size.json
index b3bef0cc..6a325aa9 100644
--- a/packages/tokens/source/semantic/size.json
+++ b/packages/tokens/source/semantic/size.json
@@ -5,12 +5,12 @@
     "description": "Small control height."
   },
   "height-md": {
-    "$value": "32px",
+    "$value": "35px",
     "$type": "dimension",
     "description": "Medium control height."
   },
   "height-lg": {
-    "$value": "40px",
+    "$value": "44px",
     "$type": "dimension",
     "description": "Large control height."
   },

From 2bd02dd62e5fe736c384b123676731ec44283a35 Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Thu, 9 Apr 2026 12:27:07 +1000
Subject: [PATCH 04/12] fix: component styles

---
 apps/docs/public/llms.txt                     |   2 +-
 .../src/containers/home/theme-showcase.tsx    |  10 +-
 .../src/containers/theme-studio/index.tsx     |  17 ++-
 .../theme-studio/preview-components.tsx       | 143 ++++++++----------
 .../theme-studio/sidebar-content.tsx          |  52 +++----
 .../containers/theme-studio/theme-studio.scss |  15 +-
 packages/react/src/button/demo/Group.tsx      |   6 +-
 .../__tests__/color-picker.test.tsx           |  57 ++++++-
 .../react/src/color-picker/color-picker.tsx   |  75 +++++++--
 .../react/src/color-picker/demo/Format.tsx    |   5 +-
 .../react/src/color-picker/demo/Oklch.tsx     |  28 ++++
 packages/react/src/color-picker/index.md      |  24 ++-
 .../react/src/color-picker/index.zh_CN.md     |  24 ++-
 .../react/src/color-picker/style/index.scss   |   2 +-
 packages/react/src/color-picker/types.ts      |  11 +-
 packages/react/src/color-picker/utils.ts      |  69 ++++++++-
 .../react/src/grid/demo/DashboardShell.tsx    |  36 ++---
 .../react/src/grid/demo/ExplicitColumns.tsx   |  14 +-
 packages/react/src/grid/demo/NamedAreas.tsx   |  14 +-
 packages/react/src/grid/demo/OffsetAuto.tsx   |   6 +-
 .../react/src/grid/demo/ResponsiveLayout.tsx  |   6 +-
 packages/react/src/index.ts                   |   1 +
 packages/react/src/tag/demo/Color.tsx         |  12 +-
 packages/react/src/tag/demo/Variant.tsx       |  26 ++--
 .../typography/__tests__/typography.test.tsx  |  69 ++++++++-
 .../react/src/typography/demo/Advanced.tsx    |  25 +++
 packages/react/src/typography/demo/Basic.tsx  |   6 +-
 .../react/src/typography/demo/Heading.tsx     |   6 +-
 packages/react/src/typography/demo/Text.tsx   |   6 +-
 packages/react/src/typography/index.md        |  31 +++-
 packages/react/src/typography/index.tsx       |   1 +
 packages/react/src/typography/index.zh_CN.md  |  31 +++-
 packages/react/src/typography/paragraph.tsx   |  58 ++++++-
 .../react/src/typography/style/index.scss     |  85 ++++++++++-
 packages/react/src/typography/text.tsx        | 122 +++++++++++++--
 packages/react/src/typography/types.ts        |  33 ++++
 packages/react/src/typography/typography.tsx  |   2 +-
 packages/react/src/typography/utils.ts        |  49 ++++++
 38 files changed, 910 insertions(+), 269 deletions(-)
 create mode 100644 packages/react/src/color-picker/demo/Oklch.tsx
 create mode 100644 packages/react/src/typography/demo/Advanced.tsx
 create mode 100644 packages/react/src/typography/utils.ts

diff --git a/apps/docs/public/llms.txt b/apps/docs/public/llms.txt
index a98fce60..5f0da6f8 100644
--- a/apps/docs/public/llms.txt
+++ b/apps/docs/public/llms.txt
@@ -62,7 +62,7 @@ Components that accept sizes use: `'sm' | 'md' | 'lg'`
 - **Button** — Trigger operations. Props: `btnType` (`'default'|'primary'|'outline'|'ghost'|'link'|'info'|'danger'|'warning'|'success'`), `loading`, `disabled`, `block`, `size`, `round`, `icon`. Also: `Button.Group`.
 - **Image** — Display images with preview support.
 - **Link** — Styled anchor element.
-- **Typography** — Headings, body text, lists. Subcomponents: `Typography.Title`, `Typography.Text`, `Typography.Paragraph`.
+- **Typography** — Headings, body text, lists. Prefer `Heading`, `Text`, `Paragraph`; compatibility entrypoints: `Typography.Heading`, `Typography.Text`, `Typography.Paragraph`.
 
 ### Layout
 - **AspectRatio** — Maintain width-to-height proportional relationship.
diff --git a/apps/docs/src/containers/home/theme-showcase.tsx b/apps/docs/src/containers/home/theme-showcase.tsx
index 7d20075d..8c0fb5a2 100644
--- a/apps/docs/src/containers/home/theme-showcase.tsx
+++ b/apps/docs/src/containers/home/theme-showcase.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Typography, Button, Marquee } from '@tiny-design/react';
+import { Button, Heading, Marquee, Paragraph } from '@tiny-design/react';
 import {
   buildThemeDocumentFromDraft,
   getPresetDraft,
@@ -76,12 +76,12 @@ export const ThemeShowcase = (): React.ReactElement => {
 
   return (
     <div className="home__section home__theme-showcase">
-      <Typography.Heading level={1} className="home__feature-title">
+      <Heading level={1} className="home__feature-title">
         {s.home.themeShowcase}
-      </Typography.Heading>
-      <Typography.Paragraph className="home__theme-showcase-desc">
+      </Heading>
+      <Paragraph className="home__theme-showcase-desc">
         {s.home.themeShowcaseDesc}
-      </Typography.Paragraph>
+      </Paragraph>
 
       <div className="home__marquee-container">
         <Marquee duration={50} pauseOnHover>
diff --git a/apps/docs/src/containers/theme-studio/index.tsx b/apps/docs/src/containers/theme-studio/index.tsx
index 31ed0408..44c0b101 100644
--- a/apps/docs/src/containers/theme-studio/index.tsx
+++ b/apps/docs/src/containers/theme-studio/index.tsx
@@ -4,10 +4,11 @@ import {
   Button,
   ConfigProvider,
   Modal,
+  Paragraph,
   Segmented,
   Select,
+  Text,
   Textarea,
-  Typography,
   useTheme,
 } from '@tiny-design/react';
 import {
@@ -137,7 +138,7 @@ const ThemeStudioPage = (): React.ReactElement => {
       >
         <div className="theme-studio__topbar">
           <div className="theme-studio__topbar-copy">
-            <Typography.Text className="theme-studio__eyebrow">Theme Editor</Typography.Text>
+            <Text className="theme-studio__eyebrow">Theme Editor</Text>
             <div className="theme-studio__topbar-meta">
               <span>{activePreset.name}</span>
               <span>{THEME_EDITOR_PRESETS.length} presets</span>
@@ -213,10 +214,10 @@ const ThemeStudioPage = (): React.ReactElement => {
           }}
         >
           <div className="theme-studio__modal-copy">
-            <Typography.Paragraph>
+            <Paragraph>
               Paste a Tiny theme document JSON export to replace the current global theme.
-            </Typography.Paragraph>
-            <Typography.Text type="secondary">Preset selection and all editor controls will sync to the imported values.</Typography.Text>
+            </Paragraph>
+            <Text type="secondary">Preset selection and all editor controls will sync to the imported values.</Text>
           </div>
           <Textarea
             rows={16}
@@ -224,7 +225,7 @@ const ThemeStudioPage = (): React.ReactElement => {
             value={importText}
             onChange={(next) => setImportText(next)}
           />
-          {importError ? <Typography.Paragraph className="theme-studio__error">{importError}</Typography.Paragraph> : null}
+          {importError ? <Paragraph className="theme-studio__error">{importError}</Paragraph> : null}
         </Modal>
 
         <Modal
@@ -245,8 +246,8 @@ const ThemeStudioPage = (): React.ReactElement => {
         >
           <div className="theme-studio__code-head">
             <div>
-              <Typography.Text strong>Output</Typography.Text>
-              <Typography.Text type="secondary">{activePreset.name} · {status}</Typography.Text>
+              <Text strong>Output</Text>
+              <Text type="secondary">{activePreset.name} · {status}</Text>
             </div>
             <Segmented
               options={CODE_VIEW_OPTIONS}
diff --git a/apps/docs/src/containers/theme-studio/preview-components.tsx b/apps/docs/src/containers/theme-studio/preview-components.tsx
index c699500e..d497f969 100644
--- a/apps/docs/src/containers/theme-studio/preview-components.tsx
+++ b/apps/docs/src/containers/theme-studio/preview-components.tsx
@@ -18,8 +18,10 @@ import {
   Table,
   Tag,
   Textarea,
-  Typography,
   Calendar,
+  Heading,
+  Paragraph,
+  Text,
 } from '@tiny-design/react';
 import {
   ChartContainer,
@@ -222,11 +224,11 @@ function CardsPreview(): React.ReactElement {
             <Card.Content>
               <div className="theme-studio__cards-panel-head">
                 <div>
-                  <Typography.Text strong>Total Revenue</Typography.Text>
-                  <Typography.Text type="secondary">+20.1% from last month</Typography.Text>
+                  <Text strong>Total Revenue</Text>
+                  <Text type="secondary">+20.1% from last month</Text>
                 </div>
               </div>
-              <Typography.Heading level={2}>$15,231.89</Typography.Heading>
+              <Heading level={2}>$15,231.89</Heading>
               <ChartContainer config={cardsRevenueChartConfig} style={{ height: 72, width: '100%' }}>
                 <LineChart data={cardsRevenueData} margin={{ top: 10, right: 6, left: -22, bottom: 0 }}>
                   <XAxis dataKey="month" hide />
@@ -248,11 +250,11 @@ function CardsPreview(): React.ReactElement {
             <Card.Content>
               <div className="theme-studio__cards-panel-head">
                 <div>
-                  <Typography.Text strong>Subscriptions</Typography.Text>
-                  <Typography.Text type="secondary">+180.1% from last month</Typography.Text>
+                  <Text strong>Subscriptions</Text>
+                  <Text type="secondary">+180.1% from last month</Text>
                 </div>
               </div>
-              <Typography.Heading level={2}>+2,350</Typography.Heading>
+              <Heading level={2}>+2,350</Heading>
               <ChartContainer config={subscriptionsChartConfig} style={{ height: 72, width: '100%' }}>
                 <AreaChart data={subscriptionsData} margin={{ top: 8, right: 4, left: -18, bottom: 0 }}>
                   <defs>
@@ -280,10 +282,10 @@ function CardsPreview(): React.ReactElement {
         <Card className="theme-studio__cards-panel">
           <Card.Content>
             <div className="theme-studio__cards-copy-block">
-              <Typography.Text strong>Upgrade your subscription</Typography.Text>
-              <Typography.Text type="secondary">
+              <Text strong>Upgrade your subscription</Text>
+              <Text type="secondary">
                 You are currently on the free plan. Upgrade to the pro plan to get access to all features.
-              </Typography.Text>
+              </Text>
             </div>
             <div className="theme-studio__form-stack">
               <Flex gap="sm">
@@ -329,8 +331,8 @@ function CardsPreview(): React.ReactElement {
         <Card className="theme-studio__cards-panel">
           <Card.Content>
             <div className="theme-studio__cards-copy-block">
-              <Typography.Text strong>Team Members</Typography.Text>
-              <Typography.Text type="secondary">Invite your team members to collaborate.</Typography.Text>
+              <Text strong>Team Members</Text>
+              <Text type="secondary">Invite your team members to collaborate.</Text>
             </div>
             <div className="theme-studio__member-list">
               {[
@@ -341,8 +343,8 @@ function CardsPreview(): React.ReactElement {
                 <div key={name} className="theme-studio__member-row">
                   <Avatar>{name.charAt(0)}</Avatar>
                   <div className="theme-studio__member-copy">
-                    <Typography.Text strong>{name}</Typography.Text>
-                    <Typography.Text type="secondary">{email}</Typography.Text>
+                    <Text strong>{name}</Text>
+                    <Text type="secondary">{email}</Text>
                   </div>
                   <Select defaultValue={role.toLowerCase()} size="sm" className="theme-studio__cards-member-select">
                     <Select.Option value="owner">Owner</Select.Option>
@@ -358,25 +360,25 @@ function CardsPreview(): React.ReactElement {
         <Card className="theme-studio__cards-panel">
           <Card.Content>
             <div className="theme-studio__cards-copy-block">
-              <Typography.Text strong>Cookie Settings</Typography.Text>
-              <Typography.Text type="secondary">Manage your cookie settings here.</Typography.Text>
+              <Text strong>Cookie Settings</Text>
+              <Text type="secondary">Manage your cookie settings here.</Text>
             </div>
             <div className="theme-studio__settings-list">
               <div className="theme-studio__settings-row">
                 <div>
-                  <Typography.Text strong>Strictly Necessary</Typography.Text>
-                  <Typography.Text type="secondary">These cookies are essential in order to use the website and use its features.</Typography.Text>
+                  <Text strong>Strictly Necessary</Text>
+                  <Text type="secondary">These cookies are essential in order to use the website and use its features.</Text>
                 </div>
                 <Switch defaultChecked />
               </div>
               <div className="theme-studio__settings-row">
                 <div>
-                  <Typography.Text strong>Functional Cookies</Typography.Text>
-                  <Typography.Text type="secondary">These cookies allow the website to provide personalized functionality.</Typography.Text>
+                  <Text strong>Functional Cookies</Text>
+                  <Text type="secondary">These cookies allow the website to provide personalized functionality.</Text>
                 </div>
                 <Switch />
               </div>
-              <Button btnType="primary">Save preferences</Button>
+              <Button btnType="primary" size='lg'>Save preferences</Button>
             </div>
           </Card.Content>
         </Card>
@@ -391,8 +393,8 @@ function CardsPreview(): React.ReactElement {
           <Card className="theme-studio__cards-panel theme-studio__cards-panel_goal">
             <Card.Content>
               <div className="theme-studio__cards-copy-block">
-                <Typography.Text strong>Move Goal</Typography.Text>
-                <Typography.Text type="secondary">Set your daily activity goal.</Typography.Text>
+                <Text strong>Move Goal</Text>
+                <Text type="secondary">Set your daily activity goal.</Text>
               </div>
               <div className="theme-studio__cards-goal-header">
                 <Button size="sm" className="theme-studio__cards-goal-circle">-</Button>
@@ -420,8 +422,8 @@ function CardsPreview(): React.ReactElement {
         <Card className="theme-studio__cards-panel">
           <Card.Content>
             <div className="theme-studio__cards-copy-block">
-              <Typography.Text strong>Create an account</Typography.Text>
-              <Typography.Text type="secondary">Enter your email below to create your account</Typography.Text>
+              <Text strong>Create an account</Text>
+              <Text type="secondary">Enter your email below to create your account</Text>
             </div>
             <div className="theme-studio__cards-auth-actions">
               <Button><IconGithub /> GitHub</Button>
@@ -441,8 +443,8 @@ function CardsPreview(): React.ReactElement {
             <div className="theme-studio__member-row theme-studio__member-row_compact">
               <Avatar>S</Avatar>
               <div className="theme-studio__member-copy">
-                <Typography.Text strong>Sofia Davis</Typography.Text>
-                <Typography.Text type="secondary">m@example.com</Typography.Text>
+                <Text strong>Sofia Davis</Text>
+                <Text type="secondary">m@example.com</Text>
               </div>
             </div>
             <div className="theme-studio__chat-thread">
@@ -465,25 +467,8 @@ function CardsPreview(): React.ReactElement {
 
         <Card className="theme-studio__cards-inline-card">
           <Card.Content>
-            <div className="theme-studio__cards-inline-card-head">
-              <Typography.Text strong>tweakcn</Typography.Text>
-              <Button size="sm" btnType="ghost">Star</Button>
-            </div>
-            <Typography.Text type="secondary">
-              A visual editor for shadcn/ui components with beautiful themes. Accessible. Customizable. Open Source.
-            </Typography.Text>
-            <div className="theme-studio__cards-meta-row">
-              <Tag>TypeScript</Tag>
-              <Typography.Text type="secondary">20k</Typography.Text>
-              <Typography.Text type="secondary">Updated April 2023</Typography.Text>
-            </div>
-          </Card.Content>
-        </Card>
-
-        <Card className="theme-studio__cards-inline-card">
-          <Card.Content>
-            <Typography.Heading level={5}>Date picker with range</Typography.Heading>
-            <Typography.Text type="secondary">Select a date range.</Typography.Text>
+            <Text>Date picker with range</Text>
+            <Text type="secondary">Select a date range.</Text>
             <DatePicker range defaultValue={[new Date(2022, 0, 20), new Date(2022, 1, 9)]} />
           </Card.Content>
         </Card>
@@ -491,10 +476,10 @@ function CardsPreview(): React.ReactElement {
         <Card className="theme-studio__cards-panel">
           <Card.Content>
             <div className="theme-studio__cards-copy-block">
-              <Typography.Text strong>Exercise Minutes</Typography.Text>
-              <Typography.Text type="secondary">
+              <Text strong>Exercise Minutes</Text>
+              <Text type="secondary">
                 Your exercise minutes are ahead of where you normally are.
-              </Typography.Text>
+              </Text>
             </div>
             <ChartContainer config={cardsExerciseChartConfig} style={{ height: 146, width: '100%' }}>
               <LineChart data={cardsExerciseData} margin={{ top: 8, right: 4, left: -22, bottom: 0 }}>
@@ -548,8 +533,8 @@ function DashboardPreview(): React.ReactElement {
           <div className="theme-studio__sidebar-brand">
             <Avatar>TD</Avatar>
             <div>
-              <Typography.Text strong>Tiny Theme</Typography.Text>
-              <Typography.Text className="theme-studio__sidebar-subtle">Dashboard</Typography.Text>
+              <Text strong>Tiny Theme</Text>
+              <Text className="theme-studio__sidebar-subtle">Dashboard</Text>
             </div>
           </div>
           <div className="theme-studio__sidebar-section-label">Workspace</div>
@@ -563,8 +548,8 @@ function DashboardPreview(): React.ReactElement {
             </Button>
           ))}
           <div className="theme-studio__dashboard-sidebar-footer">
-            <Typography.Text strong>Live Sync</Typography.Text>
-            <Typography.Text className="theme-studio__sidebar-subtle">Theme changes are applied across docs in real time.</Typography.Text>
+            <Text strong>Live Sync</Text>
+            <Text className="theme-studio__sidebar-subtle">Theme changes are applied across docs in real time.</Text>
           </div>
         </Card.Content>
       </Card>
@@ -572,8 +557,8 @@ function DashboardPreview(): React.ReactElement {
       <div className="theme-studio__dashboard-main">
         <div className="theme-studio__dashboard-top">
           <div>
-            <Typography.Text className="theme-studio__eyebrow">Dashboard</Typography.Text>
-            <Typography.Heading level={3}>Revenue snapshot</Typography.Heading>
+            <Text className="theme-studio__eyebrow">Dashboard</Text>
+            <Heading level={3}>Revenue snapshot</Heading>
             <div className="theme-studio__pill-row">
               <Tag color="success">Healthy</Tag>
               <Tag color="info">Synced</Tag>
@@ -601,8 +586,8 @@ function DashboardPreview(): React.ReactElement {
           <Card title="Overview" className="theme-studio__preview-card">
             <Card.Content>
               <div className="theme-studio__card-kicker-row">
-                <Typography.Text strong>$7.6k</Typography.Text>
-                <Typography.Text type="secondary">vs $6.6k target</Typography.Text>
+                <Text strong>$7.6k</Text>
+                <Text type="secondary">vs $6.6k target</Text>
               </div>
               <ChartContainer config={revenueChartConfig} style={{ height: 260, width: '100%' }}>
                 <AreaChart data={revenueData} margin={{ top: 12, right: 8, left: -18, bottom: 0 }}>
@@ -633,7 +618,7 @@ function DashboardPreview(): React.ReactElement {
             <Card.Content>
               <Flex vertical gap="sm">
                 <div>
-                  <Typography.Text strong>Accessibility</Typography.Text>
+                  <Text strong>Accessibility</Text>
                   <Progress.Bar percent={84} />
                 </div>
                 <Alert type="success" title="Contrast is healthy across key actions." />
@@ -653,8 +638,8 @@ function DashboardPreview(): React.ReactElement {
                 ].map(([name, value, meta]) => (
                   <div key={name} className="theme-studio__member-row">
                     <div className="theme-studio__member-copy">
-                      <Typography.Text strong>{name}</Typography.Text>
-                      <Typography.Text type="secondary">{meta}</Typography.Text>
+                      <Text strong>{name}</Text>
+                      <Text type="secondary">{meta}</Text>
                     </div>
                     <Tag>{value}</Tag>
                   </div>
@@ -675,8 +660,8 @@ function MailPreview(): React.ReactElement {
         <Card.Content>
           <div className="theme-studio__mail-sidebar-head">
             <div>
-              <Typography.Text className="theme-studio__eyebrow">Mailbox</Typography.Text>
-              <Typography.Heading level={4}>Studio Mail</Typography.Heading>
+              <Text className="theme-studio__eyebrow">Mailbox</Text>
+              <Heading level={4}>Studio Mail</Heading>
             </div>
             <Button btnType="primary" style={{ width: '100%' }}>Compose</Button>
           </div>
@@ -701,7 +686,7 @@ function MailPreview(): React.ReactElement {
           </div>
 
           <div className="theme-studio__mail-labels">
-            <Typography.Text strong>Labels</Typography.Text>
+            <Text strong>Labels</Text>
             <Flex gap="sm" wrap>
               <Tag color="info">Design</Tag>
               <Tag color="success">Work</Tag>
@@ -754,8 +739,8 @@ function MailPreview(): React.ReactElement {
             <div className="theme-studio__mail-message-meta">
               <Avatar>S</Avatar>
               <div>
-                <Typography.Text strong>Re: New message</Typography.Text>
-                <Typography.Text type="secondary">support@tiny.design</Typography.Text>
+                <Text strong>Re: New message</Text>
+                <Text type="secondary">support@tiny.design</Text>
               </div>
             </div>
             <div className="theme-studio__mail-message-actions">
@@ -799,9 +784,9 @@ function PricingPreview(): React.ReactElement {
     <div className="theme-studio__preview-stack">
       <div className="theme-studio__pricing-hero">
         <div>
-          <Typography.Text className="theme-studio__eyebrow">Pricing</Typography.Text>
-          <Typography.Heading level={2}>Simple pricing for modern teams</Typography.Heading>
-          <Typography.Paragraph>Choose a plan that scales from solo work to multi-product organizations.</Typography.Paragraph>
+          <Text className="theme-studio__eyebrow">Pricing</Text>
+          <Heading level={2}>Simple pricing for modern teams</Heading>
+          <Paragraph>Choose a plan that scales from solo work to multi-product organizations.</Paragraph>
           <div className="theme-studio__pill-row">
             <Tag color="success">No setup fee</Tag>
             <Tag>Cancel anytime</Tag>
@@ -829,16 +814,16 @@ function PricingPreview(): React.ReactElement {
             <Card.Content>
               <div className="theme-studio__pricing-card-head">
                 {plan.featured ? <Tag color="success">Popular</Tag> : null}
-                <Typography.Text strong>{plan.name}</Typography.Text>
+                <Text strong>{plan.name}</Text>
               </div>
               <div className="theme-studio__pricing-price">
-                <Typography.Heading level={2}>{plan.price}</Typography.Heading>
-                <Typography.Text type="secondary">Per workspace / month</Typography.Text>
+                <Heading level={2}>{plan.price}</Heading>
+                <Text type="secondary">Per workspace / month</Text>
               </div>
-              <Typography.Paragraph>{plan.description}</Typography.Paragraph>
+              <Paragraph>{plan.description}</Paragraph>
               <div className="theme-studio__pricing-feature-list">
                 {plan.features.map((feature) => (
-                  <Typography.Text key={feature}>{feature}</Typography.Text>
+                  <Text key={feature}>{feature}</Text>
                 ))}
               </div>
               <div className="theme-studio__pricing-card-footer">
@@ -854,12 +839,12 @@ function PricingPreview(): React.ReactElement {
           <Card.Content>
             <div className="theme-studio__faq-list">
               <div className="theme-studio__faq-item">
-                <Typography.Text strong>Can I cancel anytime?</Typography.Text>
-                <Typography.Text type="secondary">Yes. Plans can be changed or canceled without lock-in.</Typography.Text>
+                <Text strong>Can I cancel anytime?</Text>
+                <Text type="secondary">Yes. Plans can be changed or canceled without lock-in.</Text>
               </div>
               <div className="theme-studio__faq-item">
-                <Typography.Text strong>Do you offer team migration?</Typography.Text>
-                <Typography.Text type="secondary">Pro and Scale include assisted import and onboarding.</Typography.Text>
+                <Text strong>Do you offer team migration?</Text>
+                <Text type="secondary">Pro and Scale include assisted import and onboarding.</Text>
               </div>
             </div>
           </Card.Content>
@@ -868,11 +853,11 @@ function PricingPreview(): React.ReactElement {
           <Card.Content>
             <div className="theme-studio__settings-list">
               <div>
-                <Typography.Text strong>Seats</Typography.Text>
+                <Text strong>Seats</Text>
                 <Progress.Bar percent={68} />
               </div>
               <div>
-                <Typography.Text strong>Storage</Typography.Text>
+                <Text strong>Storage</Text>
                 <Progress.Bar percent={42} />
               </div>
             </div>
diff --git a/apps/docs/src/containers/theme-studio/sidebar-content.tsx b/apps/docs/src/containers/theme-studio/sidebar-content.tsx
index 53196c2a..c22cd450 100644
--- a/apps/docs/src/containers/theme-studio/sidebar-content.tsx
+++ b/apps/docs/src/containers/theme-studio/sidebar-content.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Collapse, Select, Typography } from '@tiny-design/react';
+import { Collapse, Select, Text } from '@tiny-design/react';
 import { COLOR_GROUPS, CORE_COLOR_GROUP_TITLES, FONT_OPTIONS, MONO_OPTIONS } from './editor-config';
 import { ColorField, SliderField, TextField } from './editor-fields';
 import type { FieldKey, ThemeEditorDraft, ThemeEditorSection, ThemeEditorColorGroup } from './types';
@@ -12,7 +12,7 @@ function renderColorGroups(
   return groups.map((group) => (
     <div key={group.title} className="theme-studio__group-card">
       <div className="theme-studio__group-header">
-        <Typography.Text strong>{group.title}</Typography.Text>
+        <Text strong>{group.title}</Text>
       </div>
       <div className="theme-studio__group-fields">
         {group.fields.map((field) => (
@@ -46,10 +46,10 @@ export function ThemeStudioSidebarContent({
       <div className="theme-studio__panel-stack">
         <div className="theme-studio__group-section">
           <div className="theme-studio__section-header">
-            <Typography.Text strong>Core Colors</Typography.Text>
-            <Typography.Text type="secondary">
+            <Text strong>Core Colors</Text>
+            <Text type="secondary">
               Start with brand, surfaces, feedback, and focus.
-            </Typography.Text>
+            </Text>
           </div>
           {renderColorGroups(coreColorGroups, draft, updateField)}
         </div>
@@ -64,10 +64,10 @@ export function ThemeStudioSidebarContent({
                 itemKey="advanced-colors"
                 header={(
                   <div className="theme-studio__section-header theme-studio__section-header_inline">
-                    <Typography.Text strong>Advanced Tokens</Typography.Text>
-                    <Typography.Text type="secondary">
+                    <Text strong>Advanced Tokens</Text>
+                    <Text type="secondary">
                       Card, popover, sidebar, chart.
-                    </Typography.Text>
+                    </Text>
                   </div>
                 )}
               >
@@ -86,8 +86,8 @@ export function ThemeStudioSidebarContent({
         <div className="theme-studio__group-card theme-studio__group-card_toolbar">
           <div className="theme-studio__group-toolbar theme-studio__group-toolbar_start">
             <div>
-              <Typography.Text strong>Typography System</Typography.Text>
-              <Typography.Text type="secondary">Font, scale, rhythm.</Typography.Text>
+              <Text strong>Typography System</Text>
+              <Text type="secondary">Font, scale, rhythm.</Text>
             </div>
           </div>
           <div className="theme-studio__summary-grid theme-studio__summary-grid_compact">
@@ -107,7 +107,7 @@ export function ThemeStudioSidebarContent({
         </div>
 
         <div className="theme-studio__group-card">
-          <Typography.Text strong>Font Family</Typography.Text>
+          <Text strong>Font Family</Text>
           <div className="theme-studio__type-preview-card">
             <strong style={{ fontFamily: draft.fields.fontSans }}>The quick brown fox jumps over the lazy dog.</strong>
             <code style={{ fontFamily: draft.fields.fontMono }}>const theme = &#123; mode: &quot;{draft.mode}&quot; &#125;</code>
@@ -137,7 +137,7 @@ export function ThemeStudioSidebarContent({
         </div>
 
         <div className="theme-studio__group-card">
-          <Typography.Text strong>Type Scale</Typography.Text>
+          <Text strong>Type Scale</Text>
           <SliderField label="Base Font Size" value={draft.fields.fontSizeBase} onChange={(next) => updateField('fontSizeBase', next)} config={{ min: 12, max: 20, step: 1, unit: 'px' }} />
           <SliderField label="Line Height" value={draft.fields.lineHeightBase} onChange={(next) => updateField('lineHeightBase', next)} config={{ min: 1.1, max: 2, step: 0.05 }} />
           <SliderField label="H1 Size" value={draft.fields.h1Size} onChange={(next) => updateField('h1Size', next)} config={{ min: 28, max: 64, step: 1, unit: 'px' }} />
@@ -145,7 +145,7 @@ export function ThemeStudioSidebarContent({
         </div>
 
         <div className="theme-studio__group-card">
-          <Typography.Text strong>Fine Tuning</Typography.Text>
+          <Text strong>Fine Tuning</Text>
           <SliderField label="Letter Spacing" value={draft.fields.letterSpacing} onChange={(next) => updateField('letterSpacing', next)} config={{ min: -0.08, max: 0.08, step: 0.01, unit: 'em' }} />
           <div className="theme-studio__type-preview-lines">
             <span style={{ fontSize: draft.fields.h1Size, letterSpacing: draft.fields.letterSpacing }}>Heading Preview</span>
@@ -162,8 +162,8 @@ export function ThemeStudioSidebarContent({
         <div className="theme-studio__group-card theme-studio__group-card_toolbar">
           <div className="theme-studio__group-toolbar theme-studio__group-toolbar_start">
             <div>
-              <Typography.Text strong>Surface & Shape</Typography.Text>
-              <Typography.Text type="secondary">Corners, density, elevation.</Typography.Text>
+              <Text strong>Surface & Shape</Text>
+              <Text type="secondary">Corners, density, elevation.</Text>
             </div>
           </div>
           <div className="theme-studio__summary-grid theme-studio__summary-grid_compact">
@@ -187,7 +187,7 @@ export function ThemeStudioSidebarContent({
         </div>
 
         <div className="theme-studio__group-card">
-          <Typography.Text strong>Shape</Typography.Text>
+          <Text strong>Shape</Text>
           <SliderField label="Global Radius" value={draft.fields.radius} onChange={(next) => updateField('radius', next)} config={{ min: 0, max: 2, step: 0.0625, unit: 'rem' }} />
           <SliderField label="Button Radius" value={draft.fields.buttonRadius} onChange={(next) => updateField('buttonRadius', next)} config={{ min: 0, max: 4, step: 0.0625, unit: 'rem' }} />
           <SliderField label="Input Radius" value={draft.fields.inputRadius} onChange={(next) => updateField('inputRadius', next)} config={{ min: 0, max: 2, step: 0.0625, unit: 'rem' }} />
@@ -196,11 +196,11 @@ export function ThemeStudioSidebarContent({
 
         <div className="theme-studio__group-card">
           <div className="theme-studio__section-header">
-            <Typography.Text strong>Density</Typography.Text>
-            <Typography.Text type="secondary">Tune spacing and heights for fields, buttons, and cards.</Typography.Text>
+            <Text strong>Density</Text>
+            <Text type="secondary">Tune spacing and heights for fields, buttons, and cards.</Text>
           </div>
           <div className="theme-studio__group-fields">
-            <Typography.Text className="theme-studio__subgroup-title">Fields</Typography.Text>
+            <Text className="theme-studio__subgroup-title">Fields</Text>
             <SliderField label="Field Height / Medium" value={draft.fields.fieldHeightMd} onChange={(next) => updateField('fieldHeightMd', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
             <SliderField label="Field Padding / Medium" value={draft.fields.fieldPaddingMd} onChange={(next) => updateField('fieldPaddingMd', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
             <Collapse bordered={false} className="theme-studio__advanced-collapse" defaultActiveKey={[]}>
@@ -208,8 +208,8 @@ export function ThemeStudioSidebarContent({
                 itemKey="field-density-advanced"
                 header={(
                   <div className="theme-studio__section-header theme-studio__section-header_inline">
-                    <Typography.Text strong>Advanced Sizes</Typography.Text>
-                    <Typography.Text type="secondary">Small and large field density.</Typography.Text>
+                    <Text strong>Advanced Sizes</Text>
+                    <Text type="secondary">Small and large field density.</Text>
                   </div>
                 )}
               >
@@ -222,7 +222,7 @@ export function ThemeStudioSidebarContent({
           </div>
 
           <div className="theme-studio__group-fields">
-            <Typography.Text className="theme-studio__subgroup-title">Buttons</Typography.Text>
+            <Text className="theme-studio__subgroup-title">Buttons</Text>
             <SliderField label="Button Height / Medium" value={draft.fields.buttonHeightMd} onChange={(next) => updateField('buttonHeightMd', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
             <SliderField label="Button Padding / Medium" value={draft.fields.buttonPaddingMd} onChange={(next) => updateField('buttonPaddingMd', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
             <Collapse bordered={false} className="theme-studio__advanced-collapse" defaultActiveKey={[]}>
@@ -230,8 +230,8 @@ export function ThemeStudioSidebarContent({
                 itemKey="button-density-advanced"
                 header={(
                   <div className="theme-studio__section-header theme-studio__section-header_inline">
-                    <Typography.Text strong>Advanced Sizes</Typography.Text>
-                    <Typography.Text type="secondary">Small and large button density.</Typography.Text>
+                    <Text strong>Advanced Sizes</Text>
+                    <Text type="secondary">Small and large button density.</Text>
                   </div>
                 )}
               >
@@ -244,13 +244,13 @@ export function ThemeStudioSidebarContent({
           </div>
 
           <div className="theme-studio__group-fields">
-            <Typography.Text className="theme-studio__subgroup-title">Cards</Typography.Text>
+            <Text className="theme-studio__subgroup-title">Cards</Text>
             <SliderField label="Card Padding" value={draft.fields.cardPadding} onChange={(next) => updateField('cardPadding', next)} config={{ min: 12, max: 40, step: 1, unit: 'px' }} />
           </div>
         </div>
 
         <div className="theme-studio__group-card">
-          <Typography.Text strong>Elevation & Focus</Typography.Text>
+          <Text strong>Elevation & Focus</Text>
           <div className="theme-studio__surface-preview-card">
             <div className="theme-studio__surface-proxy">Card Surface</div>
             <div className="theme-studio__focus-proxy">Focus Ring</div>
diff --git a/apps/docs/src/containers/theme-studio/theme-studio.scss b/apps/docs/src/containers/theme-studio/theme-studio.scss
index 74cc4dbc..fd11b4ae 100644
--- a/apps/docs/src/containers/theme-studio/theme-studio.scss
+++ b/apps/docs/src/containers/theme-studio/theme-studio.scss
@@ -714,7 +714,6 @@
 .theme-studio__cards-actions-end,
 .theme-studio__cards-auth-actions,
 .theme-studio__cards-share-row,
-.theme-studio__cards-inline-card-head,
 .theme-studio__cards-goal-actions {
   display: flex;
   gap: 10px;
@@ -887,10 +886,6 @@
   padding-top: 0;
 }
 
-.theme-studio__cards-inline-card.ty-card > .ty-card__body small {
-  color: var(--editor-muted-foreground);
-}
-
 .theme-studio__cards-chat-head {
   margin-bottom: 2px;
 }
@@ -899,13 +894,6 @@
   padding: 0;
 }
 
-.theme-studio__cards-meta-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
 .theme-studio__cards-panel .theme-studio__member-row {
   gap: 10px;
   padding: 8px 0;
@@ -923,8 +911,7 @@
 .theme-studio__cards-member-select,
 .theme-studio__cards-inline-action,
 .theme-studio__cards-report-select,
-.theme-studio__cards-share-row .ty-btn,
-.theme-studio__cards-inline-card-head .ty-btn {
+.theme-studio__cards-share-row .ty-btn {
   width: auto !important;
   flex: 0 0 auto;
 }
diff --git a/packages/react/src/button/demo/Group.tsx b/packages/react/src/button/demo/Group.tsx
index b8720f92..275c7e81 100644
--- a/packages/react/src/button/demo/Group.tsx
+++ b/packages/react/src/button/demo/Group.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Typography } from '@tiny-design/react';
+import { Button, Heading } from '@tiny-design/react';
 
 const { Group } = Button;
 
@@ -7,7 +7,7 @@ export default function GroupDemo() {
   return (
     <>
       <div>
-        <Typography.Heading level={6}>Basic</Typography.Heading>
+        <Heading level={6}>Basic</Heading>
         <Group>
           <Button>Go Left</Button>
           <Button>Go Right</Button>
@@ -21,7 +21,7 @@ export default function GroupDemo() {
       </div>
       <br />
       <div>
-        <Typography.Heading level={6}>Group props</Typography.Heading>
+        <Heading level={6}>Group props</Heading>
         <Group size="lg">
           <Button>Go Left</Button>
           <Button>Go Right</Button>
diff --git a/packages/react/src/color-picker/__tests__/color-picker.test.tsx b/packages/react/src/color-picker/__tests__/color-picker.test.tsx
index 5b11df41..cb8935fa 100644
--- a/packages/react/src/color-picker/__tests__/color-picker.test.tsx
+++ b/packages/react/src/color-picker/__tests__/color-picker.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import ColorPicker from '../index';
-import { parseColor } from '../utils';
+import { formatColor, parseColor } from '../utils';
 
 describe('<ColorPicker />', () => {
   it('should match the snapshot', () => {
@@ -43,4 +43,59 @@ describe('<ColorPicker />', () => {
     expect(color.s).toBe(0);
     expect(color.b).toBeLessThan(20);
   });
+
+  it('should format color as oklch', () => {
+    const color = parseColor('#1890ff');
+    expect(formatColor(color, 'oklch')).toMatch(/^oklch\(/);
+  });
+
+  it('should call onChange with meta', () => {
+    const onChange = jest.fn();
+    const { container } = render(<ColorPicker defaultValue="#1890ff" onChange={onChange} />);
+    const trigger = container.querySelector('.ty-color-picker__trigger');
+    fireEvent.click(trigger!);
+    const preset = document.body.querySelector('.ty-color-picker__preset') as HTMLElement | null;
+
+    if (preset) {
+      fireEvent.click(preset);
+    } else {
+      const input = document.body.querySelector('.ty-color-picker__hex-input') as HTMLInputElement;
+      fireEvent.change(input, { target: { value: '#ff0000' } });
+    }
+
+    expect(onChange).toHaveBeenCalled();
+    const [, meta] = onChange.mock.calls.at(-1)!;
+    expect(meta).toEqual(
+      expect.objectContaining({
+        format: 'hex',
+        color: expect.objectContaining({ a: 1 }),
+      })
+    );
+  });
+
+  it('should only cycle through configured formats', () => {
+    const onFormatChange = jest.fn();
+    const { container } = render(
+      <ColorPicker defaultValue="#1890ff" formats={['hex', 'oklch']} onFormatChange={onFormatChange} />
+    );
+    const trigger = container.querySelector('.ty-color-picker__trigger');
+    fireEvent.click(trigger!);
+    const button = document.body.querySelector('.ty-color-picker__format-btn') as HTMLButtonElement;
+    fireEvent.click(button);
+    expect(onFormatChange).toHaveBeenCalledWith('oklch');
+  });
+
+  it('should call onChangeComplete when preset is selected', () => {
+    const onChangeComplete = jest.fn();
+    const { container } = render(
+      <ColorPicker open presets={['#ff0000']} onChangeComplete={onChangeComplete} />
+    );
+
+    const preset = document.body.querySelector('.ty-color-picker__preset') as HTMLElement;
+    fireEvent.click(preset);
+
+    expect(onChangeComplete).toHaveBeenCalled();
+    const [, meta] = onChangeComplete.mock.calls[0];
+    expect(meta).toEqual(expect.objectContaining({ format: 'hex' }));
+  });
 });
diff --git a/packages/react/src/color-picker/color-picker.tsx b/packages/react/src/color-picker/color-picker.tsx
index fed6e4de..75b2b12e 100644
--- a/packages/react/src/color-picker/color-picker.tsx
+++ b/packages/react/src/color-picker/color-picker.tsx
@@ -4,9 +4,11 @@ import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
 import { useClickOutside } from '../_utils/hooks';
 import Popup from '../popup';
-import { ColorPickerProps, Color, ColorFormat } from './types';
+import { ColorPickerProps, Color, ColorFormat, ColorChangeMeta } from './types';
 import { parseColor, formatColor, hsbToHex } from './utils';
 
+const DEFAULT_FORMATS: ColorFormat[] = ['hex', 'rgb', 'hsb', 'oklch'];
+
 const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _ref) => {
   const {
     defaultValue = '#6e41bf',
@@ -15,10 +17,12 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
     disabled = false,
     trigger = 'click',
     defaultFormat = 'hex',
+    formats = DEFAULT_FORMATS,
     prefixCls: customisedCls,
     className,
     style,
     onChange,
+    onChangeComplete,
     onFormatChange,
     children,
     ...otherProps
@@ -40,9 +44,22 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
   const hueRef = useRef<HTMLDivElement>(null);
   const alphaRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const colorRef = useRef<Color>(color);
 
   const isOpen = ('open' in props ? (props.open as boolean) : undefined) ?? open;
   const controlledOpen = 'open' in props ? (props.open as boolean) : undefined;
+  const availableFormats = formats.length > 0 ? formats : DEFAULT_FORMATS;
+  const getMeta = useCallback(
+    (nextColor: Color, nextFormat: ColorFormat = format): ColorChangeMeta => ({
+      color: nextColor,
+      format: nextFormat,
+    }),
+    [format]
+  );
+
+  useEffect(() => {
+    colorRef.current = color;
+  }, [color]);
 
   useEffect(() => {
     if ('value' in props && props.value) {
@@ -63,10 +80,21 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
     props.onOpenChange?.(false);
   });
 
-  const emitChange = useCallback((c: Color) => {
-    const formatted = formatColor(c, format);
-    onChange?.(formatted);
-  }, [format, onChange]);
+  const emitChange = useCallback(
+    (c: Color, nextFormat: ColorFormat = format) => {
+      const formatted = formatColor(c, nextFormat);
+      onChange?.(formatted, getMeta(c, nextFormat));
+    },
+    [format, getMeta, onChange]
+  );
+
+  const emitChangeComplete = useCallback(
+    (c: Color, nextFormat: ColorFormat = format) => {
+      const formatted = formatColor(c, nextFormat);
+      onChangeComplete?.(formatted, getMeta(c, nextFormat));
+    },
+    [format, getMeta, onChangeComplete]
+  );
 
   const updateColor = (updates: Partial<Color>) => {
     const newColor = { ...color, ...updates };
@@ -131,7 +159,10 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
     if (disabled) return;
     updateHueFromEvent(e.nativeEvent);
     const handleMove = (ev: MouseEvent | TouchEvent) => updateHueFromEvent(ev);
-    const handleUp = () => removeDragListeners(handleMove, handleUp);
+    const handleUp = () => {
+      removeDragListeners(handleMove, handleUp);
+      emitChangeComplete(colorRef.current);
+    };
     addDragListeners(handleMove, handleUp);
   };
 
@@ -139,7 +170,10 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
     if (disabled) return;
     updateHueFromEvent(e.nativeEvent);
     const handleMove = (ev: MouseEvent | TouchEvent) => updateHueFromEvent(ev);
-    const handleUp = () => removeDragListeners(handleMove, handleUp);
+    const handleUp = () => {
+      removeDragListeners(handleMove, handleUp);
+      emitChangeComplete(colorRef.current);
+    };
     addDragListeners(handleMove, handleUp);
   };
 
@@ -156,7 +190,10 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
     if (disabled) return;
     updateAlphaFromEvent(e.nativeEvent);
     const handleMove = (ev: MouseEvent | TouchEvent) => updateAlphaFromEvent(ev);
-    const handleUp = () => removeDragListeners(handleMove, handleUp);
+    const handleUp = () => {
+      removeDragListeners(handleMove, handleUp);
+      emitChangeComplete(colorRef.current);
+    };
     addDragListeners(handleMove, handleUp);
   };
 
@@ -164,7 +201,10 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
     if (disabled) return;
     updateAlphaFromEvent(e.nativeEvent);
     const handleMove = (ev: MouseEvent | TouchEvent) => updateAlphaFromEvent(ev);
-    const handleUp = () => removeDragListeners(handleMove, handleUp);
+    const handleUp = () => {
+      removeDragListeners(handleMove, handleUp);
+      emitChangeComplete(colorRef.current);
+    };
     addDragListeners(handleMove, handleUp);
   };
 
@@ -180,7 +220,10 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
   useEffect(() => {
     if (!dragging) return;
     const handleMove = (e: MouseEvent | TouchEvent) => updateSpectrumFromEvent(e);
-    const handleUp = () => setDragging(false);
+    const handleUp = () => {
+      setDragging(false);
+      emitChangeComplete(colorRef.current);
+    };
     document.addEventListener('mousemove', handleMove);
     document.addEventListener('mouseup', handleUp);
     document.addEventListener('touchmove', handleMove);
@@ -191,7 +234,7 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
       document.removeEventListener('touchmove', handleMove);
       document.removeEventListener('touchend', handleUp);
     };
-  }, [dragging, color.h, color.a]);
+  }, [dragging, emitChangeComplete]);
 
   const toggleOpen = () => {
     if (disabled) return;
@@ -201,17 +244,19 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
   };
 
   const handleFormatChange = () => {
-    const formats: ColorFormat[] = ['hex', 'rgb', 'hsb'];
-    const idx = formats.indexOf(format);
-    const next = formats[(idx + 1) % formats.length];
+    const idx = availableFormats.indexOf(format);
+    const currentIdx = idx === -1 ? 0 : idx;
+    const next = availableFormats[(currentIdx + 1) % availableFormats.length];
     if (!('format' in props)) setFormat(next);
     onFormatChange?.(next);
+    emitChange(color, next);
   };
 
   const handlePresetClick = (preset: string) => {
     const c = parseColor(preset);
     if (!('value' in props)) setColor(c);
     emitChange(c);
+    emitChangeComplete(c);
   };
 
   const cls = classNames(prefixCls, className, {
@@ -289,7 +334,7 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
           onChange={(e) => {
             const c = parseColor(e.target.value);
             if (!('value' in props)) setColor(c);
-            onChange?.(e.target.value);
+            emitChange(c);
           }}
         />
       </div>
diff --git a/packages/react/src/color-picker/demo/Format.tsx b/packages/react/src/color-picker/demo/Format.tsx
index 347bb1ec..24431c79 100644
--- a/packages/react/src/color-picker/demo/Format.tsx
+++ b/packages/react/src/color-picker/demo/Format.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { ColorPicker } from '@tiny-design/react';
+import type { ColorFormat } from '@tiny-design/react';
 
 export default function FormatDemo() {
   const [color, setColor] = React.useState('#1890ff');
-  const [format, setFormat] = React.useState('hex');
+  const [format, setFormat] = React.useState<ColorFormat>('hex');
 
   return (
     <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
@@ -19,4 +20,4 @@ export default function FormatDemo() {
       <span>Value: {color}</span>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/color-picker/demo/Oklch.tsx b/packages/react/src/color-picker/demo/Oklch.tsx
new file mode 100644
index 00000000..0ee936cd
--- /dev/null
+++ b/packages/react/src/color-picker/demo/Oklch.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { ColorPicker } from '@tiny-design/react';
+import type { ColorChangeMeta } from '@tiny-design/react';
+
+export default function OklchDemo() {
+  const [color, setColor] = React.useState('oklch(0.667 0.178 258.4)');
+  const [meta, setMeta] = React.useState<ColorChangeMeta | null>(null);
+
+  return (
+    <div style={{ display: 'grid', gap: 12 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
+        <ColorPicker
+          value={color}
+          format="oklch"
+          formats={['hex', 'rgb', 'oklch']}
+          onChange={(next, nextMeta) => {
+            setColor(next);
+            setMeta(nextMeta);
+          }}
+        />
+        <span>Value: {color}</span>
+      </div>
+      <pre style={{ margin: 0, padding: 12, fontSize: 12, borderRadius: 8, background: 'var(--ty-color-fill-2, rgba(0,0,0,0.04))' }}>
+        {JSON.stringify(meta, null, 2)}
+      </pre>
+    </div>
+  );
+}
diff --git a/packages/react/src/color-picker/index.md b/packages/react/src/color-picker/index.md
index cca3000e..234e4330 100644
--- a/packages/react/src/color-picker/index.md
+++ b/packages/react/src/color-picker/index.md
@@ -6,6 +6,8 @@ import DisabledDemo from './demo/Disabled';
 import DisabledSource from './demo/Disabled.tsx?raw';
 import FormatDemo from './demo/Format';
 import FormatSource from './demo/Format.tsx?raw';
+import OklchDemo from './demo/Oklch';
+import OklchSource from './demo/Oklch.tsx?raw';
 import TriggerDemo from './demo/Trigger';
 import TriggerSource from './demo/Trigger.tsx?raw';
 
@@ -40,13 +42,22 @@ Click the swatch to open the color picker panel.
 
 ### Format
 
-Toggle between `hex`, `rgb`, and `hsb` output formats.
+Toggle between `hex`, `rgb`, `hsb`, and `oklch` output formats.
 
 <DemoBlock component={FormatDemo} source={FormatSource} />
 
     </Demo>
     <Demo>
 
+### Structured Change Meta
+
+Read the formatted value and the structured color meta together.
+
+<DemoBlock component={OklchDemo} source={OklchSource} />
+
+    </Demo>
+    <Demo>
+
 ### Alpha Channel
 
 Enable the alpha slider with `showAlpha`.
@@ -83,12 +94,15 @@ Open the panel on hover instead of click.
 | -------------- | ---------------------------------- | -------------------------------- | ------- |
 | value          | color value (controlled)           | string                           |         |
 | defaultValue   | default color value                | string                           | #6e41bf |
-| onChange       | callback when color changes        | (color: string) => void          |         |
-| format         | color format                       | 'hex' \| 'rgb' \| 'hsb'        | hex     |
-| onFormatChange | callback when format changes       | (format: string) => void         |         |
+| onChange       | callback when color changes        | `(color: string, meta: { color: Color; format: ColorFormat }) => void` |         |
+| onChangeComplete | callback when an interaction finishes | `(color: string, meta: { color: Color; format: ColorFormat }) => void` |         |
+| format         | color format                       | `'hex' \| 'rgb' \| 'hsb' \| 'oklch'` | hex     |
+| defaultFormat  | default format                     | `'hex' \| 'rgb' \| 'hsb' \| 'oklch'` | hex     |
+| formats        | available format cycle             | `ColorFormat[]`                  | `['hex', 'rgb', 'hsb', 'oklch']` |
+| onFormatChange | callback when format changes       | `(format: ColorFormat) => void` |         |
 | presets        | preset color swatches              | string[]                         |         |
 | showAlpha      | show alpha slider                  | boolean                          | false   |
 | disabled       | disable the picker                  | boolean                          | false   |
 | trigger        | trigger mode                        | 'click' \| 'hover'             | click   |
 | open           | controlled panel visibility        | boolean                          |         |
-| onOpenChange   | callback when visibility changes   | (open: boolean) => void          |         |
\ No newline at end of file
+| onOpenChange   | callback when visibility changes   | (open: boolean) => void          |         |
diff --git a/packages/react/src/color-picker/index.zh_CN.md b/packages/react/src/color-picker/index.zh_CN.md
index 7a832ff2..ddc10481 100644
--- a/packages/react/src/color-picker/index.zh_CN.md
+++ b/packages/react/src/color-picker/index.zh_CN.md
@@ -6,6 +6,8 @@ import DisabledDemo from './demo/Disabled';
 import DisabledSource from './demo/Disabled.tsx?raw';
 import FormatDemo from './demo/Format';
 import FormatSource from './demo/Format.tsx?raw';
+import OklchDemo from './demo/Oklch';
+import OklchSource from './demo/Oklch.tsx?raw';
 import TriggerDemo from './demo/Trigger';
 import TriggerSource from './demo/Trigger.tsx?raw';
 
@@ -40,13 +42,22 @@ import { ColorPicker } from 'tiny-design';
 
 ### 格式
 
-在 `hex`、`rgb` 和 `hsb` 输出格式之间切换。
+在 `hex`、`rgb`、`hsb` 和 `oklch` 输出格式之间切换。
 
 <DemoBlock component={FormatDemo} source={FormatSource} />
 
     </Demo>
     <Demo>
 
+### 结构化变化信息
+
+同时读取格式化后的值和结构化颜色信息。
+
+<DemoBlock component={OklchDemo} source={OklchSource} />
+
+    </Demo>
+    <Demo>
+
 ### 透明度
 
 使用 `showAlpha` 启用透明度滑块。
@@ -83,12 +94,15 @@ import { ColorPicker } from 'tiny-design';
 | -------------- | -------------------- | -------------------------------- | ------- |
 | value          | 颜色值（受控）       | string                           |         |
 | defaultValue   | 默认颜色值           | string                           | #6e41bf |
-| onChange       | 颜色变化回调         | (color: string) => void          |         |
-| format         | 颜色格式             | 'hex' \| 'rgb' \| 'hsb'        | hex     |
-| onFormatChange | 格式变化回调         | (format: string) => void         |         |
+| onChange       | 颜色变化回调         | `(color: string, meta: { color: Color; format: ColorFormat }) => void` |         |
+| onChangeComplete | 交互完成时的颜色变化回调 | `(color: string, meta: { color: Color; format: ColorFormat }) => void` |         |
+| format         | 颜色格式             | `'hex' \| 'rgb' \| 'hsb' \| 'oklch'` | hex     |
+| defaultFormat  | 默认颜色格式         | `'hex' \| 'rgb' \| 'hsb' \| 'oklch'` | hex     |
+| formats        | 可切换的格式列表     | `ColorFormat[]`                  | `['hex', 'rgb', 'hsb', 'oklch']` |
+| onFormatChange | 格式变化回调         | `(format: ColorFormat) => void` |         |
 | presets        | 预设颜色             | string[]                         |         |
 | showAlpha      | 显示透明度滑块       | boolean                          | false   |
 | disabled       | 禁用                 | boolean                          | false   |
 | trigger        | 触发方式             | 'click' \| 'hover'             | click   |
 | open           | 面板显示（受控）     | boolean                          |         |
-| onOpenChange   | 面板显示变化回调     | (open: boolean) => void          |         |
\ No newline at end of file
+| onOpenChange   | 面板显示变化回调     | (open: boolean) => void          |         |
diff --git a/packages/react/src/color-picker/style/index.scss b/packages/react/src/color-picker/style/index.scss
index e62ac489..3f765cd7 100644
--- a/packages/react/src/color-picker/style/index.scss
+++ b/packages/react/src/color-picker/style/index.scss
@@ -32,7 +32,7 @@
   &__swatch-inner {
     width: 100%;
     height: 100%;
-    border-radius: 2px;
+    border-radius: inherit;
   }
 
   &__panel {
diff --git a/packages/react/src/color-picker/types.ts b/packages/react/src/color-picker/types.ts
index 6c258982..538c74ce 100644
--- a/packages/react/src/color-picker/types.ts
+++ b/packages/react/src/color-picker/types.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 import { BaseProps } from '../_utils/props';
 
-export type ColorFormat = 'hex' | 'rgb' | 'hsb';
+export type ColorFormat = 'hex' | 'rgb' | 'hsb' | 'oklch';
 
 export interface Color {
   h: number; // 0-360
@@ -10,14 +10,21 @@ export interface Color {
   a: number; // 0-1
 }
 
+export interface ColorChangeMeta {
+  color: Color;
+  format: ColorFormat;
+}
+
 export interface ColorPickerProps
   extends BaseProps,
     Omit<React.PropsWithoutRef<JSX.IntrinsicElements['div']>, 'onChange' | 'defaultValue'> {
   value?: string;
   defaultValue?: string;
-  onChange?: (color: string) => void;
+  onChange?: (color: string, meta: ColorChangeMeta) => void;
+  onChangeComplete?: (color: string, meta: ColorChangeMeta) => void;
   format?: ColorFormat;
   defaultFormat?: ColorFormat;
+  formats?: ColorFormat[];
   onFormatChange?: (format: ColorFormat) => void;
   presets?: string[];
   showAlpha?: boolean;
diff --git a/packages/react/src/color-picker/utils.ts b/packages/react/src/color-picker/utils.ts
index a6ffe9b2..e9f94f0c 100644
--- a/packages/react/src/color-picker/utils.ts
+++ b/packages/react/src/color-picker/utils.ts
@@ -1,4 +1,23 @@
-import { Color } from './types';
+import { Color, ColorFormat } from './types';
+
+function hsbStringToColor(input: string): Color | null {
+  const match = /hsb\(\s*(-?\d*\.?\d+)\s*[, ]\s*(-?\d*\.?\d+)%\s*[, ]\s*(-?\d*\.?\d+)%(?:\s*[,/]\s*([\d.]+))?\s*\)/i.exec(input);
+  if (!match) return null;
+
+  const h = Number.parseFloat(match[1]);
+  const s = Number.parseFloat(match[2]);
+  const b = Number.parseFloat(match[3]);
+  const a = match[4] ? Number.parseFloat(match[4]) : 1;
+
+  if (![h, s, b, a].every(Number.isFinite)) return null;
+
+  return {
+    h: normalizeHue(h),
+    s: Math.max(0, Math.min(100, s)),
+    b: Math.max(0, Math.min(100, b)),
+    a: clamp01(a),
+  };
+}
 
 function rgbStringToHsb(input: string): Color | null {
   const rgbMatch = input.match(/rgba?\(\s*(\d+)\s*[, ]\s*(\d+)\s*[, ]\s*(\d+)\s*(?:[,/]\s*([\d.]+))?\s*\)/i);
@@ -184,12 +203,53 @@ export const hsbToRgb = (color: Color): string => {
   return `rgb(${r}, ${g}, ${b})`;
 };
 
-export const formatColor = (color: Color, format: string): string => {
+function srgbToLinear(value: number): number {
+  if (value <= 0.04045) return value / 12.92;
+  return Math.pow((value + 0.055) / 1.055, 2.4);
+}
+
+function trimNumber(value: number, digits: number): string {
+  return value.toFixed(digits).replace(/\.?0+$/, '');
+}
+
+export const hsbToOklch = (color: Color): string => {
+  const hex = hsbToHex({ ...color, a: 1 });
+  const h = hex.replace('#', '');
+  const red = parseInt(h.slice(0, 2), 16) / 255;
+  const green = parseInt(h.slice(2, 4), 16) / 255;
+  const blue = parseInt(h.slice(4, 6), 16) / 255;
+
+  const rLinear = srgbToLinear(red);
+  const gLinear = srgbToLinear(green);
+  const bLinear = srgbToLinear(blue);
+
+  const l = 0.4122214708 * rLinear + 0.5363325363 * gLinear + 0.0514459929 * bLinear;
+  const m = 0.2119034982 * rLinear + 0.6806995451 * gLinear + 0.1073969566 * bLinear;
+  const s = 0.0883024619 * rLinear + 0.2817188376 * gLinear + 0.6299787005 * bLinear;
+
+  const lRoot = Math.cbrt(l);
+  const mRoot = Math.cbrt(m);
+  const sRoot = Math.cbrt(s);
+
+  const lightness = 0.2104542553 * lRoot + 0.793617785 * mRoot - 0.0040720468 * sRoot;
+  const a = 1.9779984951 * lRoot - 2.428592205 * mRoot + 0.4505937099 * sRoot;
+  const b = 0.0259040371 * lRoot + 0.7827717662 * mRoot - 0.808675766 * sRoot;
+
+  const chroma = Math.sqrt(a * a + b * b);
+  const hue = normalizeHue((Math.atan2(b, a) * 180) / Math.PI);
+  const alphaPart = color.a < 1 ? ` / ${trimNumber(color.a, 2)}` : '';
+
+  return `oklch(${trimNumber(lightness, 3)} ${trimNumber(chroma, 3)} ${trimNumber(hue, 1)}${alphaPart})`;
+};
+
+export const formatColor = (color: Color, format: ColorFormat): string => {
   switch (format) {
     case 'rgb':
       return hsbToRgb(color);
     case 'hsb':
-      return `hsb(${color.h}, ${color.s}%, ${color.b}%)`;
+      return `hsb(${color.h}, ${color.s}%, ${color.b}%${color.a < 1 ? `, ${trimNumber(color.a, 2)}` : ''})`;
+    case 'oklch':
+      return hsbToOklch(color);
     default:
       return hsbToHex(color);
   }
@@ -207,6 +267,9 @@ export const parseColor = (input: string): Color => {
   const directRgb = rgbStringToHsb(input);
   if (directRgb) return directRgb;
 
+  const directHsb = hsbStringToColor(input);
+  if (directHsb) return directHsb;
+
   const directOklch = oklchToHsb(input);
   if (directOklch) return directOklch;
 
diff --git a/packages/react/src/grid/demo/DashboardShell.tsx b/packages/react/src/grid/demo/DashboardShell.tsx
index 73c309b8..59bfa1a1 100644
--- a/packages/react/src/grid/demo/DashboardShell.tsx
+++ b/packages/react/src/grid/demo/DashboardShell.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Grid, Typography, Button, Progress, Tag, Divider } from '@tiny-design/react';
+import { Button, Card, Divider, Grid, Progress, Tag, Text } from '@tiny-design/react';
 
 const shellCardStyle: React.CSSProperties = {
   padding: 16,
@@ -42,9 +42,9 @@ export default function DashboardShellDemo() {
         <Card style={{ ...shellCardStyle, minHeight: 144 }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
             <div>
-              <Typography.Text strong>Dashboard Header</Typography.Text>
+              <Text strong>Dashboard Header</Text>
               <div style={{ marginTop: 8 }}>
-                <Typography.Text type="secondary">Top-level shell area using `grid-template-areas`.</Typography.Text>
+                <Text type="secondary">Top-level shell area using `grid-template-areas`.</Text>
               </div>
             </div>
             <Button btnType="primary" size="sm">Refresh</Button>
@@ -62,11 +62,11 @@ export default function DashboardShellDemo() {
           <Grid.Item size={1}>
             <Card style={metricStyle}>
               <div style={sectionLabelStyle}>
-                <Typography.Text strong>Revenue</Typography.Text>
+                <Text strong>Revenue</Text>
                 <Tag color="success" variant="soft">+12%</Tag>
               </div>
               <div>
-                <Typography.Text type="secondary">$182,400</Typography.Text>
+                <Text type="secondary">$182,400</Text>
                 <div style={{ marginTop: 8 }}>
                   <Progress.Bar percent={72} showInfo={false} strokeWidth={6} />
                 </div>
@@ -76,11 +76,11 @@ export default function DashboardShellDemo() {
           <Grid.Item size={1}>
             <Card style={metricStyle}>
               <div style={sectionLabelStyle}>
-                <Typography.Text strong>Conversion</Typography.Text>
+                <Text strong>Conversion</Text>
                 <Tag color="info" variant="soft">+1.8%</Tag>
               </div>
               <div>
-                <Typography.Text type="secondary">18.4%</Typography.Text>
+                <Text type="secondary">18.4%</Text>
                 <div style={{ marginTop: 8 }}>
                   <Progress.Bar percent={54} showInfo={false} strokeWidth={6} />
                 </div>
@@ -92,7 +92,7 @@ export default function DashboardShellDemo() {
 
       <Grid.Item area="filters">
         <Card style={{ ...shellCardStyle, minHeight: 144 }}>
-          <Typography.Text strong>Filters</Typography.Text>
+          <Text strong>Filters</Text>
           <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
             <Tag variant="soft">Region: APAC</Tag>
             <Tag variant="soft">Plan: Pro</Tag>
@@ -104,8 +104,8 @@ export default function DashboardShellDemo() {
       <Grid.Item area="chart">
         <Card style={{ ...shellCardStyle, minHeight: 180 }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
-            <Typography.Text strong>Chart Area</Typography.Text>
-            <Typography.Text type="secondary">Last 7 days</Typography.Text>
+            <Text strong>Chart Area</Text>
+            <Text type="secondary">Last 7 days</Text>
           </div>
           <Grid columns={6} gap={8} align="end" style={{ minHeight: 84 }}>
             <div style={{ height: 42, borderRadius: 8, background: 'rgba(110,65,191,0.18)' }} />
@@ -115,27 +115,27 @@ export default function DashboardShellDemo() {
             <div style={{ height: 60, borderRadius: 8, background: 'rgba(110,65,191,0.22)' }} />
             <div style={{ height: 76, borderRadius: 8, background: 'rgba(110,65,191,0.26)' }} />
           </Grid>
-          <Typography.Text type="secondary">Wide content region spanning two columns on desktop.</Typography.Text>
+          <Text type="secondary">Wide content region spanning two columns on desktop.</Text>
         </Card>
       </Grid.Item>
 
       <Grid.Item area="activity">
         <Card style={{ ...shellCardStyle, minHeight: 180 }}>
-          <Typography.Text strong>Activity</Typography.Text>
+          <Text strong>Activity</Text>
           <div>
             <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
-              <Typography.Text>New signups</Typography.Text>
-              <Typography.Text type="secondary">128</Typography.Text>
+              <Text>New signups</Text>
+              <Text type="secondary">128</Text>
             </div>
             <Divider style={{ margin: '12px 0' }} />
             <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
-              <Typography.Text>Trial started</Typography.Text>
-              <Typography.Text type="secondary">42</Typography.Text>
+              <Text>Trial started</Text>
+              <Text type="secondary">42</Text>
             </div>
             <Divider style={{ margin: '12px 0' }} />
             <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
-              <Typography.Text>Churn risk</Typography.Text>
-              <Typography.Text type="secondary">9</Typography.Text>
+              <Text>Churn risk</Text>
+              <Text type="secondary">9</Text>
             </div>
           </div>
         </Card>
diff --git a/packages/react/src/grid/demo/ExplicitColumns.tsx b/packages/react/src/grid/demo/ExplicitColumns.tsx
index 927bda40..66ae38cb 100644
--- a/packages/react/src/grid/demo/ExplicitColumns.tsx
+++ b/packages/react/src/grid/demo/ExplicitColumns.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Grid, Typography } from '@tiny-design/react';
+import { Card, Grid, Text } from '@tiny-design/react';
 
 const panelStyle: React.CSSProperties = {
   minHeight: 104,
@@ -14,16 +14,16 @@ export default function ExplicitColumnsDemo() {
   return (
     <Grid columns="220px minmax(0, 1fr) 180px" gap="sm">
       <Card style={panelStyle}>
-        <Typography.Text strong>Sidebar</Typography.Text>
-        <Typography.Text type="secondary">Fixed 220px track</Typography.Text>
+        <Text strong>Sidebar</Text>
+        <Text type="secondary">Fixed 220px track</Text>
       </Card>
       <Card style={panelStyle}>
-        <Typography.Text strong>Main content</Typography.Text>
-        <Typography.Text type="secondary">Fluid `minmax(0, 1fr)` track</Typography.Text>
+        <Text strong>Main content</Text>
+        <Text type="secondary">Fluid `minmax(0, 1fr)` track</Text>
       </Card>
       <Card style={panelStyle}>
-        <Typography.Text strong>Inspector</Typography.Text>
-        <Typography.Text type="secondary">Fixed 180px track</Typography.Text>
+        <Text strong>Inspector</Text>
+        <Text type="secondary">Fixed 180px track</Text>
       </Card>
     </Grid>
   );
diff --git a/packages/react/src/grid/demo/NamedAreas.tsx b/packages/react/src/grid/demo/NamedAreas.tsx
index 4202c31a..09796f96 100644
--- a/packages/react/src/grid/demo/NamedAreas.tsx
+++ b/packages/react/src/grid/demo/NamedAreas.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Grid, Typography } from '@tiny-design/react';
+import { Card, Grid, Text } from '@tiny-design/react';
 
 const panelStyle: React.CSSProperties = {
   padding: 16,
@@ -20,20 +20,20 @@ export default function NamedAreasDemo() {
       gap="md">
       <Grid.Item area="hero">
         <Card style={panelStyle}>
-          <Typography.Text strong>Hero</Typography.Text>
-          <Typography.Text type="secondary">grid-area: hero</Typography.Text>
+          <Text strong>Hero</Text>
+          <Text type="secondary">grid-area: hero</Text>
         </Card>
       </Grid.Item>
       <Grid.Item area="side">
         <Card style={panelStyle}>
-          <Typography.Text strong>Sidebar</Typography.Text>
-          <Typography.Text type="secondary">grid-area: side</Typography.Text>
+          <Text strong>Sidebar</Text>
+          <Text type="secondary">grid-area: side</Text>
         </Card>
       </Grid.Item>
       <Grid.Item area="content">
         <Card style={panelStyle}>
-          <Typography.Text strong>Content</Typography.Text>
-          <Typography.Text type="secondary">grid-area: content</Typography.Text>
+          <Text strong>Content</Text>
+          <Text type="secondary">grid-area: content</Text>
         </Card>
       </Grid.Item>
     </Grid>
diff --git a/packages/react/src/grid/demo/OffsetAuto.tsx b/packages/react/src/grid/demo/OffsetAuto.tsx
index 86ec6db7..7a869933 100644
--- a/packages/react/src/grid/demo/OffsetAuto.tsx
+++ b/packages/react/src/grid/demo/OffsetAuto.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Grid, Typography } from '@tiny-design/react';
+import { Card, Grid, Text } from '@tiny-design/react';
 
 const Item = ({
   title,
@@ -9,9 +9,9 @@ const Item = ({
   desc: string;
 }) => (
   <Card style={{ padding: 16, minHeight: 88 }}>
-    <Typography.Text strong>{title}</Typography.Text>
+    <Text strong>{title}</Text>
     <div style={{ marginTop: 8 }}>
-      <Typography.Text type="secondary">{desc}</Typography.Text>
+      <Text type="secondary">{desc}</Text>
     </div>
   </Card>
 );
diff --git a/packages/react/src/grid/demo/ResponsiveLayout.tsx b/packages/react/src/grid/demo/ResponsiveLayout.tsx
index d2c69f75..57f0a6ca 100644
--- a/packages/react/src/grid/demo/ResponsiveLayout.tsx
+++ b/packages/react/src/grid/demo/ResponsiveLayout.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Grid, Typography } from '@tiny-design/react';
+import { Card, Grid, Text } from '@tiny-design/react';
 
 const Item = ({
   title,
@@ -18,8 +18,8 @@ const Item = ({
       flexDirection: 'column',
       justifyContent: 'space-between',
     }}>
-    <Typography.Text strong>{title}</Typography.Text>
-    <Typography.Text type="secondary">{desc}</Typography.Text>
+    <Text strong>{title}</Text>
+    <Text type="secondary">{desc}</Text>
   </Card>
 );
 
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index ea82e140..4d32b7ef 100755
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -83,6 +83,7 @@ export { default as Transfer } from './transfer';
 export { default as Transition } from './transition';
 export { default as Tree } from './tree';
 export { default as Typography } from './typography';
+export { Heading, Paragraph, Text } from './typography';
 export { default as Upload } from './upload';
 export { default as Waterfall } from './waterfall';
 
diff --git a/packages/react/src/tag/demo/Color.tsx b/packages/react/src/tag/demo/Color.tsx
index fcb88b59..3c8f42eb 100644
--- a/packages/react/src/tag/demo/Color.tsx
+++ b/packages/react/src/tag/demo/Color.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { Tag, Typography } from '@tiny-design/react';
+import { Heading, Tag } from '@tiny-design/react';
 
 export default function ColorDemo() {
   return (
     <>
-      <Typography.Heading level={6} style={{ marginBottom: 16 }}>
+      <Heading level={6} style={{ marginBottom: 16 }}>
         Presets:
-      </Typography.Heading>
+      </Heading>
       <div>
         <Tag color="magenta">magenta</Tag>
         <Tag color="red">red</Tag>
@@ -21,9 +21,9 @@ export default function ColorDemo() {
         <Tag color="purple">purple</Tag>
       </div>
 
-      <Typography.Heading level={6} style={{ margin: '16px 0' }}>
+      <Heading level={6} style={{ margin: '16px 0' }}>
         Custom:
-      </Typography.Heading>
+      </Heading>
       <div>
         <Tag color="#f50">#f50</Tag>
         <Tag color="#2db7f5">#2db7f5</Tag>
@@ -32,4 +32,4 @@ export default function ColorDemo() {
       </div>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/tag/demo/Variant.tsx b/packages/react/src/tag/demo/Variant.tsx
index da998544..29cafe21 100644
--- a/packages/react/src/tag/demo/Variant.tsx
+++ b/packages/react/src/tag/demo/Variant.tsx
@@ -1,4 +1,4 @@
-import { Tag, Typography } from '@tiny-design/react';
+import { Heading, Tag } from '@tiny-design/react';
 
 const colors = ['blue', 'green', 'orange', 'red', 'purple'] as const;
 const statusColors = ['success', 'warning', 'info', 'danger'] as const;
@@ -6,54 +6,54 @@ const statusColors = ['success', 'warning', 'info', 'danger'] as const;
 export default function VariantDemo() {
   return (
     <>
-      <Typography.Heading level={6} style={{ marginBottom: 16 }}>
+      <Heading level={6} style={{ marginBottom: 16 }}>
         Filled (default):
-      </Typography.Heading>
+      </Heading>
       <div>
         {colors.map((color) => (
           <Tag key={color} color={color}>{color}</Tag>
         ))}
       </div>
 
-      <Typography.Heading level={6} style={{ margin: '16px 0' }}>
+      <Heading level={6} style={{ margin: '16px 0' }}>
         Soft:
-      </Typography.Heading>
+      </Heading>
       <div>
         {colors.map((color) => (
           <Tag key={color} color={color} variant="soft">{color}</Tag>
         ))}
       </div>
 
-      <Typography.Heading level={6} style={{ margin: '16px 0' }}>
+      <Heading level={6} style={{ margin: '16px 0' }}>
         Solid:
-      </Typography.Heading>
+      </Heading>
       <div>
         {colors.map((color) => (
           <Tag key={color} color={color} variant="solid">{color}</Tag>
         ))}
       </div>
 
-      <Typography.Heading level={6} style={{ margin: '16px 0' }}>
+      <Heading level={6} style={{ margin: '16px 0' }}>
         Outlined:
-      </Typography.Heading>
+      </Heading>
       <div>
         {colors.map((color) => (
           <Tag key={color} color={color} variant="outlined">{color}</Tag>
         ))}
       </div>
 
-      <Typography.Heading level={6} style={{ margin: '16px 0' }}>
+      <Heading level={6} style={{ margin: '16px 0' }}>
         Status (solid):
-      </Typography.Heading>
+      </Heading>
       <div>
         {statusColors.map((color) => (
           <Tag key={color} color={color} variant="solid">{color}</Tag>
         ))}
       </div>
 
-      <Typography.Heading level={6} style={{ margin: '16px 0' }}>
+      <Heading level={6} style={{ margin: '16px 0' }}>
         Custom color variants:
-      </Typography.Heading>
+      </Heading>
       <div>
         <Tag color="#1677ff">filled</Tag>
         <Tag color="#1677ff" variant="soft">soft</Tag>
diff --git a/packages/react/src/typography/__tests__/typography.test.tsx b/packages/react/src/typography/__tests__/typography.test.tsx
index 73484138..6d4743a3 100644
--- a/packages/react/src/typography/__tests__/typography.test.tsx
+++ b/packages/react/src/typography/__tests__/typography.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import Typography from '../index';
+import { Heading, Paragraph, Text } from '../../index';
 
 describe('<Typography />', () => {
   it('should match the snapshot', () => {
@@ -23,6 +24,11 @@ describe('<Typography />', () => {
     expect(getByText('Inline')).toBeInTheDocument();
   });
 
+  it('should render Text with semantic type class', () => {
+    const { container } = render(<Typography.Text type="secondary">Inline</Typography.Text>);
+    expect(container.firstChild).toHaveClass('ty-typography', 'ty-typography_secondary');
+  });
+
   it('should forward ref on Heading', () => {
     const ref = React.createRef<HTMLHeadingElement>();
     render(<Typography.Heading ref={ref}>Heading</Typography.Heading>);
@@ -45,7 +51,7 @@ describe('<Typography />', () => {
   });
 
   it('should forward ref on Text', () => {
-    const ref = React.createRef<HTMLSpanElement>();
+    const ref = React.createRef<HTMLElement>();
     render(<Typography.Text ref={ref}>Inline</Typography.Text>);
     expect(ref.current).toBeInstanceOf(HTMLSpanElement);
   });
@@ -57,4 +63,63 @@ describe('<Typography />', () => {
     rerender(<Typography.Heading ref={ref}>Second</Typography.Heading>);
     expect(ref.current).toBe(firstNode);
   });
+
+  it('should prefer superscript when sub and sup are both enabled', () => {
+    const { container } = render(
+      <Typography.Text sub sup>
+        Inline
+      </Typography.Text>
+    );
+    expect(container.querySelector('sup')).toBeInTheDocument();
+    expect(container.querySelector('sub')).not.toBeInTheDocument();
+  });
+
+  it('should render Text as a custom tag', () => {
+    const { container } = render(<Typography.Text as="label">Inline</Typography.Text>);
+    expect(container.querySelector('label')).toBeInTheDocument();
+  });
+
+  it('should apply ellipsis title to Paragraph when tooltip is enabled', () => {
+    const { getByText } = render(
+      <Typography.Paragraph ellipsis={{ tooltip: true }}>Long paragraph</Typography.Paragraph>
+    );
+    expect(getByText('Long paragraph')).toHaveAttribute('title', 'Long paragraph');
+  });
+
+  it('should copy text content when copyable is enabled', async () => {
+    const writeText = jest.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, {
+      clipboard: {
+        writeText,
+      },
+    });
+
+    const onCopy = jest.fn();
+    const { getByRole } = render(
+      <Typography.Text copyable={{ onCopy }}>Copy me</Typography.Text>
+    );
+
+    fireEvent.click(getByRole('button', { name: 'Copy text' }));
+
+    await waitFor(() => {
+      expect(writeText).toHaveBeenCalledWith('Copy me');
+      expect(onCopy).toHaveBeenCalledWith(true, 'Copy me');
+    });
+
+    expect(getByRole('button', { name: 'Copied text' })).toBeInTheDocument();
+  });
+
+  it('should support named exports from package entry', () => {
+    const { getByText } = render(
+      <>
+        <Heading level={2}>Heading</Heading>
+        <Paragraph>Paragraph</Paragraph>
+        <Text>Text</Text>
+      </>
+    );
+
+    expect(getByText('Heading')).toBeInTheDocument();
+    expect(getByText('Paragraph')).toBeInTheDocument();
+    expect(getByText('Text')).toBeInTheDocument();
+  });
 });
diff --git a/packages/react/src/typography/demo/Advanced.tsx b/packages/react/src/typography/demo/Advanced.tsx
new file mode 100644
index 00000000..45b7b3f0
--- /dev/null
+++ b/packages/react/src/typography/demo/Advanced.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Paragraph, Text } from '@tiny-design/react';
+
+export default function AdvancedDemo() {
+  return (
+    <>
+      <Text copyable code>
+        npm install @tiny-design/react
+      </Text>
+      <br />
+      <br />
+      <Text type="secondary" ellipsis={{ tooltip: true }} style={{ display: 'inline-block', maxWidth: 240 }}>
+        This is a long line that will truncate gracefully while keeping the original content on hover.
+      </Text>
+      <br />
+      <br />
+      <Paragraph
+        as="blockquote"
+        ellipsis={{ rows: 2, tooltip: true }}
+        style={{ maxWidth: 320, marginBottom: 0 }}>
+        Design systems are most useful when the low-level API is predictable enough that product teams can compose without reading component source every time.
+      </Paragraph>
+    </>
+  );
+}
diff --git a/packages/react/src/typography/demo/Basic.tsx b/packages/react/src/typography/demo/Basic.tsx
index 36c64072..0d874377 100644
--- a/packages/react/src/typography/demo/Basic.tsx
+++ b/packages/react/src/typography/demo/Basic.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
-import { Typography } from '@tiny-design/react';
-
-const { Heading, Paragraph, Text } = Typography;
+import { Heading, Paragraph, Text, Typography } from '@tiny-design/react';
 
 export default function BasicDemo() {
   return (
@@ -40,4 +38,4 @@ export default function BasicDemo() {
       </Typography>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/typography/demo/Heading.tsx b/packages/react/src/typography/demo/Heading.tsx
index ac347813..d47fd05b 100644
--- a/packages/react/src/typography/demo/Heading.tsx
+++ b/packages/react/src/typography/demo/Heading.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
-import { Typography } from '@tiny-design/react';
-
-const { Heading } = Typography;
+import { Heading } from '@tiny-design/react';
 
 export default function HeadingDemo() {
   return (
@@ -14,4 +12,4 @@ export default function HeadingDemo() {
       <Heading level={6}>H6.Heading</Heading>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/typography/demo/Text.tsx b/packages/react/src/typography/demo/Text.tsx
index 29437d60..80820500 100644
--- a/packages/react/src/typography/demo/Text.tsx
+++ b/packages/react/src/typography/demo/Text.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
-import { Typography } from '@tiny-design/react';
-
-const { Text } = Typography;
+import { Text } from '@tiny-design/react';
 
 export default function TextDemo() {
   return (
@@ -25,4 +23,4 @@ export default function TextDemo() {
       <Text>I am a Text<Text sub>sub</Text></Text>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/typography/index.md b/packages/react/src/typography/index.md
index f9fadded..2aaa4bbc 100644
--- a/packages/react/src/typography/index.md
+++ b/packages/react/src/typography/index.md
@@ -4,6 +4,8 @@ import HeadingDemo from './demo/Heading';
 import HeadingSource from './demo/Heading.tsx?raw';
 import TextDemo from './demo/Text';
 import TextSource from './demo/Text.tsx?raw';
+import AdvancedDemo from './demo/Advanced';
+import AdvancedSource from './demo/Advanced.tsx?raw';
 
 # Typography
 
@@ -15,6 +17,12 @@ Display a title or paragraph contents.
 
 ## Usage
 
+```jsx
+import { Heading, Paragraph, Text } from 'tiny-design';
+```
+
+Equivalent compatibility usage:
+
 ```jsx
 import { Typography } from 'tiny-design';
 
@@ -51,6 +59,15 @@ HTML contains several elements for defining text with a special meaning. `Text`
 
 <DemoBlock component={TextDemo} source={TextSource} />
 
+    </Demo>
+    <Demo>
+
+### Advanced
+
+Use semantic colors, copyable text, and ellipsis for dense interfaces.
+
+<DemoBlock component={AdvancedDemo} source={AdvancedSource} />
+
     </Demo>
   </Column>
 </Layout>
@@ -61,20 +78,22 @@ HTML contains several elements for defining text with a special meaning. `Text`
 
 | Property  | Description              | Type          | Default |
 | --------- | ------------------------ | ------------- | ------- |
+| as        | rendered block tag       | `'p' \| 'div' \| 'blockquote'` | `'p'` |
+| ellipsis  | truncate text content    | `boolean \| { rows?: number; tooltip?: boolean \| ReactNode }` | - |
 | children  | content                  | ReactNode     | -       |
 | style     | style object of container| CSSProperties | -       |
 | className | className of container   | string        | -       |
 
-### Typography.Heading
+### Heading
 
 | Property  | Description                      | Type          | Default |
 | --------- | -------------------------------- | ------------- | ------- |
-| level     | heading level, 1 through 6      | number        | 1       |
+| level     | heading level, 1 through 6      | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | 1       |
 | children  | content                          | ReactNode     | -       |
 | style     | style object of container        | CSSProperties | -       |
 | className | className of container           | string        | -       |
 
-### Typography.Paragraph
+### Paragraph
 
 | Property  | Description              | Type          | Default |
 | --------- | ------------------------ | ------------- | ------- |
@@ -82,10 +101,14 @@ HTML contains several elements for defining text with a special meaning. `Text`
 | style     | style object of container| CSSProperties | -       |
 | className | className of container   | string        | -       |
 
-### Typography.Text
+### Text
 
 | Property  | Description                     | Type          | Default |
 | --------- | ------------------------------- | ------------- | ------- |
+| as        | rendered inline tag             | `'span' \| 'label' \| 'small' \| 'strong' \| 'em' \| 'i' \| 'b' \| 'mark' \| 'kbd' \| 'time'` | `'span'` |
+| type      | semantic text color            | `'default' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'default'` |
+| copyable  | copy text content with built-in action | `boolean \| { text?: string; onCopy?: (copied, text) => void; icon?: ReactNode; copiedIcon?: ReactNode; resetDuration?: number }` | - |
+| ellipsis  | truncate text content          | `boolean \| { rows?: number; tooltip?: boolean \| ReactNode }` | - |
 | code      | code style                      | boolean       | false   |
 | del       | deleted (strikethrough) style   | boolean       | false   |
 | underline | underline style                 | boolean       | false   |
diff --git a/packages/react/src/typography/index.tsx b/packages/react/src/typography/index.tsx
index ed26a4b2..732dd3fd 100755
--- a/packages/react/src/typography/index.tsx
+++ b/packages/react/src/typography/index.tsx
@@ -14,5 +14,6 @@ DefaultTypo.Heading = Heading;
 DefaultTypo.Paragraph = Paragraph;
 DefaultTypo.Text = Text;
 
+export { Heading, Paragraph, Text };
 export default DefaultTypo;
 export type * from './types';
diff --git a/packages/react/src/typography/index.zh_CN.md b/packages/react/src/typography/index.zh_CN.md
index f342b5fe..7d64822b 100644
--- a/packages/react/src/typography/index.zh_CN.md
+++ b/packages/react/src/typography/index.zh_CN.md
@@ -4,6 +4,8 @@ import HeadingDemo from './demo/Heading';
 import HeadingSource from './demo/Heading.tsx?raw';
 import TextDemo from './demo/Text';
 import TextSource from './demo/Text.tsx?raw';
+import AdvancedDemo from './demo/Advanced';
+import AdvancedSource from './demo/Advanced.tsx?raw';
 
 # Typography 文字排版
 
@@ -15,6 +17,12 @@ import TextSource from './demo/Text.tsx?raw';
 
 ## 使用方式
 
+```jsx
+import { Heading, Paragraph, Text } from 'tiny-design';
+```
+
+兼容写法：
+
 ```jsx
 import { Typography } from 'tiny-design';
 
@@ -51,6 +59,15 @@ HTML 包含多个用于定义具有特殊意义的文本的元素。`Text` 组
 
 <DemoBlock component={TextDemo} source={TextSource} />
 
+    </Demo>
+    <Demo>
+
+### 高级用法
+
+在信息密集场景中使用语义色、复制能力和省略展示。
+
+<DemoBlock component={AdvancedDemo} source={AdvancedSource} />
+
     </Demo>
   </Column>
 </Layout>
@@ -61,20 +78,22 @@ HTML 包含多个用于定义具有特殊意义的文本的元素。`Text` 组
 
 | 属性  | 说明              | 类型          | 默认值 |
 | --------- | ------------------------ | ------------- | ------- |
+| as        | 渲染的块级标签       | `'p' \| 'div' \| 'blockquote'` | `'p'` |
+| ellipsis  | 文本省略展示          | `boolean \| { rows?: number; tooltip?: boolean \| ReactNode }` | - |
 | children  | 内容                  | ReactNode     | -       |
 | style     | 容器的样式对象| CSSProperties | -       |
 | className | 容器的 className   | string        | -       |
 
-### Typography.Heading
+### Heading
 
 | 属性  | 说明                      | 类型          | 默认值 |
 | --------- | -------------------------------- | ------------- | ------- |
-| level     | 标题级别，1 到 6      | number        | 1       |
+| level     | 标题级别，1 到 6      | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | 1       |
 | children  | 内容                          | ReactNode     | -       |
 | style     | 容器的样式对象        | CSSProperties | -       |
 | className | 容器的 className           | string        | -       |
 
-### Typography.Paragraph
+### Paragraph
 
 | 属性  | 说明              | 类型          | 默认值 |
 | --------- | ------------------------ | ------------- | ------- |
@@ -82,10 +101,14 @@ HTML 包含多个用于定义具有特殊意义的文本的元素。`Text` 组
 | style     | 容器的样式对象| CSSProperties | -       |
 | className | 容器的 className   | string        | -       |
 
-### Typography.Text
+### Text
 
 | 属性  | 说明                     | 类型          | 默认值 |
 | --------- | ------------------------------- | ------------- | ------- |
+| as        | 渲染的行内标签                  | `'span' \| 'label' \| 'small' \| 'strong' \| 'em' \| 'i' \| 'b' \| 'mark' \| 'kbd' \| 'time'` | `'span'` |
+| type      | 文本语义颜色                    | `'default' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'default'` |
+| copyable  | 内置复制操作                    | `boolean \| { text?: string; onCopy?: (copied, text) => void; icon?: ReactNode; copiedIcon?: ReactNode; resetDuration?: number }` | - |
+| ellipsis  | 文本省略展示                    | `boolean \| { rows?: number; tooltip?: boolean \| ReactNode }` | - |
 | code      | 代码样式                      | boolean       | false   |
 | del       | 删除线样式   | boolean       | false   |
 | underline | 下划线样式                 | boolean       | false   |
diff --git a/packages/react/src/typography/paragraph.tsx b/packages/react/src/typography/paragraph.tsx
index 3dbbf88e..dcabb424 100644
--- a/packages/react/src/typography/paragraph.tsx
+++ b/packages/react/src/typography/paragraph.tsx
@@ -3,17 +3,61 @@ import classNames from 'classnames';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
 import { ParagraphProps } from './types';
+import { extractTextContent, resolveEllipsisConfig } from './utils';
 
-const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(
+const Paragraph = React.forwardRef<HTMLElement, ParagraphProps>(
   (props: ParagraphProps, ref): JSX.Element => {
-    const { className, children, prefixCls: customisedCls, ...otherProps } = props;
+    const {
+      as = 'p',
+      className,
+      children,
+      prefixCls: customisedCls,
+      ellipsis,
+      style,
+      title,
+      ...otherProps
+    } = props;
     const configContext = useContext(ConfigContext);
     const prefixCls = getPrefixCls('typography', configContext.prefixCls, customisedCls);
-    const cls = classNames(className, prefixCls);
-    return (
-      <p ref={ref} className={cls} {...otherProps}>
-        {children}
-      </p>
+    const ellipsisConfig = resolveEllipsisConfig(ellipsis);
+    const rows = ellipsisConfig?.rows ?? 1;
+    const textContent = extractTextContent(children);
+    const ellipsisStyle =
+      ellipsisConfig == null
+        ? undefined
+        : rows > 1
+          ? {
+              ...style,
+              overflow: 'hidden',
+              display: '-webkit-box',
+              WebkitBoxOrient: 'vertical' as const,
+              WebkitLineClamp: rows,
+            }
+          : {
+              ...style,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap' as const,
+            };
+    const resolvedTitle =
+      title ??
+      (ellipsisConfig?.tooltip === true ? textContent : ellipsisConfig?.tooltip || undefined);
+    const cls = classNames(className, prefixCls, {
+      [`${prefixCls}_ellipsis`]: !!ellipsisConfig,
+      [`${prefixCls}_ellipsis-multiline`]: !!ellipsisConfig && rows > 1,
+    });
+    const ParagraphTag = as;
+
+    return React.createElement(
+      ParagraphTag,
+      {
+        ...otherProps,
+        ref,
+        className: cls,
+        style: ellipsisStyle ?? style,
+        title: resolvedTitle,
+      },
+      children
     );
   }
 );
diff --git a/packages/react/src/typography/style/index.scss b/packages/react/src/typography/style/index.scss
index f789d42e..2ab333df 100755
--- a/packages/react/src/typography/style/index.scss
+++ b/packages/react/src/typography/style/index.scss
@@ -95,7 +95,7 @@ h6.#{$tp-prefix} {
   line-height: 1.2;
 }
 
-p.#{$tp-prefix}, div.#{$tp-prefix} {
+p.#{$tp-prefix}, div.#{$tp-prefix}, blockquote.#{$tp-prefix} {
   margin-top: 0;
   margin-bottom: var(--ty-typography-block-margin-bottom);
   color: var(--ty-typography-body-color);
@@ -103,6 +103,85 @@ p.#{$tp-prefix}, div.#{$tp-prefix} {
   line-height: var(--ty-typography-body-line-height);
 }
 
-span.#{$tp-prefix} {
-  color: var(--ty-typography-body-color);
+span.#{$tp-prefix},
+label.#{$tp-prefix},
+small.#{$tp-prefix},
+strong.#{$tp-prefix},
+em.#{$tp-prefix},
+i.#{$tp-prefix},
+b.#{$tp-prefix},
+mark.#{$tp-prefix},
+kbd.#{$tp-prefix},
+time.#{$tp-prefix} {
+  color: var(--ty-color-text-label);
+
+  .#{$tp-prefix}__content {
+    min-width: 0;
+  }
+
+  .#{$tp-prefix}__copy {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    margin-inline-start: 6px;
+    padding: 0;
+    color: inherit;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    cursor: pointer;
+    opacity: .72;
+    transition: opacity .2s ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &.#{$tp-prefix}_copyable {
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    vertical-align: bottom;
+  }
+
+  &.#{$tp-prefix}_ellipsis {
+    max-width: 100%;
+
+    .#{$tp-prefix}__content {
+      display: inline-block;
+      max-width: 100%;
+    }
+  }
+
+  &.#{$tp-prefix}_ellipsis-multiline {
+    .#{$tp-prefix}__content {
+      display: -webkit-box;
+    }
+  }
+
+  &.#{$tp-prefix}_default {
+    color: var(--ty-color-text-label);
+  }
+
+  &.#{$tp-prefix}_secondary {
+    color: var(--ty-typography-body-color);
+  }
+
+  &.#{$tp-prefix}_success {
+    color: var(--ty-color-success-text);
+  }
+
+  &.#{$tp-prefix}_warning {
+    color: var(--ty-color-warning-text);
+  }
+
+  &.#{$tp-prefix}_danger {
+    color: var(--ty-color-danger-text);
+  }
+
+  &.#{$tp-prefix}_info {
+    color: var(--ty-color-info-text);
+  }
 }
diff --git a/packages/react/src/typography/text.tsx b/packages/react/src/typography/text.tsx
index 94514cbe..451c65fe 100644
--- a/packages/react/src/typography/text.tsx
+++ b/packages/react/src/typography/text.tsx
@@ -1,8 +1,11 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
+import { IconCheckmark, IconDocument } from '@tiny-design/icons';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
-import { TextProps } from './types';
+import { TextProps, TextType } from './types';
+import { copyText } from '../copy-to-clipboard/clipboard';
+import { extractTextContent, resolveCopyableConfig, resolveEllipsisConfig } from './utils';
 
 const tagGenerator = (
   isRequired: boolean,
@@ -13,9 +16,15 @@ const tagGenerator = (
   return React.createElement(tag, {}, element);
 };
 
-const Text = React.forwardRef<HTMLSpanElement, TextProps>(
+const TEXT_TYPES: TextType[] = ['default', 'secondary', 'success', 'warning', 'danger', 'info'];
+
+const Text = React.forwardRef<HTMLElement, TextProps>(
   (props, ref) => {
     const {
+      as = 'span',
+      type = 'default',
+      copyable,
+      ellipsis,
       code = false,
       del = false,
       underline = false,
@@ -27,26 +36,121 @@ const Text = React.forwardRef<HTMLSpanElement, TextProps>(
       className,
       children,
       prefixCls: customisedCls,
+      style,
+      title,
       ...otherProps
     } = props;
 
+    const [copied, setCopied] = useState(false);
+    const resetTimerRef = useRef<number | null>(null);
+    const copyableConfig = resolveCopyableConfig(copyable);
+    const ellipsisConfig = resolveEllipsisConfig(ellipsis);
+    const rows = ellipsisConfig?.rows ?? 1;
+    const textContent = extractTextContent(children);
+    const copyValue = copyableConfig?.text ?? textContent;
+    const isSub = sub && !sup;
+
     let Node = tagGenerator(code, 'code', children);
     Node = tagGenerator(del, 'del', Node);
     Node = tagGenerator(underline, 'u', Node);
     Node = tagGenerator(strong, 'strong', Node);
     Node = tagGenerator(italic, 'i', Node);
     Node = tagGenerator(mark, 'mark', Node);
-    Node = tagGenerator(sub, 'sub', Node);
+    Node = tagGenerator(isSub, 'sub', Node);
     Node = tagGenerator(sup, 'sup', Node);
 
+    useEffect(() => {
+      return () => {
+        if (resetTimerRef.current) {
+          window.clearTimeout(resetTimerRef.current);
+        }
+      };
+    }, []);
+
     const configContext = useContext(ConfigContext);
     const prefixCls = getPrefixCls('typography', configContext.prefixCls, customisedCls);
-    const cls = classNames(className, prefixCls);
+    const contentStyle =
+      ellipsisConfig == null
+        ? undefined
+        : rows > 1
+          ? {
+              overflow: 'hidden',
+              display: '-webkit-box',
+              WebkitBoxOrient: 'vertical' as const,
+              WebkitLineClamp: rows,
+            }
+          : {
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap' as const,
+            };
+    const resolvedTitle =
+      title ??
+      (ellipsisConfig?.tooltip === true ? textContent : ellipsisConfig?.tooltip || undefined);
+    const cls = classNames(
+      className,
+      prefixCls,
+      TEXT_TYPES.includes(type) && `${prefixCls}_${type}`,
+      {
+        [`${prefixCls}_copyable`]: !!copyableConfig,
+        [`${prefixCls}_ellipsis`]: !!ellipsisConfig,
+        [`${prefixCls}_ellipsis-multiline`]: !!ellipsisConfig && rows > 1,
+      }
+    );
+    const TextTag = as;
+
+    const handleCopy = async (e: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (!copyValue) {
+        return;
+      }
+
+      const isCopied = await copyText(copyValue);
+      copyableConfig?.onCopy?.(isCopied, copyValue);
+
+      if (!isCopied) {
+        return;
+      }
+
+      setCopied(true);
+
+      if (resetTimerRef.current) {
+        window.clearTimeout(resetTimerRef.current);
+      }
+
+      resetTimerRef.current = window.setTimeout(() => {
+        setCopied(false);
+      }, copyableConfig?.resetDuration ?? 1500);
+    };
 
-    return (
-      <span {...otherProps} ref={ref} className={cls}>
-        {Node}
-      </span>
+    return React.createElement(
+      TextTag,
+      {
+        ...otherProps,
+        ref,
+        className: cls,
+        style,
+        title: resolvedTitle,
+      },
+      <>
+        <span className={`${prefixCls}__content`} style={contentStyle}>
+          {Node}
+        </span>
+        {copyableConfig && (
+          <button
+            type="button"
+            className={`${prefixCls}__copy`}
+            aria-label={copied ? 'Copied text' : 'Copy text'}
+            title={copied ? 'Copied' : 'Copy'}
+            onClick={handleCopy}>
+            {copied
+              ? copyableConfig.copiedIcon ?? <IconCheckmark width={14} height={14} />
+              : copyableConfig.icon ?? <IconDocument width={14} height={14} />}
+          </button>
+        )}
+      </>
     );
   }
 );
diff --git a/packages/react/src/typography/types.ts b/packages/react/src/typography/types.ts
index 6e25c581..0797e80b 100644
--- a/packages/react/src/typography/types.ts
+++ b/packages/react/src/typography/types.ts
@@ -1,6 +1,33 @@
 import React from 'react';
 import { BaseProps } from '../_utils/props';
 
+export type TextType = 'default' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+export type TypographyTextTag =
+  | 'span'
+  | 'label'
+  | 'small'
+  | 'strong'
+  | 'em'
+  | 'i'
+  | 'b'
+  | 'mark'
+  | 'kbd'
+  | 'time';
+export type TypographyParagraphTag = 'p' | 'div' | 'blockquote';
+
+export interface TypographyEllipsisConfig {
+  rows?: number;
+  tooltip?: boolean | React.ReactNode;
+}
+
+export interface TypographyCopyableConfig {
+  text?: string;
+  onCopy?: (copied: boolean, text: string) => void;
+  icon?: React.ReactNode;
+  copiedIcon?: React.ReactNode;
+  resetDuration?: number;
+}
+
 export interface TypographyProps
   extends BaseProps,
     React.PropsWithRef<JSX.IntrinsicElements['div']> {
@@ -8,6 +35,8 @@ export interface TypographyProps
 }
 
 export interface ParagraphProps extends BaseProps, React.PropsWithRef<JSX.IntrinsicElements['p']> {
+  as?: TypographyParagraphTag;
+  ellipsis?: boolean | TypographyEllipsisConfig;
   children?: React.ReactNode;
 }
 
@@ -19,6 +48,10 @@ export interface HeadingProps
 }
 
 export interface TextProps extends BaseProps, React.PropsWithRef<JSX.IntrinsicElements['span']> {
+  as?: TypographyTextTag;
+  type?: TextType;
+  copyable?: boolean | TypographyCopyableConfig;
+  ellipsis?: boolean | TypographyEllipsisConfig;
   code?: boolean;
   del?: boolean;
   underline?: boolean;
diff --git a/packages/react/src/typography/typography.tsx b/packages/react/src/typography/typography.tsx
index e7801a57..a1eb80f1 100644
--- a/packages/react/src/typography/typography.tsx
+++ b/packages/react/src/typography/typography.tsx
@@ -4,7 +4,7 @@ import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
 import { TypographyProps } from './types';
 
-const Typography = React.forwardRef<HTMLParagraphElement, TypographyProps>(
+const Typography = React.forwardRef<HTMLDivElement, TypographyProps>(
   (props: TypographyProps, ref): JSX.Element => {
     const { className, children, prefixCls: customisedCls, ...otherProps } = props;
     const configContext = useContext(ConfigContext);
diff --git a/packages/react/src/typography/utils.ts b/packages/react/src/typography/utils.ts
new file mode 100644
index 00000000..10c2c0b1
--- /dev/null
+++ b/packages/react/src/typography/utils.ts
@@ -0,0 +1,49 @@
+import React from 'react';
+import { TextProps, TypographyCopyableConfig, TypographyEllipsisConfig } from './types';
+
+export function extractTextContent(node: React.ReactNode): string {
+  if (node == null || typeof node === 'boolean') {
+    return '';
+  }
+
+  if (typeof node === 'string' || typeof node === 'number') {
+    return String(node);
+  }
+
+  if (Array.isArray(node)) {
+    return node.map(extractTextContent).join('');
+  }
+
+  if (React.isValidElement(node)) {
+    return extractTextContent(node.props.children);
+  }
+
+  return '';
+}
+
+export function resolveCopyableConfig(
+  copyable: TextProps['copyable']
+): TypographyCopyableConfig | null {
+  if (!copyable) {
+    return null;
+  }
+
+  return copyable === true ? {} : copyable;
+}
+
+export function resolveEllipsisConfig(
+  ellipsis: boolean | TypographyEllipsisConfig | undefined
+): TypographyEllipsisConfig | null {
+  if (!ellipsis) {
+    return null;
+  }
+
+  if (ellipsis === true) {
+    return { rows: 1 };
+  }
+
+  return {
+    rows: ellipsis.rows && ellipsis.rows > 0 ? ellipsis.rows : 1,
+    tooltip: ellipsis.tooltip,
+  };
+}

From 9646ab8df933b6ca1ec254529367bca4a12a7860 Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Thu, 9 Apr 2026 19:31:21 +1000
Subject: [PATCH 05/12] fix: styles

---
 REFACTOR_CHECKLIST.md                         |  69 ++++
 THEME_TOKEN_REFACTOR_ROADMAP.md               | 228 +++++++++++
 .../src/containers/theme-studio/index.tsx     |  11 +-
 .../theme-studio/theme-document-adapter.ts    | 149 +++----
 apps/docs/src/utils/theme-document.ts         |  96 +----
 .../__tests__/autocomplete.test.tsx           |  18 +-
 .../react/src/auto-complete/auto-complete.tsx |  16 +-
 packages/react/src/calendar/style/index.scss  |  46 ++-
 .../src/cascader/__tests__/cascader.test.tsx  |  43 +-
 packages/react/src/cascader/cascader.tsx      | 131 ++-----
 .../__tests__/color-picker.test.tsx           |  39 +-
 .../react/src/color-picker/color-picker.tsx   |  25 +-
 .../__tests__/config-provider.test.tsx        |  13 +
 .../src/config-provider/config-provider.tsx   |   4 +-
 .../react/src/config-provider/token-utils.ts  |  96 ++---
 .../__tests__/date-picker.test.tsx            |  21 +-
 .../react/src/date-picker/date-picker.tsx     |  12 +-
 .../react/src/date-picker/style/index.scss    |  86 ++--
 .../src/dropdown/__tests__/dropdown.test.tsx  |  63 ++-
 packages/react/src/dropdown/demo/Close.tsx    |   4 +-
 packages/react/src/dropdown/dropdown.tsx      |  97 ++---
 packages/react/src/dropdown/style/index.scss  |  12 +-
 .../react/src/menu/__tests__/menu.test.tsx    |  52 ++-
 packages/react/src/menu/sub-menu.tsx          |  13 +-
 .../react/src/modal/__tests__/modal.test.tsx  |  25 +-
 packages/react/src/modal/static-modal.tsx     |   7 +-
 .../src/overlay/__tests__/overlay.test.tsx    |  14 +
 packages/react/src/overlay/style/index.scss   |   8 +-
 .../__tests__/pop-confirm.test.tsx            |  35 +-
 .../react/src/pop-confirm/pop-confirm.tsx     |  26 +-
 .../react/src/pop-confirm/style/index.scss    |  12 +-
 packages/react/src/popover/popover.tsx        |   2 +-
 .../react/src/popup/__tests__/popup.test.tsx  |  40 +-
 packages/react/src/popup/popup.tsx            | 116 +++++-
 .../src/portal/__tests__/portal.test.tsx      |  14 +
 .../src/select/__tests__/select.test.tsx      |  39 +-
 packages/react/src/select/select.tsx          |  17 +-
 packages/react/src/select/style/index.scss    |  24 +-
 .../speed-dial/__tests__/speed-dial.test.tsx  |  37 ++
 packages/react/src/speed-dial/speed-dial.tsx  |   7 +-
 .../__tests__/time-picker.test.tsx            |  21 +-
 .../react/src/time-picker/style/index.scss    |  56 +--
 .../react/src/time-picker/time-picker.tsx     |  13 +-
 packages/react/src/tooltip/style/index.scss   |   4 +-
 packages/react/src/tooltip/tooltip.tsx        |   2 +-
 packages/react/src/tour/style/index.scss      | 109 +++--
 packages/tokens/build/build-v2.js             |  64 ++-
 packages/tokens/package.json                  |  16 +
 packages/tokens/runtime/presets.cjs           |   5 +
 packages/tokens/runtime/presets.d.ts          |   5 +
 packages/tokens/runtime/presets.mjs           |   1 +
 packages/tokens/runtime/resolve-theme.cjs     |   8 +
 packages/tokens/runtime/resolve-theme.d.ts    |  58 +++
 packages/tokens/runtime/resolve-theme.mjs     |   1 +
 packages/tokens/runtime/theme-runtime.cjs     | 371 ++++++++++++++++++
 packages/tokens/runtime/theme-runtime.mjs     | 359 +++++++++++++++++
 packages/tokens/runtime/validate-theme.cjs    |   7 +
 packages/tokens/runtime/validate-theme.d.ts   |  24 ++
 packages/tokens/runtime/validate-theme.mjs    |   1 +
 .../scripts/sync-theme-source-from-scss.js    |  14 +-
 .../tokens/source/components/calendar.json    | 102 +++++
 .../tokens/source/components/date-picker.json | 154 ++++++++
 .../tokens/source/components/dropdown.json    |  29 ++
 .../tokens/source/components/overlay.json     |  24 ++
 packages/tokens/source/components/picker.json | 262 -------------
 .../tokens/source/components/pop-confirm.json |  34 ++
 packages/tokens/source/components/select.json |  56 +++
 .../tokens/source/components/time-picker.json | 141 +++++++
 packages/tokens/source/components/tour.json   | 209 ++++++++++
 packages/tokens/source/themes/dark.json       |   4 +-
 packages/tokens/source/themes/light.json      |   4 +-
 71 files changed, 2976 insertions(+), 949 deletions(-)
 create mode 100644 REFACTOR_CHECKLIST.md
 create mode 100644 THEME_TOKEN_REFACTOR_ROADMAP.md
 create mode 100644 packages/tokens/runtime/presets.cjs
 create mode 100644 packages/tokens/runtime/presets.d.ts
 create mode 100644 packages/tokens/runtime/presets.mjs
 create mode 100644 packages/tokens/runtime/resolve-theme.cjs
 create mode 100644 packages/tokens/runtime/resolve-theme.d.ts
 create mode 100644 packages/tokens/runtime/resolve-theme.mjs
 create mode 100644 packages/tokens/runtime/theme-runtime.cjs
 create mode 100644 packages/tokens/runtime/theme-runtime.mjs
 create mode 100644 packages/tokens/runtime/validate-theme.cjs
 create mode 100644 packages/tokens/runtime/validate-theme.d.ts
 create mode 100644 packages/tokens/runtime/validate-theme.mjs
 create mode 100644 packages/tokens/source/components/date-picker.json
 create mode 100644 packages/tokens/source/components/dropdown.json
 create mode 100644 packages/tokens/source/components/overlay.json
 create mode 100644 packages/tokens/source/components/pop-confirm.json
 create mode 100644 packages/tokens/source/components/time-picker.json
 create mode 100644 packages/tokens/source/components/tour.json

diff --git a/REFACTOR_CHECKLIST.md b/REFACTOR_CHECKLIST.md
new file mode 100644
index 00000000..96775768
--- /dev/null
+++ b/REFACTOR_CHECKLIST.md
@@ -0,0 +1,69 @@
+# Refactor Checklist
+
+## Phase Checklist
+
+Use this before starting any new phase.
+
+- phase scope is explicit
+- entry files are identified
+- verification commands are identified
+- stop condition is identified
+- upstream dependencies are already stable
+
+## Component Checklist
+
+Use this for every component refactor.
+
+- read implementation
+- read public types
+- read existing tests
+- read docs/examples if they exist
+- list behavior worth preserving
+- list behavior that is inconsistent or fragile
+- confirm controlled and uncontrolled state model
+- confirm event names and firing points
+- confirm container / portal / popup behavior where relevant
+- confirm cleanup behavior for timers, listeners, and instances
+- add or update focused tests
+- run the smallest useful regression set
+- stop when the component reaches a stable checkpoint
+
+## Theme And Token Checklist
+
+- JSON sources remain the only editable token source
+- theme runtime uses shared resolver logic
+- Theme Studio uses the same validation and resolution contract
+- preset resolution still works
+- browser ESM runtime still works
+- registry output still builds
+- no alias or migration logic is introduced
+- docs only describe canonical token keys
+
+## Popup Stack Checklist
+
+Apply to:
+
+- `Popup`
+- `Overlay`
+- `Portal`
+- `Dropdown`
+- `Popover`
+- `Tooltip`
+- `Modal`
+
+- visibility source is unambiguous
+- outside click behavior is defined
+- escape behavior is defined if applicable
+- popup container behavior is defined
+- portal rendering is test-covered
+- listeners are removed on cleanup
+- timers are removed on cleanup
+- popper / instance objects are destroyed on cleanup
+
+## Before Moving Up A Layer
+
+- current layer tests pass
+- no known runtime regression remains in the current layer
+- docs / Theme Studio still render
+- there is a clear summary of what changed
+- next component group is identified
diff --git a/THEME_TOKEN_REFACTOR_ROADMAP.md b/THEME_TOKEN_REFACTOR_ROADMAP.md
new file mode 100644
index 00000000..8dc09682
--- /dev/null
+++ b/THEME_TOKEN_REFACTOR_ROADMAP.md
@@ -0,0 +1,228 @@
+# Theme And Token Refactor Roadmap
+
+## Goal
+
+Build the next major version of Tiny Design theming with one rule:
+
+- only the new token model is supported
+
+This roadmap assumes a breaking release. We are not preserving legacy token names, legacy theme keys, or parallel token systems.
+
+## Upgrade Policy
+
+The next major version follows these constraints:
+
+- `packages/tokens/source/**.json` is the only source of truth
+- runtime, docs, Theme Studio, and React all consume the same theme contract
+- old SCSS-era token names are removed, not translated
+- old API aliases are removed, not dual-supported
+- documentation only describes the new contract
+
+## Current Progress
+
+Completed:
+
+- tokens runtime resolution is shared across `@tiny-design/tokens`, `@tiny-design/react`, and Theme Studio
+- preset theme resolution with `extends`
+- browser-safe ESM runtime for docs and Theme Studio
+- `ConfigProvider` integrated with token resolution
+- `Popup / Overlay / Portal` bottom-layer cleanup and tests
+
+In progress:
+
+- removing alias and migration logic that was temporarily added during the transition
+- tightening execution checklists for the next component phases
+
+## Target Architecture
+
+### `@tiny-design/tokens`
+
+Owns:
+
+- semantic token source
+- component token source
+- theme documents
+- schema
+- registry generation
+- preset generation
+- theme validation
+- theme resolution
+- typed token exports
+
+Does not own:
+
+- legacy token aliases
+- migration shims
+- dual-format theme support
+
+### `@tiny-design/react`
+
+Owns:
+
+- scoped CSS variable application
+- `ConfigProvider` theme integration
+- container / popup scoping behavior
+- component token consumption discipline
+
+Does not own:
+
+- ad-hoc token flattening
+- custom theme parsing separate from `@tiny-design/tokens`
+
+### Theme Studio / Docs
+
+Own:
+
+- authoring UI
+- preview and export flows
+- token browsing and documentation
+
+Must consume:
+
+- the same validation and resolution contract as runtime
+
+## Execution Phases
+
+### Phase 1: Tokens Core
+
+Objectives:
+
+- keep JSON as the only editable token source
+- keep presets and schema aligned
+- validate theme documents against registry
+- remove alias and migration support from runtime and build outputs
+
+Acceptance:
+
+- no runtime alias translation
+- no generated alias metadata
+- new token keys are the only supported authored keys
+
+### Phase 2: React Theme Integration
+
+Objectives:
+
+- keep `ConfigProvider` on top of `resolveTheme`
+- standardize theme mode resolution
+- keep scoped CSS variable injection stable
+
+Acceptance:
+
+- React runtime does not implement its own theme parser
+- local provider scoping remains stable
+
+### Phase 3: Bottom-Layer Popup Infrastructure
+
+Scope:
+
+- `Popup`
+- `Overlay`
+- `Portal`
+
+Objectives:
+
+- stabilize visibility flow
+- stabilize popup container usage
+- clean up event listener lifecycle
+- preserve existing good behavior
+
+Acceptance:
+
+- bottom-layer popup tests pass
+- no listener leaks in current flows
+
+### Phase 4: First-Layer Popup Consumers
+
+Scope:
+
+- `Dropdown`
+- `Popover`
+- `Tooltip`
+- `Modal`
+
+Objectives:
+
+- reuse the cleaned popup stack
+- remove duplicated open/close mechanics
+- keep API changes deliberate and minimal
+
+Acceptance:
+
+- each component has controlled/uncontrolled coverage
+- outside click / escape / focus behavior is defined and tested
+
+### Phase 5: Form And Selection Core
+
+Scope:
+
+- `Form`
+- `Select`
+- `AutoComplete`
+- `DatePicker`
+- `TimePicker`
+
+Objectives:
+
+- align state models
+- align popup usage
+- align token consumption
+
+Acceptance:
+
+- no type/runtime contract mismatch
+- no parallel internal state paths for the same behavior
+
+### Phase 6: Token Coverage Expansion
+
+Objectives:
+
+- define missing component namespaces
+- document namespace reuse explicitly
+- replace remaining hardcoded visual values where tokens should own them
+
+Priority targets:
+
+- `dropdown`
+- `overlay`
+- `date-picker`
+- `time-picker`
+- `auto-complete`
+- `modal`
+- `tooltip`
+- `popover`
+
+Acceptance:
+
+- each production component has explicit token ownership
+
+### Phase 7: Quality Platform
+
+Objectives:
+
+- interaction tests for complex components
+- a11y checks for core flows
+- visual regression for key docs examples
+
+Acceptance:
+
+- complex components have behavior coverage, not just snapshots
+
+## Working Rules
+
+These rules apply to every phase:
+
+- read implementation, types, tests, and docs before editing
+- keep existing good behavior
+- remove only the parts that are inconsistent, redundant, or unstable
+- do not expand scope upward until the current layer is stable
+- stop at a clear verification point before moving to the next component group
+
+## Immediate Next Queue
+
+1. Finish removing temporary alias/migration support from `packages/tokens`
+2. Keep Theme Studio aligned with the strict new token contract
+3. Start the first-layer popup consumers:
+   - `Dropdown`
+   - `Popover`
+   - `Tooltip`
+   - `Modal`
diff --git a/apps/docs/src/containers/theme-studio/index.tsx b/apps/docs/src/containers/theme-studio/index.tsx
index 44c0b101..00129dcf 100644
--- a/apps/docs/src/containers/theme-studio/index.tsx
+++ b/apps/docs/src/containers/theme-studio/index.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import type { ThemeDocument } from '@tiny-design/react';
+import { validateThemeDocument } from '@tiny-design/tokens/validate-theme';
 import {
   Button,
   ConfigProvider,
@@ -116,10 +117,16 @@ const ThemeStudioPage = (): React.ReactElement => {
   const handleImport = () => {
     try {
       const parsed = JSON.parse(importText) as ThemeDocument;
-      setDraft(buildDraftFromThemeDocument(parsed));
+      const validation = validateThemeDocument(parsed);
+      if (!validation.valid) {
+        setImportError(validation.errors.join('\n'));
+        return;
+      }
+
+      setDraft(buildDraftFromThemeDocument(validation.normalizedDocument as ThemeDocument));
       setImportVisible(false);
       setImportError(null);
-      setStatus('Imported theme document');
+      setStatus(validation.warnings.length > 0 ? 'Imported theme document with validation warnings' : 'Imported theme document');
     } catch {
       setImportError('Invalid theme document JSON');
     }
diff --git a/apps/docs/src/containers/theme-studio/theme-document-adapter.ts b/apps/docs/src/containers/theme-studio/theme-document-adapter.ts
index 7dfa083a..9e346e63 100644
--- a/apps/docs/src/containers/theme-studio/theme-document-adapter.ts
+++ b/apps/docs/src/containers/theme-studio/theme-document-adapter.ts
@@ -1,4 +1,5 @@
 import type { ThemeDocument } from '@tiny-design/react';
+import { validateThemeDocument } from '@tiny-design/tokens/validate-theme';
 import { toRgba, tintColor, softenSurface } from './color-utils';
 import { getPresetById, getPresetDraft } from './runtime-presets';
 import type {
@@ -21,6 +22,11 @@ export function inferPresetIdFromThemeDocument(theme: ThemeDocument): string {
   return 'default';
 }
 
+function normalizeImportedThemeDocument(theme: ThemeDocument): ThemeDocument {
+  const validation = validateThemeDocument(theme);
+  return validation.normalizedDocument as ThemeDocument;
+}
+
 export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocument {
   const { fields } = draft;
   const primaryHover = tintColor(fields.primary, draft.mode === 'dark' ? 0.12 : 0.08);
@@ -354,112 +360,113 @@ function readComponentFirst(theme: ThemeDocument, componentKey: string, semantic
 }
 
 export function buildDraftFromThemeDocument(theme: ThemeDocument): ThemeEditorDraft {
-  const presetId = inferPresetIdFromThemeDocument(theme);
-  const mode = theme.mode === 'dark' ? 'dark' : 'light';
+  const normalizedTheme = normalizeImportedThemeDocument(theme);
+  const presetId = inferPresetIdFromThemeDocument(normalizedTheme);
+  const mode = normalizedTheme.mode === 'dark' ? 'dark' : 'light';
   const baseDraft = getPresetDraft(presetId, mode);
   const baseFields = { ...baseDraft.fields };
 
   return {
     ...baseDraft,
     meta: {
-      name: theme.meta?.name ?? baseDraft.meta.name,
-      author: theme.meta?.author ?? baseDraft.meta.author,
+      name: normalizedTheme.meta?.name ?? baseDraft.meta.name,
+      author: normalizedTheme.meta?.author ?? baseDraft.meta.author,
     },
     mode,
     presetId,
     fields: {
       ...baseFields,
-      primary: readToken(theme, 'color-primary') ?? baseFields.primary,
-      primaryForeground: readToken(theme, 'editor-primary-foreground', 'button.text.primary') ?? baseFields.primaryForeground,
-      secondary: readToken(theme, 'editor-secondary') ?? readToken(theme, 'color-fill', 'button.bg.default') ?? baseFields.secondary,
-      secondaryForeground: readToken(theme, 'editor-secondary-foreground', 'button.text.default') ?? baseFields.secondaryForeground,
-      accent: readToken(theme, 'editor-accent') ?? readToken(theme, 'color-primary-bg') ?? baseFields.accent,
-      accentForeground: readToken(theme, 'editor-accent-foreground') ?? baseFields.accentForeground,
-      success: readToken(theme, 'editor-success') ?? readToken(theme, 'color-success') ?? baseFields.success,
-      successForeground: readToken(theme, 'editor-success-foreground') ?? baseFields.successForeground,
-      info: readToken(theme, 'editor-info') ?? readToken(theme, 'color-info') ?? baseFields.info,
-      infoForeground: readToken(theme, 'editor-info-foreground') ?? baseFields.infoForeground,
-      warning: readToken(theme, 'editor-warning') ?? readToken(theme, 'color-warning') ?? baseFields.warning,
-      warningForeground: readToken(theme, 'editor-warning-foreground') ?? baseFields.warningForeground,
-      danger: readToken(theme, 'editor-danger') ?? readToken(theme, 'color-danger') ?? baseFields.danger,
-      dangerForeground: readToken(theme, 'editor-danger-foreground') ?? baseFields.dangerForeground,
-      base: readToken(theme, 'editor-base') ?? readToken(theme, 'color-bg') ?? baseFields.base,
-      baseForeground: readToken(theme, 'editor-base-foreground') ?? readToken(theme, 'color-text') ?? baseFields.baseForeground,
-      card: readToken(theme, 'editor-card') ?? readToken(theme, 'color-bg-container', 'card.bg') ?? baseFields.card,
-      cardForeground: readToken(theme, 'editor-card-foreground', 'card.header-color') ?? baseFields.cardForeground,
-      popover: readToken(theme, 'editor-popover') ?? readToken(theme, 'color-bg-elevated') ?? baseFields.popover,
-      popoverForeground: readToken(theme, 'editor-popover-foreground') ?? baseFields.popoverForeground,
-      muted: readToken(theme, 'editor-muted') ?? readToken(theme, 'color-bg-spotlight') ?? baseFields.muted,
-      mutedForeground: readToken(theme, 'editor-muted-foreground') ?? readToken(theme, 'color-text-secondary') ?? baseFields.mutedForeground,
-      border: readToken(theme, 'editor-border') ?? readToken(theme, 'color-border') ?? baseFields.border,
-      input: readToken(theme, 'editor-input') ?? readToken(theme, 'color-border', 'input.border') ?? baseFields.input,
-      ring: readToken(theme, 'editor-ring', 'input.border.focus') ?? baseFields.ring,
-      chart1: readToken(theme, 'chart-1') ?? baseFields.chart1,
-      chart2: readToken(theme, 'chart-2') ?? baseFields.chart2,
-      chart3: readToken(theme, 'chart-3') ?? baseFields.chart3,
-      chart4: readToken(theme, 'chart-4') ?? baseFields.chart4,
-      chart5: readToken(theme, 'chart-5') ?? baseFields.chart5,
-      sidebar: readToken(theme, 'editor-sidebar', 'layout.sidebar-bg') ?? baseFields.sidebar,
-      sidebarForeground: readToken(theme, 'editor-sidebar-foreground', 'layout.sidebar-color') ?? baseFields.sidebarForeground,
-      sidebarPrimary: readToken(theme, 'editor-sidebar-primary') ?? baseFields.sidebarPrimary,
-      sidebarPrimaryForeground: readToken(theme, 'editor-sidebar-primary-foreground') ?? baseFields.sidebarPrimaryForeground,
-      sidebarAccent: readToken(theme, 'editor-sidebar-accent') ?? baseFields.sidebarAccent,
-      sidebarAccentForeground: readToken(theme, 'editor-sidebar-accent-foreground') ?? baseFields.sidebarAccentForeground,
-      sidebarBorder: readToken(theme, 'editor-sidebar-border') ?? baseFields.sidebarBorder,
-      sidebarRing: readToken(theme, 'editor-sidebar-ring') ?? baseFields.sidebarRing,
-      fontSans: readToken(theme, 'font-family') ?? baseFields.fontSans,
-      fontMono: readToken(theme, 'font-family-monospace') ?? baseFields.fontMono,
-      fontSizeBase: readToken(theme, 'font-size-base') ?? baseFields.fontSizeBase,
-      lineHeightBase: readToken(theme, 'line-height-base') ?? baseFields.lineHeightBase,
-      h1Size: readToken(theme, 'h1-font-size') ?? baseFields.h1Size,
-      h2Size: readToken(theme, 'h2-font-size') ?? baseFields.h2Size,
-      letterSpacing: readToken(theme, 'letter-spacing') ?? baseFields.letterSpacing,
-      radius: readToken(theme, 'border-radius') ?? baseFields.radius,
-      shadowCard: readToken(theme, 'shadow-card', 'card.shadow') ?? baseFields.shadowCard,
-      shadowFocus: readToken(theme, 'shadow-focus', 'input.shadow.focus') ?? toRgba(baseFields.primary, 0.22),
-      buttonRadius: readToken(theme, 'border-radius', 'button.radius') ?? baseFields.buttonRadius,
-      inputRadius: readToken(theme, 'border-radius', 'input.radius') ?? baseFields.inputRadius,
-      cardRadius: readToken(theme, 'border-radius', 'card.radius') ?? baseFields.cardRadius,
+      primary: readToken(normalizedTheme, 'color-primary') ?? baseFields.primary,
+      primaryForeground: readToken(normalizedTheme, 'editor-primary-foreground', 'button.text.primary') ?? baseFields.primaryForeground,
+      secondary: readToken(normalizedTheme, 'editor-secondary') ?? readToken(normalizedTheme, 'color-fill', 'button.bg.default') ?? baseFields.secondary,
+      secondaryForeground: readToken(normalizedTheme, 'editor-secondary-foreground', 'button.text.default') ?? baseFields.secondaryForeground,
+      accent: readToken(normalizedTheme, 'editor-accent') ?? readToken(normalizedTheme, 'color-primary-bg') ?? baseFields.accent,
+      accentForeground: readToken(normalizedTheme, 'editor-accent-foreground') ?? baseFields.accentForeground,
+      success: readToken(normalizedTheme, 'editor-success') ?? readToken(normalizedTheme, 'color-success') ?? baseFields.success,
+      successForeground: readToken(normalizedTheme, 'editor-success-foreground') ?? baseFields.successForeground,
+      info: readToken(normalizedTheme, 'editor-info') ?? readToken(normalizedTheme, 'color-info') ?? baseFields.info,
+      infoForeground: readToken(normalizedTheme, 'editor-info-foreground') ?? baseFields.infoForeground,
+      warning: readToken(normalizedTheme, 'editor-warning') ?? readToken(normalizedTheme, 'color-warning') ?? baseFields.warning,
+      warningForeground: readToken(normalizedTheme, 'editor-warning-foreground') ?? baseFields.warningForeground,
+      danger: readToken(normalizedTheme, 'editor-danger') ?? readToken(normalizedTheme, 'color-danger') ?? baseFields.danger,
+      dangerForeground: readToken(normalizedTheme, 'editor-danger-foreground') ?? baseFields.dangerForeground,
+      base: readToken(normalizedTheme, 'editor-base') ?? readToken(normalizedTheme, 'color-bg') ?? baseFields.base,
+      baseForeground: readToken(normalizedTheme, 'editor-base-foreground') ?? readToken(normalizedTheme, 'color-text') ?? baseFields.baseForeground,
+      card: readToken(normalizedTheme, 'editor-card') ?? readToken(normalizedTheme, 'color-bg-container', 'card.bg') ?? baseFields.card,
+      cardForeground: readToken(normalizedTheme, 'editor-card-foreground', 'card.header-color') ?? baseFields.cardForeground,
+      popover: readToken(normalizedTheme, 'editor-popover') ?? readToken(normalizedTheme, 'color-bg-elevated') ?? baseFields.popover,
+      popoverForeground: readToken(normalizedTheme, 'editor-popover-foreground') ?? baseFields.popoverForeground,
+      muted: readToken(normalizedTheme, 'editor-muted') ?? readToken(normalizedTheme, 'color-bg-spotlight') ?? baseFields.muted,
+      mutedForeground: readToken(normalizedTheme, 'editor-muted-foreground') ?? readToken(normalizedTheme, 'color-text-secondary') ?? baseFields.mutedForeground,
+      border: readToken(normalizedTheme, 'editor-border') ?? readToken(normalizedTheme, 'color-border') ?? baseFields.border,
+      input: readToken(normalizedTheme, 'editor-input') ?? readToken(normalizedTheme, 'color-border', 'input.border') ?? baseFields.input,
+      ring: readToken(normalizedTheme, 'editor-ring', 'input.border.focus') ?? baseFields.ring,
+      chart1: readToken(normalizedTheme, 'chart-1') ?? baseFields.chart1,
+      chart2: readToken(normalizedTheme, 'chart-2') ?? baseFields.chart2,
+      chart3: readToken(normalizedTheme, 'chart-3') ?? baseFields.chart3,
+      chart4: readToken(normalizedTheme, 'chart-4') ?? baseFields.chart4,
+      chart5: readToken(normalizedTheme, 'chart-5') ?? baseFields.chart5,
+      sidebar: readToken(normalizedTheme, 'editor-sidebar', 'layout.sidebar-bg') ?? baseFields.sidebar,
+      sidebarForeground: readToken(normalizedTheme, 'editor-sidebar-foreground', 'layout.sidebar-color') ?? baseFields.sidebarForeground,
+      sidebarPrimary: readToken(normalizedTheme, 'editor-sidebar-primary') ?? baseFields.sidebarPrimary,
+      sidebarPrimaryForeground: readToken(normalizedTheme, 'editor-sidebar-primary-foreground') ?? baseFields.sidebarPrimaryForeground,
+      sidebarAccent: readToken(normalizedTheme, 'editor-sidebar-accent') ?? baseFields.sidebarAccent,
+      sidebarAccentForeground: readToken(normalizedTheme, 'editor-sidebar-accent-foreground') ?? baseFields.sidebarAccentForeground,
+      sidebarBorder: readToken(normalizedTheme, 'editor-sidebar-border') ?? baseFields.sidebarBorder,
+      sidebarRing: readToken(normalizedTheme, 'editor-sidebar-ring') ?? baseFields.sidebarRing,
+      fontSans: readToken(normalizedTheme, 'font-family') ?? baseFields.fontSans,
+      fontMono: readToken(normalizedTheme, 'font-family-monospace') ?? baseFields.fontMono,
+      fontSizeBase: readToken(normalizedTheme, 'font-size-base') ?? baseFields.fontSizeBase,
+      lineHeightBase: readToken(normalizedTheme, 'line-height-base') ?? baseFields.lineHeightBase,
+      h1Size: readToken(normalizedTheme, 'h1-font-size') ?? baseFields.h1Size,
+      h2Size: readToken(normalizedTheme, 'h2-font-size') ?? baseFields.h2Size,
+      letterSpacing: readToken(normalizedTheme, 'letter-spacing') ?? baseFields.letterSpacing,
+      radius: readToken(normalizedTheme, 'border-radius') ?? baseFields.radius,
+      shadowCard: readToken(normalizedTheme, 'shadow-card', 'card.shadow') ?? baseFields.shadowCard,
+      shadowFocus: readToken(normalizedTheme, 'shadow-focus', 'input.shadow.focus') ?? toRgba(baseFields.primary, 0.22),
+      buttonRadius: readToken(normalizedTheme, 'border-radius', 'button.radius') ?? baseFields.buttonRadius,
+      inputRadius: readToken(normalizedTheme, 'border-radius', 'input.radius') ?? baseFields.inputRadius,
+      cardRadius: readToken(normalizedTheme, 'border-radius', 'card.radius') ?? baseFields.cardRadius,
       fieldPaddingSm:
-        readComponentFirst(theme, 'input.padding-inline-sm', 'control.padding-inline.sm')
+        readComponentFirst(normalizedTheme, 'input.padding-inline-sm', 'control.padding-inline.sm')
         ?? baseFields.fieldPaddingSm,
       fieldPaddingMd:
-        readComponentFirst(theme, 'input.padding-inline-md', 'control.padding-inline.md')
-        ?? readToken(theme, 'spacing-4')
+        readComponentFirst(normalizedTheme, 'input.padding-inline-md', 'control.padding-inline.md')
+        ?? readToken(normalizedTheme, 'spacing-4')
         ?? baseFields.fieldPaddingMd,
       fieldPaddingLg:
-        readComponentFirst(theme, 'input.padding-inline-lg', 'control.padding-inline.lg')
+        readComponentFirst(normalizedTheme, 'input.padding-inline-lg', 'control.padding-inline.lg')
         ?? baseFields.fieldPaddingLg,
       buttonPaddingSm:
-        readComponentFirst(theme, 'button.padding-inline-sm', 'control.padding-inline.sm')
+        readComponentFirst(normalizedTheme, 'button.padding-inline-sm', 'control.padding-inline.sm')
         ?? baseFields.buttonPaddingSm,
       buttonPaddingMd:
-        readComponentFirst(theme, 'button.padding-inline-md', 'control.padding-inline.md')
+        readComponentFirst(normalizedTheme, 'button.padding-inline-md', 'control.padding-inline.md')
         ?? baseFields.buttonPaddingMd,
       buttonPaddingLg:
-        readComponentFirst(theme, 'button.padding-inline-lg', 'control.padding-inline.lg')
+        readComponentFirst(normalizedTheme, 'button.padding-inline-lg', 'control.padding-inline.lg')
         ?? baseFields.buttonPaddingLg,
       fieldHeightSm:
-        readComponentFirst(theme, 'input.height.sm', 'control.height.sm')
+        readComponentFirst(normalizedTheme, 'input.height.sm', 'control.height.sm')
         ?? baseFields.fieldHeightSm,
       fieldHeightMd:
-        readComponentFirst(theme, 'input.height.md', 'control.height.md')
-        ?? readToken(theme, 'height-md')
+        readComponentFirst(normalizedTheme, 'input.height.md', 'control.height.md')
+        ?? readToken(normalizedTheme, 'height-md')
         ?? baseFields.fieldHeightMd,
       fieldHeightLg:
-        readComponentFirst(theme, 'input.height.lg', 'control.height.lg')
+        readComponentFirst(normalizedTheme, 'input.height.lg', 'control.height.lg')
         ?? baseFields.fieldHeightLg,
       buttonHeightSm:
-        readComponentFirst(theme, 'button.height.sm', 'control.height.sm')
+        readComponentFirst(normalizedTheme, 'button.height.sm', 'control.height.sm')
         ?? baseFields.buttonHeightSm,
       buttonHeightMd:
-        readComponentFirst(theme, 'button.height.md', 'control.height.md')
-        ?? readToken(theme, 'height-md')
+        readComponentFirst(normalizedTheme, 'button.height.md', 'control.height.md')
+        ?? readToken(normalizedTheme, 'height-md')
         ?? baseFields.buttonHeightMd,
       buttonHeightLg:
-        readComponentFirst(theme, 'button.height.lg', 'control.height.lg')
+        readComponentFirst(normalizedTheme, 'button.height.lg', 'control.height.lg')
         ?? baseFields.buttonHeightLg,
-      cardPadding: readToken(theme, 'spacing-5', 'card.body-padding') ?? baseFields.cardPadding,
+      cardPadding: readToken(normalizedTheme, 'spacing-5', 'card.body-padding') ?? baseFields.cardPadding,
     },
   };
 }
diff --git a/apps/docs/src/utils/theme-document.ts b/apps/docs/src/utils/theme-document.ts
index a2d54efe..76f130dd 100644
--- a/apps/docs/src/utils/theme-document.ts
+++ b/apps/docs/src/utils/theme-document.ts
@@ -1,16 +1,6 @@
 import type { ThemeDocument } from '@tiny-design/react';
-import tokenRegistry from '@tiny-design/tokens/registry';
-import lightTheme from '../../../../packages/tokens/source/themes/light.json';
-import darkTheme from '../../../../packages/tokens/source/themes/dark.json';
-
-type TokenRegistryEntry = {
-  key: string;
-  defaultValue: string | number;
-};
-
-type TokenRegistryDocument = {
-  tokens: TokenRegistryEntry[];
-};
+import presets from '@tiny-design/tokens/presets';
+import { resolveTheme } from '@tiny-design/tokens/resolve-theme';
 
 export type ThemeTokenChange = {
   key: string;
@@ -24,55 +14,20 @@ export type ThemeTokenComparison = ThemeTokenChange & {
 };
 
 const STUDIO_THEME_DOCUMENT_KEY = 'ty-theme-studio-document';
-const BASE_THEME_BY_ID = {
-  'tiny-light': lightTheme,
-  'tiny-dark': darkTheme,
-} as const;
-
-const REGISTRY_TOKENS = (tokenRegistry as TokenRegistryDocument).tokens;
-const SOURCE_VALUES = REGISTRY_TOKENS.reduce<Record<string, string>>((acc, token) => {
-  acc[token.key] = String(token.defaultValue);
-  return acc;
-}, {});
-
-function componentTokenKeyToCssVar(key: string): string {
+const BASE_THEME_BY_ID = presets as Record<string, ThemeDocument>;
+
+function tokenKeyToCssVar(key: string): string {
   return `--ty-${key.replace(/\./g, '-')}`;
 }
 
 function getBaseTheme(theme: ThemeDocument): ThemeDocument {
   if (theme.extends && theme.extends in BASE_THEME_BY_ID) {
-    return BASE_THEME_BY_ID[theme.extends as keyof typeof BASE_THEME_BY_ID] as ThemeDocument;
+    return BASE_THEME_BY_ID[theme.extends];
   }
 
   return theme.mode === 'dark'
-    ? darkTheme as ThemeDocument
-    : lightTheme as ThemeDocument;
-}
-
-function resolveTokenValue(
-  key: string,
-  rawValues: Record<string, string>,
-  cache: Map<string, string>,
-  stack: Set<string>
-): string {
-  const cached = cache.get(key);
-  if (cached) return cached;
-
-  const raw = rawValues[key];
-  if (raw == null) return '';
-  if (stack.has(key)) return raw;
-
-  const match = /^\{(.+)\}$/.exec(raw);
-  if (!match) {
-    cache.set(key, raw);
-    return raw;
-  }
-
-  stack.add(key);
-  const resolved = resolveTokenValue(match[1], rawValues, cache, stack) || raw;
-  stack.delete(key);
-  cache.set(key, resolved);
-  return resolved;
+    ? BASE_THEME_BY_ID['tiny-dark']
+    : BASE_THEME_BY_ID['tiny-light'];
 }
 
 export function buildThemeDocumentFromSeeds(
@@ -123,36 +78,7 @@ export function mergeThemeDocuments(
 }
 
 export function resolveThemeDocument(theme: ThemeDocument): Record<string, string> {
-  const baseTheme = getBaseTheme(theme);
-  const baseSemantic = baseTheme.tokens?.semantic ?? {};
-  const baseComponents = baseTheme.tokens?.components ?? {};
-  const semantic = theme.tokens?.semantic ?? {};
-  const components = theme.tokens?.components ?? {};
-
-  const rawValues: Record<string, string> = { ...SOURCE_VALUES };
-
-  for (const [key, value] of Object.entries(baseSemantic)) rawValues[key] = String(value);
-  for (const [key, value] of Object.entries(baseComponents)) rawValues[key] = String(value);
-  for (const [key, value] of Object.entries(semantic)) rawValues[key] = String(value);
-  for (const [key, value] of Object.entries(components)) rawValues[key] = String(value);
-
-  const cache = new Map<string, string>();
-  const resolved: Record<string, string> = {};
-
-  for (const token of REGISTRY_TOKENS) {
-    const value = resolveTokenValue(token.key, rawValues, cache, new Set<string>());
-    resolved[token.key.includes('.') ? componentTokenKeyToCssVar(token.key) : `--ty-${token.key}`] = value;
-  }
-
-  for (const [key, value] of Object.entries(semantic)) {
-    if (!(key in SOURCE_VALUES)) resolved[`--ty-${key}`] = String(value);
-  }
-
-  for (const [key, value] of Object.entries(components)) {
-    if (!(key in SOURCE_VALUES)) resolved[componentTokenKeyToCssVar(key)] = String(value);
-  }
-
-  return resolved;
+  return resolveTheme(theme).cssVars;
 }
 
 export function generateThemeDocumentJSON(theme: ThemeDocument): string {
@@ -171,7 +97,7 @@ export function listChangedThemeTokens(theme: ThemeDocument): ThemeTokenChange[]
     key,
     category: 'component' as const,
     value: String(value),
-    cssVar: componentTokenKeyToCssVar(key),
+    cssVar: tokenKeyToCssVar(key),
   }));
 
   return [...semanticEntries, ...componentEntries];
@@ -187,7 +113,7 @@ export function generateThemeCssVariables(theme: ThemeDocument): string {
 }
 
 export function compareThemeAgainstBase(theme: ThemeDocument): ThemeTokenComparison[] {
-  const baseResolved = resolveThemeDocument(getBaseTheme(theme));
+  const baseResolved = resolveTheme(getBaseTheme(theme)).cssVars;
 
   return listChangedThemeTokens(theme).map((change) => ({
     ...change,
diff --git a/packages/react/src/auto-complete/__tests__/autocomplete.test.tsx b/packages/react/src/auto-complete/__tests__/autocomplete.test.tsx
index 69243628..436ae677 100644
--- a/packages/react/src/auto-complete/__tests__/autocomplete.test.tsx
+++ b/packages/react/src/auto-complete/__tests__/autocomplete.test.tsx
@@ -1,4 +1,4 @@
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
 import AutoComplete from '../index';
 
 const options = [
@@ -76,6 +76,22 @@ describe('<AutoComplete />', () => {
     expect(wrapper).not.toHaveClass('ty-auto-complete_open');
   });
 
+  it('should close on outside click', async () => {
+    const { container } = render(
+      <div>
+        <AutoComplete options={options} defaultOpen />
+        <button>Outside</button>
+      </div>
+    );
+
+    expect(getOptions().length).toBeGreaterThan(0);
+    fireEvent.click(screen.getByText('Outside'));
+
+    await waitFor(() => {
+      expect(container.querySelector('.ty-auto-complete')).not.toHaveClass('ty-auto-complete_open');
+    });
+  });
+
   it('should handle disabled state', () => {
     const { container } = render(<AutoComplete options={options} disabled />);
     expect(container.firstChild).toHaveClass('ty-auto-complete_disabled');
diff --git a/packages/react/src/auto-complete/auto-complete.tsx b/packages/react/src/auto-complete/auto-complete.tsx
index 270a35dd..f01267fa 100644
--- a/packages/react/src/auto-complete/auto-complete.tsx
+++ b/packages/react/src/auto-complete/auto-complete.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { useClickOutside } from '../_utils/hooks';
 import { useCombobox } from '../_utils/useCombobox';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
@@ -80,13 +79,6 @@ const AutoComplete = React.forwardRef<HTMLDivElement, AutoCompleteProps>(
       [`${prefixCls}_open`]: combo.isOpen,
     });
 
-    // Click outside to close
-    useClickOutside(wrapperRef, () => {
-      if (!('open' in props)) {
-        combo.closeDropdown();
-      }
-    });
-
     // Controlled value
     useEffect(() => {
       if ('value' in props) setInputValue(props.value as string);
@@ -169,6 +161,14 @@ const AutoComplete = React.forwardRef<HTMLDivElement, AutoCompleteProps>(
           placement="bottom"
           arrow={false}
           visible={showDropdown}
+          onVisibleChange={(nextOpen) => {
+            if (nextOpen) {
+              combo.openDropdown();
+              return;
+            }
+
+            combo.closeDropdown();
+          }}
           content={renderOverlay()}>
           <Input
             ref={inputRef}
diff --git a/packages/react/src/calendar/style/index.scss b/packages/react/src/calendar/style/index.scss
index 0a6e0e9a..515367b7 100644
--- a/packages/react/src/calendar/style/index.scss
+++ b/packages/react/src/calendar/style/index.scss
@@ -39,7 +39,7 @@
     background: transparent;
     cursor: pointer;
     border-radius: var(--ty-calendar-nav-button-radius);
-    font-size: 18px;
+    font-size: var(--ty-calendar-nav-button-font-size);
     color: var(--ty-calendar-nav-button-color);
     transition: color 0.2s;
 
@@ -56,7 +56,7 @@
   &__title {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--ty-calendar-title-gap);
     font-weight: var(--ty-calendar-title-font-weight);
     font-size: var(--ty-calendar-title-font-size);
   }
@@ -67,8 +67,8 @@
     cursor: pointer;
     font-weight: var(--ty-calendar-title-font-weight);
     font-size: inherit;
-    padding: 2px 6px;
-    border-radius: 4px;
+    padding: var(--ty-calendar-title-button-padding);
+    border-radius: var(--ty-calendar-title-button-radius);
     color: var(--ty-calendar-title-color);
     transition: color 0.2s;
 
@@ -92,7 +92,7 @@
   }
 
   &__cell-header {
-    padding: 8px 0;
+    padding: var(--ty-calendar-cell-header-padding);
     text-align: center;
     font-weight: 500;
     font-size: var(--ty-calendar-cell-header-font-size);
@@ -102,17 +102,17 @@
   // ── Week number ─────────────────────────────────────────────────────────
 
   &__week-number-header {
-    width: 32px;
+    width: var(--ty-calendar-week-number-width);
     color: var(--ty-calendar-week-number-color);
     font-weight: 400;
-    font-size: 12px;
+    font-size: var(--ty-calendar-week-number-font-size);
   }
 
   &__week-number {
     text-align: center;
-    font-size: 12px;
+    font-size: var(--ty-calendar-week-number-font-size);
     color: var(--ty-calendar-week-number-color);
-    padding: 4px 0;
+    padding: var(--ty-calendar-week-number-padding);
     user-select: none;
   }
 
@@ -212,9 +212,9 @@
   // ── Cell inner ──────────────────────────────────────────────────────────
 
   &__cell-inner {
-    padding: 4px;
+    padding: var(--ty-calendar-cell-inner-padding);
     border-radius: var(--ty-calendar-radius);
-    min-height: 24px;
+    min-height: var(--ty-calendar-cell-inner-min-height);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -222,22 +222,22 @@
   }
 
   &_fullscreen &__cell-inner {
-    min-height: 60px;
-    padding: 4px 8px;
+    min-height: var(--ty-calendar-cell-inner-min-height-fullscreen);
+    padding: var(--ty-calendar-cell-inner-padding-fullscreen);
     align-items: stretch;
   }
 
   &__cell-date {
     display: inline-block;
-    line-height: 24px;
-    min-width: 24px;
+    line-height: var(--ty-calendar-cell-date-line-height);
+    min-width: var(--ty-calendar-cell-date-min-width);
     text-align: center;
     font-size: var(--ty-calendar-cell-date-font-size);
   }
 
   &__cell-content {
-    font-size: 12px;
-    margin-top: 2px;
+    font-size: var(--ty-calendar-cell-content-font-size);
+    margin-top: var(--ty-calendar-cell-content-margin-top);
   }
 
   // ── Dot indicator ───────────────────────────────────────────────────────
@@ -278,8 +278,7 @@
       color: var(--ty-calendar-panel-cell-color-selected);
 
       &:hover {
-        background: var(--ty-calendar-panel-cell-bg-selected);
-        opacity: 0.9;
+        background: var(--ty-calendar-panel-cell-bg-selected-hover);
       }
     }
   }
@@ -291,8 +290,8 @@
   }
 
   &__month-content {
-    font-size: 12px;
-    margin-top: 4px;
+    font-size: var(--ty-calendar-month-content-font-size);
+    margin-top: var(--ty-calendar-month-content-margin-top);
   }
 
   // ── Decade panel ────────────────────────────────────────────────────────
@@ -321,8 +320,7 @@
       color: var(--ty-calendar-panel-cell-color-selected);
 
       &:hover {
-        background: var(--ty-calendar-panel-cell-bg-selected);
-        opacity: 0.9;
+        background: var(--ty-calendar-panel-cell-bg-selected-hover);
       }
     }
 
@@ -345,7 +343,7 @@
     font-size: var(--ty-calendar-today-link-font-size);
 
     &:hover {
-      opacity: 0.8;
+      color: var(--ty-calendar-today-link-color-hover);
     }
   }
 }
diff --git a/packages/react/src/cascader/__tests__/cascader.test.tsx b/packages/react/src/cascader/__tests__/cascader.test.tsx
index 21a2e223..38015891 100644
--- a/packages/react/src/cascader/__tests__/cascader.test.tsx
+++ b/packages/react/src/cascader/__tests__/cascader.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
 import Cascader from '../index';
 import ConfigProvider from '../../config-provider';
 
@@ -76,6 +76,25 @@ describe('<Cascader />', () => {
     expect(container.firstChild).toHaveClass('ty-cascader_disabled');
   });
 
+  it('should close on outside click', async () => {
+    const { container } = render(
+      <div>
+        <Cascader options={options} />
+        <button>Outside</button>
+      </div>
+    );
+
+    const selector = container.querySelector('.ty-cascader__selector');
+    fireEvent.click(selector!);
+    expect(document.body.querySelector('.ty-cascader__dropdown')).toBeTruthy();
+
+    fireEvent.click(screen.getByText('Outside'));
+
+    await waitFor(() => {
+      expect(container.querySelector('.ty-cascader')).not.toHaveClass('ty-cascader_open');
+    });
+  });
+
   it('should display selected value', () => {
     const { getByText } = render(
       <Cascader options={options} value={['zhejiang', 'hangzhou', 'xihu']} />
@@ -97,10 +116,30 @@ describe('<Cascader />', () => {
     fireEvent.click(selector!);
 
     const dropdown = popupContainer.querySelector('.ty-cascader__dropdown');
+    const popup = dropdown?.closest('.ty-popup');
 
     expect(dropdown).toBeTruthy();
-    expect(dropdown?.parentElement).toBe(popupContainer);
+    expect(popup?.parentElement).toBe(popupContainer);
 
     document.body.removeChild(popupContainer);
   });
+
+  it('should call onDropdownVisibleChange when outside click closes dropdown', async () => {
+    const onDropdownVisibleChange = jest.fn();
+
+    const { container } = render(
+      <div>
+        <Cascader options={options} onDropdownVisibleChange={onDropdownVisibleChange} />
+        <button>Outside</button>
+      </div>
+    );
+
+    const selector = container.querySelector('.ty-cascader__selector');
+    fireEvent.click(selector!);
+    fireEvent.click(screen.getByText('Outside'));
+
+    await waitFor(() => {
+      expect(onDropdownVisibleChange).toHaveBeenCalledWith(false);
+    });
+  });
 });
diff --git a/packages/react/src/cascader/cascader.tsx b/packages/react/src/cascader/cascader.tsx
index 925d68f2..77cd17ce 100644
--- a/packages/react/src/cascader/cascader.tsx
+++ b/packages/react/src/cascader/cascader.tsx
@@ -1,11 +1,9 @@
 import React, { useState, useEffect, useRef, useContext, useMemo, useCallback } from 'react';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider/config-context';
-import { resolvePopupContainer } from '../config-provider/container-utils';
-import { getScrollParents } from '../_utils/dom';
 import { getPrefixCls } from '../_utils/general';
 import { ArrowDown } from '../_utils/components';
-import Portal from '../portal';
+import Popup from '../popup';
 import { CascaderProps, CascaderOption, CascaderValue } from './types';
 
 const getOptionsByValue = (
@@ -47,10 +45,8 @@ const Cascader = React.forwardRef<HTMLDivElement, CascaderProps>((props, ref) =>
   const prefixCls = getPrefixCls('cascader', configContext.prefixCls, customisedCls);
   const cascaderSize = size || configContext.componentSize || 'md';
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
 
   const [open, setOpen] = useState(false);
-  const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties>({});
   const [selectedValue, setSelectedValue] = useState<CascaderValue>(
     'value' in props ? (props.value ?? []) : (defaultValue ?? [])
   );
@@ -69,33 +65,6 @@ const Cascader = React.forwardRef<HTMLDivElement, CascaderProps>((props, ref) =>
     }
   }, [props.open]);
 
-  const updateDropdownPosition = useCallback(() => {
-    if (!open || !wrapperRef.current || !dropdownRef.current) {
-      return;
-    }
-
-    const rect = wrapperRef.current.getBoundingClientRect();
-    const offsetParent = dropdownRef.current.offsetParent;
-
-    if (offsetParent && offsetParent instanceof HTMLElement) {
-      const offsetParentRect = offsetParent.getBoundingClientRect();
-      setDropdownStyle({
-        position: 'absolute',
-        top: rect.bottom - offsetParentRect.top + offsetParent.scrollTop + 4,
-        left: rect.left - offsetParentRect.left + offsetParent.scrollLeft,
-        zIndex: 1050,
-      });
-      return;
-    }
-
-    setDropdownStyle({
-      position: 'absolute',
-      top: rect.bottom + window.scrollY + 4,
-      left: rect.left + window.scrollX,
-      zIndex: 1050,
-    });
-  }, [open]);
-
   // Build columns from selected value on mount
   useEffect(() => {
     const cols: CascaderOption[][] = [options];
@@ -113,58 +82,20 @@ const Cascader = React.forwardRef<HTMLDivElement, CascaderProps>((props, ref) =>
     setActiveColumns(cols);
   }, [options, selectedValue]);
 
-  useEffect(() => {
-    if (!open) {
-      return undefined;
+  const setDropdownOpen = useCallback((nextOpen: boolean) => {
+    if (!('open' in props)) {
+      setOpen(nextOpen);
     }
-
-    const popupContainer = resolvePopupContainer(configContext, wrapperRef.current);
-    const scrollTargets = new Set<HTMLElement | Window>([
-      ...getScrollParents(wrapperRef.current),
-      ...getScrollParents(popupContainer),
-    ]);
-
-    updateDropdownPosition();
-    window.addEventListener('resize', updateDropdownPosition);
-    scrollTargets.forEach((target) => {
-      target.addEventListener('scroll', updateDropdownPosition);
-    });
-
-    return () => {
-      window.removeEventListener('resize', updateDropdownPosition);
-      scrollTargets.forEach((target) => {
-        target.removeEventListener('scroll', updateDropdownPosition);
-      });
-    };
-  }, [configContext, open, updateDropdownPosition]);
-
-  // Click outside
-  useEffect(() => {
-    if (!open) return;
-    const handleClickOutside = (e: MouseEvent) => {
-      const target = e.target as Node;
-      if (
-        wrapperRef.current && !wrapperRef.current.contains(target) &&
-        dropdownRef.current && !dropdownRef.current.contains(target)
-      ) {
-        closeDropdown();
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [open]);
-
-  const closeDropdown = () => {
-    if (!('open' in props)) setOpen(false);
-    onDropdownVisibleChange?.(false);
-    setHoveredPath([]);
-  };
+    onDropdownVisibleChange?.(nextOpen);
+    if (!nextOpen) {
+      setHoveredPath([]);
+    }
+  }, [onDropdownVisibleChange, props]);
 
   const toggleOpen = () => {
     if (disabled) return;
     const next = !open;
-    if (!('open' in props)) setOpen(next);
-    onDropdownVisibleChange?.(next);
+    setDropdownOpen(next);
   };
 
   const handleOptionSelect = (option: CascaderOption, level: number) => {
@@ -189,7 +120,7 @@ const Cascader = React.forwardRef<HTMLDivElement, CascaderProps>((props, ref) =>
       const selectedOptions = getOptionsByValue(options, newPath);
       onChange?.(newPath, selectedOptions);
       if (isLeaf) {
-        closeDropdown();
+        setDropdownOpen(false);
       }
     }
   };
@@ -237,8 +168,7 @@ const Cascader = React.forwardRef<HTMLDivElement, CascaderProps>((props, ref) =>
 
   const dropdown = open
     ? (
-      <Portal container={resolvePopupContainer(configContext, wrapperRef.current)}>
-        <div className={`${prefixCls}__dropdown`} ref={dropdownRef} style={dropdownStyle}>
+        <div className={`${prefixCls}__dropdown`}>
           <div className={`${prefixCls}__menus`}>
             {activeColumns.map((columnOptions, level) => (
               <ul key={level} className={`${prefixCls}__menu`} role="listbox">
@@ -275,26 +205,33 @@ const Cascader = React.forwardRef<HTMLDivElement, CascaderProps>((props, ref) =>
             ))}
           </div>
         </div>
-      </Portal>
     )
     : null;
 
   return (
     <div {...otherProps} ref={wrapperRef} className={cls} style={style}>
-      <div className={`${prefixCls}__selector`} onClick={toggleOpen}>
-        {displayText ? (
-          <span className={`${prefixCls}__display`}>{displayText}</span>
-        ) : (
-          <span className={`${prefixCls}__placeholder`}>{placeholder}</span>
-        )}
-        {allowClear && selectedValue.length > 0 && (
-          <span className={`${prefixCls}__clear`} onClick={handleClear}>
-            ✕
-          </span>
-        )}
-        <span className={`${prefixCls}__arrow`}><ArrowDown size={10} /></span>
-      </div>
-      {dropdown}
+      <Popup
+        trigger="manual"
+        placement="bottom-start"
+        arrow={false}
+        visible={open}
+        onVisibleChange={setDropdownOpen}
+        content={dropdown}
+      >
+        <div className={`${prefixCls}__selector`} onClick={toggleOpen}>
+          {displayText ? (
+            <span className={`${prefixCls}__display`}>{displayText}</span>
+          ) : (
+            <span className={`${prefixCls}__placeholder`}>{placeholder}</span>
+          )}
+          {allowClear && selectedValue.length > 0 && (
+            <span className={`${prefixCls}__clear`} onClick={handleClear}>
+              ✕
+            </span>
+          )}
+          <span className={`${prefixCls}__arrow`}><ArrowDown size={10} /></span>
+        </div>
+      </Popup>
     </div>
   );
 });
diff --git a/packages/react/src/color-picker/__tests__/color-picker.test.tsx b/packages/react/src/color-picker/__tests__/color-picker.test.tsx
index cb8935fa..05ccb1d2 100644
--- a/packages/react/src/color-picker/__tests__/color-picker.test.tsx
+++ b/packages/react/src/color-picker/__tests__/color-picker.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
 import ColorPicker from '../index';
 import { formatColor, parseColor } from '../utils';
 
@@ -32,6 +32,43 @@ describe('<ColorPicker />', () => {
     expect(container.firstChild).toHaveClass('ty-color-picker_disabled');
   });
 
+  it('should close panel on outside click', async () => {
+    const { container } = render(
+      <div>
+        <ColorPicker />
+        <button>Outside</button>
+      </div>
+    );
+
+    const trigger = container.querySelector('.ty-color-picker__trigger');
+    fireEvent.click(trigger!);
+    expect(document.body.querySelector('.ty-color-picker__panel')).toBeTruthy();
+
+    fireEvent.click(screen.getByText('Outside'));
+
+    await waitFor(() => {
+      expect(document.body.querySelector('.ty-color-picker__panel')).toBeNull();
+    });
+  });
+
+  it('should call onOpenChange when outside click closes panel', async () => {
+    const onOpenChange = jest.fn();
+    const { container } = render(
+      <div>
+        <ColorPicker onOpenChange={onOpenChange} />
+        <button>Outside</button>
+      </div>
+    );
+
+    const trigger = container.querySelector('.ty-color-picker__trigger');
+    fireEvent.click(trigger!);
+    fireEvent.click(screen.getByText('Outside'));
+
+    await waitFor(() => {
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+  });
+
   it('should render presets', () => {
     render(<ColorPicker open presets={['#ff0000', '#00ff00', '#0000ff']} />);
     const presets = document.body.querySelectorAll('.ty-color-picker__preset');
diff --git a/packages/react/src/color-picker/color-picker.tsx b/packages/react/src/color-picker/color-picker.tsx
index 75b2b12e..be5eb445 100644
--- a/packages/react/src/color-picker/color-picker.tsx
+++ b/packages/react/src/color-picker/color-picker.tsx
@@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef, useContext, useCallback } from 'rea
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
-import { useClickOutside } from '../_utils/hooks';
 import Popup from '../popup';
 import { ColorPickerProps, Color, ColorFormat, ColorChangeMeta } from './types';
 import { parseColor, formatColor, hsbToHex } from './utils';
@@ -24,6 +23,7 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
     onChange,
     onChangeComplete,
     onFormatChange,
+    onOpenChange,
     children,
     ...otherProps
   } = props;
@@ -75,11 +75,6 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
     if ('open' in props) setOpen(props.open as boolean);
   }, [props.open]);
 
-  useClickOutside(wrapperRef, () => {
-    if (controlledOpen === undefined) setOpen(false);
-    props.onOpenChange?.(false);
-  });
-
   const emitChange = useCallback(
     (c: Color, nextFormat: ColorFormat = format) => {
       const formatted = formatColor(c, nextFormat);
@@ -236,13 +231,6 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
     };
   }, [dragging, emitChangeComplete]);
 
-  const toggleOpen = () => {
-    if (disabled) return;
-    const next = !isOpen;
-    if (controlledOpen === undefined) setOpen(next);
-    props.onOpenChange?.(next);
-  };
-
   const handleFormatChange = () => {
     const idx = availableFormats.indexOf(format);
     const currentIdx = idx === -1 ? 0 : idx;
@@ -358,15 +346,20 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
   return (
     <div {...otherProps} ref={wrapperRef} className={cls} style={style}>
       <Popup
-        trigger="manual"
+        trigger={trigger}
+        disabled={disabled}
         placement="bottom"
         arrow={false}
         visible={isOpen}
+        onVisibleChange={(nextOpen) => {
+          if (controlledOpen === undefined) {
+            setOpen(nextOpen);
+          }
+          onOpenChange?.(nextOpen);
+        }}
         content={renderPanel()}>
         <div
           className={`${prefixCls}__trigger`}
-          onClick={trigger === 'click' ? toggleOpen : undefined}
-          onMouseEnter={trigger === 'hover' ? toggleOpen : undefined}
         >
           {children || (
             <div className={`${prefixCls}__swatch`}>
diff --git a/packages/react/src/config-provider/__tests__/config-provider.test.tsx b/packages/react/src/config-provider/__tests__/config-provider.test.tsx
index 2d8d4cf9..1fc107b7 100644
--- a/packages/react/src/config-provider/__tests__/config-provider.test.tsx
+++ b/packages/react/src/config-provider/__tests__/config-provider.test.tsx
@@ -104,6 +104,19 @@ describe('<ConfigProvider />', () => {
     ).toBe('blue');
   });
 
+  it('should resolve preset mode and preset token values from extends', () => {
+    const { container } = render(
+      <ConfigProvider theme={{ extends: 'tiny-dark' }}>
+        <Button>Button</Button>
+      </ConfigProvider>
+    );
+
+    const provider = container.querySelector('.ty-config-provider') as HTMLElement;
+    expect(provider.getAttribute('data-tiny-theme')).toBe('dark');
+    expect(provider.style.getPropertyValue('--ty-color-bg')).toBe('#141414');
+    expect(provider.style.getPropertyValue('--ty-color-primary')).toBe('#9065d0');
+  });
+
   it('should replace old token values when the same provider updates theme config', () => {
     const { rerender } = render(
       <ConfigProvider theme={{ tokens: { semantic: { 'color-primary': 'blue', 'border-radius': '8px' } } }}>
diff --git a/packages/react/src/config-provider/config-provider.tsx b/packages/react/src/config-provider/config-provider.tsx
index cd31142c..f87375bd 100644
--- a/packages/react/src/config-provider/config-provider.tsx
+++ b/packages/react/src/config-provider/config-provider.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment, useCallback, useContext, useMemo, useState } from 'react';
 import { ConfigContext, ThemeMode, useConfig } from './config-context';
 import { ConfigProviderComponent, ConfigProviderProps } from './types';
-import { buildCssVars, ThemeConfig } from './token-utils';
+import { buildCssVars, resolveThemeMode, ThemeConfig } from './token-utils';
 import { setStaticConfig } from './static-config';
 import IntlProvider from '../intl-provider';
 
@@ -25,7 +25,7 @@ const ConfigProviderImpl = (props: ConfigProviderProps): React.ReactElement => {
   const [holderElement, setHolderElement] = useState<HTMLDivElement | null>(null);
 
   const themeConfig = isThemeConfig(theme) ? theme : undefined;
-  const mode = themeConfig ? themeConfig.mode : (theme as ThemeMode | undefined);
+  const mode = themeConfig ? resolveThemeMode(themeConfig) : (theme as ThemeMode | undefined);
   const cssVars = useMemo(
     () => (themeConfig ? buildCssVars(themeConfig) : undefined),
     [themeConfig]
diff --git a/packages/react/src/config-provider/token-utils.ts b/packages/react/src/config-provider/token-utils.ts
index 686e919f..5d0e58a6 100644
--- a/packages/react/src/config-provider/token-utils.ts
+++ b/packages/react/src/config-provider/token-utils.ts
@@ -1,64 +1,52 @@
 import React from 'react';
-
-function dotToKebab(str: string): string {
-  return str.replace(/\./g, '-');
-}
-
+import {
+  resolveTheme,
+  type ThemeConfig,
+  type ThemeDocument,
+  type ThemeDocumentMeta,
+  type ThemeDocumentTokens,
+} from '@tiny-design/tokens/resolve-theme';
+
+export type { ThemeConfig, ThemeDocument, ThemeDocumentMeta, ThemeDocumentTokens };
 export type ThemeTokenValue = string | number;
 
-export interface ThemeDocumentMeta {
-  id?: string;
-  name?: string;
-  author?: string;
-  schemaVersion?: number;
-}
-
-export interface ThemeDocumentTokens {
-  semantic?: Record<string, ThemeTokenValue>;
-  components?: Record<string, ThemeTokenValue>;
-}
-
-export interface ThemeDocument {
-  meta?: ThemeDocumentMeta;
-  mode: 'light' | 'dark' | 'system';
-  extends?: string;
-  tokens?: ThemeDocumentTokens;
-}
-
-export interface ThemeConfig {
-  mode?: 'light' | 'dark' | 'system';
-  tokens?: ThemeDocumentTokens;
-  extends?: string;
-  meta?: ThemeDocumentMeta;
+/**
+ * Builds a CSSProperties object from a ThemeConfig or ThemeDocument.
+ */
+export function buildCssVars(
+  theme: ThemeConfig | ThemeDocument
+): React.CSSProperties | undefined {
+  const { cssVars } = resolveTheme(theme);
+  const explicitSemantic = theme.tokens?.semantic ?? {};
+  const explicitComponents = theme.tokens?.components ?? {};
+  const shouldApplyResolvedPreset = Boolean(theme.extends);
+
+  const selectedVars = shouldApplyResolvedPreset
+    ? cssVars
+    : {
+        ...Object.fromEntries(
+          Object.keys(explicitSemantic).map((key) => [`--ty-${key}`, cssVars[`--ty-${key}`]])
+        ),
+        ...Object.fromEntries(
+          Object.keys(explicitComponents).map((key) => [`--ty-${key.replace(/\./g, '-')}`, cssVars[`--ty-${key.replace(/\./g, '-')}`]])
+        ),
+      };
+
+  if (Object.keys(selectedVars).length === 0) return undefined;
+  return selectedVars as React.CSSProperties;
 }
 
-function buildDocumentCssVars(tokens?: ThemeDocumentTokens): Record<string, string> {
-  const vars: Record<string, string> = {};
-  if (!tokens) return vars;
-
-  if (tokens.semantic) {
-    for (const [key, value] of Object.entries(tokens.semantic)) {
-      vars[`--ty-${key}`] = String(value);
-    }
+export function resolveThemeMode(
+  theme?: ThemeConfig | ThemeDocument
+): 'light' | 'dark' | 'system' | undefined {
+  if (!theme) {
+    return undefined;
   }
 
-  if (tokens.components) {
-    for (const [key, value] of Object.entries(tokens.components)) {
-      vars[`--ty-${dotToKebab(key)}`] = String(value);
-    }
+  if (theme.mode) {
+    return theme.mode;
   }
 
-  return vars;
-}
-
-/**
- * Builds a CSSProperties object from a ThemeConfig.
- */
-export function buildCssVars(
-  theme: ThemeConfig
-): React.CSSProperties | undefined {
-  const vars = buildDocumentCssVars(theme.tokens);
-
-  if (Object.keys(vars).length === 0) return undefined;
-  return vars as React.CSSProperties;
+  const { mode } = resolveTheme(theme);
+  return mode;
 }
diff --git a/packages/react/src/date-picker/__tests__/date-picker.test.tsx b/packages/react/src/date-picker/__tests__/date-picker.test.tsx
index 4598ab30..10b6bb55 100644
--- a/packages/react/src/date-picker/__tests__/date-picker.test.tsx
+++ b/packages/react/src/date-picker/__tests__/date-picker.test.tsx
@@ -1,4 +1,4 @@
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
 import DatePicker from '../index';
 
 describe('<DatePicker />', () => {
@@ -67,6 +67,25 @@ describe('<DatePicker />', () => {
     expect(fn).toHaveBeenCalledWith(true);
   });
 
+  it('should close on outside click', async () => {
+    const { container } = render(
+      <div>
+        <DatePicker />
+        <button>Outside</button>
+      </div>
+    );
+
+    const input = container.querySelector('.ty-date-picker__input');
+    input && fireEvent.click(input);
+    expect(document.querySelector('.ty-date-picker__dropdown')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Outside'));
+
+    await waitFor(() => {
+      expect(document.querySelector('.ty-date-picker__dropdown')).not.toBeInTheDocument();
+    });
+  });
+
   it('should format month picker', () => {
     const { container } = render(<DatePicker picker="month" defaultValue={new Date(2024, 5, 1)} />);
     expect(container.querySelector('input')?.value).toBe('2024-06');
diff --git a/packages/react/src/date-picker/date-picker.tsx b/packages/react/src/date-picker/date-picker.tsx
index a4c47120..2f64ce2e 100755
--- a/packages/react/src/date-picker/date-picker.tsx
+++ b/packages/react/src/date-picker/date-picker.tsx
@@ -115,17 +115,6 @@ const DatePicker = (props: DatePickerProps) => {
     if (controlledOpen !== undefined) setOpen(controlledOpen);
   }, [controlledOpen]);
 
-  useEffect(() => {
-    const listener = (event: MouseEvent) => {
-      const target = event.target as HTMLElement;
-      if (wrapperRef.current?.contains(target) || dropdownRef.current?.contains(target)) return;
-      if (controlledOpen === undefined) setOpen(false);
-      onOpenChange?.(false);
-    };
-    document.addEventListener('click', listener);
-    return () => document.removeEventListener('click', listener);
-  }, [controlledOpen, onOpenChange]);
-
   const toggleOpen = useCallback((val: boolean) => {
     if (controlledOpen === undefined) setOpen(val);
     onOpenChange?.(val);
@@ -298,6 +287,7 @@ const DatePicker = (props: DatePickerProps) => {
         placement="bottom-start"
         arrow={false}
         visible={isOpen}
+        onVisibleChange={toggleOpen}
         content={renderOverlay()}>
         <div className={`${prefixCls}__input`} onClick={() => !disabled && toggleOpen(!isOpen)}>
           <input
diff --git a/packages/react/src/date-picker/style/index.scss b/packages/react/src/date-picker/style/index.scss
index 74ef3038..95482936 100755
--- a/packages/react/src/date-picker/style/index.scss
+++ b/packages/react/src/date-picker/style/index.scss
@@ -43,7 +43,7 @@ $dp: #{$prefix}-date-picker;
     line-height: inherit;
     color: var(--ty-picker-input-color);
     cursor: pointer;
-    min-width: var(--ty-picker-input-min-width-date-md);
+    min-width: var(--ty-date-picker-input-min-width-md);
 
     &::placeholder {
       color: var(--ty-input-placeholder, var(--ty-picker-input-color-placeholder, var(--ty-color-text-placeholder)));
@@ -101,7 +101,7 @@ $dp: #{$prefix}-date-picker;
   }
 
   &_sm &__input-field {
-    min-width: var(--ty-picker-input-min-width-date-sm);
+    min-width: var(--ty-date-picker-input-min-width-sm);
   }
 
   &_lg &__input {
@@ -111,7 +111,7 @@ $dp: #{$prefix}-date-picker;
   }
 
   &_lg &__input-field {
-    min-width: var(--ty-picker-input-min-width-date-lg);
+    min-width: var(--ty-date-picker-input-min-width-lg);
   }
 
   // ---- Disabled ----
@@ -141,26 +141,26 @@ $dp: #{$prefix}-date-picker;
   &__header {
     display: flex;
     align-items: center;
-    padding: var(--ty-picker-header-padding);
-    border-bottom: 1px solid var(--ty-picker-header-border);
+    padding: var(--ty-date-picker-header-padding);
+    border-bottom: 1px solid var(--ty-date-picker-header-border);
   }
 
   &__header-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--ty-picker-header-button-size);
-    height: var(--ty-picker-header-button-size);
+    width: var(--ty-date-picker-header-button-size);
+    height: var(--ty-date-picker-header-button-size);
     border: none;
     background: transparent;
-    color: var(--ty-picker-header-button-color);
+    color: var(--ty-date-picker-header-button-color);
     cursor: pointer;
     font-size: 18px;
-    border-radius: var(--ty-picker-header-button-radius);
+    border-radius: var(--ty-date-picker-header-button-radius);
     transition: color 0.2s;
 
     &:hover {
-      color: var(--ty-picker-header-button-color-hover);
+      color: var(--ty-date-picker-header-button-color-hover);
     }
   }
 
@@ -168,25 +168,25 @@ $dp: #{$prefix}-date-picker;
     flex: 1;
     display: flex;
     justify-content: center;
-    gap: var(--ty-picker-header-caption-gap);
+    gap: var(--ty-date-picker-header-caption-gap);
   }
 
   &__header-label {
-    font-weight: var(--ty-picker-header-label-font-weight);
-    font-size: var(--ty-picker-header-label-font-size);
+    font-weight: var(--ty-date-picker-header-label-font-weight);
+    font-size: var(--ty-date-picker-header-label-font-size);
     cursor: pointer;
     padding: 2px 6px;
-    border-radius: var(--ty-picker-header-button-radius);
+    border-radius: var(--ty-date-picker-header-button-radius);
     transition: color 0.2s;
 
     &:hover {
-      color: var(--ty-picker-header-button-color-hover);
+      color: var(--ty-date-picker-header-button-color-hover);
     }
   }
 
   // ---- Body / Table ----
   &__body {
-    padding: var(--ty-picker-body-padding);
+    padding: var(--ty-date-picker-body-padding);
   }
 
   &__table {
@@ -217,16 +217,16 @@ $dp: #{$prefix}-date-picker;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--ty-picker-cell-size);
-    height: var(--ty-picker-cell-size);
-    border-radius: var(--ty-picker-cell-radius);
+    width: var(--ty-date-picker-cell-size);
+    height: var(--ty-date-picker-cell-size);
+    border-radius: var(--ty-date-picker-cell-radius);
     transition: background 0.2s;
-    color: var(--ty-picker-cell-color-muted);
-    font-size: var(--ty-picker-cell-font-size);
+    color: var(--ty-date-picker-cell-color-muted);
+    font-size: var(--ty-date-picker-cell-font-size);
   }
 
   &__cell_in-view &__cell-inner {
-    color: var(--ty-picker-cell-color);
+    color: var(--ty-date-picker-cell-color);
   }
 
   &__cell:hover &__cell-inner {
@@ -234,78 +234,78 @@ $dp: #{$prefix}-date-picker;
   }
 
   &__cell_today &__cell-inner {
-    border: 1px solid var(--ty-picker-cell-today-border);
-    color: var(--ty-picker-cell-today-border);
+    border: 1px solid var(--ty-date-picker-cell-today-border);
+    color: var(--ty-date-picker-cell-today-border);
   }
 
   &__cell_selected &__cell-inner {
-    background: var(--ty-picker-cell-selected-bg);
-    color: var(--ty-picker-cell-selected-color);
+    background: var(--ty-date-picker-cell-selected-bg);
+    color: var(--ty-date-picker-cell-selected-color);
     font-weight: 500;
   }
 
   &__cell_selected:hover &__cell-inner {
-    background: var(--ty-picker-cell-selected-hover-bg);
+    background: var(--ty-date-picker-cell-selected-hover-bg);
   }
 
   &__cell_in-range,
   &__cell_in-preview-range {
-    background: var(--ty-picker-range-bg);
+    background: var(--ty-date-picker-range-bg);
   }
 
   &__cell_range-start,
   &__cell_range-end {
-    background: var(--ty-picker-range-bg);
+    background: var(--ty-date-picker-range-bg);
   }
 
   &__cell_range-start &__cell-inner,
   &__cell_range-end &__cell-inner {
-    background: var(--ty-picker-cell-selected-bg);
-    color: var(--ty-picker-cell-selected-color);
+    background: var(--ty-date-picker-cell-selected-bg);
+    color: var(--ty-date-picker-cell-selected-color);
     font-weight: 500;
   }
 
   &__cell_in-preview-range &__cell-inner,
   &__cell_in-range &__cell-inner {
     background: transparent;
-    color: var(--ty-picker-cell-color);
+    color: var(--ty-date-picker-cell-color);
   }
 
   &__cell_range-start.#{$dp}__cell_in-preview-range &__cell-inner,
   &__cell_range-end.#{$dp}__cell_in-preview-range &__cell-inner,
   &__cell_range-start.#{$dp}__cell_in-range &__cell-inner,
   &__cell_range-end.#{$dp}__cell_in-range &__cell-inner {
-    background: var(--ty-picker-cell-selected-bg);
-    color: var(--ty-picker-cell-selected-color);
+    background: var(--ty-date-picker-cell-selected-bg);
+    color: var(--ty-date-picker-cell-selected-color);
   }
 
   &__cell_disabled &__cell-inner {
-    color: var(--ty-picker-cell-color-muted);
-    background: var(--ty-picker-cell-disabled-bg);
+    color: var(--ty-date-picker-cell-color-muted);
+    background: var(--ty-date-picker-cell-disabled-bg);
   }
 
   &__cell_disabled:hover &__cell-inner {
-    background: var(--ty-picker-cell-disabled-bg);
+    background: var(--ty-date-picker-cell-disabled-bg);
   }
 
   &__cell_dim &__cell-inner {
-    color: var(--ty-picker-cell-color-muted);
+    color: var(--ty-date-picker-cell-color-muted);
   }
 
   // ---- Footer ----
   &__footer {
-    padding: var(--ty-picker-footer-padding);
-    border-top: 1px solid var(--ty-picker-header-border);
+    padding: var(--ty-date-picker-footer-padding);
+    border-top: 1px solid var(--ty-date-picker-header-border);
     text-align: center;
   }
 
   &__today-btn {
-    color: var(--ty-picker-today-color);
+    color: var(--ty-date-picker-today-color);
     cursor: pointer;
-    font-size: var(--ty-picker-today-font-size);
+    font-size: var(--ty-date-picker-today-font-size);
 
     &:hover {
-      opacity: 0.8;
+      color: var(--ty-date-picker-today-color-hover);
     }
   }
 }
diff --git a/packages/react/src/dropdown/__tests__/dropdown.test.tsx b/packages/react/src/dropdown/__tests__/dropdown.test.tsx
index 3f7d7b18..43de3357 100644
--- a/packages/react/src/dropdown/__tests__/dropdown.test.tsx
+++ b/packages/react/src/dropdown/__tests__/dropdown.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import Dropdown from '../index';
+import Menu from '../../menu';
 
 describe('<Dropdown />', () => {
   it('should match the snapshot', () => {
@@ -14,4 +15,64 @@ describe('<Dropdown />', () => {
     const { getByText } = render(<Dropdown overlay={overlay}><button>Click me</button></Dropdown>);
     expect(getByText('Click me')).toBeInTheDocument();
   });
+
+  it('should open and close on outside click for click trigger', async () => {
+    render(
+      <div>
+        <Dropdown trigger="click" overlay={<div>Menu</div>}>
+          <button>Trigger</button>
+        </Dropdown>
+        <button>Outside</button>
+      </div>
+    );
+
+    fireEvent.click(screen.getByText('Trigger'));
+    expect(screen.getByText('Menu')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Outside'));
+
+    await waitFor(() => {
+      expect(screen.queryByText('Menu')).not.toBeInTheDocument();
+    });
+  });
+
+  it('should close when a menu item is selected', async () => {
+    render(
+      <Dropdown
+        trigger="click"
+        overlay={
+          <Menu>
+            <Menu.Item>Menu Item</Menu.Item>
+          </Menu>
+        }
+      >
+        <button>Trigger</button>
+      </Dropdown>
+    );
+
+    fireEvent.click(screen.getByText('Trigger'));
+    fireEvent.click(screen.getByText('Menu Item'));
+
+    await waitFor(() => {
+      expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    });
+  });
+
+  it('should respect controlled visible prop', () => {
+    const { rerender } = render(
+      <Dropdown visible={false} trigger="click" overlay={<div>Menu</div>}>
+        <button>Trigger</button>
+      </Dropdown>
+    );
+
+    expect(screen.queryByText('Menu')).not.toBeInTheDocument();
+
+    rerender(
+      <Dropdown visible={true} trigger="click" overlay={<div>Menu</div>}>
+        <button>Trigger</button>
+      </Dropdown>
+    );
+
+    expect(screen.getByText('Menu')).toBeInTheDocument();
+  });
 });
diff --git a/packages/react/src/dropdown/demo/Close.tsx b/packages/react/src/dropdown/demo/Close.tsx
index 0d4e6859..ffa755ca 100644
--- a/packages/react/src/dropdown/demo/Close.tsx
+++ b/packages/react/src/dropdown/demo/Close.tsx
@@ -29,11 +29,11 @@ export default function CloseDemo() {
     <Dropdown
       overlay={renderOverlay()}
       onVisibleChange={handleVisibleChange}
-      open={visible}
+      visible={visible}
     >
       <a onClick={(e) => e.preventDefault()}>
         Hover me <IconDown size={12} />
       </a>
     </Dropdown>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/dropdown/dropdown.tsx b/packages/react/src/dropdown/dropdown.tsx
index 4bb66186..dbda12d6 100755
--- a/packages/react/src/dropdown/dropdown.tsx
+++ b/packages/react/src/dropdown/dropdown.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
@@ -22,100 +22,50 @@ const Dropdown = (props: DropdownProps): JSX.Element => {
   const configContext = useContext(ConfigContext);
   const prefixCls = getPrefixCls('dropdown', configContext.prefixCls, customisedCls);
   const cls = classNames(prefixCls, className);
-  const [popupVisible, setPopupVisible] = useState<boolean>(
-    'visible' in props ? (props.visible as boolean) : false
-  );
-  const delayDisplayPopupTimer = useRef<number | undefined>(undefined);
-  const delayHidePopupTimer = useRef<number | undefined>(undefined);
-
-  const displayPopup = useCallback(() => {
-    !('visible' in props) && setPopupVisible(true);
-    onVisibleChange && onVisibleChange(true);
-  }, [props, onVisibleChange]);
-
-  const hidePopup = useCallback(() => {
-    !('visible' in props) && setPopupVisible(false);
-    onVisibleChange && onVisibleChange(false);
-  }, [props, onVisibleChange]);
+  const isControlled = 'visible' in props;
+  const [uncontrolledVisible, setUncontrolledVisible] = useState(false);
+  const popupVisible = isControlled ? Boolean(props.visible) : uncontrolledVisible;
 
-  const delayHidePopup = useCallback((): void => {
-    delayHidePopupTimer.current = window.setTimeout(() => {
-      hidePopup();
-    }, 100);
-  }, [hidePopup]);
+  const setPopupVisibleState = useCallback((nextVisible: boolean): void => {
+    if (!isControlled) {
+      setUncontrolledVisible(nextVisible);
+    }
+    onVisibleChange?.(nextVisible);
+  }, [isControlled, onVisibleChange]);
 
   const renderOverlay = (): React.ReactNode => {
     if (!overlay) {
       return null;
     }
 
+    const originalOnSelect = overlay.props.onSelect;
+    const isMenuOverlay = (overlay.type as React.ElementType & { displayName?: string }).displayName === 'Menu';
+
+    if (!isMenuOverlay) {
+      return overlay;
+    }
+
     const overlayProps: Partial<MenuProps> = {
       overlayClassName: cls,
       mode: 'vertical',
       theme: 'light',
-      onMouseEnter: () => {
-        if (trigger === 'hover') {
-          displayPopup();
-          window.clearTimeout(delayHidePopupTimer.current);
-        }
-      },
-      onMouseLeave: () => {
-        if (trigger === 'hover') {
-          delayHidePopup();
-          window.clearTimeout(delayDisplayPopupTimer.current);
-        }
-      },
       onSelect: (selectedIndex) => {
-        const { onSelect } = overlay.props;
-        onSelect && onSelect(selectedIndex);
-        hidePopup();
+        originalOnSelect?.(selectedIndex);
+        setPopupVisibleState(false);
       },
     };
     return React.cloneElement(overlay, overlayProps);
   };
 
-  const handleTargetOnMouseEnter = () => {
-    if (trigger === 'hover') {
-      displayPopup();
-      window.clearTimeout(delayHidePopupTimer.current);
-    }
-  };
-
-  const handleTargetOnMouseLeave = () => {
-    if (trigger === 'hover') {
-      delayHidePopup();
-      window.clearTimeout(delayDisplayPopupTimer.current);
-    }
-  };
-
-  const handleTargetOnClick = () => {
-    if (trigger === 'click') {
-      displayPopup();
-    }
-  };
-
-  // Clear timers on unmount
-  useEffect(() => {
-    return () => {
-      window.clearTimeout(delayDisplayPopupTimer.current);
-      window.clearTimeout(delayHidePopupTimer.current);
-    };
-  }, []);
-
-  useEffect(() => {
-    'visible' in props && setPopupVisible(props.visible as boolean);
-  }, [props.visible]);
-
   const handleKeyDown = (e: React.KeyboardEvent) => {
+    children.props.onKeyDown?.(e);
+
     if (e.key === 'Escape' && popupVisible) {
-      hidePopup();
+      setPopupVisibleState(false);
     }
   };
 
   const childrenProps = {
-    onMouseEnter: handleTargetOnMouseEnter,
-    onMouseLeave: handleTargetOnMouseLeave,
-    onClick: handleTargetOnClick,
     onKeyDown: handleKeyDown,
     'aria-expanded': popupVisible,
     'aria-haspopup': true as const,
@@ -130,9 +80,10 @@ const Dropdown = (props: DropdownProps): JSX.Element => {
       disabled={disabled}
       placement={placement}
       flip={!('placement' in props)}
-      trigger="manual"
+      trigger={trigger}
       className={cls}
       visible={popupVisible}
+      onVisibleChange={setPopupVisibleState}
       content={renderOverlay()}>
       {React.cloneElement(children, childrenProps)}
     </Popup>
diff --git a/packages/react/src/dropdown/style/index.scss b/packages/react/src/dropdown/style/index.scss
index 62d1ea8f..2147dd0d 100644
--- a/packages/react/src/dropdown/style/index.scss
+++ b/packages/react/src/dropdown/style/index.scss
@@ -3,20 +3,20 @@
 .#{$prefix}-dropdown {
 
   .#{$prefix}-menu, .#{$prefix}-menu-sub__list {
-    padding: 4px 0;
+    padding: var(--ty-dropdown-menu-padding);
 
     .#{$prefix}-menu-item_active {
       background-color: transparent;
-      color: var(--ty-color-text);
+      color: var(--ty-dropdown-item-color);
     }
 
     .#{$prefix}-menu-item {
-      padding: 8px 15px;
+      padding: var(--ty-dropdown-item-padding);
       margin: 0;
 
       &:hover:not(.#{$prefix}-menu-item_disabled) {
-        background-color: var(--ty-color-bg-spotlight);
-        color: var(--ty-color-text);
+        background-color: var(--ty-dropdown-item-hover-bg);
+        color: var(--ty-dropdown-item-color);
       }
     }
   }
@@ -27,7 +27,7 @@
 
   .#{$prefix}-menu-item-group {
     &__title {
-      padding: 8px 10px;
+      padding: var(--ty-dropdown-group-title-padding);
 
       &:first-child {
         margin-top: 0;
diff --git a/packages/react/src/menu/__tests__/menu.test.tsx b/packages/react/src/menu/__tests__/menu.test.tsx
index c9bc2377..d941e9f7 100644
--- a/packages/react/src/menu/__tests__/menu.test.tsx
+++ b/packages/react/src/menu/__tests__/menu.test.tsx
@@ -1,8 +1,16 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen, waitFor, act } from '@testing-library/react';
 import Menu from '../index';
 
 describe('<Menu />', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
   it('should match the snapshot', () => {
     const { asFragment } = render(
       <Menu>
@@ -41,4 +49,46 @@ describe('<Menu />', () => {
     );
     expect(container.firstChild).toHaveClass('ty-menu_horizontal');
   });
+
+  it('should open submenu popup on hover in vertical mode', () => {
+    render(
+      <Menu mode="vertical">
+        <Menu.SubMenu title="Parent">
+          <Menu.Item>Child</Menu.Item>
+        </Menu.SubMenu>
+      </Menu>
+    );
+
+    fireEvent.mouseEnter(screen.getByText('Parent').closest('li') as HTMLElement);
+    act(() => {
+      jest.advanceTimersByTime(250);
+    });
+
+    expect(screen.getByText('Child')).toBeInTheDocument();
+  });
+
+  it('should close submenu popup on outside click', async () => {
+    render(
+      <div>
+        <Menu mode="vertical">
+          <Menu.SubMenu title="Parent">
+            <Menu.Item>Child</Menu.Item>
+          </Menu.SubMenu>
+        </Menu>
+        <button>Outside</button>
+      </div>
+    );
+
+    fireEvent.mouseEnter(screen.getByText('Parent').closest('li') as HTMLElement);
+    act(() => {
+      jest.advanceTimersByTime(250);
+    });
+    expect(screen.getByText('Child')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Outside'));
+
+    await waitFor(() => {
+      expect(screen.queryByText('Child')).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/packages/react/src/menu/sub-menu.tsx b/packages/react/src/menu/sub-menu.tsx
index 06f0f568..a950e247 100644
--- a/packages/react/src/menu/sub-menu.tsx
+++ b/packages/react/src/menu/sub-menu.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState, useRef } from 'react';
+import React, { useContext, useEffect, useState, useRef } from 'react';
 import classNames from 'classnames';
 import { MenuContext } from './menu-context';
 import { SubMenuContext } from './sub-menu-context';
@@ -51,6 +51,12 @@ const SubMenu = (props: SubMenuProps): JSX.Element => {
   };
 
   const timerRef = useRef<number | undefined>(undefined);
+  useEffect(() => {
+    return () => {
+      window.clearTimeout(timerRef.current);
+    };
+  }, []);
+
   const handleMouse = (e: React.MouseEvent, toggle: boolean): void => {
     e.preventDefault();
     const timer = timerRef.current;
@@ -82,7 +88,9 @@ const SubMenu = (props: SubMenuProps): JSX.Element => {
     const titleNode = titleRef.current;
     if (titleNode && !nonRootSubMenu) {
       const { marginLeft, marginRight } = window.getComputedStyle(titleNode);
-      minWidth = titleNode.offsetWidth + parseFloat(marginLeft) + parseFloat(marginRight);
+      const horizontalMargin =
+        (Number.parseFloat(marginLeft) || 0) + (Number.parseFloat(marginRight) || 0);
+      minWidth = titleNode.offsetWidth + horizontalMargin;
     }
     return (
       <ul className={subMenuCls} style={{ minWidth }}>
@@ -141,6 +149,7 @@ const SubMenu = (props: SubMenuProps): JSX.Element => {
             className={overlayClassName}
             trigger="manual"
             visible={menuOpen}
+            onVisibleChange={setMenuOpen}
             biZoom={rightPopupMenu}
             placement={rightPopupMenu ? 'right-start' : 'bottom-start'}
             content={renderChildrenList()}>
diff --git a/packages/react/src/modal/__tests__/modal.test.tsx b/packages/react/src/modal/__tests__/modal.test.tsx
index 6531e2c9..48de4a41 100644
--- a/packages/react/src/modal/__tests__/modal.test.tsx
+++ b/packages/react/src/modal/__tests__/modal.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { act, render, fireEvent } from '@testing-library/react';
+import { act, render, fireEvent, screen, waitFor } from '@testing-library/react';
 import Modal from '../index';
 import ConfigProvider from '../../config-provider';
 
@@ -104,4 +104,27 @@ describe('<Modal />', () => {
       instance.destroy();
     });
   });
+
+  it('should prefer onClose over onCancel for static modal closing', () => {
+    const onClose = jest.fn();
+    const onCancel = jest.fn();
+    let instance!: ReturnType<typeof Modal.open>;
+
+    act(() => {
+      instance = Modal.open({
+        header: 'Static Close Modal',
+        children: 'Close Content',
+        onClose,
+        onCancel,
+      });
+    });
+
+    const closeButtons = screen.getAllByLabelText('Close');
+    fireEvent.click(closeButtons[closeButtons.length - 1]);
+
+    return waitFor(() => {
+      expect(onClose).toHaveBeenCalledTimes(1);
+      expect(onCancel).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/packages/react/src/modal/static-modal.tsx b/packages/react/src/modal/static-modal.tsx
index 2c67159f..327255a4 100644
--- a/packages/react/src/modal/static-modal.tsx
+++ b/packages/react/src/modal/static-modal.tsx
@@ -27,8 +27,11 @@ function createStaticModal(config: StaticModalProps): StaticModalInstance {
           {...currentConfig}
           visible={visible}
           onClose={(event) => {
-            currentConfig.onClose?.(event);
-            currentConfig.onCancel?.(event);
+            if (currentConfig.onClose) {
+              currentConfig.onClose(event);
+            } else {
+              currentConfig.onCancel?.(event);
+            }
             visible = false;
             render();
           }}
diff --git a/packages/react/src/overlay/__tests__/overlay.test.tsx b/packages/react/src/overlay/__tests__/overlay.test.tsx
index 69e101e4..79ec191e 100644
--- a/packages/react/src/overlay/__tests__/overlay.test.tsx
+++ b/packages/react/src/overlay/__tests__/overlay.test.tsx
@@ -37,4 +37,18 @@ describe('<Overlay />', () => {
     expect(container.style.overflow).toBe('');
     document.body.removeChild(container);
   });
+
+  it('should render into configured popup container', () => {
+    const popupContainer = document.createElement('div');
+    document.body.appendChild(popupContainer);
+
+    render(
+      <ConfigProvider getPopupContainer={() => popupContainer}>
+        <Overlay isShow>Popup Container Content</Overlay>
+      </ConfigProvider>
+    );
+
+    expect(popupContainer.textContent).toContain('Popup Container Content');
+    document.body.removeChild(popupContainer);
+  });
 });
diff --git a/packages/react/src/overlay/style/index.scss b/packages/react/src/overlay/style/index.scss
index 833269c4..7b5c57f1 100755
--- a/packages/react/src/overlay/style/index.scss
+++ b/packages/react/src/overlay/style/index.scss
@@ -5,19 +5,19 @@
   inset: 0;
   width: 100%;
   height: 100%;
-  transition: opacity 300ms;
+  transition: opacity var(--ty-overlay-fade-duration);
   opacity: 0;
 
   &_default {
-    background-color: var(--ty-color-overlay-bg);
+    background-color: var(--ty-overlay-bg-default);
   }
 
   &_blurred {
-    backdrop-filter: blur(3px);
+    backdrop-filter: blur(var(--ty-overlay-blur-radius));
   }
 
   &_inverted {
-    background-color: var(--ty-color-overlay-inverted);
+    background-color: var(--ty-overlay-bg-inverted);
   }
 
   &_fade {
diff --git a/packages/react/src/pop-confirm/__tests__/pop-confirm.test.tsx b/packages/react/src/pop-confirm/__tests__/pop-confirm.test.tsx
index 08daac07..e9e0c8fc 100644
--- a/packages/react/src/pop-confirm/__tests__/pop-confirm.test.tsx
+++ b/packages/react/src/pop-confirm/__tests__/pop-confirm.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import PopConfirm from '../index';
 
 describe('<PopConfirm />', () => {
@@ -12,4 +12,37 @@ describe('<PopConfirm />', () => {
     const { getByText } = render(<PopConfirm title="Sure?"><button>Delete</button></PopConfirm>);
     expect(getByText('Delete')).toBeInTheDocument();
   });
+
+  it('should support controlled visible', () => {
+    const { queryByText, rerender } = render(
+      <PopConfirm title="Sure?" visible={false}>
+        <button>Delete</button>
+      </PopConfirm>
+    );
+
+    expect(queryByText('Sure?')).not.toBeInTheDocument();
+
+    rerender(
+      <PopConfirm title="Sure?" visible={true}>
+        <button>Delete</button>
+      </PopConfirm>
+    );
+
+    expect(queryByText('Sure?')).toBeInTheDocument();
+  });
+
+  it('should notify visibility changes when confirm closes a controlled popup', () => {
+    const onVisibleChange = jest.fn();
+    const onConfirm = jest.fn();
+    const { getByText } = render(
+      <PopConfirm title="Sure?" visible={true} onVisibleChange={onVisibleChange} onConfirm={onConfirm}>
+        <button>Delete</button>
+      </PopConfirm>
+    );
+
+    fireEvent.click(getByText('Yes'));
+
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+    expect(onVisibleChange).toHaveBeenCalledWith(false);
+  });
 });
diff --git a/packages/react/src/pop-confirm/pop-confirm.tsx b/packages/react/src/pop-confirm/pop-confirm.tsx
index 42b7f54d..0db539ad 100755
--- a/packages/react/src/pop-confirm/pop-confirm.tsx
+++ b/packages/react/src/pop-confirm/pop-confirm.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import classNames from 'classnames';
 import Popover from '../popover';
 import Button from '../button';
@@ -19,6 +19,8 @@ const PopConfirm = (props: PopConfirmProps): JSX.Element => {
     onConfirm,
     onCancel,
     onVisibleChange,
+    visible,
+    defaultVisible = false,
     className,
     children,
     prefixCls: customisedCls,
@@ -27,15 +29,24 @@ const PopConfirm = (props: PopConfirmProps): JSX.Element => {
   const configContext = useContext(ConfigContext);
   const prefixCls = getPrefixCls('pop-confirm', configContext.prefixCls, customisedCls);
   const cls = classNames(prefixCls, className);
-  const [visible, setVisible] = useState(false);
+  const isControlled = visible !== undefined;
+  const [uncontrolledVisible, setUncontrolledVisible] = useState(defaultVisible);
+  const popupVisible = isControlled ? visible : uncontrolledVisible;
+
+  const setPopupVisibleState = useCallback((nextVisible: boolean): void => {
+    if (!isControlled) {
+      setUncontrolledVisible(nextVisible);
+    }
+    onVisibleChange?.(nextVisible);
+  }, [isControlled, onVisibleChange]);
 
   const cancelOnClick = (e: React.MouseEvent): void => {
-    setVisible(false);
+    setPopupVisibleState(false);
     onCancel && onCancel(e);
   };
 
   const confirmOnClick = (e: React.MouseEvent): void => {
-    setVisible(false);
+    setPopupVisibleState(false);
     onConfirm && onConfirm(e);
   };
 
@@ -63,11 +74,8 @@ const PopConfirm = (props: PopConfirmProps): JSX.Element => {
       {...otherProps}
       className={cls}
       role="alertdialog"
-      visible={visible}
-      onVisibleChange={(val: boolean): void => {
-        setVisible(val);
-        onVisibleChange && onVisibleChange(val);
-      }}
+      visible={popupVisible}
+      onVisibleChange={setPopupVisibleState}
       content={overlay()}
       placement={placement}>
       {children}
diff --git a/packages/react/src/pop-confirm/style/index.scss b/packages/react/src/pop-confirm/style/index.scss
index 6fd09cfb..ad06b11d 100755
--- a/packages/react/src/pop-confirm/style/index.scss
+++ b/packages/react/src/pop-confirm/style/index.scss
@@ -1,15 +1,15 @@
 @use '@tiny-design/tokens/scss/variables' as *;
 
 .#{$prefix}-pop-confirm {
-  color: var(--ty-color-text-secondary);
+  color: var(--ty-pop-confirm-color);
 
   &__overlay {
-    padding: 4px;
+    padding: var(--ty-pop-confirm-overlay-padding);
   }
 
   &__messages {
-    padding: 0 0 12px;
-    font-size: var(--ty-font-size-base);
+    padding: 0 0 var(--ty-pop-confirm-messages-padding-bottom);
+    font-size: var(--ty-pop-confirm-messages-font-size);
     display: flex;
     align-items: center;
   }
@@ -18,12 +18,12 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 8px;
+    gap: var(--ty-pop-confirm-buttons-gap);
     text-align: right;
   }
 
   &__title {
-    margin-left: 5px;
+    margin-left: var(--ty-pop-confirm-title-margin-left);
   }
 
 }
diff --git a/packages/react/src/popover/popover.tsx b/packages/react/src/popover/popover.tsx
index bbc9a9ad..d2cf2577 100755
--- a/packages/react/src/popover/popover.tsx
+++ b/packages/react/src/popover/popover.tsx
@@ -21,7 +21,7 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>((props, ref) => {
   const cls = classNames(className, prefixCls, `${prefixCls}_${theme}`);
 
   const renderContent = (): React.ReactElement => (
-    <div role={role} className={`${prefixCls}__inner`}>
+    <div ref={ref} role={role} className={`${prefixCls}__inner`}>
       {title && <div className={`${prefixCls}__title`}>{title}</div>}
       {content && <div className={`${prefixCls}__content`}>{content}</div>}
     </div>
diff --git a/packages/react/src/popup/__tests__/popup.test.tsx b/packages/react/src/popup/__tests__/popup.test.tsx
index 95b3e913..b3703cfb 100644
--- a/packages/react/src/popup/__tests__/popup.test.tsx
+++ b/packages/react/src/popup/__tests__/popup.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import Popup from '../index';
 
 describe('<Popup />', () => {
@@ -16,4 +16,42 @@ describe('<Popup />', () => {
     );
     expect(getByText('Trigger')).toBeInTheDocument();
   });
+
+  it('should close on outside click for click trigger', async () => {
+    render(
+      <div>
+        <Popup content={<div>Popup content</div>}>
+          <button>Trigger</button>
+        </Popup>
+        <button>Outside</button>
+      </div>
+    );
+
+    fireEvent.click(screen.getByText('Trigger'));
+    expect(screen.getByText('Popup content')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Outside'));
+
+    await waitFor(() => {
+      expect(screen.queryByText('Popup content')).not.toBeInTheDocument();
+    });
+  });
+
+  it('should respect controlled visible prop', () => {
+    const { rerender } = render(
+      <Popup visible={false} trigger="manual" content={<div>Controlled popup</div>}>
+        <button>Trigger</button>
+      </Popup>
+    );
+
+    expect(screen.queryByText('Controlled popup')).not.toBeInTheDocument();
+
+    rerender(
+      <Popup visible={true} trigger="manual" content={<div>Controlled popup</div>}>
+        <button>Trigger</button>
+      </Popup>
+    );
+
+    expect(screen.getByText('Controlled popup')).toBeInTheDocument();
+  });
 });
diff --git a/packages/react/src/popup/popup.tsx b/packages/react/src/popup/popup.tsx
index 9fa6e7b3..4a508feb 100644
--- a/packages/react/src/popup/popup.tsx
+++ b/packages/react/src/popup/popup.tsx
@@ -7,6 +7,19 @@ import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
 import { Placement, PopupProps } from './types';
 
+function assignRef<T>(ref: React.Ref<T> | undefined, value: T | null): void {
+  if (!ref) {
+    return;
+  }
+
+  if (typeof ref === 'function') {
+    ref(value);
+    return;
+  }
+
+  (ref as React.MutableRefObject<T | null>).current = value;
+}
+
 const Popup = (props: PopupProps): JSX.Element => {
   const {
     disabled = false,
@@ -37,37 +50,64 @@ const Popup = (props: PopupProps): JSX.Element => {
     `${prefixCls}_${placement}`,
     `${prefixCls}_${theme}`
   );
-  const [popupVisible, setPopupVisible] = useState('visible' in props ? visible : defaultVisible);
+  const isControlled = 'visible' in props;
+  const [uncontrolledVisible, setUncontrolledVisible] = useState(defaultVisible);
+  const popupVisible = isControlled ? !!visible : uncontrolledVisible;
   const targetRef = useRef<HTMLElement | null>(null);
   const popupRef = useRef<HTMLDivElement | null>(null);
   const delayDisplayPopupTimer = useRef<number | undefined>(undefined);
   const delayHidePopupTimer = useRef<number | undefined>(undefined);
   const popperRef = useRef<Instance | undefined>(undefined);
+  const isDocumentClickListening = useRef(false);
   const elementProps = {
-    ref: (ref: HTMLElement | null) => (targetRef.current = ref),
+    ref: (ref: HTMLElement | null) => {
+      targetRef.current = ref;
+      assignRef((children as React.ReactElement & { ref?: React.Ref<HTMLElement> }).ref, ref);
+    },
   };
 
+  const clearTimers = useCallback((): void => {
+    window.clearTimeout(delayDisplayPopupTimer.current);
+    window.clearTimeout(delayHidePopupTimer.current);
+  }, []);
+
+  const setPopupVisibleState = useCallback(
+    (nextVisible: boolean): void => {
+      if (!isControlled) {
+        setUncontrolledVisible(nextVisible);
+      }
+      onVisibleChange && onVisibleChange(nextVisible);
+    },
+    [isControlled, onVisibleChange]
+  );
+
   const displayPopup = useCallback(() => {
-    setPopupVisible(true);
-    onVisibleChange && onVisibleChange(true);
-  }, [onVisibleChange]);
+    if (popupVisible) {
+      return;
+    }
+
+    setPopupVisibleState(true);
+  }, [popupVisible, setPopupVisibleState]);
 
   const hidePopup = useCallback(() => {
-    setPopupVisible(false);
-    onVisibleChange && onVisibleChange(false);
-  }, [onVisibleChange]);
+    if (!popupVisible) return;
+
+    setPopupVisibleState(false);
+  }, [popupVisible, setPopupVisibleState]);
 
   const delayDisplayPopup = useCallback((): void => {
+    clearTimers();
     delayDisplayPopupTimer.current = window.setTimeout(() => {
       displayPopup();
     }, mouseEnterDelay);
-  }, [mouseEnterDelay, displayPopup]);
+  }, [clearTimers, mouseEnterDelay, displayPopup]);
 
   const delayHidePopup = useCallback((): void => {
+    clearTimers();
     delayHidePopupTimer.current = window.setTimeout(() => {
       hidePopup();
     }, mouseLeaveDelay);
-  }, [mouseLeaveDelay, hidePopup]);
+  }, [clearTimers, mouseLeaveDelay, hidePopup]);
 
   const handlePopupOnMouseEnter = (): void => {
     if (trigger === 'hover') {
@@ -107,23 +147,51 @@ const Popup = (props: PopupProps): JSX.Element => {
 
       hidePopup();
     },
-    [targetRef, hidePopup]
+    [hidePopup]
   );
 
+  const removeDocumentClickListener = useCallback((): void => {
+    if (!isDocumentClickListening.current) {
+      return;
+    }
+
+    document.removeEventListener('click', documentOnClick, true);
+    isDocumentClickListening.current = false;
+  }, [documentOnClick]);
+
+  useEffect(() => {
+    removeDocumentClickListener();
+    if ((trigger === 'click' || trigger === 'contextmenu' || trigger === 'manual') && popupVisible) {
+      document.addEventListener('click', documentOnClick, true);
+      isDocumentClickListening.current = true;
+    }
+
+    return () => {
+      removeDocumentClickListener();
+    };
+  }, [documentOnClick, popupVisible, removeDocumentClickListener, trigger]);
+
   const handleTargetOnMouseClick = useCallback(
     (e: MouseEvent): void => {
-      e.preventDefault();
+      if (trigger === 'contextmenu') {
+        e.preventDefault();
+      }
+
       if (popupVisible) {
         hidePopup();
       } else {
         displayPopup();
-        document.addEventListener('click', documentOnClick, true);
       }
     },
-    [popupVisible, hidePopup, displayPopup, documentOnClick]
+    [displayPopup, hidePopup, popupVisible, trigger]
   );
 
   const transitionOnEnter = (): void => {
+    if (!targetRef.current || !popupRef.current) {
+      return;
+    }
+
+    popperRef.current?.destroy();
     const instance = createPopper(
       targetRef.current as HTMLElement,
       popupRef.current as HTMLElement,
@@ -171,6 +239,7 @@ const Popup = (props: PopupProps): JSX.Element => {
         );
       }
       popperInstance.destroy();
+      popperRef.current = undefined;
     }
   };
 
@@ -215,8 +284,6 @@ const Popup = (props: PopupProps): JSX.Element => {
       }
     } else if (trigger === 'contextmenu') {
       target.addEventListener('contextmenu', handleTargetOnMouseClick);
-    } else if (trigger === 'manual') {
-      setPopupVisible(props.visible);
     }
 
     return (): void => {
@@ -232,9 +299,7 @@ const Popup = (props: PopupProps): JSX.Element => {
       target.removeEventListener('contextmenu', handleTargetOnMouseClick);
     };
   }, [
-    props.visible,
     disabled,
-    targetRef,
     trigger,
     handleTargetOnMouseClick,
     handleTargetOnMouseEnter,
@@ -244,10 +309,19 @@ const Popup = (props: PopupProps): JSX.Element => {
   ]);
 
   useEffect(() => {
-    if ('visible' in props) {
-      props.visible ? displayPopup() : hidePopup();
+    if (!popupVisible) {
+      clearTimers();
     }
-  }, [props, displayPopup, hidePopup]);
+  }, [clearTimers, popupVisible]);
+
+  useEffect(() => {
+    return () => {
+      clearTimers();
+      removeDocumentClickListener();
+      popperRef.current?.destroy();
+      popperRef.current = undefined;
+    };
+  }, [clearTimers, removeDocumentClickListener]);
 
   const renderContent = () => (
     <Transition
diff --git a/packages/react/src/portal/__tests__/portal.test.tsx b/packages/react/src/portal/__tests__/portal.test.tsx
index 38593b73..cd20d7f1 100644
--- a/packages/react/src/portal/__tests__/portal.test.tsx
+++ b/packages/react/src/portal/__tests__/portal.test.tsx
@@ -9,4 +9,18 @@ describe('<Portal />', () => {
     );
     expect(baseElement.querySelector('[data-testid="portal-content"]')).toBeTruthy();
   });
+
+  it('should render children into custom container', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    render(
+      <Portal container={container}>
+        <div data-testid="portal-custom">Portal Custom</div>
+      </Portal>
+    );
+
+    expect(container.querySelector('[data-testid="portal-custom"]')).toBeTruthy();
+    document.body.removeChild(container);
+  });
 });
diff --git a/packages/react/src/select/__tests__/select.test.tsx b/packages/react/src/select/__tests__/select.test.tsx
index 073cf1fd..a09d6015 100644
--- a/packages/react/src/select/__tests__/select.test.tsx
+++ b/packages/react/src/select/__tests__/select.test.tsx
@@ -1,4 +1,4 @@
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
 import Select from '../index';
 
 const { Option, OptGroup } = Select;
@@ -184,6 +184,24 @@ describe('<Select />', () => {
     expect(container.querySelector('.ty-select')).not.toHaveClass('ty-select_open');
   });
 
+  it('should close on outside click', async () => {
+    const { container } = render(
+      <div>
+        <Select defaultOpen>
+          <Option value="a">Apple</Option>
+        </Select>
+        <button>Outside</button>
+      </div>
+    );
+
+    expect(getOptions().length).toBe(1);
+    fireEvent.click(screen.getByText('Outside'));
+
+    await waitFor(() => {
+      expect(container.querySelector('.ty-select')).not.toHaveClass('ty-select_open');
+    });
+  });
+
   // Disabled
   it('should not open dropdown when disabled', () => {
     const { container } = render(
@@ -320,6 +338,25 @@ describe('<Select />', () => {
     expect(container.querySelector('.ty-select__selection-text')).toHaveTextContent('Banana');
   });
 
+  it('should call onDropdownVisibleChange when outside click closes the popup', async () => {
+    const onDropdownVisibleChange = jest.fn();
+
+    render(
+      <div>
+        <Select defaultOpen onDropdownVisibleChange={onDropdownVisibleChange}>
+          <Option value="a">Apple</Option>
+        </Select>
+        <button>Outside</button>
+      </div>
+    );
+
+    fireEvent.click(screen.getByText('Outside'));
+
+    await waitFor(() => {
+      expect(onDropdownVisibleChange).toHaveBeenCalledWith(false);
+    });
+  });
+
   // OptGroup
   it('should render OptGroup', () => {
     render(
diff --git a/packages/react/src/select/select.tsx b/packages/react/src/select/select.tsx
index 1b61f1ac..b98413a4 100644
--- a/packages/react/src/select/select.tsx
+++ b/packages/react/src/select/select.tsx
@@ -1,6 +1,5 @@
 import React, { useContext, useEffect, useId, useRef, useState, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
-import { useClickOutside } from '../_utils/hooks';
 import { useCombobox } from '../_utils/useCombobox';
 import { ArrowDown, Close, CloseCircle, LoadingCircle, Check } from '../_utils/components';
 import { SelectContext } from './select-context';
@@ -143,13 +142,6 @@ const Select = (props: SelectProps): React.ReactElement => {
     [`${prefixCls}__arrow_reverse`]: combo.isOpen,
   });
 
-  useClickOutside(ref, () => {
-    if (!('open' in props)) {
-      combo.closeDropdown();
-    }
-    setSearchValue('');
-  });
-
   // Get display label for a value
   const getLabelForValue = useCallback(
     (val: string): React.ReactNode => {
@@ -461,6 +453,15 @@ const Select = (props: SelectProps): React.ReactElement => {
         placement="bottom"
         arrow={false}
         visible={combo.isOpen}
+        onVisibleChange={(nextOpen) => {
+          if (nextOpen) {
+            combo.openDropdown();
+            return;
+          }
+
+          combo.closeDropdown();
+          setSearchValue('');
+        }}
         content={renderOverlay()}>
         <div className={`${prefixCls}__selector`} onClick={handleSelectorClick}>
           <div className={`${prefixCls}__selection`}>{renderSelectorContent()}</div>
diff --git a/packages/react/src/select/style/index.scss b/packages/react/src/select/style/index.scss
index 259ba66d..48ec7b75 100644
--- a/packages/react/src/select/style/index.scss
+++ b/packages/react/src/select/style/index.scss
@@ -10,7 +10,7 @@
 
   &_disabled {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--ty-select-opacity-disabled);
 
     .#{$prefix}-select__selector {
       background-color: var(--ty-select-bg-disabled, var(--ty-color-bg-disabled));
@@ -98,7 +98,7 @@
 
   &__search {
     flex: 1;
-    min-width: 4px;
+    min-width: var(--ty-select-search-min-width);
     max-width: 100%;
     margin: 0;
     padding: 0;
@@ -117,7 +117,7 @@
 
   &__suffix {
     position: absolute;
-    right: 8px;
+    right: var(--ty-select-suffix-offset-inline-end);
     top: 50%;
     transform: translateY(-50%);
     display: inline-flex;
@@ -188,7 +188,7 @@
   &__tag-close {
     display: inline-flex;
     align-items: center;
-    margin-left: 4px;
+    margin-left: var(--ty-select-tag-close-gap);
     cursor: pointer;
     color: var(--ty-select-tag-close-color, var(--ty-color-text-quaternary));
     transition: color 0.2s;
@@ -201,7 +201,7 @@
   &__dropdown {
     width: 100%;
     margin: 0;
-    padding: 4px 0;
+    padding: var(--ty-select-dropdown-padding);
     list-style-type: none;
     background-color: var(--ty-select-dropdown-bg, var(--ty-color-bg-container));
     box-sizing: border-box;
@@ -217,7 +217,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 16px;
+    padding: var(--ty-select-feedback-padding);
 
     svg {
       animation: ty-select-spin 1s linear infinite;
@@ -225,7 +225,7 @@
   }
 
   &__empty {
-    padding: 16px;
+    padding: var(--ty-select-feedback-padding);
     text-align: center;
     color: var(--ty-select-empty-color, var(--ty-color-text-quaternary));
     font-size: var(--ty-select-font-size-sm, var(--ty-font-size-sm));
@@ -238,7 +238,7 @@
   justify-content: space-between;
   padding: var(--ty-select-option-padding, 7px 12px);
   font-size: var(--ty-select-option-font-size, var(--ty-font-size-base));
-  line-height: 22px;
+  line-height: var(--ty-select-option-line-height);
   cursor: pointer;
   color: var(--ty-select-option-color, var(--ty-color-text));
   transition: background-color 0.2s;
@@ -252,7 +252,7 @@
 
   &__check {
     flex-shrink: 0;
-    margin-left: 8px;
+    margin-left: var(--ty-select-option-check-gap);
     color: var(--ty-select-border-focus, var(--ty-input-border-focus, var(--ty-color-primary)));
   }
 
@@ -269,7 +269,7 @@
     cursor: not-allowed;
     background-color: var(--ty-select-option-disabled-bg, var(--ty-color-bg-container));
     color: var(--ty-select-option-disabled-color, var(--ty-color-text-quaternary));
-    opacity: 0.5;
+    opacity: var(--ty-select-option-disabled-opacity);
   }
 }
 
@@ -277,7 +277,7 @@
   &__title {
     font-size: var(--ty-select-font-size-sm, var(--ty-font-size-sm));
     cursor: default;
-    color: var(--ty-color-text-secondary);
+    color: var(--ty-select-group-title-color);
     padding: var(--ty-select-option-padding, 7px 12px);
   }
 
@@ -287,7 +287,7 @@
     padding: 0;
 
     > .#{$prefix}-select-option {
-      padding-left: 24px;
+      padding-left: var(--ty-select-group-option-padding-inline-start);
     }
   }
 }
diff --git a/packages/react/src/speed-dial/__tests__/speed-dial.test.tsx b/packages/react/src/speed-dial/__tests__/speed-dial.test.tsx
index 624d7c45..b475ad01 100644
--- a/packages/react/src/speed-dial/__tests__/speed-dial.test.tsx
+++ b/packages/react/src/speed-dial/__tests__/speed-dial.test.tsx
@@ -61,6 +61,24 @@ describe('<SpeedDial />', () => {
     expect(container.querySelector('.ty-speed-dial__actions')).not.toHaveClass('ty-speed-dial__actions_open');
   });
 
+  it('should close on outside click with click trigger', () => {
+    const { container, getByText } = render(
+      <div>
+        <SpeedDial trigger="click">
+          <SpeedDial.Action icon="A" />
+        </SpeedDial>
+        <button>Outside</button>
+      </div>
+    );
+    const button = container.querySelector('.ty-speed-dial__button') as HTMLElement;
+    fireEvent.click(button);
+    expect(container.querySelector('.ty-speed-dial__actions')).toHaveClass('ty-speed-dial__actions_open');
+
+    fireEvent.click(getByText('Outside'));
+
+    expect(container.querySelector('.ty-speed-dial__actions')).not.toHaveClass('ty-speed-dial__actions_open');
+  });
+
   it('should render correct direction class', () => {
     const directions = ['up', 'down', 'left', 'right'] as const;
     directions.forEach((direction) => {
@@ -133,6 +151,25 @@ describe('<SpeedDial />', () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
+  it('should only call onOpen and onClose when the state changes', () => {
+    const onOpen = jest.fn();
+    const onClose = jest.fn();
+    const { container } = render(
+      <SpeedDial onOpen={onOpen} onClose={onClose}>
+        <SpeedDial.Action icon="A" />
+      </SpeedDial>
+    );
+    const root = container.firstChild as HTMLElement;
+
+    fireEvent.mouseEnter(root);
+    fireEvent.mouseEnter(root);
+    expect(onOpen).toHaveBeenCalledTimes(1);
+
+    fireEvent.mouseLeave(root);
+    fireEvent.mouseLeave(root);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
   it('should disable action button', () => {
     const onClick = jest.fn();
     const { container } = render(
diff --git a/packages/react/src/speed-dial/speed-dial.tsx b/packages/react/src/speed-dial/speed-dial.tsx
index d12a5df0..d3a6a5a0 100644
--- a/packages/react/src/speed-dial/speed-dial.tsx
+++ b/packages/react/src/speed-dial/speed-dial.tsx
@@ -34,15 +34,16 @@ const SpeedDial = React.forwardRef<HTMLDivElement, SpeedDialProps>(
     const containerRef = useRef<HTMLDivElement | null>(null);
 
     const handleOpen = useCallback(() => {
-      if (disabled) return;
+      if (disabled || isOpen) return;
       if (!isControlled) setInternalOpen(true);
       onOpen?.();
-    }, [disabled, isControlled, onOpen]);
+    }, [disabled, isControlled, isOpen, onOpen]);
 
     const handleClose = useCallback(() => {
+      if (!isOpen) return;
       if (!isControlled) setInternalOpen(false);
       onClose?.();
-    }, [isControlled, onClose]);
+    }, [isControlled, isOpen, onClose]);
 
     const handleToggle = useCallback(() => {
       if (isOpen) {
diff --git a/packages/react/src/time-picker/__tests__/time-picker.test.tsx b/packages/react/src/time-picker/__tests__/time-picker.test.tsx
index 6042807a..0f61c2eb 100644
--- a/packages/react/src/time-picker/__tests__/time-picker.test.tsx
+++ b/packages/react/src/time-picker/__tests__/time-picker.test.tsx
@@ -1,4 +1,4 @@
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
 import TimePicker from '../index';
 
 beforeAll(() => {
@@ -79,6 +79,25 @@ describe('<TimePicker />', () => {
     expect(fn).toHaveBeenCalledWith(true);
   });
 
+  it('should close on outside click', async () => {
+    const { container } = render(
+      <div>
+        <TimePicker />
+        <button>Outside</button>
+      </div>
+    );
+
+    const input = container.querySelector('.ty-time-picker__input');
+    input && fireEvent.click(input);
+    expect(document.querySelector('.ty-time-picker__dropdown')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Outside'));
+
+    await waitFor(() => {
+      expect(document.querySelector('.ty-time-picker__dropdown')).not.toBeInTheDocument();
+    });
+  });
+
   it('should clear value on clear button click', () => {
     const fn = jest.fn();
     const { container } = render(
diff --git a/packages/react/src/time-picker/style/index.scss b/packages/react/src/time-picker/style/index.scss
index 6f0861c4..18665e0c 100755
--- a/packages/react/src/time-picker/style/index.scss
+++ b/packages/react/src/time-picker/style/index.scss
@@ -47,7 +47,7 @@ $tp: #{$prefix}-time-picker;
     line-height: inherit;
     color: var(--ty-picker-input-color);
     cursor: pointer;
-    min-width: var(--ty-picker-input-min-width-time-md);
+    min-width: var(--ty-time-picker-input-min-width-md);
 
     &::placeholder {
       color: var(--ty-input-placeholder, var(--ty-picker-input-color-placeholder, var(--ty-color-text-placeholder)));
@@ -106,7 +106,7 @@ $tp: #{$prefix}-time-picker;
   }
 
   &_sm &__input-field {
-    min-width: var(--ty-picker-input-min-width-time-sm);
+    min-width: var(--ty-time-picker-input-min-width-sm);
   }
 
   &_lg &__input {
@@ -116,7 +116,7 @@ $tp: #{$prefix}-time-picker;
   }
 
   &_lg &__input-field {
-    min-width: var(--ty-picker-input-min-width-time-lg);
+    min-width: var(--ty-time-picker-input-min-width-lg);
   }
 
   // ---- Disabled ----
@@ -153,9 +153,9 @@ $tp: #{$prefix}-time-picker;
 
   &__column {
     flex: 1;
-    max-height: var(--ty-picker-time-column-max-height);
+    max-height: var(--ty-time-picker-column-max-height);
     overflow-y: auto;
-    border-left: 1px solid var(--ty-picker-time-column-border);
+    border-left: 1px solid var(--ty-time-picker-column-border);
     scrollbar-width: thin;
 
     &:first-child {
@@ -167,14 +167,14 @@ $tp: #{$prefix}-time-picker;
     }
 
     &::-webkit-scrollbar-thumb {
-      background: var(--ty-picker-time-scrollbar-thumb);
+      background: var(--ty-time-picker-scrollbar-thumb);
       border-radius: 2px;
     }
   }
 
   &__column-list {
     list-style: none;
-    padding: var(--ty-picker-time-cell-padding);
+    padding: var(--ty-time-picker-cell-padding);
     margin: 0;
   }
 
@@ -182,11 +182,11 @@ $tp: #{$prefix}-time-picker;
   &__cell {
     padding: 4px 0;
     text-align: center;
-    min-width: var(--ty-picker-time-cell-min-width);
+    min-width: var(--ty-time-picker-cell-min-width);
     cursor: pointer;
-    border-radius: var(--ty-picker-time-cell-radius);
-    margin: 0 var(--ty-picker-time-cell-margin-inline);
-    line-height: var(--ty-picker-time-cell-line-height);
+    border-radius: var(--ty-time-picker-cell-radius);
+    margin: 0 var(--ty-time-picker-cell-margin-inline);
+    line-height: var(--ty-time-picker-cell-line-height);
     transition: background 0.2s;
     user-select: none;
 
@@ -195,20 +195,20 @@ $tp: #{$prefix}-time-picker;
     }
 
     &_selected {
-      background: var(--ty-picker-time-cell-bg-selected);
-      font-weight: 500;
+      background: var(--ty-time-picker-cell-bg-selected);
+      font-weight: var(--ty-time-picker-cell-font-weight-selected);
 
       &:hover {
-        background: var(--ty-picker-time-cell-bg-selected-hover);
+        background: var(--ty-time-picker-cell-bg-selected-hover);
       }
     }
 
     &_pending {
-      background: var(--ty-picker-time-cell-bg-selected);
+      background: var(--ty-time-picker-cell-bg-selected);
       color: var(--ty-picker-input-color-muted);
 
       &:hover {
-        background: var(--ty-picker-time-cell-bg-selected-hover);
+        background: var(--ty-time-picker-cell-bg-selected-hover);
       }
     }
 
@@ -224,9 +224,9 @@ $tp: #{$prefix}-time-picker;
 
   // ---- Footer ----
   &__footer {
-    padding: var(--ty-picker-footer-padding);
-    border-top: 1px solid var(--ty-picker-header-border);
-    font-size: var(--ty-picker-footer-font-size);
+    padding: var(--ty-time-picker-footer-padding);
+    border-top: 1px solid var(--ty-time-picker-footer-border);
+    font-size: var(--ty-time-picker-footer-font-size);
   }
 
   &__extra-footer {
@@ -241,21 +241,21 @@ $tp: #{$prefix}-time-picker;
   }
 
   &__now-btn {
-    color: var(--ty-picker-today-color);
+    color: var(--ty-time-picker-now-color);
     cursor: pointer;
-    &:hover { color: var(--ty-picker-today-color-hover); }
+    &:hover { color: var(--ty-time-picker-now-color-hover); }
   }
 
   &__ok-btn {
-    padding: var(--ty-picker-ok-button-padding);
-    height: var(--ty-picker-ok-button-height);
-    font-size: var(--ty-picker-ok-button-font-size);
+    padding: var(--ty-time-picker-ok-button-padding);
+    height: var(--ty-time-picker-ok-button-height);
+    font-size: var(--ty-time-picker-ok-button-font-size);
     border: none;
-    border-radius: var(--ty-picker-ok-button-radius);
-    background: var(--ty-picker-ok-button-bg);
-    color: var(--ty-picker-ok-button-color);
+    border-radius: var(--ty-time-picker-ok-button-radius);
+    background: var(--ty-time-picker-ok-button-bg);
+    color: var(--ty-time-picker-ok-button-color);
     cursor: pointer;
     margin-left: auto;
-    &:hover { background: var(--ty-picker-ok-button-bg-hover); }
+    &:hover { background: var(--ty-time-picker-ok-button-bg-hover); }
   }
 }
diff --git a/packages/react/src/time-picker/time-picker.tsx b/packages/react/src/time-picker/time-picker.tsx
index 010a733f..b575f7d4 100644
--- a/packages/react/src/time-picker/time-picker.tsx
+++ b/packages/react/src/time-picker/time-picker.tsx
@@ -99,18 +99,6 @@ const TimePicker = (props: TimePickerProps): React.ReactElement => {
     if (controlledOpen !== undefined) setOpen(controlledOpen);
   }, [controlledOpen]);
 
-  useEffect(() => {
-    const listener = (event: MouseEvent) => {
-      const target = event.target as HTMLElement;
-      if (wrapperRef.current?.contains(target) || dropdownRef.current?.contains(target)) return;
-      if (controlledOpen === undefined) setOpen(false);
-      onOpenChange?.(false);
-      setPending(EMPTY_PENDING);
-    };
-    document.addEventListener('click', listener);
-    return () => document.removeEventListener('click', listener);
-  }, [controlledOpen, onOpenChange]);
-
   const toggleOpen = useCallback((val: boolean) => {
     if (controlledOpen === undefined) setOpen(val);
     onOpenChange?.(val);
@@ -245,6 +233,7 @@ const TimePicker = (props: TimePickerProps): React.ReactElement => {
         placement="bottom-start"
         arrow={false}
         visible={isOpen}
+        onVisibleChange={toggleOpen}
         content={renderOverlay()}>
         <div
           className={`${prefixCls}__input`}
diff --git a/packages/react/src/tooltip/style/index.scss b/packages/react/src/tooltip/style/index.scss
index e9f6e5cf..5a9eb97f 100755
--- a/packages/react/src/tooltip/style/index.scss
+++ b/packages/react/src/tooltip/style/index.scss
@@ -10,8 +10,8 @@
 
   .#{$prefix}-popup {
     &__arrow, &__arrow::before {
-      width: $tooltip-arrow-size;
-      height: $tooltip-arrow-size;
+      width: var(--ty-tooltip-arrow-size);
+      height: var(--ty-tooltip-arrow-size);
     }
   }
 
diff --git a/packages/react/src/tooltip/tooltip.tsx b/packages/react/src/tooltip/tooltip.tsx
index bce0f109..0cf86f4c 100755
--- a/packages/react/src/tooltip/tooltip.tsx
+++ b/packages/react/src/tooltip/tooltip.tsx
@@ -19,7 +19,7 @@ const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>((props, ref) => {
   const cls = classNames(prefixCls, className);
 
   const renderContent = (): React.ReactElement => (
-    <div role="tooltip" className={`${prefixCls}__inner`}>
+    <div ref={ref} role="tooltip" className={`${prefixCls}__inner`}>
       {title}
     </div>
   );
diff --git a/packages/react/src/tour/style/index.scss b/packages/react/src/tour/style/index.scss
index dc26a2aa..7e6837ac 100644
--- a/packages/react/src/tour/style/index.scss
+++ b/packages/react/src/tour/style/index.scss
@@ -1,8 +1,5 @@
-@use 'sass:math';
 @use '@tiny-design/tokens/scss/variables' as *;
 
-$arrow-size: 8px;
-
 .#{$prefix}-tour {
   position: fixed;
   inset: 0;
@@ -28,8 +25,8 @@ $arrow-size: 8px;
   // Arrow
   &__arrow,
   &__arrow::before {
-    width: $arrow-size * 2;
-    height: $arrow-size * 2;
+    width: calc(var(--ty-tour-arrow-size) * 2);
+    height: calc(var(--ty-tour-arrow-size) * 2);
     box-sizing: border-box;
     position: absolute;
   }
@@ -55,54 +52,54 @@ $arrow-size: 8px;
   // Panel
   &__panel {
     position: relative;
-    border-radius: var(--ty-border-radius);
-    box-shadow: var(--ty-shadow-modal);
-    max-width: 360px;
-    min-width: 260px;
+    border-radius: var(--ty-tour-panel-radius);
+    box-shadow: var(--ty-tour-panel-shadow);
+    max-width: var(--ty-tour-panel-max-width);
+    min-width: var(--ty-tour-panel-min-width);
 
     &_default {
-      background-color: var(--ty-popup-light-bg);
-      color: var(--ty-color-text);
+      background-color: var(--ty-tour-panel-bg-default);
+      color: var(--ty-tour-panel-color-default);
 
       .#{$prefix}-tour {
         &__arrow::before {
-          background: var(--ty-popup-light-bg);
+          background: var(--ty-tour-panel-bg-default);
           box-shadow: 2px 2px 5px var(--ty-popup-arrow-shadow);
         }
 
         &__description {
-          color: var(--ty-color-text-secondary);
+          color: var(--ty-tour-description-color-default);
         }
       }
     }
 
     &_primary {
-      background-color: var(--ty-color-primary);
-      color: #fff;
+      background-color: var(--ty-tour-panel-bg-primary);
+      color: var(--ty-tour-panel-color-primary);
 
       .#{$prefix}-tour {
         &__arrow::before {
-          background: var(--ty-color-primary);
+          background: var(--ty-tour-panel-bg-primary);
         }
 
         &__description {
-          color: rgb(255 255 255 / 85%);
+          color: var(--ty-tour-description-color-primary);
         }
 
         &__indicator {
-          background-color: rgb(255 255 255 / 35%);
+          background-color: var(--ty-tour-indicator-bg-primary);
 
           &_active {
-            background-color: #fff;
+            background-color: var(--ty-tour-indicator-bg-active-primary);
           }
         }
 
         &__close-btn {
-          color: rgb(255 255 255 / 65%);
+          color: var(--ty-tour-close-color-primary);
 
           &:hover {
-            color: #fff;
-            background-color: rgb(255 255 255 / 15%);
+            color: var(--ty-tour-close-color-hover-primary);
+            background-color: var(--ty-tour-close-bg-hover-primary);
           }
         }
       }
@@ -112,13 +109,13 @@ $arrow-size: 8px;
     &_zoom {
       &-enter {
         opacity: 0;
-        transform: scale(0.9);
+        transform: scale(var(--ty-tour-zoom-scale-from));
       }
 
       &-enter-active {
         opacity: 1;
         transform: scale(1);
-        transition: opacity 200ms ease-out, transform 200ms ease-out;
+        transition: opacity var(--ty-tour-zoom-duration) ease-out, transform var(--ty-tour-zoom-duration) ease-out;
       }
 
       &-enter-done {
@@ -133,8 +130,8 @@ $arrow-size: 8px;
 
       &-exit-active {
         opacity: 0;
-        transform: scale(0.9);
-        transition: opacity 200ms ease-in, transform 200ms ease-in;
+        transform: scale(var(--ty-tour-zoom-scale-from));
+        transition: opacity var(--ty-tour-zoom-duration) ease-in, transform var(--ty-tour-zoom-duration) ease-in;
       }
 
       &-exit-done {
@@ -147,49 +144,49 @@ $arrow-size: 8px;
   // Close button
   &__close-btn {
     position: absolute;
-    top: 8px;
-    right: 8px;
-    width: 28px;
-    height: 28px;
-    line-height: 28px;
+    top: var(--ty-tour-close-offset);
+    right: var(--ty-tour-close-offset);
+    width: var(--ty-tour-close-size);
+    height: var(--ty-tour-close-size);
+    line-height: var(--ty-tour-close-size);
     text-align: center;
     cursor: pointer;
     background: none;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--ty-tour-close-radius);
     padding: 0;
-    font-size: 12px;
-    color: var(--ty-color-text-tertiary);
+    font-size: var(--ty-tour-close-font-size);
+    color: var(--ty-tour-close-color);
 
     &:hover {
-      background-color: var(--ty-color-fill-secondary);
+      background-color: var(--ty-tour-close-bg-hover);
     }
   }
 
   // Cover
   &__cover {
-    padding: 12px 16px 0;
+    padding: var(--ty-tour-cover-padding);
     text-align: center;
 
     img {
       max-width: 100%;
-      border-radius: var(--ty-border-radius) var(--ty-border-radius) 0 0;
+      border-radius: var(--ty-tour-panel-radius) var(--ty-tour-panel-radius) 0 0;
     }
   }
 
   // Title
   &__title {
-    padding: 12px 16px 4px;
-    font-weight: 600;
-    font-size: var(--ty-font-size-lg);
-    line-height: 1.5;
+    padding: var(--ty-tour-title-padding);
+    font-weight: var(--ty-tour-title-font-weight);
+    font-size: var(--ty-tour-title-font-size);
+    line-height: var(--ty-tour-title-line-height);
   }
 
   // Description
   &__description {
-    padding: 0 16px 12px;
-    font-size: var(--ty-font-size-base);
-    line-height: 1.5;
+    padding: var(--ty-tour-description-padding);
+    font-size: var(--ty-tour-description-font-size);
+    line-height: var(--ty-tour-description-line-height);
   }
 
   // Footer
@@ -197,37 +194,37 @@ $arrow-size: 8px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 16px 12px;
+    padding: var(--ty-tour-footer-padding);
   }
 
   // Indicators
   &__indicators {
     display: flex;
-    gap: 4px;
+    gap: var(--ty-tour-indicators-gap);
   }
 
   &__indicator {
-    width: 6px;
-    height: 6px;
+    width: var(--ty-tour-indicator-size);
+    height: var(--ty-tour-indicator-size);
     border-radius: 50%;
-    background-color: var(--ty-color-text-quaternary);
-    transition: background-color 200ms;
+    background-color: var(--ty-tour-indicator-bg-default);
+    transition: background-color var(--ty-tour-indicator-transition-duration);
 
     &_active {
-      background-color: var(--ty-color-primary);
+      background-color: var(--ty-tour-indicator-bg-active-default);
     }
   }
 
   // Actions
   &__actions {
     display: flex;
-    gap: 8px;
+    gap: var(--ty-tour-actions-gap);
     margin-left: auto;
   }
 
   // Arrow placement
   [data-popper-placement^='top'] > &__arrow {
-    bottom: -$arrow-size;
+    bottom: calc(var(--ty-tour-arrow-size) * -1);
 
     &::before {
       box-shadow: 3px 3px 7px var(--ty-popup-arrow-shadow);
@@ -235,7 +232,7 @@ $arrow-size: 8px;
   }
 
   [data-popper-placement^='bottom'] > &__arrow {
-    top: -$arrow-size;
+    top: calc(var(--ty-tour-arrow-size) * -1);
 
     &::before {
       box-shadow: -2px -2px 5px var(--ty-popup-arrow-shadow);
@@ -243,7 +240,7 @@ $arrow-size: 8px;
   }
 
   [data-popper-placement^='left'] > &__arrow {
-    right: -$arrow-size;
+    right: calc(var(--ty-tour-arrow-size) * -1);
 
     &::before {
       box-shadow: 3px -3px 7px var(--ty-popup-arrow-shadow);
@@ -251,7 +248,7 @@ $arrow-size: 8px;
   }
 
   [data-popper-placement^='right'] > &__arrow {
-    left: -$arrow-size;
+    left: calc(var(--ty-tour-arrow-size) * -1);
 
     &::before {
       box-shadow: -3px 3px 7px var(--ty-popup-arrow-shadow);
diff --git a/packages/tokens/build/build-v2.js b/packages/tokens/build/build-v2.js
index 176fa06b..72447363 100644
--- a/packages/tokens/build/build-v2.js
+++ b/packages/tokens/build/build-v2.js
@@ -6,6 +6,11 @@ const SOURCE_DIR = path.join(ROOT, 'source');
 const DIST_DIR = path.join(ROOT, 'dist');
 const DIST_CSS_DIR = path.join(DIST_DIR, 'css');
 const REGISTRY_DTS_PATH = path.join(DIST_DIR, 'registry.d.ts');
+const PRESETS_DTS_PATH = path.join(DIST_DIR, 'presets.d.ts');
+const LEGACY_ALIAS_MAP_JSON_PATH = path.join(DIST_DIR, 'alias-map.json');
+const LEGACY_ALIAS_MAP_DTS_PATH = path.join(DIST_DIR, 'alias-map.d.ts');
+const SCHEMA_DIST_DIR = path.join(DIST_DIR, 'schema');
+const THEME_SCHEMA_PATH = path.join(SOURCE_DIR, 'schema', 'theme.v1.schema.json');
 
 const SEMANTIC_DIR = path.join(SOURCE_DIR, 'semantic');
 const COMPONENT_DIR = path.join(SOURCE_DIR, 'components');
@@ -116,6 +121,15 @@ function loadThemes() {
   });
 }
 
+function buildPresetMap(themes) {
+  return themes.reduce((acc, theme) => {
+    if (theme.meta && theme.meta.id) {
+      acc[theme.meta.id] = theme;
+    }
+    return acc;
+  }, {});
+}
+
 function buildRegistry(tokens) {
   return {
     version: 1,
@@ -224,6 +238,40 @@ export interface TokenRegistryDocument {
 `;
 }
 
+function buildPresetsDts(presets) {
+  const ids = Object.keys(presets);
+  const presetUnion = ids.length > 0 ? ids.map((id) => `'${id}'`).join(' | ') : 'string';
+
+  return `export type PresetThemeId = ${presetUnion};
+
+export interface ThemeDocumentMeta {
+  id?: string;
+  name?: string;
+  author?: string;
+  description?: string;
+  version?: string;
+  schemaVersion?: number;
+  tags?: string[];
+}
+
+export interface ThemeDocumentTokens {
+  semantic?: Record<string, string | number>;
+  components?: Record<string, string | number>;
+}
+
+export interface ThemeDocument {
+  $schema?: string;
+  meta?: ThemeDocumentMeta;
+  mode: 'light' | 'dark' | 'system';
+  extends?: string;
+  tokens?: ThemeDocumentTokens;
+}
+
+declare const presets: Record<PresetThemeId, ThemeDocument>;
+export default presets;
+`;
+}
+
 function buildRuntimeTokens() {
   console.log('Building runtime tokens...\n');
 
@@ -240,8 +288,9 @@ function buildRuntimeTokens() {
   );
 
   const registry = buildRegistry(allTokens);
-  const lightTheme = themes.find((theme) => theme.meta && theme.meta.mode === 'light');
-  const darkTheme = themes.find((theme) => theme.meta && theme.meta.mode === 'dark');
+  const lightTheme = themes.find((theme) => theme.mode === 'light');
+  const darkTheme = themes.find((theme) => theme.mode === 'dark');
+  const presets = buildPresetMap(themes);
   const lightThemeOverrides = {
     ...((lightTheme && lightTheme.tokens && lightTheme.tokens.semantic) || {}),
     ...((lightTheme && lightTheme.tokens && lightTheme.tokens.components) || {}),
@@ -265,16 +314,23 @@ function buildRuntimeTokens() {
   const baseCss = buildBaseThemeCss(allTokens, resolvedValues, lightTheme, darkTheme);
 
   mkdirp(DIST_CSS_DIR);
-  removeIfExists(path.join(DIST_DIR, 'alias-map.json'));
-  removeIfExists(path.join(DIST_DIR, 'alias-map.d.ts'));
+  mkdirp(SCHEMA_DIST_DIR);
+  removeIfExists(LEGACY_ALIAS_MAP_JSON_PATH);
+  removeIfExists(LEGACY_ALIAS_MAP_DTS_PATH);
   writeJson(path.join(DIST_DIR, 'registry.json'), registry);
+  writeJson(path.join(DIST_DIR, 'presets.json'), presets);
   fs.writeFileSync(path.join(DIST_CSS_DIR, 'v2-light.css'), lightCss);
   fs.writeFileSync(path.join(DIST_CSS_DIR, 'v2-dark.css'), darkCss);
   fs.writeFileSync(path.join(DIST_CSS_DIR, 'base.css'), baseCss);
   fs.writeFileSync(REGISTRY_DTS_PATH, buildRegistryDts());
+  fs.writeFileSync(PRESETS_DTS_PATH, buildPresetsDts(presets));
+  fs.copyFileSync(THEME_SCHEMA_PATH, path.join(SCHEMA_DIST_DIR, 'theme.v1.schema.json'));
 
   console.log('  dist/registry.json');
   console.log('  dist/registry.d.ts');
+  console.log('  dist/presets.json');
+  console.log('  dist/presets.d.ts');
+  console.log('  dist/schema/theme.v1.schema.json');
   console.log('  dist/css/v2-light.css');
   console.log('  dist/css/v2-dark.css');
   console.log('  dist/css/base.css');
diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index d0bc6e84..e890c3aa 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -17,6 +17,21 @@
     "./css/*": "./css/*",
     "./scss/*": "./scss/*",
     "./registry": "./dist/registry.json",
+    "./presets": {
+      "types": "./runtime/presets.d.ts",
+      "import": "./runtime/presets.mjs",
+      "require": "./runtime/presets.cjs"
+    },
+    "./resolve-theme": {
+      "types": "./runtime/resolve-theme.d.ts",
+      "import": "./runtime/resolve-theme.mjs",
+      "require": "./runtime/resolve-theme.cjs"
+    },
+    "./validate-theme": {
+      "types": "./runtime/validate-theme.d.ts",
+      "import": "./runtime/validate-theme.mjs",
+      "require": "./runtime/validate-theme.cjs"
+    },
     "./dist/*": "./dist/*"
   },
   "sideEffects": [
@@ -25,6 +40,7 @@
   "files": [
     "css",
     "dist",
+    "runtime",
     "scss"
   ],
   "scripts": {
diff --git a/packages/tokens/runtime/presets.cjs b/packages/tokens/runtime/presets.cjs
new file mode 100644
index 00000000..e3862f14
--- /dev/null
+++ b/packages/tokens/runtime/presets.cjs
@@ -0,0 +1,5 @@
+'use strict';
+
+const { defaultPresets } = require('./theme-runtime.cjs');
+
+module.exports = defaultPresets;
diff --git a/packages/tokens/runtime/presets.d.ts b/packages/tokens/runtime/presets.d.ts
new file mode 100644
index 00000000..3da5e19a
--- /dev/null
+++ b/packages/tokens/runtime/presets.d.ts
@@ -0,0 +1,5 @@
+import type { ThemeDocument } from './resolve-theme';
+
+declare const presets: Record<string, ThemeDocument>;
+
+export default presets;
diff --git a/packages/tokens/runtime/presets.mjs b/packages/tokens/runtime/presets.mjs
new file mode 100644
index 00000000..81db7909
--- /dev/null
+++ b/packages/tokens/runtime/presets.mjs
@@ -0,0 +1 @@
+export { default } from '../dist/presets.json' with { type: 'json' };
diff --git a/packages/tokens/runtime/resolve-theme.cjs b/packages/tokens/runtime/resolve-theme.cjs
new file mode 100644
index 00000000..6c11f52a
--- /dev/null
+++ b/packages/tokens/runtime/resolve-theme.cjs
@@ -0,0 +1,8 @@
+'use strict';
+
+const runtime = require('./theme-runtime.cjs');
+
+module.exports = {
+  resolveTheme: runtime.resolveTheme,
+  tokenKeyToCssVar: runtime.tokenKeyToCssVar,
+};
diff --git a/packages/tokens/runtime/resolve-theme.d.ts b/packages/tokens/runtime/resolve-theme.d.ts
new file mode 100644
index 00000000..fe9c985b
--- /dev/null
+++ b/packages/tokens/runtime/resolve-theme.d.ts
@@ -0,0 +1,58 @@
+export type ThemeTokenValue = string | number;
+
+export interface ThemeDocumentMeta {
+  id?: string;
+  name?: string;
+  author?: string;
+  description?: string;
+  version?: string;
+  schemaVersion?: number;
+  tags?: string[];
+}
+
+export interface ThemeDocumentTokens {
+  semantic?: Record<string, ThemeTokenValue>;
+  components?: Record<string, ThemeTokenValue>;
+}
+
+export interface ThemeDocument {
+  $schema?: string;
+  meta?: ThemeDocumentMeta;
+  mode: 'light' | 'dark' | 'system';
+  extends?: string;
+  tokens?: ThemeDocumentTokens;
+}
+
+export interface ThemeConfig {
+  $schema?: string;
+  meta?: ThemeDocumentMeta;
+  mode?: 'light' | 'dark' | 'system';
+  extends?: string;
+  tokens?: ThemeDocumentTokens;
+}
+
+export interface ResolvedThemeResult {
+  mode?: 'light' | 'dark' | 'system';
+  cssVars: Record<string, string>;
+  warnings: string[];
+  errors: string[];
+  valid: boolean;
+  normalizedDocument: ThemeConfig;
+}
+
+export function tokenKeyToCssVar(key: string): string;
+export function resolveTheme(
+  input: ThemeConfig | ThemeDocument,
+  options?: {
+    strict?: boolean;
+    presets?: Record<string, ThemeDocument>;
+    registry?: {
+      tokens: Array<{
+        key: string;
+        category: 'semantic' | 'component' | 'primitive';
+        status: 'active' | 'deprecated' | 'internal';
+        defaultValue: string | number;
+      }>;
+    };
+  }
+): ResolvedThemeResult;
diff --git a/packages/tokens/runtime/resolve-theme.mjs b/packages/tokens/runtime/resolve-theme.mjs
new file mode 100644
index 00000000..9b2ec0fa
--- /dev/null
+++ b/packages/tokens/runtime/resolve-theme.mjs
@@ -0,0 +1 @@
+export { resolveTheme, tokenKeyToCssVar } from './theme-runtime.mjs';
diff --git a/packages/tokens/runtime/theme-runtime.cjs b/packages/tokens/runtime/theme-runtime.cjs
new file mode 100644
index 00000000..0f189abd
--- /dev/null
+++ b/packages/tokens/runtime/theme-runtime.cjs
@@ -0,0 +1,371 @@
+'use strict';
+
+const registry = require('../dist/registry.json');
+
+function loadPresets() {
+  try {
+    return require('../dist/presets.json');
+  } catch {
+    return {
+      'tiny-light': require('../source/themes/light.json'),
+      'tiny-dark': require('../source/themes/dark.json'),
+    };
+  }
+}
+
+const defaultPresets = loadPresets();
+
+function isObject(value) {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function isTokenValue(value) {
+  return typeof value === 'string' || typeof value === 'number';
+}
+
+function tokenKeyToCssVar(key) {
+  return `--ty-${key.replace(/\./g, '-')}`;
+}
+
+function cloneTokens(tokens) {
+  return {
+    semantic: { ...((tokens && tokens.semantic) || {}) },
+    components: { ...((tokens && tokens.components) || {}) },
+  };
+}
+
+function cloneThemeDocument(theme) {
+  return {
+    ...(theme.$schema ? { $schema: theme.$schema } : {}),
+    ...(theme.meta ? { meta: { ...theme.meta } } : {}),
+    ...(theme.mode ? { mode: theme.mode } : {}),
+    ...(theme.extends ? { extends: theme.extends } : {}),
+    tokens: cloneTokens(theme.tokens),
+  };
+}
+
+function normalizeThemeInput(input) {
+  if (!isObject(input)) {
+    return {
+      meta: {},
+      tokens: {
+        semantic: {},
+        components: {},
+      },
+    };
+  }
+
+  const mode = typeof input.mode === 'string'
+    ? input.mode
+    : input.meta && typeof input.meta.mode === 'string'
+      ? input.meta.mode
+      : undefined;
+
+  return {
+    ...(typeof input.$schema === 'string' ? { $schema: input.$schema } : {}),
+    ...(isObject(input.meta) ? { meta: { ...input.meta } } : { meta: {} }),
+    ...(mode ? { mode } : {}),
+    ...(typeof input.extends === 'string' ? { extends: input.extends } : {}),
+    tokens: {
+      semantic: isObject(input.tokens && input.tokens.semantic) ? { ...input.tokens.semantic } : {},
+      components: isObject(input.tokens && input.tokens.components) ? { ...input.tokens.components } : {},
+    },
+  };
+}
+
+function mergeThemeDocuments(baseTheme, overrideTheme) {
+  const base = normalizeThemeInput(baseTheme);
+  const override = normalizeThemeInput(overrideTheme);
+
+  return {
+    ...(base.$schema ? { $schema: base.$schema } : {}),
+    ...(override.$schema ? { $schema: override.$schema } : {}),
+    meta: {
+      ...(base.meta || {}),
+      ...(override.meta || {}),
+    },
+    ...(base.mode ? { mode: base.mode } : {}),
+    ...(override.mode ? { mode: override.mode } : {}),
+    ...(base.extends ? { extends: base.extends } : {}),
+    ...(override.extends ? { extends: override.extends } : {}),
+    tokens: {
+      semantic: {
+        ...((base.tokens && base.tokens.semantic) || {}),
+        ...((override.tokens && override.tokens.semantic) || {}),
+      },
+      components: {
+        ...((base.tokens && base.tokens.components) || {}),
+        ...((override.tokens && override.tokens.components) || {}),
+      },
+    },
+  };
+}
+
+function buildRegistryMaps(registryDocument) {
+  const byKey = new Map();
+
+  for (const token of registryDocument.tokens || []) {
+    byKey.set(token.key, token);
+  }
+
+  return { byKey };
+}
+
+function resolveReferenceValue(rawValue, rawValues, cache, stack) {
+  if (typeof rawValue !== 'string') {
+    return String(rawValue);
+  }
+
+  const match = rawValue.match(/^\{([^}]+)\}$/);
+  if (!match) {
+    return rawValue;
+  }
+
+  const refKey = match[1];
+  if (cache.has(refKey)) {
+    return cache.get(refKey);
+  }
+
+  if (stack.has(refKey)) {
+    return rawValue;
+  }
+
+  const nextRaw = rawValues[refKey];
+  if (nextRaw == null) {
+    return rawValue;
+  }
+
+  stack.add(refKey);
+  const resolved = resolveReferenceValue(nextRaw, rawValues, cache, stack);
+  stack.delete(refKey);
+  cache.set(refKey, resolved);
+  return resolved;
+}
+
+function resolvePresetChain(theme, presets, errors, warnings, visited) {
+  if (!theme || !theme.extends) {
+    return undefined;
+  }
+
+  const presetId = theme.extends;
+  const preset = presets[presetId];
+  if (!preset) {
+    errors.push(`Unknown preset theme "${presetId}".`);
+    return undefined;
+  }
+
+  if (visited.has(presetId)) {
+    errors.push(`Circular preset extension detected for "${presetId}".`);
+    return undefined;
+  }
+
+  visited.add(presetId);
+  const normalizedPreset = normalizeThemeInput(preset);
+  const basePreset = resolvePresetChain(normalizedPreset, presets, errors, warnings, visited);
+  visited.delete(presetId);
+
+  if (!normalizedPreset.mode && presetId === 'tiny-light') {
+    normalizedPreset.mode = 'light';
+  }
+  if (!normalizedPreset.mode && presetId === 'tiny-dark') {
+    normalizedPreset.mode = 'dark';
+  }
+
+  if (basePreset) {
+    return mergeThemeDocuments(basePreset, {
+      ...normalizedPreset,
+      extends: undefined,
+    });
+  }
+
+  return normalizedPreset;
+}
+
+function validateTokenSection(section, category, registryMaps, errors, warnings, strict) {
+  if (!isObject(section)) {
+    if (section !== undefined) {
+      errors.push(`Theme tokens.${category} must be an object.`);
+    }
+    return;
+  }
+
+  for (const [key, value] of Object.entries(section)) {
+    if (!isTokenValue(value)) {
+      errors.push(`Theme token "${key}" must be a string or number.`);
+      continue;
+    }
+
+    const registryToken = registryMaps.byKey.get(key);
+    if (!registryToken) {
+      const message = `Unknown theme token "${key}".`;
+      if (strict) {
+        errors.push(message);
+      } else {
+        warnings.push(message);
+      }
+      continue;
+    }
+
+    if (registryToken.category !== category) {
+      warnings.push(
+        `Theme token "${key}" is authored under "${category}" but belongs to "${registryToken.category}".`
+      );
+    }
+
+    if (registryToken.status === 'deprecated') {
+      warnings.push(`Theme token "${key}" is deprecated.`);
+    }
+
+    if (registryToken.status === 'internal') {
+      const message = `Theme token "${key}" is internal and should not be authored by consumers.`;
+      if (strict) {
+        errors.push(message);
+      } else {
+        warnings.push(message);
+      }
+    }
+  }
+}
+
+function validateThemeDocument(input, options) {
+  const opts = options || {};
+  const strict = Boolean(opts.strict);
+  const errors = [];
+  const warnings = [];
+  const normalizedDocument = normalizeThemeInput(input);
+  const presets = opts.presets || defaultPresets;
+  const registryDocument = opts.registry || registry;
+  const registryMaps = buildRegistryMaps(registryDocument);
+
+  if (!isObject(input)) {
+    errors.push('Theme input must be an object.');
+  }
+
+  if (normalizedDocument.mode !== undefined) {
+    if (!['light', 'dark', 'system'].includes(normalizedDocument.mode)) {
+      errors.push(`Theme mode "${normalizedDocument.mode}" is invalid.`);
+    }
+  }
+
+  if (normalizedDocument.meta && normalizedDocument.meta.schemaVersion !== undefined) {
+    if (normalizedDocument.meta.schemaVersion !== 1) {
+      warnings.push(`Unexpected theme schemaVersion "${normalizedDocument.meta.schemaVersion}".`);
+    }
+  }
+
+  if (normalizedDocument.extends !== undefined && typeof normalizedDocument.extends !== 'string') {
+    errors.push('Theme extends must be a string.');
+  }
+
+  if (normalizedDocument.extends) {
+    const visited = new Set();
+    resolvePresetChain(normalizedDocument, presets, errors, warnings, visited);
+  }
+
+  validateTokenSection(
+    normalizedDocument.tokens && normalizedDocument.tokens.semantic,
+    'semantic',
+    registryMaps,
+    errors,
+    warnings,
+    strict
+  );
+  validateTokenSection(
+    normalizedDocument.tokens && normalizedDocument.tokens.components,
+    'component',
+    registryMaps,
+    errors,
+    warnings,
+    strict
+  );
+
+  return {
+    valid: errors.length === 0,
+    errors,
+    warnings,
+    normalizedDocument,
+  };
+}
+
+function resolveTheme(input, options) {
+  const opts = options || {};
+  const registryDocument = opts.registry || registry;
+  const presets = opts.presets || defaultPresets;
+  const validation = validateThemeDocument(input, opts);
+  const normalizedInput = validation.normalizedDocument;
+  const baseTheme = resolvePresetChain(
+    normalizedInput,
+    presets,
+    validation.errors,
+    validation.warnings,
+    new Set()
+  );
+
+  const mergedTheme = baseTheme
+    ? mergeThemeDocuments(baseTheme, { ...normalizedInput, extends: undefined })
+    : cloneThemeDocument(normalizedInput);
+
+  const effectiveMode = normalizedInput.mode || (baseTheme && baseTheme.mode) || undefined;
+
+  const rawValues = {};
+  for (const token of registryDocument.tokens || []) {
+    rawValues[token.key] = String(token.defaultValue);
+  }
+
+  if (baseTheme && baseTheme.tokens) {
+    for (const [key, value] of Object.entries(baseTheme.tokens.semantic || {})) {
+      rawValues[key] = String(value);
+    }
+    for (const [key, value] of Object.entries(baseTheme.tokens.components || {})) {
+      rawValues[key] = String(value);
+    }
+  }
+
+  for (const [key, value] of Object.entries((normalizedInput.tokens && normalizedInput.tokens.semantic) || {})) {
+    rawValues[key] = String(value);
+  }
+  for (const [key, value] of Object.entries((normalizedInput.tokens && normalizedInput.tokens.components) || {})) {
+    rawValues[key] = String(value);
+  }
+
+  const cache = new Map();
+  const cssVars = {};
+  for (const token of registryDocument.tokens || []) {
+    const resolvedValue = resolveReferenceValue(rawValues[token.key], rawValues, cache, new Set([token.key]));
+    cssVars[tokenKeyToCssVar(token.key)] = resolvedValue;
+  }
+
+  const semanticTokens = (normalizedInput.tokens && normalizedInput.tokens.semantic) || {};
+  const componentTokens = (normalizedInput.tokens && normalizedInput.tokens.components) || {};
+  const registryKeys = new Set((registryDocument.tokens || []).map((token) => token.key));
+
+  for (const [key, value] of Object.entries(semanticTokens)) {
+    if (!registryKeys.has(key)) {
+      cssVars[tokenKeyToCssVar(key)] = String(value);
+    }
+  }
+
+  for (const [key, value] of Object.entries(componentTokens)) {
+    if (!registryKeys.has(key)) {
+      cssVars[tokenKeyToCssVar(key)] = String(value);
+    }
+  }
+
+  return {
+    mode: effectiveMode,
+    cssVars,
+    warnings: validation.warnings,
+    errors: validation.errors,
+    valid: validation.valid,
+    normalizedDocument: mergedTheme,
+  };
+}
+
+module.exports = {
+  defaultPresets,
+  mergeThemeDocuments,
+  normalizeThemeInput,
+  resolveTheme,
+  tokenKeyToCssVar,
+  validateThemeDocument,
+};
diff --git a/packages/tokens/runtime/theme-runtime.mjs b/packages/tokens/runtime/theme-runtime.mjs
new file mode 100644
index 00000000..9843909f
--- /dev/null
+++ b/packages/tokens/runtime/theme-runtime.mjs
@@ -0,0 +1,359 @@
+import registry from '../dist/registry.json' with { type: 'json' };
+import presetsDocument from '../dist/presets.json' with { type: 'json' };
+
+const defaultPresets = presetsDocument;
+
+function isObject(value) {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function isTokenValue(value) {
+  return typeof value === 'string' || typeof value === 'number';
+}
+
+function tokenKeyToCssVar(key) {
+  return `--ty-${key.replace(/\./g, '-')}`;
+}
+
+function cloneTokens(tokens) {
+  return {
+    semantic: { ...((tokens && tokens.semantic) || {}) },
+    components: { ...((tokens && tokens.components) || {}) },
+  };
+}
+
+function cloneThemeDocument(theme) {
+  return {
+    ...(theme.$schema ? { $schema: theme.$schema } : {}),
+    ...(theme.meta ? { meta: { ...theme.meta } } : {}),
+    ...(theme.mode ? { mode: theme.mode } : {}),
+    ...(theme.extends ? { extends: theme.extends } : {}),
+    tokens: cloneTokens(theme.tokens),
+  };
+}
+
+function normalizeThemeInput(input) {
+  if (!isObject(input)) {
+    return {
+      meta: {},
+      tokens: {
+        semantic: {},
+        components: {},
+      },
+    };
+  }
+
+  const mode = typeof input.mode === 'string'
+    ? input.mode
+    : input.meta && typeof input.meta.mode === 'string'
+      ? input.meta.mode
+      : undefined;
+
+  return {
+    ...(typeof input.$schema === 'string' ? { $schema: input.$schema } : {}),
+    ...(isObject(input.meta) ? { meta: { ...input.meta } } : { meta: {} }),
+    ...(mode ? { mode } : {}),
+    ...(typeof input.extends === 'string' ? { extends: input.extends } : {}),
+    tokens: {
+      semantic: isObject(input.tokens && input.tokens.semantic) ? { ...input.tokens.semantic } : {},
+      components: isObject(input.tokens && input.tokens.components) ? { ...input.tokens.components } : {},
+    },
+  };
+}
+
+function mergeThemeDocuments(baseTheme, overrideTheme) {
+  const base = normalizeThemeInput(baseTheme);
+  const override = normalizeThemeInput(overrideTheme);
+
+  return {
+    ...(base.$schema ? { $schema: base.$schema } : {}),
+    ...(override.$schema ? { $schema: override.$schema } : {}),
+    meta: {
+      ...(base.meta || {}),
+      ...(override.meta || {}),
+    },
+    ...(base.mode ? { mode: base.mode } : {}),
+    ...(override.mode ? { mode: override.mode } : {}),
+    ...(base.extends ? { extends: base.extends } : {}),
+    ...(override.extends ? { extends: override.extends } : {}),
+    tokens: {
+      semantic: {
+        ...((base.tokens && base.tokens.semantic) || {}),
+        ...((override.tokens && override.tokens.semantic) || {}),
+      },
+      components: {
+        ...((base.tokens && base.tokens.components) || {}),
+        ...((override.tokens && override.tokens.components) || {}),
+      },
+    },
+  };
+}
+
+function buildRegistryMaps(registryDocument) {
+  const byKey = new Map();
+
+  for (const token of registryDocument.tokens || []) {
+    byKey.set(token.key, token);
+  }
+
+  return { byKey };
+}
+
+function resolveReferenceValue(rawValue, rawValues, cache, stack) {
+  if (typeof rawValue !== 'string') {
+    return String(rawValue);
+  }
+
+  const match = rawValue.match(/^\{([^}]+)\}$/);
+  if (!match) {
+    return rawValue;
+  }
+
+  const refKey = match[1];
+  if (cache.has(refKey)) {
+    return cache.get(refKey);
+  }
+
+  if (stack.has(refKey)) {
+    return rawValue;
+  }
+
+  const nextRaw = rawValues[refKey];
+  if (nextRaw == null) {
+    return rawValue;
+  }
+
+  stack.add(refKey);
+  const resolved = resolveReferenceValue(nextRaw, rawValues, cache, stack);
+  stack.delete(refKey);
+  cache.set(refKey, resolved);
+  return resolved;
+}
+
+function resolvePresetChain(theme, presets, errors, warnings, visited) {
+  if (!theme || !theme.extends) {
+    return undefined;
+  }
+
+  const presetId = theme.extends;
+  const preset = presets[presetId];
+  if (!preset) {
+    errors.push(`Unknown preset theme "${presetId}".`);
+    return undefined;
+  }
+
+  if (visited.has(presetId)) {
+    errors.push(`Circular preset extension detected for "${presetId}".`);
+    return undefined;
+  }
+
+  visited.add(presetId);
+  const normalizedPreset = normalizeThemeInput(preset);
+  const basePreset = resolvePresetChain(normalizedPreset, presets, errors, warnings, visited);
+  visited.delete(presetId);
+
+  if (!normalizedPreset.mode && presetId === 'tiny-light') {
+    normalizedPreset.mode = 'light';
+  }
+  if (!normalizedPreset.mode && presetId === 'tiny-dark') {
+    normalizedPreset.mode = 'dark';
+  }
+
+  if (basePreset) {
+    return mergeThemeDocuments(basePreset, {
+      ...normalizedPreset,
+      extends: undefined,
+    });
+  }
+
+  return normalizedPreset;
+}
+
+function validateTokenSection(section, category, registryMaps, errors, warnings, strict) {
+  if (!isObject(section)) {
+    if (section !== undefined) {
+      errors.push(`Theme tokens.${category} must be an object.`);
+    }
+    return;
+  }
+
+  for (const [key, value] of Object.entries(section)) {
+    if (!isTokenValue(value)) {
+      errors.push(`Theme token "${key}" must be a string or number.`);
+      continue;
+    }
+
+    const registryToken = registryMaps.byKey.get(key);
+    if (!registryToken) {
+      const message = `Unknown theme token "${key}".`;
+      if (strict) {
+        errors.push(message);
+      } else {
+        warnings.push(message);
+      }
+      continue;
+    }
+
+    if (registryToken.category !== category) {
+      warnings.push(
+        `Theme token "${key}" is authored under "${category}" but belongs to "${registryToken.category}".`
+      );
+    }
+
+    if (registryToken.status === 'deprecated') {
+      warnings.push(`Theme token "${key}" is deprecated.`);
+    }
+
+    if (registryToken.status === 'internal') {
+      const message = `Theme token "${key}" is internal and should not be authored by consumers.`;
+      if (strict) {
+        errors.push(message);
+      } else {
+        warnings.push(message);
+      }
+    }
+  }
+}
+
+function validateThemeDocument(input, options) {
+  const opts = options || {};
+  const strict = Boolean(opts.strict);
+  const errors = [];
+  const warnings = [];
+  const normalizedDocument = normalizeThemeInput(input);
+  const presets = opts.presets || defaultPresets;
+  const registryDocument = opts.registry || registry;
+  const registryMaps = buildRegistryMaps(registryDocument);
+
+  if (!isObject(input)) {
+    errors.push('Theme input must be an object.');
+  }
+
+  if (normalizedDocument.mode !== undefined) {
+    if (!['light', 'dark', 'system'].includes(normalizedDocument.mode)) {
+      errors.push(`Theme mode "${normalizedDocument.mode}" is invalid.`);
+    }
+  }
+
+  if (normalizedDocument.meta && normalizedDocument.meta.schemaVersion !== undefined) {
+    if (normalizedDocument.meta.schemaVersion !== 1) {
+      warnings.push(`Unexpected theme schemaVersion "${normalizedDocument.meta.schemaVersion}".`);
+    }
+  }
+
+  if (normalizedDocument.extends !== undefined && typeof normalizedDocument.extends !== 'string') {
+    errors.push('Theme extends must be a string.');
+  }
+
+  if (normalizedDocument.extends) {
+    const visited = new Set();
+    resolvePresetChain(normalizedDocument, presets, errors, warnings, visited);
+  }
+
+  validateTokenSection(
+    normalizedDocument.tokens && normalizedDocument.tokens.semantic,
+    'semantic',
+    registryMaps,
+    errors,
+    warnings,
+    strict
+  );
+  validateTokenSection(
+    normalizedDocument.tokens && normalizedDocument.tokens.components,
+    'component',
+    registryMaps,
+    errors,
+    warnings,
+    strict
+  );
+
+  return {
+    valid: errors.length === 0,
+    errors,
+    warnings,
+    normalizedDocument,
+  };
+}
+
+function resolveTheme(input, options) {
+  const opts = options || {};
+  const registryDocument = opts.registry || registry;
+  const presets = opts.presets || defaultPresets;
+  const validation = validateThemeDocument(input, opts);
+  const normalizedInput = validation.normalizedDocument;
+  const baseTheme = resolvePresetChain(
+    normalizedInput,
+    presets,
+    validation.errors,
+    validation.warnings,
+    new Set()
+  );
+
+  const mergedTheme = baseTheme
+    ? mergeThemeDocuments(baseTheme, { ...normalizedInput, extends: undefined })
+    : cloneThemeDocument(normalizedInput);
+
+  const effectiveMode = normalizedInput.mode || (baseTheme && baseTheme.mode) || undefined;
+
+  const rawValues = {};
+  for (const token of registryDocument.tokens || []) {
+    rawValues[token.key] = String(token.defaultValue);
+  }
+
+  if (baseTheme && baseTheme.tokens) {
+    for (const [key, value] of Object.entries(baseTheme.tokens.semantic || {})) {
+      rawValues[key] = String(value);
+    }
+    for (const [key, value] of Object.entries(baseTheme.tokens.components || {})) {
+      rawValues[key] = String(value);
+    }
+  }
+
+  for (const [key, value] of Object.entries((normalizedInput.tokens && normalizedInput.tokens.semantic) || {})) {
+    rawValues[key] = String(value);
+  }
+  for (const [key, value] of Object.entries((normalizedInput.tokens && normalizedInput.tokens.components) || {})) {
+    rawValues[key] = String(value);
+  }
+
+  const cache = new Map();
+  const cssVars = {};
+  for (const token of registryDocument.tokens || []) {
+    const resolvedValue = resolveReferenceValue(rawValues[token.key], rawValues, cache, new Set([token.key]));
+    cssVars[tokenKeyToCssVar(token.key)] = resolvedValue;
+  }
+
+  const semanticTokens = (normalizedInput.tokens && normalizedInput.tokens.semantic) || {};
+  const componentTokens = (normalizedInput.tokens && normalizedInput.tokens.components) || {};
+  const registryKeys = new Set((registryDocument.tokens || []).map((token) => token.key));
+
+  for (const [key, value] of Object.entries(semanticTokens)) {
+    if (!registryKeys.has(key)) {
+      cssVars[tokenKeyToCssVar(key)] = String(value);
+    }
+  }
+
+  for (const [key, value] of Object.entries(componentTokens)) {
+    if (!registryKeys.has(key)) {
+      cssVars[tokenKeyToCssVar(key)] = String(value);
+    }
+  }
+
+  return {
+    mode: effectiveMode,
+    cssVars,
+    warnings: validation.warnings,
+    errors: validation.errors,
+    valid: validation.valid,
+    normalizedDocument: mergedTheme,
+  };
+}
+
+export {
+  defaultPresets,
+  mergeThemeDocuments,
+  normalizeThemeInput,
+  resolveTheme,
+  tokenKeyToCssVar,
+  validateThemeDocument,
+};
diff --git a/packages/tokens/runtime/validate-theme.cjs b/packages/tokens/runtime/validate-theme.cjs
new file mode 100644
index 00000000..ae1fbf6c
--- /dev/null
+++ b/packages/tokens/runtime/validate-theme.cjs
@@ -0,0 +1,7 @@
+'use strict';
+
+const runtime = require('./theme-runtime.cjs');
+
+module.exports = {
+  validateThemeDocument: runtime.validateThemeDocument,
+};
diff --git a/packages/tokens/runtime/validate-theme.d.ts b/packages/tokens/runtime/validate-theme.d.ts
new file mode 100644
index 00000000..1f24c0cc
--- /dev/null
+++ b/packages/tokens/runtime/validate-theme.d.ts
@@ -0,0 +1,24 @@
+import type { ThemeConfig, ThemeDocument } from './resolve-theme';
+
+export interface ThemeValidationResult {
+  valid: boolean;
+  errors: string[];
+  warnings: string[];
+  normalizedDocument: ThemeConfig;
+}
+
+export function validateThemeDocument(
+  input: ThemeConfig | ThemeDocument,
+  options?: {
+    strict?: boolean;
+    presets?: Record<string, ThemeDocument>;
+    registry?: {
+      tokens: Array<{
+        key: string;
+        category: 'semantic' | 'component' | 'primitive';
+        status: 'active' | 'deprecated' | 'internal';
+        defaultValue: string | number;
+      }>;
+    };
+  }
+): ThemeValidationResult;
diff --git a/packages/tokens/runtime/validate-theme.mjs b/packages/tokens/runtime/validate-theme.mjs
new file mode 100644
index 00000000..d68033fd
--- /dev/null
+++ b/packages/tokens/runtime/validate-theme.mjs
@@ -0,0 +1 @@
+export { validateThemeDocument } from './theme-runtime.mjs';
diff --git a/packages/tokens/scripts/sync-theme-source-from-scss.js b/packages/tokens/scripts/sync-theme-source-from-scss.js
index 966435dd..b4768c3c 100644
--- a/packages/tokens/scripts/sync-theme-source-from-scss.js
+++ b/packages/tokens/scripts/sync-theme-source-from-scss.js
@@ -438,8 +438,6 @@ function syncThemeSourceFromScss() {
     const darkValue = darkTheme[legacyKey];
     if (!componentKeys.has(tokenKey)) {
       const semanticMatch = semanticValueIndex.get(`${lightValue}:::${darkValue}`);
-      const primaryCssVar = cssVarForTokenKey(tokenKey);
-      const legacyCssVar = `--ty-${legacyKey}`;
       const definition = {
         $value: semanticMatch ? `{${semanticMatch}}` : lightValue,
         $type: inferTokenType(tokenKey, lightValue),
@@ -450,10 +448,6 @@ function syncThemeSourceFromScss() {
         definition.fallback = `--ty-${semanticMatch}`;
       }
 
-      if (legacyCssVar !== primaryCssVar) {
-        definition.aliases = [legacyCssVar];
-      }
-
       if (!generatedComponents[componentName]) {
         generatedComponents[componentName] = {};
       }
@@ -494,11 +488,13 @@ function syncThemeSourceFromScss() {
   }
 
   writeJson(path.join(THEMES_DIR, 'light.json'), {
+    $schema: 'https://tiny.design/schema/theme.v1.schema.json',
     meta: {
       id: 'tiny-light',
       name: 'Tiny Light',
-      mode: 'light',
+      schemaVersion: 1,
     },
+    mode: 'light',
     tokens: {
       semantic: {},
       components: {},
@@ -527,11 +523,13 @@ function syncThemeSourceFromScss() {
   }
 
   const darkThemeOut = {
+    $schema: 'https://tiny.design/schema/theme.v1.schema.json',
     meta: {
       id: 'tiny-dark',
       name: 'Tiny Dark',
-      mode: 'dark',
+      schemaVersion: 1,
     },
+    mode: 'dark',
     tokens: {
       semantic: {},
       components: {},
diff --git a/packages/tokens/source/components/calendar.json b/packages/tokens/source/components/calendar.json
index d66111e7..b74c77d1 100644
--- a/packages/tokens/source/components/calendar.json
+++ b/packages/tokens/source/components/calendar.json
@@ -36,6 +36,11 @@
     "$type": "dimension",
     "description": "Calendar nav button radius."
   },
+  "calendar.nav-button-font-size": {
+    "$value": "18px",
+    "$type": "dimension",
+    "description": "Calendar nav button font size."
+  },
   "calendar.nav-button-color": {
     "$value": "{color-text-tertiary}",
     "$type": "color",
@@ -58,6 +63,21 @@
     "$type": "font-weight",
     "description": "Calendar title font weight."
   },
+  "calendar.title-gap": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Calendar title item gap."
+  },
+  "calendar.title-button-padding": {
+    "$value": "2px 6px",
+    "$type": "string",
+    "description": "Calendar title action padding."
+  },
+  "calendar.title-button-radius": {
+    "$value": "4px",
+    "$type": "dimension",
+    "description": "Calendar title action radius."
+  },
   "calendar.title-color": {
     "$value": "{color-text}",
     "$type": "color",
@@ -81,6 +101,11 @@
     "description": "Calendar weekday header font size.",
     "fallback": "--ty-font-size-sm"
   },
+  "calendar.cell-header-padding": {
+    "$value": "8px 0",
+    "$type": "string",
+    "description": "Calendar weekday header padding."
+  },
   "calendar.cell-header-color": {
     "$value": "{color-text-secondary}",
     "$type": "color",
@@ -93,6 +118,21 @@
     "description": "Calendar week number color.",
     "fallback": "--ty-color-text-quaternary"
   },
+  "calendar.week-number-width": {
+    "$value": "32px",
+    "$type": "dimension",
+    "description": "Calendar week number column width."
+  },
+  "calendar.week-number-font-size": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Calendar week number font size."
+  },
+  "calendar.week-number-padding": {
+    "$value": "4px 0",
+    "$type": "string",
+    "description": "Calendar week number cell padding."
+  },
   "calendar.cell-color": {
     "$value": "{color-text}",
     "$type": "color",
@@ -146,6 +186,46 @@
     "description": "Calendar date cell font size.",
     "fallback": "--ty-font-size-sm"
   },
+  "calendar.cell-date-line-height": {
+    "$value": "24px",
+    "$type": "dimension",
+    "description": "Calendar date cell line height."
+  },
+  "calendar.cell-date-min-width": {
+    "$value": "24px",
+    "$type": "dimension",
+    "description": "Calendar date cell min width."
+  },
+  "calendar.cell-inner-padding": {
+    "$value": "4px",
+    "$type": "dimension",
+    "description": "Calendar cell inner padding."
+  },
+  "calendar.cell-inner-min-height": {
+    "$value": "24px",
+    "$type": "dimension",
+    "description": "Calendar cell inner min height."
+  },
+  "calendar.cell-inner-padding-fullscreen": {
+    "$value": "4px 8px",
+    "$type": "string",
+    "description": "Calendar fullscreen cell inner padding."
+  },
+  "calendar.cell-inner-min-height-fullscreen": {
+    "$value": "60px",
+    "$type": "dimension",
+    "description": "Calendar fullscreen cell inner min height."
+  },
+  "calendar.cell-content-font-size": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Calendar cell content font size."
+  },
+  "calendar.cell-content-margin-top": {
+    "$value": "2px",
+    "$type": "dimension",
+    "description": "Calendar cell content margin top."
+  },
   "calendar.cell-dot-size": {
     "$value": "6px",
     "$type": "dimension",
@@ -189,6 +269,22 @@
     "description": "Calendar selected month and decade cell background color.",
     "fallback": "--ty-color-primary"
   },
+  "calendar.panel-cell-bg-selected-hover": {
+    "$value": "{color-primary-hover}",
+    "$type": "color",
+    "description": "Calendar selected month and decade cell hover background color.",
+    "fallback": "--ty-color-primary-hover"
+  },
+  "calendar.month-content-font-size": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Calendar month cell secondary content font size."
+  },
+  "calendar.month-content-margin-top": {
+    "$value": "4px",
+    "$type": "dimension",
+    "description": "Calendar month cell secondary content margin top."
+  },
   "calendar.decade-font-size": {
     "$value": "{font-size-base}",
     "$type": "dimension",
@@ -212,6 +308,12 @@
     "description": "Calendar today link color.",
     "fallback": "--ty-color-primary"
   },
+  "calendar.today-link-color-hover": {
+    "$value": "{color-primary-hover}",
+    "$type": "color",
+    "description": "Calendar today link hover color.",
+    "fallback": "--ty-color-primary-hover"
+  },
   "calendar.today-link-font-size": {
     "$value": "13px",
     "$type": "dimension",
diff --git a/packages/tokens/source/components/date-picker.json b/packages/tokens/source/components/date-picker.json
new file mode 100644
index 00000000..a3ee0d00
--- /dev/null
+++ b/packages/tokens/source/components/date-picker.json
@@ -0,0 +1,154 @@
+{
+  "date-picker.input-min-width.sm": {
+    "$value": "90px",
+    "$type": "dimension",
+    "description": "Small date picker input min width."
+  },
+  "date-picker.input-min-width.md": {
+    "$value": "120px",
+    "$type": "dimension",
+    "description": "Medium date picker input min width."
+  },
+  "date-picker.input-min-width.lg": {
+    "$value": "140px",
+    "$type": "dimension",
+    "description": "Large date picker input min width."
+  },
+  "date-picker.header-padding": {
+    "$value": "8px 12px",
+    "$type": "string",
+    "description": "Date picker header padding."
+  },
+  "date-picker.header-border": {
+    "$value": "{color-border-light}",
+    "$type": "color",
+    "description": "Date picker header and footer border color.",
+    "fallback": "--ty-color-border-light"
+  },
+  "date-picker.header-button-size": {
+    "$value": "28px",
+    "$type": "dimension",
+    "description": "Date picker header button size."
+  },
+  "date-picker.header-button-radius": {
+    "$value": "4px",
+    "$type": "dimension",
+    "description": "Date picker header button radius."
+  },
+  "date-picker.header-button-color": {
+    "$value": "{color-text-tertiary}",
+    "$type": "color",
+    "description": "Date picker header button color.",
+    "fallback": "--ty-color-text-tertiary"
+  },
+  "date-picker.header-button-color-hover": {
+    "$value": "{color-primary}",
+    "$type": "color",
+    "description": "Date picker header button hover color.",
+    "fallback": "--ty-color-primary"
+  },
+  "date-picker.header-label-font-size": {
+    "$value": "16px",
+    "$type": "dimension",
+    "description": "Date picker header label font size."
+  },
+  "date-picker.header-label-font-weight": {
+    "$value": "500",
+    "$type": "font-weight",
+    "description": "Date picker header label font weight."
+  },
+  "date-picker.header-caption-gap": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Date picker header caption gap."
+  },
+  "date-picker.body-padding": {
+    "$value": "8px 12px",
+    "$type": "string",
+    "description": "Date picker body padding."
+  },
+  "date-picker.cell-font-size": {
+    "$value": "13px",
+    "$type": "dimension",
+    "description": "Date picker cell font size."
+  },
+  "date-picker.cell-size": {
+    "$value": "28px",
+    "$type": "dimension",
+    "description": "Date picker cell inner size."
+  },
+  "date-picker.cell-radius": {
+    "$value": "6px",
+    "$type": "dimension",
+    "description": "Date picker cell radius."
+  },
+  "date-picker.cell-color": {
+    "$value": "{color-text}",
+    "$type": "color",
+    "description": "Date picker active cell text color.",
+    "fallback": "--ty-color-text"
+  },
+  "date-picker.cell-color-muted": {
+    "$value": "{color-text-quaternary}",
+    "$type": "color",
+    "description": "Date picker muted cell text color.",
+    "fallback": "--ty-color-text-quaternary"
+  },
+  "date-picker.cell-disabled-bg": {
+    "$value": "{color-fill-secondary}",
+    "$type": "color",
+    "description": "Date picker cell disabled background color.",
+    "fallback": "--ty-color-fill-secondary"
+  },
+  "date-picker.cell-today-border": {
+    "$value": "{color-primary}",
+    "$type": "color",
+    "description": "Date picker today cell border color.",
+    "fallback": "--ty-color-primary"
+  },
+  "date-picker.cell-selected-bg": {
+    "$value": "{color-primary}",
+    "$type": "color",
+    "description": "Date picker selected cell background color.",
+    "fallback": "--ty-color-primary"
+  },
+  "date-picker.cell-selected-color": {
+    "$value": "#fff",
+    "$type": "color",
+    "description": "Date picker selected cell text color."
+  },
+  "date-picker.cell-selected-hover-bg": {
+    "$value": "{color-primary-active}",
+    "$type": "color",
+    "description": "Date picker selected cell hover background color.",
+    "fallback": "--ty-color-primary-active"
+  },
+  "date-picker.range-bg": {
+    "$value": "{color-primary-bg}",
+    "$type": "color",
+    "description": "Date picker range background color.",
+    "fallback": "--ty-color-primary-bg"
+  },
+  "date-picker.footer-padding": {
+    "$value": "8px 12px",
+    "$type": "string",
+    "description": "Date picker footer padding."
+  },
+  "date-picker.today-font-size": {
+    "$value": "13px",
+    "$type": "dimension",
+    "description": "Date picker today button font size."
+  },
+  "date-picker.today-color": {
+    "$value": "{color-primary}",
+    "$type": "color",
+    "description": "Date picker today action color.",
+    "fallback": "--ty-color-primary"
+  },
+  "date-picker.today-color-hover": {
+    "$value": "{color-primary-hover}",
+    "$type": "color",
+    "description": "Date picker today action hover color.",
+    "fallback": "--ty-color-primary-hover"
+  }
+}
diff --git a/packages/tokens/source/components/dropdown.json b/packages/tokens/source/components/dropdown.json
new file mode 100644
index 00000000..4f67e856
--- /dev/null
+++ b/packages/tokens/source/components/dropdown.json
@@ -0,0 +1,29 @@
+{
+  "dropdown.menu-padding": {
+    "$value": "4px 0",
+    "$type": "string",
+    "description": "Dropdown menu vertical padding."
+  },
+  "dropdown.item-padding": {
+    "$value": "8px 15px",
+    "$type": "string",
+    "description": "Dropdown menu item padding."
+  },
+  "dropdown.item-color": {
+    "$value": "{color-text}",
+    "$type": "color",
+    "description": "Dropdown menu item text color.",
+    "fallback": "--ty-color-text"
+  },
+  "dropdown.item-hover-bg": {
+    "$value": "{color-bg-spotlight}",
+    "$type": "color",
+    "description": "Dropdown menu item hover background color.",
+    "fallback": "--ty-color-bg-spotlight"
+  },
+  "dropdown.group-title-padding": {
+    "$value": "8px 10px",
+    "$type": "string",
+    "description": "Dropdown menu group title padding."
+  }
+}
diff --git a/packages/tokens/source/components/overlay.json b/packages/tokens/source/components/overlay.json
new file mode 100644
index 00000000..26516e28
--- /dev/null
+++ b/packages/tokens/source/components/overlay.json
@@ -0,0 +1,24 @@
+{
+  "overlay.bg.default": {
+    "$value": "{color-overlay-bg}",
+    "$type": "color",
+    "description": "Overlay default background color.",
+    "fallback": "--ty-color-overlay-bg"
+  },
+  "overlay.bg.inverted": {
+    "$value": "{color-overlay-inverted}",
+    "$type": "color",
+    "description": "Overlay inverted background color.",
+    "fallback": "--ty-color-overlay-inverted"
+  },
+  "overlay.blur.radius": {
+    "$value": "3px",
+    "$type": "dimension",
+    "description": "Overlay blurred mask radius."
+  },
+  "overlay.fade-duration": {
+    "$value": "300ms",
+    "$type": "duration",
+    "description": "Overlay fade transition duration."
+  }
+}
diff --git a/packages/tokens/source/components/picker.json b/packages/tokens/source/components/picker.json
index 2c398d6d..69a037a4 100644
--- a/packages/tokens/source/components/picker.json
+++ b/packages/tokens/source/components/picker.json
@@ -1,10 +1,4 @@
 {
-  "picker.cell-disabled-bg": {
-    "$value": "{color-fill-secondary}",
-    "$type": "color",
-    "description": "Picker cell disabled bg.",
-    "fallback": "--ty-color-fill-secondary"
-  },
   "picker.input-font-size": {
     "$value": "{font-size-base}",
     "$type": "dimension",
@@ -79,36 +73,6 @@
     "description": "Picker muted input text color.",
     "fallback": "--ty-color-text-tertiary"
   },
-  "picker.input-min-width.date.sm": {
-    "$value": "90px",
-    "$type": "dimension",
-    "description": "Small date picker input min width."
-  },
-  "picker.input-min-width.date.md": {
-    "$value": "120px",
-    "$type": "dimension",
-    "description": "Medium date picker input min width."
-  },
-  "picker.input-min-width.date.lg": {
-    "$value": "140px",
-    "$type": "dimension",
-    "description": "Large date picker input min width."
-  },
-  "picker.input-min-width.time.sm": {
-    "$value": "70px",
-    "$type": "dimension",
-    "description": "Small time picker input min width."
-  },
-  "picker.input-min-width.time.md": {
-    "$value": "90px",
-    "$type": "dimension",
-    "description": "Medium time picker input min width."
-  },
-  "picker.input-min-width.time.lg": {
-    "$value": "110px",
-    "$type": "dimension",
-    "description": "Large time picker input min width."
-  },
   "picker.suffix-size": {
     "$value": "14px",
     "$type": "dimension",
@@ -131,12 +95,6 @@
     "description": "Picker cell hover bg.",
     "fallback": "--ty-color-fill-secondary"
   },
-  "picker.cell-selected-hover-bg": {
-    "$value": "{color-primary-active}",
-    "$type": "color",
-    "description": "Picker cell selected hover bg.",
-    "fallback": "--ty-color-primary-active"
-  },
   "picker.clear-bg": {
     "$value": "{color-bg-container}",
     "$type": "color",
@@ -172,236 +130,16 @@
     "description": "Picker dropdown shadow.",
     "fallback": "--ty-shadow-popup"
   },
-  "picker.header-padding": {
-    "$value": "8px 12px",
-    "$type": "string",
-    "description": "Picker header padding."
-  },
-  "picker.header-border": {
-    "$value": "{color-border-light}",
-    "$type": "color",
-    "description": "Picker header and footer border color.",
-    "fallback": "--ty-color-border-light"
-  },
-  "picker.header-button-size": {
-    "$value": "28px",
-    "$type": "dimension",
-    "description": "Picker header button size."
-  },
-  "picker.header-button-radius": {
-    "$value": "4px",
-    "$type": "dimension",
-    "description": "Picker header button radius."
-  },
-  "picker.header-button-color": {
-    "$value": "{color-text-tertiary}",
-    "$type": "color",
-    "description": "Picker header button color.",
-    "fallback": "--ty-color-text-tertiary"
-  },
-  "picker.header-button-color-hover": {
-    "$value": "{color-primary}",
-    "$type": "color",
-    "description": "Picker header button hover color.",
-    "fallback": "--ty-color-primary"
-  },
-  "picker.header-label-font-size": {
-    "$value": "16px",
-    "$type": "dimension",
-    "description": "Picker header label font size."
-  },
-  "picker.header-label-font-weight": {
-    "$value": "500",
-    "$type": "font-weight",
-    "description": "Picker header label font weight."
-  },
-  "picker.header-caption-gap": {
-    "$value": "8px",
-    "$type": "dimension",
-    "description": "Picker header caption gap."
-  },
-  "picker.body-padding": {
-    "$value": "8px 12px",
-    "$type": "string",
-    "description": "Date picker body padding."
-  },
-  "picker.footer-padding": {
-    "$value": "8px 12px",
-    "$type": "string",
-    "description": "Picker footer padding."
-  },
-  "picker.footer-font-size": {
-    "$value": "12px",
-    "$type": "dimension",
-    "description": "Time picker footer font size."
-  },
-  "picker.today-font-size": {
-    "$value": "13px",
-    "$type": "dimension",
-    "description": "Picker today button font size."
-  },
-  "picker.today-color": {
-    "$value": "{color-primary}",
-    "$type": "color",
-    "description": "Picker today and now action color.",
-    "fallback": "--ty-color-primary"
-  },
-  "picker.today-color-hover": {
-    "$value": "{color-primary-hover}",
-    "$type": "color",
-    "description": "Picker today and now action hover color.",
-    "fallback": "--ty-color-primary-hover"
-  },
   "picker.input-bg": {
     "$value": "{color-bg-container}",
     "$type": "color",
     "description": "Picker input bg.",
     "fallback": "--ty-color-bg-container"
   },
-  "picker.cell-font-size": {
-    "$value": "13px",
-    "$type": "dimension",
-    "description": "Picker date cell font size."
-  },
-  "picker.cell-size": {
-    "$value": "28px",
-    "$type": "dimension",
-    "description": "Picker date cell inner size."
-  },
-  "picker.cell-radius": {
-    "$value": "6px",
-    "$type": "dimension",
-    "description": "Picker date cell radius."
-  },
-  "picker.cell-color": {
-    "$value": "{color-text}",
-    "$type": "color",
-    "description": "Picker active cell text color.",
-    "fallback": "--ty-color-text"
-  },
   "picker.cell-color-muted": {
     "$value": "{color-text-quaternary}",
     "$type": "color",
     "description": "Picker muted cell text color.",
     "fallback": "--ty-color-text-quaternary"
-  },
-  "picker.cell-today-border": {
-    "$value": "{color-primary}",
-    "$type": "color",
-    "description": "Picker today cell border color.",
-    "fallback": "--ty-color-primary"
-  },
-  "picker.cell-selected-bg": {
-    "$value": "{color-primary}",
-    "$type": "color",
-    "description": "Picker selected cell background color.",
-    "fallback": "--ty-color-primary"
-  },
-  "picker.cell-selected-color": {
-    "$value": "#fff",
-    "$type": "color",
-    "description": "Picker selected cell text color."
-  },
-  "picker.range-bg": {
-    "$value": "{color-primary-bg}",
-    "$type": "color",
-    "description": "Picker range background color.",
-    "fallback": "--ty-color-primary-bg"
-  },
-  "picker.time-column-max-height": {
-    "$value": "224px",
-    "$type": "dimension",
-    "description": "Time picker column max height."
-  },
-  "picker.time-column-border": {
-    "$value": "{color-border-light}",
-    "$type": "color",
-    "description": "Time picker column separator color.",
-    "fallback": "--ty-color-border-light"
-  },
-  "picker.time-scrollbar-thumb": {
-    "$value": "{color-text-quaternary}",
-    "$type": "color",
-    "description": "Time picker scrollbar thumb color.",
-    "fallback": "--ty-color-text-quaternary"
-  },
-  "picker.time-cell-padding": {
-    "$value": "4px 0",
-    "$type": "string",
-    "description": "Time picker cell padding."
-  },
-  "picker.time-cell-min-width": {
-    "$value": "52px",
-    "$type": "dimension",
-    "description": "Time picker cell min width."
-  },
-  "picker.time-cell-radius": {
-    "$value": "4px",
-    "$type": "dimension",
-    "description": "Time picker cell radius."
-  },
-  "picker.time-cell-margin-inline": {
-    "$value": "4px",
-    "$type": "dimension",
-    "description": "Time picker cell horizontal margin."
-  },
-  "picker.time-cell-line-height": {
-    "$value": "20px",
-    "$type": "dimension",
-    "description": "Time picker cell line height."
-  },
-  "picker.time-cell-bg-selected": {
-    "$value": "{color-primary-bg}",
-    "$type": "color",
-    "description": "Time picker selected cell background color.",
-    "fallback": "--ty-color-primary-bg"
-  },
-  "picker.time-cell-bg-selected-hover": {
-    "$value": "{color-primary-bg-hover}",
-    "$type": "color",
-    "description": "Time picker selected cell hover background color.",
-    "fallback": "--ty-color-primary-bg-hover"
-  },
-  "picker.time-cell-font-weight-selected": {
-    "$value": "500",
-    "$type": "font-weight",
-    "description": "Time picker selected cell font weight."
-  },
-  "picker.ok-button-padding": {
-    "$value": "0 8px",
-    "$type": "string",
-    "description": "Time picker ok button padding."
-  },
-  "picker.ok-button-height": {
-    "$value": "24px",
-    "$type": "dimension",
-    "description": "Time picker ok button height."
-  },
-  "picker.ok-button-font-size": {
-    "$value": "12px",
-    "$type": "dimension",
-    "description": "Time picker ok button font size."
-  },
-  "picker.ok-button-radius": {
-    "$value": "4px",
-    "$type": "dimension",
-    "description": "Time picker ok button radius."
-  },
-  "picker.ok-button-bg": {
-    "$value": "{color-primary}",
-    "$type": "color",
-    "description": "Time picker ok button background color.",
-    "fallback": "--ty-color-primary"
-  },
-  "picker.ok-button-bg-hover": {
-    "$value": "{color-primary-hover}",
-    "$type": "color",
-    "description": "Time picker ok button hover background color.",
-    "fallback": "--ty-color-primary-hover"
-  },
-  "picker.ok-button-color": {
-    "$value": "#fff",
-    "$type": "color",
-    "description": "Time picker ok button text color."
   }
 }
diff --git a/packages/tokens/source/components/pop-confirm.json b/packages/tokens/source/components/pop-confirm.json
new file mode 100644
index 00000000..f1a0053e
--- /dev/null
+++ b/packages/tokens/source/components/pop-confirm.json
@@ -0,0 +1,34 @@
+{
+  "pop-confirm.color": {
+    "$value": "{color-text-secondary}",
+    "$type": "color",
+    "description": "PopConfirm content text color.",
+    "fallback": "--ty-color-text-secondary"
+  },
+  "pop-confirm.overlay-padding": {
+    "$value": "4px",
+    "$type": "dimension",
+    "description": "PopConfirm overlay padding."
+  },
+  "pop-confirm.messages-padding-bottom": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "PopConfirm message section bottom padding."
+  },
+  "pop-confirm.messages-font-size": {
+    "$value": "{font-size-base}",
+    "$type": "dimension",
+    "description": "PopConfirm message font size.",
+    "fallback": "--ty-font-size-base"
+  },
+  "pop-confirm.buttons-gap": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "PopConfirm action buttons gap."
+  },
+  "pop-confirm.title-margin-left": {
+    "$value": "5px",
+    "$type": "dimension",
+    "description": "PopConfirm title margin left."
+  }
+}
diff --git a/packages/tokens/source/components/select.json b/packages/tokens/source/components/select.json
index b2056da7..e044d6e5 100644
--- a/packages/tokens/source/components/select.json
+++ b/packages/tokens/source/components/select.json
@@ -23,6 +23,11 @@
     "description": "Disabled select trigger background color.",
     "fallback": "--ty-color-bg-disabled"
   },
+  "select.opacity.disabled": {
+    "$value": "0.6",
+    "$type": "number",
+    "description": "Disabled select root opacity."
+  },
   "select.border": {
     "$value": "{color-border}",
     "$type": "color",
@@ -64,6 +69,11 @@
     "$type": "dimension",
     "description": "Select suffix icon box size."
   },
+  "select.suffix-offset-inline-end": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Select suffix inline end offset."
+  },
   "select.clear-bg": {
     "$value": "{color-bg-container}",
     "$type": "color",
@@ -163,6 +173,11 @@
     "$type": "dimension",
     "description": "Vertical padding for multiple select tag rows."
   },
+  "select.search-min-width": {
+    "$value": "4px",
+    "$type": "dimension",
+    "description": "Select search input min width."
+  },
   "select.tag.height": {
     "$value": "22px",
     "$type": "dimension",
@@ -219,12 +234,22 @@
     "description": "Multiple select tag close icon hover color.",
     "fallback": "--ty-color-text"
   },
+  "select.tag-close-gap": {
+    "$value": "4px",
+    "$type": "dimension",
+    "description": "Gap between select tag content and close icon."
+  },
   "select.empty-color": {
     "$value": "{color-text-quaternary}",
     "$type": "color",
     "description": "Select empty state text color.",
     "fallback": "--ty-color-text-quaternary"
   },
+  "select.feedback-padding": {
+    "$value": "16px",
+    "$type": "dimension",
+    "description": "Select loading and empty state padding."
+  },
   "select.dropdown-bg": {
     "$value": "{color-bg-container}",
     "$type": "color",
@@ -237,6 +262,11 @@
     "description": "Select dropdown shadow.",
     "fallback": "--ty-shadow-popup"
   },
+  "select.dropdown-padding": {
+    "$value": "4px 0",
+    "$type": "string",
+    "description": "Select dropdown list padding."
+  },
   "select.dropdown-max-height": {
     "$value": "300px",
     "$type": "dimension",
@@ -253,12 +283,22 @@
     "description": "Select option font size.",
     "fallback": "--ty-font-size-base"
   },
+  "select.option.line-height": {
+    "$value": "22px",
+    "$type": "dimension",
+    "description": "Select option line height."
+  },
   "select.option.color": {
     "$value": "{color-text}",
     "$type": "color",
     "description": "Select option text color.",
     "fallback": "--ty-color-text"
   },
+  "select.option.check-gap": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Gap between select option content and check icon."
+  },
   "select.option.active-bg": {
     "$value": "{color-fill-secondary}",
     "$type": "color",
@@ -282,5 +322,21 @@
     "$type": "color",
     "description": "Select option disabled text color.",
     "fallback": "--ty-color-text-quaternary"
+  },
+  "select.option.disabled-opacity": {
+    "$value": "0.5",
+    "$type": "number",
+    "description": "Select option disabled opacity."
+  },
+  "select.group-title-color": {
+    "$value": "{color-text-secondary}",
+    "$type": "color",
+    "description": "Select option group title color.",
+    "fallback": "--ty-color-text-secondary"
+  },
+  "select.group-option-padding-inline-start": {
+    "$value": "24px",
+    "$type": "dimension",
+    "description": "Select grouped option extra inline start padding."
   }
 }
diff --git a/packages/tokens/source/components/time-picker.json b/packages/tokens/source/components/time-picker.json
new file mode 100644
index 00000000..4b5eaa01
--- /dev/null
+++ b/packages/tokens/source/components/time-picker.json
@@ -0,0 +1,141 @@
+{
+  "time-picker.input-min-width.sm": {
+    "$value": "70px",
+    "$type": "dimension",
+    "description": "Small time picker input min width."
+  },
+  "time-picker.input-min-width.md": {
+    "$value": "90px",
+    "$type": "dimension",
+    "description": "Medium time picker input min width."
+  },
+  "time-picker.input-min-width.lg": {
+    "$value": "110px",
+    "$type": "dimension",
+    "description": "Large time picker input min width."
+  },
+  "time-picker.column-max-height": {
+    "$value": "224px",
+    "$type": "dimension",
+    "description": "Time picker column max height."
+  },
+  "time-picker.column-border": {
+    "$value": "{color-border-light}",
+    "$type": "color",
+    "description": "Time picker column separator color.",
+    "fallback": "--ty-color-border-light"
+  },
+  "time-picker.scrollbar-thumb": {
+    "$value": "{color-text-quaternary}",
+    "$type": "color",
+    "description": "Time picker scrollbar thumb color.",
+    "fallback": "--ty-color-text-quaternary"
+  },
+  "time-picker.cell-padding": {
+    "$value": "4px 0",
+    "$type": "string",
+    "description": "Time picker cell padding."
+  },
+  "time-picker.cell-min-width": {
+    "$value": "52px",
+    "$type": "dimension",
+    "description": "Time picker cell min width."
+  },
+  "time-picker.cell-radius": {
+    "$value": "4px",
+    "$type": "dimension",
+    "description": "Time picker cell radius."
+  },
+  "time-picker.cell-margin-inline": {
+    "$value": "4px",
+    "$type": "dimension",
+    "description": "Time picker cell horizontal margin."
+  },
+  "time-picker.cell-line-height": {
+    "$value": "20px",
+    "$type": "dimension",
+    "description": "Time picker cell line height."
+  },
+  "time-picker.cell-bg-selected": {
+    "$value": "{color-primary-bg}",
+    "$type": "color",
+    "description": "Time picker selected cell background color.",
+    "fallback": "--ty-color-primary-bg"
+  },
+  "time-picker.cell-bg-selected-hover": {
+    "$value": "{color-primary-bg-hover}",
+    "$type": "color",
+    "description": "Time picker selected cell hover background color.",
+    "fallback": "--ty-color-primary-bg-hover"
+  },
+  "time-picker.cell-font-weight-selected": {
+    "$value": "500",
+    "$type": "font-weight",
+    "description": "Time picker selected cell font weight."
+  },
+  "time-picker.footer-padding": {
+    "$value": "8px 12px",
+    "$type": "string",
+    "description": "Time picker footer padding."
+  },
+  "time-picker.footer-border": {
+    "$value": "{color-border-light}",
+    "$type": "color",
+    "description": "Time picker footer border color.",
+    "fallback": "--ty-color-border-light"
+  },
+  "time-picker.footer-font-size": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Time picker footer font size."
+  },
+  "time-picker.now-color": {
+    "$value": "{color-primary}",
+    "$type": "color",
+    "description": "Time picker now action color.",
+    "fallback": "--ty-color-primary"
+  },
+  "time-picker.now-color-hover": {
+    "$value": "{color-primary-hover}",
+    "$type": "color",
+    "description": "Time picker now action hover color.",
+    "fallback": "--ty-color-primary-hover"
+  },
+  "time-picker.ok-button-padding": {
+    "$value": "0 8px",
+    "$type": "string",
+    "description": "Time picker ok button padding."
+  },
+  "time-picker.ok-button-height": {
+    "$value": "24px",
+    "$type": "dimension",
+    "description": "Time picker ok button height."
+  },
+  "time-picker.ok-button-font-size": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Time picker ok button font size."
+  },
+  "time-picker.ok-button-radius": {
+    "$value": "4px",
+    "$type": "dimension",
+    "description": "Time picker ok button radius."
+  },
+  "time-picker.ok-button-bg": {
+    "$value": "{color-primary}",
+    "$type": "color",
+    "description": "Time picker ok button background color.",
+    "fallback": "--ty-color-primary"
+  },
+  "time-picker.ok-button-bg-hover": {
+    "$value": "{color-primary-hover}",
+    "$type": "color",
+    "description": "Time picker ok button hover background color.",
+    "fallback": "--ty-color-primary-hover"
+  },
+  "time-picker.ok-button-color": {
+    "$value": "#fff",
+    "$type": "color",
+    "description": "Time picker ok button text color."
+  }
+}
diff --git a/packages/tokens/source/components/tour.json b/packages/tokens/source/components/tour.json
new file mode 100644
index 00000000..bfa9b88a
--- /dev/null
+++ b/packages/tokens/source/components/tour.json
@@ -0,0 +1,209 @@
+{
+  "tour.arrow-size": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Tour arrow half-size."
+  },
+  "tour.panel-radius": {
+    "$value": "{border-radius}",
+    "$type": "dimension",
+    "description": "Tour panel border radius.",
+    "fallback": "--ty-border-radius"
+  },
+  "tour.panel-shadow": {
+    "$value": "{shadow-modal}",
+    "$type": "shadow",
+    "description": "Tour panel shadow.",
+    "fallback": "--ty-shadow-modal"
+  },
+  "tour.panel-max-width": {
+    "$value": "360px",
+    "$type": "dimension",
+    "description": "Tour panel max width."
+  },
+  "tour.panel-min-width": {
+    "$value": "260px",
+    "$type": "dimension",
+    "description": "Tour panel min width."
+  },
+  "tour.panel-bg.default": {
+    "$value": "{popup.light-bg}",
+    "$type": "color",
+    "description": "Default tour panel background color.",
+    "fallback": "--ty-popup-light-bg"
+  },
+  "tour.panel-color.default": {
+    "$value": "{color-text}",
+    "$type": "color",
+    "description": "Default tour panel text color.",
+    "fallback": "--ty-color-text"
+  },
+  "tour.panel-bg.primary": {
+    "$value": "{color-primary}",
+    "$type": "color",
+    "description": "Primary tour panel background color.",
+    "fallback": "--ty-color-primary"
+  },
+  "tour.panel-color.primary": {
+    "$value": "#fff",
+    "$type": "color",
+    "description": "Primary tour panel text color."
+  },
+  "tour.description-color.default": {
+    "$value": "{color-text-secondary}",
+    "$type": "color",
+    "description": "Default tour description color.",
+    "fallback": "--ty-color-text-secondary"
+  },
+  "tour.description-color.primary": {
+    "$value": "rgb(255 255 255 / 85%)",
+    "$type": "color",
+    "description": "Primary tour description color."
+  },
+  "tour.indicator-bg.default": {
+    "$value": "{color-text-quaternary}",
+    "$type": "color",
+    "description": "Default tour indicator background color.",
+    "fallback": "--ty-color-text-quaternary"
+  },
+  "tour.indicator-bg.primary": {
+    "$value": "rgb(255 255 255 / 35%)",
+    "$type": "color",
+    "description": "Primary tour indicator background color."
+  },
+  "tour.indicator-bg-active.default": {
+    "$value": "{color-primary}",
+    "$type": "color",
+    "description": "Default active tour indicator background color.",
+    "fallback": "--ty-color-primary"
+  },
+  "tour.indicator-bg-active.primary": {
+    "$value": "#fff",
+    "$type": "color",
+    "description": "Primary active tour indicator background color."
+  },
+  "tour.close-color": {
+    "$value": "{color-text-tertiary}",
+    "$type": "color",
+    "description": "Tour close button color.",
+    "fallback": "--ty-color-text-tertiary"
+  },
+  "tour.close-color.primary": {
+    "$value": "rgb(255 255 255 / 65%)",
+    "$type": "color",
+    "description": "Primary tour close button color."
+  },
+  "tour.close-color-hover.primary": {
+    "$value": "#fff",
+    "$type": "color",
+    "description": "Primary tour close button hover color."
+  },
+  "tour.close-bg-hover": {
+    "$value": "{color-fill-secondary}",
+    "$type": "color",
+    "description": "Default tour close button hover background color.",
+    "fallback": "--ty-color-fill-secondary"
+  },
+  "tour.close-bg-hover.primary": {
+    "$value": "rgb(255 255 255 / 15%)",
+    "$type": "color",
+    "description": "Primary tour close button hover background color."
+  },
+  "tour.close-offset": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Tour close button top and right offset."
+  },
+  "tour.close-size": {
+    "$value": "28px",
+    "$type": "dimension",
+    "description": "Tour close button square size."
+  },
+  "tour.close-radius": {
+    "$value": "4px",
+    "$type": "dimension",
+    "description": "Tour close button border radius."
+  },
+  "tour.close-font-size": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Tour close button font size."
+  },
+  "tour.cover-padding": {
+    "$value": "12px 16px 0",
+    "$type": "string",
+    "description": "Tour cover padding."
+  },
+  "tour.title-padding": {
+    "$value": "12px 16px 4px",
+    "$type": "string",
+    "description": "Tour title padding."
+  },
+  "tour.title-font-weight": {
+    "$value": "600",
+    "$type": "font-weight",
+    "description": "Tour title font weight."
+  },
+  "tour.title-font-size": {
+    "$value": "{font-size-lg}",
+    "$type": "dimension",
+    "description": "Tour title font size.",
+    "fallback": "--ty-font-size-lg"
+  },
+  "tour.title-line-height": {
+    "$value": "1.5",
+    "$type": "line-height",
+    "description": "Tour title line height."
+  },
+  "tour.description-padding": {
+    "$value": "0 16px 12px",
+    "$type": "string",
+    "description": "Tour description padding."
+  },
+  "tour.description-font-size": {
+    "$value": "{font-size-base}",
+    "$type": "dimension",
+    "description": "Tour description font size.",
+    "fallback": "--ty-font-size-base"
+  },
+  "tour.description-line-height": {
+    "$value": "1.5",
+    "$type": "line-height",
+    "description": "Tour description line height."
+  },
+  "tour.footer-padding": {
+    "$value": "0 16px 12px",
+    "$type": "string",
+    "description": "Tour footer padding."
+  },
+  "tour.indicators-gap": {
+    "$value": "4px",
+    "$type": "dimension",
+    "description": "Tour indicators gap."
+  },
+  "tour.indicator-size": {
+    "$value": "6px",
+    "$type": "dimension",
+    "description": "Tour indicator size."
+  },
+  "tour.indicator-transition-duration": {
+    "$value": "200ms",
+    "$type": "duration",
+    "description": "Tour indicator transition duration."
+  },
+  "tour.actions-gap": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Tour action buttons gap."
+  },
+  "tour.zoom-scale-from": {
+    "$value": "0.9",
+    "$type": "number",
+    "description": "Tour zoom animation start scale."
+  },
+  "tour.zoom-duration": {
+    "$value": "200ms",
+    "$type": "duration",
+    "description": "Tour zoom animation duration."
+  }
+}
diff --git a/packages/tokens/source/themes/dark.json b/packages/tokens/source/themes/dark.json
index 5b640f19..c7511d20 100644
--- a/packages/tokens/source/themes/dark.json
+++ b/packages/tokens/source/themes/dark.json
@@ -1,9 +1,11 @@
 {
+  "$schema": "https://tiny.design/schema/theme.v1.schema.json",
   "meta": {
     "id": "tiny-dark",
     "name": "Tiny Dark",
-    "mode": "dark"
+    "schemaVersion": 1
   },
+  "mode": "dark",
   "tokens": {
     "semantic": {
       "chart-1": "#9065d0",
diff --git a/packages/tokens/source/themes/light.json b/packages/tokens/source/themes/light.json
index b12c5cc3..b794ba73 100644
--- a/packages/tokens/source/themes/light.json
+++ b/packages/tokens/source/themes/light.json
@@ -1,9 +1,11 @@
 {
+  "$schema": "https://tiny.design/schema/theme.v1.schema.json",
   "meta": {
     "id": "tiny-light",
     "name": "Tiny Light",
-    "mode": "light"
+    "schemaVersion": 1
   },
+  "mode": "light",
   "tokens": {
     "semantic": {},
     "components": {}

From f0586297d80129231db8a47e97b863339530f86c Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Thu, 9 Apr 2026 20:19:01 +1000
Subject: [PATCH 06/12] fix: styles

---
 .../react/src/auto-complete/style/index.scss  |  32 +--
 .../src/cascader/__tests__/cascader.test.tsx  | 101 ++++++++
 packages/react/src/cascader/cascader.tsx      |  30 ++-
 .../src/cascader/demo/ChangeOnSelect.tsx      |  12 +-
 packages/react/src/cascader/style/index.scss  |  49 ++--
 .../react/src/color-picker/style/index.scss   | 108 ++++-----
 .../src/dropdown/__tests__/dropdown.test.tsx  |  33 +++
 packages/react/src/dropdown/dropdown.tsx      |   4 +-
 .../react/src/speed-dial/style/index.scss     |  62 +++--
 .../source/components/auto-complete.json      |  90 +++++++
 .../tokens/source/components/cascader.json    |  65 +++++
 .../source/components/color-picker.json       | 226 ++++++++++++++++++
 .../tokens/source/components/speed-dial.json  |  87 +++++++
 13 files changed, 763 insertions(+), 136 deletions(-)
 create mode 100644 packages/tokens/source/components/auto-complete.json
 create mode 100644 packages/tokens/source/components/color-picker.json

diff --git a/packages/react/src/auto-complete/style/index.scss b/packages/react/src/auto-complete/style/index.scss
index 2cde5644..764014a0 100644
--- a/packages/react/src/auto-complete/style/index.scss
+++ b/packages/react/src/auto-complete/style/index.scss
@@ -7,31 +7,31 @@
 
   &_disabled {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--ty-auto-complete-opacity-disabled);
   }
 
   // Dropdown
   &__dropdown {
     width: 100%;
     margin: 0;
-    padding: 4px 0;
+    padding: var(--ty-auto-complete-dropdown-padding);
     list-style-type: none;
-    background-color: var(--ty-select-dropdown-bg);
+    background-color: var(--ty-auto-complete-dropdown-bg);
     box-sizing: border-box;
     overflow: hidden auto;
     z-index: 10;
-    box-shadow: var(--ty-shadow-popup);
-    border-radius: var(--ty-border-radius);
-    font-size: var(--ty-font-size-base);
-    max-height: $select-dropdown-max-height;
+    box-shadow: var(--ty-auto-complete-dropdown-shadow);
+    border-radius: var(--ty-auto-complete-dropdown-radius);
+    font-size: var(--ty-auto-complete-dropdown-font-size);
+    max-height: var(--ty-auto-complete-dropdown-max-height);
   }
 
   // Empty state
   &__empty {
-    padding: 16px;
+    padding: var(--ty-auto-complete-empty-padding);
     text-align: center;
-    color: var(--ty-color-text-quaternary);
-    font-size: var(--ty-font-size-sm);
+    color: var(--ty-auto-complete-empty-color);
+    font-size: var(--ty-auto-complete-empty-font-size);
   }
 }
 
@@ -39,19 +39,19 @@
 .#{$prefix}-auto-complete-option {
   display: flex;
   align-items: center;
-  padding: 7px 12px;
-  font-size: 14px;
-  line-height: 22px;
+  padding: var(--ty-auto-complete-option-padding);
+  font-size: var(--ty-auto-complete-option-font-size);
+  line-height: var(--ty-auto-complete-option-line-height);
   cursor: pointer;
-  color: var(--ty-color-text);
+  color: var(--ty-auto-complete-option-color);
   transition: background-color 0.2s;
 
   &_active {
-    background-color: var(--ty-select-option-active-bg);
+    background-color: var(--ty-auto-complete-option-active-bg);
   }
 
   &_disabled {
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: var(--ty-auto-complete-option-disabled-opacity);
   }
 }
diff --git a/packages/react/src/cascader/__tests__/cascader.test.tsx b/packages/react/src/cascader/__tests__/cascader.test.tsx
index 38015891..bd20366e 100644
--- a/packages/react/src/cascader/__tests__/cascader.test.tsx
+++ b/packages/react/src/cascader/__tests__/cascader.test.tsx
@@ -76,6 +76,28 @@ describe('<Cascader />', () => {
     expect(container.firstChild).toHaveClass('ty-cascader_disabled');
   });
 
+  it('should clear the selected value when allowClear is clicked', () => {
+    const onChange = jest.fn();
+    const { container, queryByText } = render(
+      <Cascader
+        options={options}
+        defaultValue={['zhejiang', 'hangzhou', 'xihu']}
+        allowClear
+        onChange={onChange}
+      />
+    );
+
+    const clearButton = container.querySelector('.ty-cascader__clear') as HTMLButtonElement;
+
+    expect(clearButton).toHaveAttribute('aria-label', 'Clear selection');
+    expect(clearButton.querySelector('svg')).toBeTruthy();
+
+    fireEvent.click(clearButton);
+
+    expect(onChange).toHaveBeenCalledWith([], []);
+    expect(queryByText('Zhejiang / Hangzhou / West Lake')).not.toBeInTheDocument();
+  });
+
   it('should close on outside click', async () => {
     const { container } = render(
       <div>
@@ -102,6 +124,85 @@ describe('<Cascader />', () => {
     expect(getByText('Zhejiang / Hangzhou / West Lake')).toBeInTheDocument();
   });
 
+  it('should update value on parent selection when changeOnSelect is enabled', () => {
+    const onChange = jest.fn();
+    const { container, getByText } = render(
+      <Cascader options={options} changeOnSelect onChange={onChange} />
+    );
+
+    const selector = container.querySelector('.ty-cascader__selector');
+    fireEvent.click(selector!);
+    fireEvent.click(getByText('Zhejiang'));
+
+    expect(onChange).toHaveBeenCalledWith(
+      ['zhejiang'],
+      [expect.objectContaining({ value: 'zhejiang', label: 'Zhejiang' })]
+    );
+    expect(container.querySelector('.ty-cascader__display')).toHaveTextContent('Zhejiang');
+    expect(document.body.querySelector('.ty-cascader__dropdown')).toBeTruthy();
+    expect(getByText('Hangzhou')).toBeInTheDocument();
+  });
+
+  it('should keep the full path after selecting a child in controlled changeOnSelect mode', () => {
+    const ChangeOnSelectControlledDemo = () => {
+      const [value, setValue] = React.useState<(string | number)[]>([]);
+
+      return (
+        <Cascader
+          options={options}
+          value={value}
+          onChange={(nextValue) => setValue(nextValue)}
+          changeOnSelect
+          placeholder="Select any level"
+        />
+      );
+    };
+
+    const { container, getByText } = render(<ChangeOnSelectControlledDemo />);
+
+    const selector = container.querySelector('.ty-cascader__selector');
+    fireEvent.click(selector!);
+    fireEvent.click(getByText('Zhejiang'));
+    fireEvent.click(getByText('Hangzhou'));
+    fireEvent.click(getByText('West Lake'));
+
+    expect(container.querySelector('.ty-cascader__display')).toHaveTextContent(
+      'Zhejiang / Hangzhou / West Lake'
+    );
+  });
+
+  it('should preserve parent path when selecting a child after reopening in controlled changeOnSelect mode', () => {
+    const ChangeOnSelectControlledDemo = () => {
+      const [value, setValue] = React.useState<(string | number)[]>([]);
+
+      return (
+        <div>
+          <Cascader
+            options={options}
+            value={value}
+            onChange={(nextValue) => setValue(nextValue)}
+            changeOnSelect
+            placeholder="Select any level"
+          />
+          <button>Outside</button>
+        </div>
+      );
+    };
+
+    const { container, getByText } = render(<ChangeOnSelectControlledDemo />);
+
+    const selector = container.querySelector('.ty-cascader__selector');
+    fireEvent.click(selector!);
+    fireEvent.click(getByText('Jiangsu'));
+    fireEvent.click(getByText('Outside'));
+    fireEvent.click(selector!);
+    fireEvent.click(getByText('Nanjing'));
+
+    expect(container.querySelector('.ty-cascader__display')).toHaveTextContent(
+      'Jiangsu / Nanjing'
+    );
+  });
+
   it('should respect the configured popup container', () => {
     const popupContainer = document.createElement('div');
     document.body.appendChild(popupContainer);
diff --git a/packages/react/src/cascader/cascader.tsx b/packages/react/src/cascader/cascader.tsx
index 77cd17ce..8a939623 100644
--- a/packages/react/src/cascader/cascader.tsx
+++ b/packages/react/src/cascader/cascader.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useContext, useMemo, useCallback }
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
-import { ArrowDown } from '../_utils/components';
+import { ArrowDown, ClearIcon } from '../_utils/components';
 import Popup from '../popup';
 import { CascaderProps, CascaderOption, CascaderValue } from './types';
 
@@ -98,10 +98,21 @@ const Cascader = React.forwardRef<HTMLDivElement, CascaderProps>((props, ref) =>
     setDropdownOpen(next);
   };
 
+  const getPathAtLevel = useCallback((level: number): CascaderValue => {
+    if (hoveredPath.length > level) {
+      return hoveredPath;
+    }
+    if (selectedValue.length > level) {
+      return selectedValue;
+    }
+    return hoveredPath.length > 0 ? hoveredPath : selectedValue;
+  }, [hoveredPath, selectedValue]);
+
   const handleOptionSelect = (option: CascaderOption, level: number) => {
     if (option.disabled) return;
 
-    const newPath = [...hoveredPath.slice(0, level), option.value];
+    const basePath = getPathAtLevel(level);
+    const newPath = [...basePath.slice(0, level), option.value];
     setHoveredPath(newPath);
 
     // Update columns
@@ -127,7 +138,8 @@ const Cascader = React.forwardRef<HTMLDivElement, CascaderProps>((props, ref) =>
 
   const handleOptionHover = (option: CascaderOption, level: number) => {
     if (expandTrigger !== 'hover' || option.disabled) return;
-    const newPath = [...hoveredPath.slice(0, level), option.value];
+    const basePath = getPathAtLevel(level);
+    const newPath = [...basePath.slice(0, level), option.value];
     setHoveredPath(newPath);
 
     const cols = activeColumns.slice(0, level + 1);
@@ -164,6 +176,7 @@ const Cascader = React.forwardRef<HTMLDivElement, CascaderProps>((props, ref) =>
     [`${prefixCls}_${cascaderSize}`]: cascaderSize,
     [`${prefixCls}_disabled`]: disabled,
     [`${prefixCls}_open`]: open,
+    [`${prefixCls}_has-value`]: allowClear && selectedValue.length > 0 && !disabled,
   });
 
   const dropdown = open
@@ -225,9 +238,14 @@ const Cascader = React.forwardRef<HTMLDivElement, CascaderProps>((props, ref) =>
             <span className={`${prefixCls}__placeholder`}>{placeholder}</span>
           )}
           {allowClear && selectedValue.length > 0 && (
-            <span className={`${prefixCls}__clear`} onClick={handleClear}>
-              ✕
-            </span>
+            <button
+              type="button"
+              className={`${prefixCls}__clear`}
+              onClick={handleClear}
+              aria-label="Clear selection"
+            >
+              <ClearIcon size="1em" />
+            </button>
           )}
           <span className={`${prefixCls}__arrow`}><ArrowDown size={10} /></span>
         </div>
diff --git a/packages/react/src/cascader/demo/ChangeOnSelect.tsx b/packages/react/src/cascader/demo/ChangeOnSelect.tsx
index 66e2030c..24789543 100644
--- a/packages/react/src/cascader/demo/ChangeOnSelect.tsx
+++ b/packages/react/src/cascader/demo/ChangeOnSelect.tsx
@@ -31,7 +31,7 @@ export default function ChangeOnSelectDemo() {
     },
   ];
 
-  const [value, setValue] = React.useState([]);
+  const [value, setValue] = React.useState<(string | number)[]>([]);
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
@@ -42,13 +42,7 @@ export default function ChangeOnSelectDemo() {
         changeOnSelect
         placeholder="Select any level"
       />
-      <span>Selected: {value.length > 0 ? value.join(' / ') : 'none'}</span>
-      <Cascader
-        options={options}
-        defaultValue={['zhejiang', 'hangzhou', 'xihu']}
-        displayRender={(labels) => labels.join(' > ')}
-        placeholder="Custom separator"
-      />
+      <span>Selected value: {value.length > 0 ? value.join(' / ') : 'none'}</span>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/cascader/style/index.scss b/packages/react/src/cascader/style/index.scss
index 3118b0ae..c45a5aaf 100644
--- a/packages/react/src/cascader/style/index.scss
+++ b/packages/react/src/cascader/style/index.scss
@@ -3,10 +3,10 @@
 .#{$prefix}-cascader {
   position: relative;
   display: inline-block;
-  min-width: 200px;
+  min-width: var(--ty-cascader-min-width);
 
   &_disabled {
-    opacity: 0.5;
+    opacity: var(--ty-cascader-opacity-disabled);
     pointer-events: none;
   }
 
@@ -64,25 +64,36 @@
 
   &__clear {
     position: absolute;
-    right: 24px;
-    font-size: 12px;
+    right: var(--ty-cascader-arrow-offset-inline-end);
+    top: 50%;
+    transform: translateY(-50%);
+    width: var(--ty-cascader-clear-size, 14px);
+    height: var(--ty-cascader-clear-size, 14px);
+    font-size: var(--ty-cascader-clear-font-size);
     color: var(--ty-cascader-clear-color);
     cursor: pointer;
     display: none;
-
-    .#{$prefix}-cascader:hover & {
-      display: inline;
-    }
+    border: 0;
+    padding: 0;
+    background: transparent;
+    line-height: 1;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
 
     &:hover {
       color: var(--ty-cascader-clear-color-hover);
     }
   }
 
+  &_has-value:hover &__clear {
+    display: inline-flex;
+  }
+
   &__arrow {
     position: absolute;
-    right: 8px;
-    font-size: 12px;
+    right: var(--ty-cascader-arrow-offset-inline-end);
+    font-size: var(--ty-cascader-arrow-font-size);
     color: var(--ty-cascader-arrow-color);
     transition: transform 0.2s;
     display: inline-flex;
@@ -90,6 +101,10 @@
     justify-content: center;
   }
 
+  &_has-value:hover &__arrow {
+    opacity: 0;
+  }
+
   &_open &__arrow {
     transform: rotate(180deg);
   }
@@ -108,8 +123,8 @@
   &__menu {
     list-style: none;
     margin: 0;
-    padding: 4px 0;
-    min-width: 120px;
+    padding: var(--ty-cascader-menu-padding);
+    min-width: var(--ty-cascader-menu-min-width);
     max-height: var(--ty-cascader-dropdown-max-height);
     overflow-y: auto;
 
@@ -119,7 +134,7 @@
   }
 
   &__menu-empty {
-    padding: 8px 12px;
+    padding: var(--ty-cascader-menu-empty-padding);
     color: var(--ty-cascader-menu-empty-color);
     text-align: center;
   }
@@ -128,7 +143,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 5px 12px;
+    padding: var(--ty-cascader-menu-item-padding);
     cursor: pointer;
     transition: background 0.15s;
 
@@ -144,7 +159,7 @@
 
     &_disabled {
       cursor: not-allowed;
-      opacity: 0.5;
+      opacity: var(--ty-cascader-menu-item-disabled-opacity);
     }
   }
 
@@ -156,8 +171,8 @@
   }
 
   &__menu-item-arrow {
-    margin-left: 8px;
-    font-size: 12px;
+    margin-left: var(--ty-cascader-menu-item-arrow-gap);
+    font-size: var(--ty-cascader-menu-item-arrow-font-size);
     color: var(--ty-cascader-menu-item-arrow-color);
   }
 }
diff --git a/packages/react/src/color-picker/style/index.scss b/packages/react/src/color-picker/style/index.scss
index 3f765cd7..dc6e202a 100644
--- a/packages/react/src/color-picker/style/index.scss
+++ b/packages/react/src/color-picker/style/index.scss
@@ -5,7 +5,7 @@
   position: relative;
 
   &_disabled {
-    opacity: 0.5;
+    opacity: var(--ty-color-picker-opacity-disabled);
     cursor: not-allowed;
 
     .#{$prefix}-color-picker__trigger,
@@ -21,11 +21,11 @@
   }
 
   &__swatch {
-    width: 32px;
-    height: 32px;
-    border-radius: var(--ty-border-radius);
+    width: var(--ty-color-picker-swatch-size);
+    height: var(--ty-color-picker-swatch-size);
+    border-radius: var(--ty-color-picker-swatch-radius);
     border: 1px solid var(--ty-color-picker-border);
-    padding: 3px;
+    padding: var(--ty-color-picker-swatch-padding);
     cursor: pointer;
   }
 
@@ -36,18 +36,18 @@
   }
 
   &__panel {
-    padding: 12px;
+    padding: var(--ty-color-picker-panel-padding);
     background: var(--ty-color-picker-bg);
-    border-radius: 8px;
-    box-shadow: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%);
-    width: 240px;
+    border-radius: var(--ty-color-picker-panel-radius);
+    box-shadow: var(--ty-color-picker-panel-shadow);
+    width: var(--ty-color-picker-panel-width);
   }
 
   &__spectrum {
     position: relative;
     width: 100%;
-    height: 150px;
-    border-radius: 4px;
+    height: var(--ty-color-picker-spectrum-height);
+    border-radius: var(--ty-color-picker-spectrum-radius);
     cursor: crosshair;
     overflow: hidden;
   }
@@ -55,22 +55,22 @@
   &__spectrum-white {
     position: absolute;
     inset: 0;
-    background: linear-gradient(to right, #fff, transparent);
+    background: var(--ty-color-picker-spectrum-white);
   }
 
   &__spectrum-black {
     position: absolute;
     inset: 0;
-    background: linear-gradient(to bottom, transparent, #000);
+    background: var(--ty-color-picker-spectrum-black);
   }
 
   &__spectrum-handle {
     position: absolute;
-    width: 12px;
-    height: 12px;
+    width: var(--ty-color-picker-spectrum-handle-size);
+    height: var(--ty-color-picker-spectrum-handle-size);
     border-radius: 50%;
-    border: 2px solid #fff;
-    box-shadow: 0 0 2px rgb(0 0 0 / 30%);
+    border: var(--ty-color-picker-handle-border-width) solid var(--ty-color-picker-handle-border-color);
+    box-shadow: var(--ty-color-picker-handle-shadow);
     transform: translate(-50%, -50%);
     pointer-events: none;
   }
@@ -78,14 +78,14 @@
   &__controls {
     display: flex;
     align-items: center;
-    gap: 8px;
-    margin-top: 12px;
+    gap: var(--ty-color-picker-controls-gap);
+    margin-top: var(--ty-color-picker-controls-margin-top);
   }
 
   &__preview {
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
+    width: var(--ty-color-picker-preview-size);
+    height: var(--ty-color-picker-preview-size);
+    border-radius: var(--ty-color-picker-preview-radius);
     border: 1px solid var(--ty-color-picker-border);
     flex-shrink: 0;
   }
@@ -94,29 +94,29 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: var(--ty-color-picker-controls-gap);
   }
 
   &__hue {
     position: relative;
-    height: 12px;
-    border-radius: 6px;
+    height: var(--ty-color-picker-slider-height);
+    border-radius: var(--ty-color-picker-slider-radius);
     background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
     cursor: pointer;
   }
 
   &__alpha {
     position: relative;
-    height: 12px;
-    border-radius: 6px;
+    height: var(--ty-color-picker-slider-height);
+    border-radius: var(--ty-color-picker-slider-radius);
     cursor: pointer;
 
     &::before {
       content: '';
       position: absolute;
       inset: 0;
-      border-radius: 6px;
-      background: repeating-conic-gradient(var(--ty-color-border) 0% 25%, transparent 0% 50%) 0 0 / 8px 8px;
+      border-radius: var(--ty-color-picker-slider-radius);
+      background: repeating-conic-gradient(var(--ty-color-border) 0% 25%, transparent 0% 50%) 0 0 / var(--ty-color-picker-alpha-grid-size) var(--ty-color-picker-alpha-grid-size);
       z-index: -1;
     }
   }
@@ -124,11 +124,11 @@
   &__slider-handle {
     position: absolute;
     top: 50%;
-    width: 14px;
-    height: 14px;
+    width: var(--ty-color-picker-slider-handle-size);
+    height: var(--ty-color-picker-slider-handle-size);
     border-radius: 50%;
-    border: 2px solid #fff;
-    box-shadow: 0 0 2px rgb(0 0 0 / 30%);
+    border: var(--ty-color-picker-handle-border-width) solid var(--ty-color-picker-handle-border-color);
+    box-shadow: var(--ty-color-picker-handle-shadow);
     transform: translate(-50%, -50%);
     pointer-events: none;
     background: transparent;
@@ -136,61 +136,61 @@
 
   &__input-row {
     display: flex;
-    gap: 6px;
-    margin-top: 12px;
+    gap: var(--ty-color-picker-input-row-gap);
+    margin-top: var(--ty-color-picker-input-row-margin-top);
     align-items: center;
   }
 
   &__format-btn {
     border: 1px solid var(--ty-color-picker-border);
     background: transparent;
-    border-radius: var(--ty-border-radius);
-    padding: 2px 6px;
+    border-radius: var(--ty-color-picker-swatch-radius);
+    padding: var(--ty-color-picker-button-padding);
     cursor: pointer;
-    font-size: 12px;
-    color: var(--ty-color-text);
+    font-size: var(--ty-color-picker-button-font-size);
+    color: var(--ty-color-picker-button-color);
     white-space: nowrap;
 
     &:hover {
-      border-color: var(--ty-color-primary);
+      border-color: var(--ty-color-picker-button-border-hover);
     }
   }
 
   &__hex-input {
     flex: 1;
     border: 1px solid var(--ty-color-picker-border);
-    border-radius: var(--ty-border-radius);
-    padding: 2px 6px;
-    font-size: 12px;
-    font-family: var(--ty-font-family-monospace);
-    color: var(--ty-color-text);
+    border-radius: var(--ty-color-picker-swatch-radius);
+    padding: var(--ty-color-picker-input-padding);
+    font-size: var(--ty-color-picker-input-font-size);
+    font-family: var(--ty-color-picker-input-font-family);
+    color: var(--ty-color-picker-input-color);
     outline: none;
     min-width: 0;
 
     &:focus {
-      border-color: var(--ty-color-primary);
+      border-color: var(--ty-color-picker-input-border-focus);
     }
   }
 
   &__presets {
     display: flex;
     flex-wrap: wrap;
-    gap: 6px;
-    margin-top: 12px;
-    padding-top: 12px;
+    gap: var(--ty-color-picker-presets-gap);
+    margin-top: var(--ty-color-picker-presets-margin-top);
+    padding-top: var(--ty-color-picker-presets-padding-top);
     border-top: 1px solid var(--ty-color-picker-border);
   }
 
   &__preset {
-    width: 20px;
-    height: 20px;
-    border-radius: var(--ty-border-radius);
+    width: var(--ty-color-picker-preset-size);
+    height: var(--ty-color-picker-preset-size);
+    border-radius: var(--ty-color-picker-swatch-radius);
     cursor: pointer;
     border: 1px solid var(--ty-color-picker-border);
-    transition: transform 0.15s;
+    transition: transform var(--ty-color-picker-preset-transition-duration);
 
     &:hover {
-      transform: scale(1.2);
+      transform: scale(var(--ty-color-picker-preset-hover-scale));
     }
   }
 }
diff --git a/packages/react/src/dropdown/__tests__/dropdown.test.tsx b/packages/react/src/dropdown/__tests__/dropdown.test.tsx
index 43de3357..93afb85e 100644
--- a/packages/react/src/dropdown/__tests__/dropdown.test.tsx
+++ b/packages/react/src/dropdown/__tests__/dropdown.test.tsx
@@ -58,6 +58,39 @@ describe('<Dropdown />', () => {
     });
   });
 
+  it('should keep the menu open when overlay onSelect handles visibility itself', async () => {
+    const ControlledDemo = () => {
+      const [visible, setVisible] = React.useState(false);
+
+      return (
+        <Dropdown
+          trigger="click"
+          visible={visible}
+          onVisibleChange={(nextVisible) => {
+            if (nextVisible) {
+              setVisible(true);
+            }
+          }}
+          overlay={
+            <Menu onSelect={() => {}}>
+              <Menu.Item>Menu Item</Menu.Item>
+            </Menu>
+          }>
+          <button>Trigger</button>
+        </Dropdown>
+      );
+    };
+
+    render(<ControlledDemo />);
+
+    fireEvent.click(screen.getByText('Trigger'));
+    fireEvent.click(screen.getByText('Menu Item'));
+
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+  });
+
   it('should respect controlled visible prop', () => {
     const { rerender } = render(
       <Dropdown visible={false} trigger="click" overlay={<div>Menu</div>}>
diff --git a/packages/react/src/dropdown/dropdown.tsx b/packages/react/src/dropdown/dropdown.tsx
index dbda12d6..1f45887e 100755
--- a/packages/react/src/dropdown/dropdown.tsx
+++ b/packages/react/src/dropdown/dropdown.tsx
@@ -51,7 +51,9 @@ const Dropdown = (props: DropdownProps): JSX.Element => {
       theme: 'light',
       onSelect: (selectedIndex) => {
         originalOnSelect?.(selectedIndex);
-        setPopupVisibleState(false);
+        if (!originalOnSelect) {
+          setPopupVisibleState(false);
+        }
       },
     };
     return React.cloneElement(overlay, overlayProps);
diff --git a/packages/react/src/speed-dial/style/index.scss b/packages/react/src/speed-dial/style/index.scss
index fdde6221..90476728 100644
--- a/packages/react/src/speed-dial/style/index.scss
+++ b/packages/react/src/speed-dial/style/index.scss
@@ -1,9 +1,5 @@
 @use "@tiny-design/tokens/scss/variables" as *;
 
-$speed-dial-fab-size: 56px;
-$speed-dial-action-size: 40px;
-$speed-dial-actions-gap: 16px;
-
 .#{$prefix}-speed-dial {
   position: relative;
   display: inline-flex;
@@ -13,16 +9,16 @@ $speed-dial-actions-gap: 16px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: $speed-dial-fab-size;
-    height: $speed-dial-fab-size;
+    width: var(--ty-speed-dial-fab-size);
+    height: var(--ty-speed-dial-fab-size);
     border-radius: 50%;
     border: none;
     background-color: var(--ty-speed-dial-bg);
     color: var(--ty-speed-dial-color);
-    font-size: 24px;
+    font-size: var(--ty-speed-dial-fab-font-size);
     cursor: pointer;
     box-shadow: var(--ty-shadow);
-    transition: background-color 0.2s ease;
+    transition: background-color var(--ty-speed-dial-button-transition-duration) ease;
     outline: none;
 
     &:hover:not(.#{$prefix}-speed-dial__button_disabled) {
@@ -30,7 +26,7 @@ $speed-dial-actions-gap: 16px;
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 3px var(--ty-input-shadow-focus, var(--ty-shadow-focus)), var(--ty-shadow);
+      box-shadow: var(--ty-speed-dial-focus-ring), var(--ty-shadow);
     }
 
     &_open {
@@ -40,7 +36,7 @@ $speed-dial-actions-gap: 16px;
     }
 
     &_disabled {
-      opacity: 0.5;
+      opacity: var(--ty-speed-dial-disabled-opacity);
       cursor: not-allowed;
     }
   }
@@ -50,7 +46,7 @@ $speed-dial-actions-gap: 16px;
     display: inline-block;
     width: 1em;
     height: 1em;
-    transition: transform 0.3s ease;
+    transition: transform var(--ty-speed-dial-icon-transition-duration) ease;
 
     &::before,
     &::after {
@@ -82,13 +78,13 @@ $speed-dial-actions-gap: 16px;
     z-index: 1;
     opacity: 0;
     visibility: hidden;
-    transform: scale(0.5);
-    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
+    transform: scale(var(--ty-speed-dial-actions-scale-closed));
+    transition: opacity var(--ty-speed-dial-actions-transition-duration) ease, visibility var(--ty-speed-dial-actions-transition-duration) ease, transform var(--ty-speed-dial-actions-transition-duration) ease;
 
     &_open {
       opacity: 1;
       visibility: visible;
-      transform: scale(1);
+      transform: scale(var(--ty-speed-dial-actions-scale-open));
     }
   }
 
@@ -99,7 +95,7 @@ $speed-dial-actions-gap: 16px;
     left: 50%;
     transform-origin: bottom center;
     translate: -50% 0;
-    padding-bottom: $speed-dial-actions-gap;
+    padding-bottom: var(--ty-speed-dial-actions-gap);
   }
 
   &_up &__actions_open {
@@ -112,7 +108,7 @@ $speed-dial-actions-gap: 16px;
     left: 50%;
     transform-origin: top center;
     translate: -50% 0;
-    padding-top: $speed-dial-actions-gap;
+    padding-top: var(--ty-speed-dial-actions-gap);
   }
 
   &_down &__actions_open {
@@ -125,7 +121,7 @@ $speed-dial-actions-gap: 16px;
     top: 50%;
     transform-origin: center right;
     translate: 0 -50%;
-    padding-right: $speed-dial-actions-gap;
+    padding-right: var(--ty-speed-dial-actions-gap);
   }
 
   &_left &__actions_open {
@@ -138,7 +134,7 @@ $speed-dial-actions-gap: 16px;
     top: 50%;
     transform-origin: center left;
     translate: 0 -50%;
-    padding-left: $speed-dial-actions-gap;
+    padding-left: var(--ty-speed-dial-actions-gap);
   }
 
   &_right &__actions_open {
@@ -151,12 +147,12 @@ $speed-dial-actions-gap: 16px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin: 4px 0;
+    margin: var(--ty-speed-dial-action-wrapper-gap) 0;
   }
 
   &_left &__action-wrapper,
   &_right &__action-wrapper {
-    margin: 0 4px;
+    margin: 0 var(--ty-speed-dial-action-wrapper-gap);
   }
 
   // Action button
@@ -164,16 +160,16 @@ $speed-dial-actions-gap: 16px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: $speed-dial-action-size;
-    height: $speed-dial-action-size;
+    width: var(--ty-speed-dial-action-size);
+    height: var(--ty-speed-dial-action-size);
     border-radius: 50%;
     border: none;
     background-color: var(--ty-speed-dial-action-bg);
     color: var(--ty-speed-dial-action-color);
-    font-size: 16px;
+    font-size: var(--ty-speed-dial-action-font-size);
     cursor: pointer;
     box-shadow: var(--ty-shadow-sm);
-    transition: background-color 0.2s ease, box-shadow 0.2s ease;
+    transition: background-color var(--ty-speed-dial-button-transition-duration) ease, box-shadow var(--ty-speed-dial-button-transition-duration) ease;
     outline: none;
 
     &:hover:not(.#{$prefix}-speed-dial__action_disabled) {
@@ -182,11 +178,11 @@ $speed-dial-actions-gap: 16px;
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 3px var(--ty-input-shadow-focus, var(--ty-shadow-focus)), var(--ty-shadow-sm);
+      box-shadow: var(--ty-speed-dial-focus-ring), var(--ty-shadow-sm);
     }
 
     &_disabled {
-      opacity: 0.5;
+      opacity: var(--ty-speed-dial-disabled-opacity);
       cursor: not-allowed;
     }
   }
@@ -197,31 +193,31 @@ $speed-dial-actions-gap: 16px;
     white-space: nowrap;
     background-color: var(--ty-speed-dial-tooltip-bg);
     color: var(--ty-speed-dial-tooltip-color);
-    font-size: var(--ty-font-size-sm);
-    padding: 4px 8px;
-    border-radius: var(--ty-border-radius);
+    font-size: var(--ty-speed-dial-tooltip-font-size);
+    padding: var(--ty-speed-dial-tooltip-padding);
+    border-radius: var(--ty-speed-dial-tooltip-radius);
     pointer-events: none;
 
     &_left {
-      right: calc(100% + 8px);
+      right: calc(100% + var(--ty-speed-dial-tooltip-offset));
       top: 50%;
       translate: 0 -50%;
     }
 
     &_right {
-      left: calc(100% + 8px);
+      left: calc(100% + var(--ty-speed-dial-tooltip-offset));
       top: 50%;
       translate: 0 -50%;
     }
 
     &_top {
-      bottom: calc(100% + 8px);
+      bottom: calc(100% + var(--ty-speed-dial-tooltip-offset));
       left: 50%;
       translate: -50% 0;
     }
 
     &_bottom {
-      top: calc(100% + 8px);
+      top: calc(100% + var(--ty-speed-dial-tooltip-offset));
       left: 50%;
       translate: -50% 0;
     }
diff --git a/packages/tokens/source/components/auto-complete.json b/packages/tokens/source/components/auto-complete.json
new file mode 100644
index 00000000..394a1867
--- /dev/null
+++ b/packages/tokens/source/components/auto-complete.json
@@ -0,0 +1,90 @@
+{
+  "auto-complete.opacity.disabled": {
+    "$value": "0.6",
+    "$type": "number",
+    "description": "Disabled auto-complete root opacity."
+  },
+  "auto-complete.dropdown-padding": {
+    "$value": "4px 0",
+    "$type": "string",
+    "description": "AutoComplete dropdown padding."
+  },
+  "auto-complete.dropdown-bg": {
+    "$value": "{color-bg-container}",
+    "$type": "color",
+    "description": "AutoComplete dropdown background color.",
+    "fallback": "--ty-color-bg-container"
+  },
+  "auto-complete.dropdown-shadow": {
+    "$value": "{shadow-popup}",
+    "$type": "shadow",
+    "description": "AutoComplete dropdown shadow.",
+    "fallback": "--ty-shadow-popup"
+  },
+  "auto-complete.dropdown-radius": {
+    "$value": "{border-radius}",
+    "$type": "dimension",
+    "description": "AutoComplete dropdown border radius.",
+    "fallback": "--ty-border-radius"
+  },
+  "auto-complete.dropdown-font-size": {
+    "$value": "{font-size-base}",
+    "$type": "dimension",
+    "description": "AutoComplete dropdown font size.",
+    "fallback": "--ty-font-size-base"
+  },
+  "auto-complete.dropdown-max-height": {
+    "$value": "300px",
+    "$type": "dimension",
+    "description": "AutoComplete dropdown max height."
+  },
+  "auto-complete.empty-padding": {
+    "$value": "16px",
+    "$type": "dimension",
+    "description": "AutoComplete empty state padding."
+  },
+  "auto-complete.empty-color": {
+    "$value": "{color-text-quaternary}",
+    "$type": "color",
+    "description": "AutoComplete empty state text color.",
+    "fallback": "--ty-color-text-quaternary"
+  },
+  "auto-complete.empty-font-size": {
+    "$value": "{font-size-sm}",
+    "$type": "dimension",
+    "description": "AutoComplete empty state font size.",
+    "fallback": "--ty-font-size-sm"
+  },
+  "auto-complete.option-padding": {
+    "$value": "7px 12px",
+    "$type": "string",
+    "description": "AutoComplete option padding."
+  },
+  "auto-complete.option-font-size": {
+    "$value": "14px",
+    "$type": "dimension",
+    "description": "AutoComplete option font size."
+  },
+  "auto-complete.option-line-height": {
+    "$value": "22px",
+    "$type": "dimension",
+    "description": "AutoComplete option line height."
+  },
+  "auto-complete.option-color": {
+    "$value": "{color-text}",
+    "$type": "color",
+    "description": "AutoComplete option text color.",
+    "fallback": "--ty-color-text"
+  },
+  "auto-complete.option-active-bg": {
+    "$value": "{color-fill-secondary}",
+    "$type": "color",
+    "description": "AutoComplete active option background color.",
+    "fallback": "--ty-color-fill-secondary"
+  },
+  "auto-complete.option-disabled-opacity": {
+    "$value": "0.5",
+    "$type": "number",
+    "description": "AutoComplete disabled option opacity."
+  }
+}
diff --git a/packages/tokens/source/components/cascader.json b/packages/tokens/source/components/cascader.json
index c251b29a..f76b6956 100644
--- a/packages/tokens/source/components/cascader.json
+++ b/packages/tokens/source/components/cascader.json
@@ -5,6 +5,11 @@
     "description": "Cascader selector background color.",
     "fallback": "--ty-color-bg-container"
   },
+  "cascader.min-width": {
+    "$value": "200px",
+    "$type": "dimension",
+    "description": "Cascader root min width."
+  },
   "cascader.border": {
     "$value": "{color-border}",
     "$type": "color",
@@ -35,6 +40,11 @@
     "description": "Cascader selector focus shadow.",
     "fallback": "--ty-shadow-focus"
   },
+  "cascader.opacity.disabled": {
+    "$value": "0.5",
+    "$type": "number",
+    "description": "Disabled cascader root opacity."
+  },
   "cascader.font-size.sm": {
     "$value": "{font-size-sm}",
     "$type": "dimension",
@@ -110,12 +120,32 @@
     "description": "Cascader clear icon hover color.",
     "fallback": "--ty-color-text-secondary"
   },
+  "cascader.clear-offset-inline-end": {
+    "$value": "24px",
+    "$type": "dimension",
+    "description": "Cascader clear icon inline end offset."
+  },
+  "cascader.clear-font-size": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Cascader clear icon font size."
+  },
   "cascader.arrow-color": {
     "$value": "{color-text-tertiary}",
     "$type": "color",
     "description": "Cascader arrow color.",
     "fallback": "--ty-color-text-tertiary"
   },
+  "cascader.arrow-offset-inline-end": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Cascader arrow inline end offset."
+  },
+  "cascader.arrow-font-size": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Cascader arrow font size."
+  },
   "cascader.dropdown-bg": {
     "$value": "{color-bg-container}",
     "$type": "color",
@@ -133,18 +163,43 @@
     "$type": "dimension",
     "description": "Cascader dropdown max height."
   },
+  "cascader.menu-padding": {
+    "$value": "4px 0",
+    "$type": "string",
+    "description": "Cascader menu list padding."
+  },
+  "cascader.menu-min-width": {
+    "$value": "120px",
+    "$type": "dimension",
+    "description": "Cascader menu min width."
+  },
   "cascader.hover": {
     "$value": "{color-fill-secondary}",
     "$type": "color",
     "description": "Cascader option hover background color.",
     "fallback": "--ty-color-fill-secondary"
   },
+  "cascader.menu-empty-padding": {
+    "$value": "8px 12px",
+    "$type": "string",
+    "description": "Cascader empty menu item padding."
+  },
   "cascader.menu-empty-color": {
     "$value": "{color-text-secondary}",
     "$type": "color",
     "description": "Cascader empty menu text color.",
     "fallback": "--ty-color-text-secondary"
   },
+  "cascader.menu-item-padding": {
+    "$value": "5px 12px",
+    "$type": "string",
+    "description": "Cascader menu item padding."
+  },
+  "cascader.menu-item-disabled-opacity": {
+    "$value": "0.5",
+    "$type": "number",
+    "description": "Cascader disabled menu item opacity."
+  },
   "cascader.option-color-active": {
     "$value": "{color-primary}",
     "$type": "color",
@@ -162,6 +217,16 @@
     "description": "Cascader submenu arrow color.",
     "fallback": "--ty-color-text-tertiary"
   },
+  "cascader.menu-item-arrow-gap": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Cascader submenu arrow gap."
+  },
+  "cascader.menu-item-arrow-font-size": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Cascader submenu arrow font size."
+  },
   "cascader.selected-bg": {
     "$value": "rgba(110, 65, 191, 0.06)",
     "$type": "color",
diff --git a/packages/tokens/source/components/color-picker.json b/packages/tokens/source/components/color-picker.json
new file mode 100644
index 00000000..66df3d24
--- /dev/null
+++ b/packages/tokens/source/components/color-picker.json
@@ -0,0 +1,226 @@
+{
+  "color-picker.opacity.disabled": {
+    "$value": "0.5",
+    "$type": "number",
+    "description": "Disabled color picker root opacity."
+  },
+  "color-picker.swatch-size": {
+    "$value": "32px",
+    "$type": "dimension",
+    "description": "Color picker swatch size."
+  },
+  "color-picker.swatch-padding": {
+    "$value": "3px",
+    "$type": "dimension",
+    "description": "Color picker swatch padding."
+  },
+  "color-picker.swatch-radius": {
+    "$value": "{border-radius}",
+    "$type": "dimension",
+    "description": "Color picker swatch radius.",
+    "fallback": "--ty-border-radius"
+  },
+  "color-picker.border": {
+    "$value": "{color-border}",
+    "$type": "color",
+    "description": "Color picker border color.",
+    "fallback": "--ty-color-border"
+  },
+  "color-picker.bg": {
+    "$value": "{color-bg-container}",
+    "$type": "color",
+    "description": "Color picker panel background color.",
+    "fallback": "--ty-color-bg-container"
+  },
+  "color-picker.panel-padding": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Color picker panel padding."
+  },
+  "color-picker.panel-radius": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Color picker panel radius."
+  },
+  "color-picker.panel-shadow": {
+    "$value": "{shadow-popup}",
+    "$type": "shadow",
+    "description": "Color picker panel shadow.",
+    "fallback": "--ty-shadow-popup"
+  },
+  "color-picker.panel-width": {
+    "$value": "240px",
+    "$type": "dimension",
+    "description": "Color picker panel width."
+  },
+  "color-picker.spectrum-height": {
+    "$value": "150px",
+    "$type": "dimension",
+    "description": "Color picker spectrum height."
+  },
+  "color-picker.spectrum-radius": {
+    "$value": "4px",
+    "$type": "dimension",
+    "description": "Color picker spectrum radius."
+  },
+  "color-picker.spectrum-white": {
+    "$value": "linear-gradient(to right, #fff, transparent)",
+    "$type": "string",
+    "description": "Color picker white overlay gradient."
+  },
+  "color-picker.spectrum-black": {
+    "$value": "linear-gradient(to bottom, transparent, #000)",
+    "$type": "string",
+    "description": "Color picker black overlay gradient."
+  },
+  "color-picker.spectrum-handle-size": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Color picker spectrum handle size."
+  },
+  "color-picker.handle-border-width": {
+    "$value": "2px",
+    "$type": "dimension",
+    "description": "Color picker handle border width."
+  },
+  "color-picker.handle-border-color": {
+    "$value": "#fff",
+    "$type": "color",
+    "description": "Color picker handle border color."
+  },
+  "color-picker.handle-shadow": {
+    "$value": "0 0 2px rgb(0 0 0 / 30%)",
+    "$type": "shadow",
+    "description": "Color picker handle shadow."
+  },
+  "color-picker.controls-gap": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Color picker controls gap."
+  },
+  "color-picker.controls-margin-top": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Color picker controls margin top."
+  },
+  "color-picker.preview-size": {
+    "$value": "28px",
+    "$type": "dimension",
+    "description": "Color picker preview size."
+  },
+  "color-picker.preview-radius": {
+    "$value": "50%",
+    "$type": "string",
+    "description": "Color picker preview radius."
+  },
+  "color-picker.slider-height": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Color picker slider height."
+  },
+  "color-picker.slider-radius": {
+    "$value": "6px",
+    "$type": "dimension",
+    "description": "Color picker slider radius."
+  },
+  "color-picker.alpha-grid-size": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Color picker alpha grid size."
+  },
+  "color-picker.slider-handle-size": {
+    "$value": "14px",
+    "$type": "dimension",
+    "description": "Color picker slider handle size."
+  },
+  "color-picker.input-row-gap": {
+    "$value": "6px",
+    "$type": "dimension",
+    "description": "Color picker input row gap."
+  },
+  "color-picker.input-row-margin-top": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Color picker input row margin top."
+  },
+  "color-picker.button-padding": {
+    "$value": "2px 6px",
+    "$type": "string",
+    "description": "Color picker format button padding."
+  },
+  "color-picker.button-font-size": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Color picker format button font size."
+  },
+  "color-picker.button-color": {
+    "$value": "{color-text}",
+    "$type": "color",
+    "description": "Color picker format button text color.",
+    "fallback": "--ty-color-text"
+  },
+  "color-picker.button-border-hover": {
+    "$value": "{color-primary}",
+    "$type": "color",
+    "description": "Color picker format button hover border color.",
+    "fallback": "--ty-color-primary"
+  },
+  "color-picker.input-padding": {
+    "$value": "2px 6px",
+    "$type": "string",
+    "description": "Color picker hex input padding."
+  },
+  "color-picker.input-font-size": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Color picker hex input font size."
+  },
+  "color-picker.input-color": {
+    "$value": "{color-text}",
+    "$type": "color",
+    "description": "Color picker hex input text color.",
+    "fallback": "--ty-color-text"
+  },
+  "color-picker.input-font-family": {
+    "$value": "{font-family-monospace}",
+    "$type": "font-family",
+    "description": "Color picker hex input font family.",
+    "fallback": "--ty-font-family-monospace"
+  },
+  "color-picker.input-border-focus": {
+    "$value": "{color-primary}",
+    "$type": "color",
+    "description": "Color picker hex input focus border color.",
+    "fallback": "--ty-color-primary"
+  },
+  "color-picker.presets-gap": {
+    "$value": "6px",
+    "$type": "dimension",
+    "description": "Color picker presets gap."
+  },
+  "color-picker.presets-margin-top": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Color picker presets margin top."
+  },
+  "color-picker.presets-padding-top": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Color picker presets padding top."
+  },
+  "color-picker.preset-size": {
+    "$value": "20px",
+    "$type": "dimension",
+    "description": "Color picker preset size."
+  },
+  "color-picker.preset-hover-scale": {
+    "$value": "1.2",
+    "$type": "number",
+    "description": "Color picker preset hover scale."
+  },
+  "color-picker.preset-transition-duration": {
+    "$value": "150ms",
+    "$type": "duration",
+    "description": "Color picker preset transform transition duration."
+  }
+}
diff --git a/packages/tokens/source/components/speed-dial.json b/packages/tokens/source/components/speed-dial.json
index aa8506e8..f4317772 100644
--- a/packages/tokens/source/components/speed-dial.json
+++ b/packages/tokens/source/components/speed-dial.json
@@ -5,6 +5,26 @@
     "description": "Speed Dial action bg.",
     "fallback": "--ty-color-bg-container"
   },
+  "speed-dial.fab-size": {
+    "$value": "56px",
+    "$type": "dimension",
+    "description": "Speed Dial floating action button size."
+  },
+  "speed-dial.action-size": {
+    "$value": "40px",
+    "$type": "dimension",
+    "description": "Speed Dial action button size."
+  },
+  "speed-dial.actions-gap": {
+    "$value": "16px",
+    "$type": "dimension",
+    "description": "Speed Dial actions offset gap."
+  },
+  "speed-dial.action-wrapper-gap": {
+    "$value": "4px",
+    "$type": "dimension",
+    "description": "Speed Dial action wrapper gap."
+  },
   "speed-dial.action-bg-hover": {
     "$value": "#f6f9fc",
     "$type": "color",
@@ -32,6 +52,73 @@
     "$type": "color",
     "description": "Speed Dial color."
   },
+  "speed-dial.fab-font-size": {
+    "$value": "24px",
+    "$type": "dimension",
+    "description": "Speed Dial floating action button icon font size."
+  },
+  "speed-dial.action-font-size": {
+    "$value": "16px",
+    "$type": "dimension",
+    "description": "Speed Dial action button icon font size."
+  },
+  "speed-dial.disabled-opacity": {
+    "$value": "0.5",
+    "$type": "number",
+    "description": "Speed Dial disabled opacity."
+  },
+  "speed-dial.focus-ring": {
+    "$value": "0 0 0 3px var(--ty-shadow-focus)",
+    "$type": "shadow",
+    "description": "Speed Dial focus ring shadow."
+  },
+  "speed-dial.icon-transition-duration": {
+    "$value": "300ms",
+    "$type": "duration",
+    "description": "Speed Dial icon transition duration."
+  },
+  "speed-dial.button-transition-duration": {
+    "$value": "200ms",
+    "$type": "duration",
+    "description": "Speed Dial button transition duration."
+  },
+  "speed-dial.actions-transition-duration": {
+    "$value": "200ms",
+    "$type": "duration",
+    "description": "Speed Dial actions visibility transition duration."
+  },
+  "speed-dial.actions-scale-closed": {
+    "$value": "0.5",
+    "$type": "number",
+    "description": "Speed Dial actions closed scale."
+  },
+  "speed-dial.actions-scale-open": {
+    "$value": "1",
+    "$type": "number",
+    "description": "Speed Dial actions open scale."
+  },
+  "speed-dial.tooltip-font-size": {
+    "$value": "{font-size-sm}",
+    "$type": "dimension",
+    "description": "Speed Dial tooltip font size.",
+    "fallback": "--ty-font-size-sm"
+  },
+  "speed-dial.tooltip-padding": {
+    "$value": "4px 8px",
+    "$type": "string",
+    "description": "Speed Dial tooltip padding."
+  },
+  "speed-dial.tooltip-radius": {
+    "$value": "{border-radius}",
+    "$type": "dimension",
+    "description": "Speed Dial tooltip radius.",
+    "fallback": "--ty-border-radius"
+  },
+  "speed-dial.tooltip-offset": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Speed Dial tooltip offset."
+  },
   "speed-dial.tooltip-bg": {
     "$value": "#32325d",
     "$type": "color",

From 65895e270d8b3de49ab544c71a87c2c378c1ce12 Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Fri, 10 Apr 2026 09:35:06 +1000
Subject: [PATCH 07/12] fix: popup issues

---
 REFACTOR_CHECKLIST.md                         |  83 ++++++++++
 THEME_TOKEN_REFACTOR_ROADMAP.md               |  93 ++++++++++-
 packages/react/jest.config.js                 |   1 -
 .../__snapshots__/autocomplete.test.tsx.snap  |   3 +
 .../__tests__/autocomplete.test.tsx           |  48 ++++++
 .../react/src/auto-complete/auto-complete.tsx |  16 +-
 .../react/src/auto-complete/demo/Basic.tsx    |   7 +-
 .../src/auto-complete/demo/CustomFilter.tsx   |   6 +-
 packages/react/src/auto-complete/index.md     |   3 +-
 .../react/src/auto-complete/index.zh_CN.md    |   3 +-
 packages/react/src/auto-complete/types.ts     |   1 +
 .../__snapshots__/cascader.test.tsx.snap      |   4 +
 .../src/cascader/__tests__/cascader.test.tsx  |  13 ++
 packages/react/src/cascader/cascader.tsx      |  28 +++-
 .../__snapshots__/color-picker.test.tsx.snap  |   4 +
 .../__tests__/color-picker.test.tsx           |  12 ++
 .../react/src/color-picker/color-picker.tsx   |  32 +++-
 .../react/src/color-picker/demo/Format.tsx    |   4 +-
 .../react/src/color-picker/demo/Oklch.tsx     |   9 +-
 .../__snapshots__/date-picker.test.tsx.snap   |   1 +
 .../__tests__/date-picker.test.tsx            |  12 ++
 .../react/src/date-picker/date-picker.tsx     |  21 ++-
 packages/react/src/date-picker/demo/Basic.tsx |   6 +-
 .../src/date-picker/demo/DisabledDate.tsx     |   5 +-
 .../src/drawer/__tests__/drawer.test.tsx      |  46 +++++-
 packages/react/src/drawer/demo/Placement.tsx  |   7 +-
 packages/react/src/drawer/drawer.tsx          |  19 ++-
 .../src/form/__tests__/form-helper.test.ts    |  11 --
 .../react/src/form/__tests__/form.test.tsx    |  63 ++++++++
 packages/react/src/form/demo/AsyncSubmit.tsx  |   7 +-
 packages/react/src/form/demo/Layout.tsx       |   7 +-
 packages/react/src/form/form-helper.ts        |   5 +-
 packages/react/src/form/index.md              |   2 +-
 packages/react/src/form/index.zh_CN.md        |   2 +-
 packages/react/src/form/types.ts              |   2 +-
 packages/react/src/index.ts                   |   1 +
 .../react/src/modal/__tests__/modal.test.tsx  |  74 +++++++++
 packages/react/src/modal/demo/Animation.tsx   |   8 +-
 packages/react/src/modal/demo/Basic.tsx       |   6 +-
 packages/react/src/modal/demo/Position.tsx    |   8 +-
 packages/react/src/modal/modal.tsx            |  48 ++++--
 packages/react/src/modal/types.ts             |   1 +
 .../__tests__/pop-confirm.test.tsx            |  14 +-
 .../react/src/pop-confirm/pop-confirm.tsx     |   6 +-
 packages/react/src/popover/popover.tsx        |  11 +-
 packages/react/src/popup/popup.tsx            | 147 ++++++++++++------
 packages/react/src/popup/style/index.scss     |  31 ++--
 .../src/select/__tests__/select.test.tsx      |  52 ++++++-
 packages/react/src/select/demo/Basic.tsx      |   7 +-
 packages/react/src/select/demo/Groups.tsx     |   7 +-
 packages/react/src/select/demo/Multiple.tsx   |   7 +-
 packages/react/src/select/demo/Search.tsx     |   7 +-
 packages/react/src/select/select.tsx          |  55 ++++++-
 .../react/src/table/__tests__/table.test.tsx  |  53 +++++++
 packages/react/src/table/table.tsx            |   8 +-
 .../__snapshots__/time-picker.test.tsx.snap   |   1 +
 .../__tests__/time-picker.test.tsx            |  12 ++
 packages/react/src/time-picker/demo/Basic.tsx |   6 +-
 .../react/src/time-picker/demo/Controlled.tsx |   8 +-
 .../src/time-picker/demo/ExtraFooter.tsx      |   4 +-
 .../react/src/time-picker/time-picker.tsx     |  23 ++-
 .../react/src/tour/__tests__/tour.test.tsx    |  41 ++++-
 packages/react/src/tour/tour-panel.tsx        |  15 +-
 packages/react/src/tour/tour.tsx              |  42 ++++-
 .../src/transfer/__tests__/transfer.test.tsx  |  25 ++-
 packages/react/src/transfer/transfer.tsx      |   5 +-
 .../react/src/tree/__tests__/tree.test.tsx    |  27 +++-
 packages/react/src/tree/tree.tsx              |  18 ++-
 .../src/upload/__tests__/upload.test.tsx      | 108 ++++++++++++-
 packages/react/src/upload/ajax.ts             |  15 +-
 packages/react/src/upload/index.md            |   4 +-
 packages/react/src/upload/index.zh_CN.md      |   4 +-
 packages/react/src/upload/style/index.scss    |   9 ++
 packages/react/src/upload/types.ts            |  17 +-
 packages/react/src/upload/upload-list.tsx     |  12 +-
 packages/react/src/upload/upload.tsx          |  89 +++++++----
 packages/react/tsconfig.test.json             |   1 +
 77 files changed, 1380 insertions(+), 243 deletions(-)
 create mode 100644 packages/react/src/form/__tests__/form.test.tsx

diff --git a/REFACTOR_CHECKLIST.md b/REFACTOR_CHECKLIST.md
index 96775768..c88837f5 100644
--- a/REFACTOR_CHECKLIST.md
+++ b/REFACTOR_CHECKLIST.md
@@ -1,5 +1,88 @@
 # Refactor Checklist
 
+## Progress Tracker
+
+Overall status:
+
+- estimated progress: `88%`
+- estimated progress: `93%`
+- current focus: a11y and interaction sweep for complex popup, picker, and dialog components
+- current mode: breaking-major refactor, no legacy compatibility work
+
+### Phases
+
+| Phase | Scope | Status | Notes |
+| --- | --- | --- | --- |
+| 1 | tokens core | done | shared resolver, strict new contract, no alias/migration runtime |
+| 2 | react theme integration | done | `ConfigProvider` uses shared token resolver |
+| 3 | bottom-layer popup infrastructure | done | `Popup`, `Overlay`, `Portal` stabilized and test-covered |
+| 4 | first-layer popup consumers | done | `Dropdown`, `Popover`, `Tooltip`, `Modal static`, `Menu.SubMenu`, `PopConfirm`, `SpeedDial` |
+| 5 | selection and picker core | done at current checkpoint | `Select`, `AutoComplete`, `Cascader`, `DatePicker`, `TimePicker`, `ColorPicker` stabilized with focused keyboard / state fixes |
+| 6 | token coverage expansion | mostly done at current checkpoint | first high-value namespaces landed and are wired into component styles |
+| 7 | quality platform | in progress | focused regression tests and targeted a11y semantics improved, no full visual regression sweep yet |
+
+### Component Groups
+
+Completed or stable checkpoint:
+
+- `Popup`
+- `Overlay`
+- `Portal`
+- `Dropdown`
+- `Popover`
+- `Tooltip`
+- `ConfigProvider`
+- `DatePicker`
+- `TimePicker`
+- `Select`
+- `AutoComplete`
+- `Cascader`
+- `ColorPicker`
+- `Menu.SubMenu`
+- `PopConfirm`
+- `SpeedDial`
+- `Calendar`
+- `Upload`
+- `Modal`
+- `Drawer`
+- `Table`
+- `Tree`
+- `Transfer`
+- `Tour`
+- `Form`
+- `NativeSelect`
+
+Token ownership completed or materially improved:
+
+- `picker`
+- `date-picker`
+- `time-picker`
+- `calendar`
+- `dropdown`
+- `overlay`
+- `pop-confirm`
+- `tour`
+- `select`
+- `auto-complete`
+- `cascader`
+- `color-picker`
+- `speed-dial`
+- `upload`
+
+Queued next:
+
+- full-library visual regression sweep
+- broader docs/demo smoke check
+- remaining component token gaps with lower business value
+
+Known unfinished areas:
+
+- `Modal / Drawer / Tour` focus, keyboard, and close semantics are substantially improved, but not fully systematized into shared hooks
+- `Form` is stabilized at a synchronous-validation checkpoint, but not redesigned
+- `Select / Cascader / AutoComplete / DatePicker / TimePicker / ColorPicker` have focused a11y improvements, but not a full WAI-ARIA parity pass
+- full-library visual regression has not started
+- docs/demo smoke coverage is still partial
+
 ## Phase Checklist
 
 Use this before starting any new phase.
diff --git a/THEME_TOKEN_REFACTOR_ROADMAP.md b/THEME_TOKEN_REFACTOR_ROADMAP.md
index 8dc09682..c6fa44f0 100644
--- a/THEME_TOKEN_REFACTOR_ROADMAP.md
+++ b/THEME_TOKEN_REFACTOR_ROADMAP.md
@@ -27,11 +27,100 @@ Completed:
 - browser-safe ESM runtime for docs and Theme Studio
 - `ConfigProvider` integrated with token resolution
 - `Popup / Overlay / Portal` bottom-layer cleanup and tests
+- temporary alias and migration logic removed again for the breaking-major path
+- first-layer popup consumers stabilized:
+  - `Dropdown`
+  - `Popover`
+  - `Tooltip`
+  - `Modal static`
+  - `Menu.SubMenu`
+  - `PopConfirm`
+  - `SpeedDial`
+- picker and selection core partially stabilized:
+  - `DatePicker`
+  - `TimePicker`
+  - `Select`
+  - `AutoComplete`
+  - `Cascader`
+- `ColorPicker`
+- `Upload`
+- `Modal`
+- `Drawer`
+- `Table`
+- `Tree`
+- `Transfer`
+- `Tour`
+- `Form`
+- token ownership expanded for:
+  - `picker`
+  - `date-picker`
+  - `time-picker`
+  - `calendar`
+  - `dropdown`
+  - `overlay`
+  - `pop-confirm`
+  - `tour`
+  - `select`
+  - `auto-complete`
+  - `cascader`
+  - `color-picker`
+  - `speed-dial`
 
 In progress:
 
-- removing alias and migration logic that was temporarily added during the transition
-- tightening execution checklists for the next component phases
+- broader a11y and docs/demo sweep
+- checklist-driven progress tracking
+- token coverage expansion for the remaining component gaps
+
+Recently stabilized:
+
+- `Upload`
+  - controlled `fileList` behavior corrected
+  - callbacks now receive the latest file list snapshots
+  - shared remove icon usage aligned
+- `Modal`
+  - `onClose` and `onCancel` semantics separated
+  - `keyboard` support added and tested
+  - shared close icon usage aligned
+- `Drawer`
+  - `keyboard` prop now works
+  - shared close icon usage aligned
+- `Table`
+  - controlled `selectedRowKeys` clearing fixed
+  - controlled `pagination.current` sync fixed
+- `Tree`
+  - node tree now refreshes when `data` changes
+- `Transfer`
+  - controlled mode no longer clears panel selection on unrelated rerenders
+- `Tour`
+  - keyboard-disabled regression covered
+  - shared close icon usage aligned
+  - focus is now captured on open and restored on close
+  - title and description now participate in dialog semantics
+- `Form`
+  - contract tightened to synchronous validation only
+  - submit-level behavior now has direct regression coverage
+- `Select`
+  - combobox/listbox aria relationships improved
+- `Cascader`
+  - selector keyboard open/close behavior added
+  - combobox semantics improved
+- `AutoComplete`
+  - `onOpenChange` support aligned with controlled `open`
+  - combobox/listbox aria relationships improved
+- `DatePicker`
+  - combobox/dialog semantics added
+  - keyboard open behavior added
+- `TimePicker`
+  - combobox/dialog semantics added
+  - keyboard open behavior added
+- `ColorPicker`
+  - trigger now exposes button/dialog semantics
+  - keyboard open behavior added
+- `Modal / Drawer`
+  - body/header aria relationships added
+- `PopConfirm`
+  - alertdialog title relationship added
 
 ## Target Architecture
 
diff --git a/packages/react/jest.config.js b/packages/react/jest.config.js
index 3ce176f5..f7df5739 100644
--- a/packages/react/jest.config.js
+++ b/packages/react/jest.config.js
@@ -15,7 +15,6 @@ module.exports = {
   transform: {
     '^.+\\.tsx?$': ['ts-jest', {
       tsconfig: 'tsconfig.test.json',
-      isolatedModules: true,
     }],
   },
 };
diff --git a/packages/react/src/auto-complete/__tests__/__snapshots__/autocomplete.test.tsx.snap b/packages/react/src/auto-complete/__tests__/__snapshots__/autocomplete.test.tsx.snap
index 51fd4bac..e45f95ea 100644
--- a/packages/react/src/auto-complete/__tests__/__snapshots__/autocomplete.test.tsx.snap
+++ b/packages/react/src/auto-complete/__tests__/__snapshots__/autocomplete.test.tsx.snap
@@ -9,7 +9,10 @@ exports[`<AutoComplete /> should match the snapshot 1`] = `
       class="ty-input ty-input_md"
     >
       <input
+        aria-expanded="false"
+        aria-haspopup="listbox"
         class="ty-input__input"
+        role="combobox"
         style="--ty-input-padding-inline-start-extra: 0px; --ty-input-padding-inline-end-extra: 0px;"
         value=""
       />
diff --git a/packages/react/src/auto-complete/__tests__/autocomplete.test.tsx b/packages/react/src/auto-complete/__tests__/autocomplete.test.tsx
index 436ae677..5765b4ae 100644
--- a/packages/react/src/auto-complete/__tests__/autocomplete.test.tsx
+++ b/packages/react/src/auto-complete/__tests__/autocomplete.test.tsx
@@ -69,6 +69,21 @@ describe('<AutoComplete />', () => {
     expect(onChange).toHaveBeenCalledWith('Banana');
   });
 
+  it('should expose combobox aria relationships when navigating options', () => {
+    const { container } = render(<AutoComplete options={options} />);
+    const input = container.querySelector('input') as HTMLInputElement;
+    const wrapper = container.firstChild as HTMLElement;
+
+    fireEvent.keyDown(wrapper, { key: 'ArrowDown' });
+
+    const listboxId = input.getAttribute('aria-controls');
+    expect(input).toHaveAttribute('role', 'combobox');
+    expect(input).toHaveAttribute('aria-expanded', 'true');
+    expect(listboxId).toBeTruthy();
+    expect(input).toHaveAttribute('aria-activedescendant', `${listboxId}-option-0`);
+    expect(document.getElementById(`${listboxId}-option-0`)).toHaveTextContent('Apple');
+  });
+
   it('should close on Escape', () => {
     const { container } = render(<AutoComplete options={options} defaultOpen />);
     const wrapper = container.firstChild as HTMLElement;
@@ -126,6 +141,39 @@ describe('<AutoComplete />', () => {
     expect(container.firstChild).toHaveClass('ty-auto-complete_open');
   });
 
+  it('should call onOpenChange when focus opens and outside click closes the popup', async () => {
+    const onOpenChange = jest.fn();
+    const { container } = render(
+      <div>
+        <AutoComplete options={options} onOpenChange={onOpenChange} />
+        <button>Outside</button>
+      </div>
+    );
+
+    const input = container.querySelector('input') as HTMLInputElement;
+    fireEvent.focus(input);
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+
+    fireEvent.click(screen.getByText('Outside'));
+
+    await waitFor(() => {
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+  });
+
+  it('should respect controlled open when Escape is pressed', () => {
+    const onOpenChange = jest.fn();
+    const { container } = render(
+      <AutoComplete options={options} open={true} onOpenChange={onOpenChange} />
+    );
+
+    const wrapper = container.firstChild as HTMLElement;
+    fireEvent.keyDown(wrapper, { key: 'Escape' });
+
+    expect(container.firstChild).toHaveClass('ty-auto-complete_open');
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
   it('should call onSearch callback', () => {
     const onSearch = jest.fn();
     const { container } = render(<AutoComplete options={options} onSearch={onSearch} />);
diff --git a/packages/react/src/auto-complete/auto-complete.tsx b/packages/react/src/auto-complete/auto-complete.tsx
index f01267fa..311735d0 100644
--- a/packages/react/src/auto-complete/auto-complete.tsx
+++ b/packages/react/src/auto-complete/auto-complete.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useId, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useCombobox } from '../_utils/useCombobox';
 import { ConfigContext } from '../config-provider/config-context';
@@ -22,6 +22,7 @@ const AutoComplete = React.forwardRef<HTMLDivElement, AutoCompleteProps>(
       filterOption = true,
       onChange,
       onSelect,
+      onOpenChange,
       onSearch,
       onFocus,
       onBlur,
@@ -40,6 +41,7 @@ const AutoComplete = React.forwardRef<HTMLDivElement, AutoCompleteProps>(
 
     const wrapperRef = useRef<HTMLDivElement | null>(null);
     const inputRef = useRef<HTMLInputElement | null>(null);
+    const listboxId = useId();
 
     const handleOptionSelect = useCallback(
       (opt: AutoCompleteOption) => {
@@ -61,6 +63,7 @@ const AutoComplete = React.forwardRef<HTMLDivElement, AutoCompleteProps>(
       defaultOpen,
       disabled,
       defaultActiveFirstOption,
+      onOpenChange,
       onSelect: handleOptionSelect,
     });
 
@@ -123,6 +126,7 @@ const AutoComplete = React.forwardRef<HTMLDivElement, AutoCompleteProps>(
         return (
           <li
             key={opt.value}
+            id={`${listboxId}-option-${index}`}
             role="option"
             className={optCls}
             aria-selected={index === combo.focusedIndex}
@@ -144,6 +148,7 @@ const AutoComplete = React.forwardRef<HTMLDivElement, AutoCompleteProps>(
         <ul
           className={`${prefixCls}__dropdown`}
           style={{ minWidth: selectorWidth || undefined }}
+          id={listboxId}
           role="listbox">
           {dropdownContent}
         </ul>
@@ -176,6 +181,15 @@ const AutoComplete = React.forwardRef<HTMLDivElement, AutoCompleteProps>(
             placeholder={placeholder}
             disabled={disabled}
             value={inputValue}
+            role="combobox"
+            aria-expanded={showDropdown}
+            aria-haspopup="listbox"
+            aria-controls={showDropdown ? listboxId : undefined}
+            aria-activedescendant={
+              showDropdown && combo.focusedIndex >= 0
+                ? `${listboxId}-option-${combo.focusedIndex}`
+                : undefined
+            }
             clearable={allowClear}
             onChange={handleInputChange}
             onFocus={handleFocus}
diff --git a/packages/react/src/auto-complete/demo/Basic.tsx b/packages/react/src/auto-complete/demo/Basic.tsx
index e42c13d4..5cfe26df 100644
--- a/packages/react/src/auto-complete/demo/Basic.tsx
+++ b/packages/react/src/auto-complete/demo/Basic.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { AutoComplete } from '@tiny-design/react';
+import type { AutoCompleteOption } from '@tiny-design/react';
 
 export default function BasicDemo() {
-  const [options, setOptions] = React.useState([]);
+  const [options, setOptions] = React.useState<AutoCompleteOption[]>([]);
 
-  const handleSearch = (value) => {
+  const handleSearch = (value: string) => {
     if (!value) {
       setOptions([]);
     } else {
@@ -25,4 +26,4 @@ export default function BasicDemo() {
       />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/auto-complete/demo/CustomFilter.tsx b/packages/react/src/auto-complete/demo/CustomFilter.tsx
index de541479..4cf188a7 100644
--- a/packages/react/src/auto-complete/demo/CustomFilter.tsx
+++ b/packages/react/src/auto-complete/demo/CustomFilter.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { AutoComplete } from '@tiny-design/react';
+import type { AutoCompleteOption } from '@tiny-design/react';
 
 export default function CustomFilterDemo() {
   const options = [
@@ -9,7 +9,7 @@ export default function CustomFilterDemo() {
     { value: 'Svelte' },
   ];
 
-  const filterOption = (inputValue, option) => {
+  const filterOption = (inputValue: string, option: AutoCompleteOption) => {
     return option.value.toLowerCase().startsWith(inputValue.toLowerCase());
   };
 
@@ -22,4 +22,4 @@ export default function CustomFilterDemo() {
       />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/auto-complete/index.md b/packages/react/src/auto-complete/index.md
index 0c753ec1..6561510e 100644
--- a/packages/react/src/auto-complete/index.md
+++ b/packages/react/src/auto-complete/index.md
@@ -107,6 +107,7 @@ Three sizes: `sm`, `md` (default) and `lg`.
 | filterOption              | Filter function or false to disable              | boolean &#124; (inputValue, option) => boolean                | true    |
 | onChange                   | Callback when input value changes                | (value: string) => void                                       | -       |
 | onSelect                  | Callback when an option is selected              | (value: string, option) => void                               | -       |
+| onOpenChange              | Callback when dropdown open state changes        | (open: boolean) => void                                       | -       |
 | onSearch                  | Callback when searching                          | (value: string) => void                                       | -       |
 | onFocus                   | Callback when input is focused                   | (e: FocusEvent) => void                                       | -       |
-| onBlur                    | Callback when input loses focus                  | (e: FocusEvent) => void                                       | -       |
\ No newline at end of file
+| onBlur                    | Callback when input loses focus                  | (e: FocusEvent) => void                                       | -       |
diff --git a/packages/react/src/auto-complete/index.zh_CN.md b/packages/react/src/auto-complete/index.zh_CN.md
index 2ee5e663..fddf35af 100644
--- a/packages/react/src/auto-complete/index.zh_CN.md
+++ b/packages/react/src/auto-complete/index.zh_CN.md
@@ -107,6 +107,7 @@ import { AutoComplete } from 'tiny-design';
 | filterOption              | 自定义过滤函数或 false 禁用过滤          | boolean &#124; (inputValue, option) => boolean                | true    |
 | onChange                   | 输入值变化时的回调                       | (value: string) => void                                       | -       |
 | onSelect                  | 选中选项时的回调                         | (value: string, option) => void                               | -       |
+| onOpenChange              | 下拉展开状态变化时的回调                 | (open: boolean) => void                                       | -       |
 | onSearch                  | 搜索时的回调                             | (value: string) => void                                       | -       |
 | onFocus                   | 获得焦点时的回调                         | (e: FocusEvent) => void                                       | -       |
-| onBlur                    | 失去焦点时的回调                         | (e: FocusEvent) => void                                       | -       |
\ No newline at end of file
+| onBlur                    | 失去焦点时的回调                         | (e: FocusEvent) => void                                       | -       |
diff --git a/packages/react/src/auto-complete/types.ts b/packages/react/src/auto-complete/types.ts
index 4b37a406..5cb9cd70 100644
--- a/packages/react/src/auto-complete/types.ts
+++ b/packages/react/src/auto-complete/types.ts
@@ -22,6 +22,7 @@ export interface AutoCompleteProps extends BaseProps {
   filterOption?: boolean | ((inputValue: string, option: AutoCompleteOption) => boolean);
   onChange?: (value: string) => void;
   onSelect?: (value: string, option: AutoCompleteOption) => void;
+  onOpenChange?: (open: boolean) => void;
   onSearch?: (value: string) => void;
   onFocus?: FocusEventHandler<HTMLInputElement>;
   onBlur?: FocusEventHandler<HTMLInputElement>;
diff --git a/packages/react/src/cascader/__tests__/__snapshots__/cascader.test.tsx.snap b/packages/react/src/cascader/__tests__/__snapshots__/cascader.test.tsx.snap
index 6a387f50..3f89d94d 100644
--- a/packages/react/src/cascader/__tests__/__snapshots__/cascader.test.tsx.snap
+++ b/packages/react/src/cascader/__tests__/__snapshots__/cascader.test.tsx.snap
@@ -6,7 +6,11 @@ exports[`<Cascader /> should match the snapshot 1`] = `
     class="ty-cascader ty-cascader_md"
   >
     <div
+      aria-expanded="false"
+      aria-haspopup="listbox"
       class="ty-cascader__selector"
+      role="combobox"
+      tabindex="0"
     >
       <span
         class="ty-cascader__placeholder"
diff --git a/packages/react/src/cascader/__tests__/cascader.test.tsx b/packages/react/src/cascader/__tests__/cascader.test.tsx
index bd20366e..0c6b2771 100644
--- a/packages/react/src/cascader/__tests__/cascader.test.tsx
+++ b/packages/react/src/cascader/__tests__/cascader.test.tsx
@@ -55,6 +55,19 @@ describe('<Cascader />', () => {
     expect(document.body.querySelector('.ty-cascader__dropdown')).toBeTruthy();
   });
 
+  it('should open on ArrowDown and close on Escape from the selector', async () => {
+    const { container } = render(<Cascader options={options} />);
+    const selector = container.querySelector('.ty-cascader__selector') as HTMLElement;
+
+    fireEvent.keyDown(selector, { key: 'ArrowDown' });
+    expect(document.body.querySelector('.ty-cascader__dropdown')).toBeTruthy();
+
+    fireEvent.keyDown(selector, { key: 'Escape' });
+    await waitFor(() => {
+      expect(container.querySelector('.ty-cascader')).not.toHaveClass('ty-cascader_open');
+    });
+  });
+
   it('should render first level options', () => {
     const { container, getByText } = render(<Cascader options={options} />);
     const selector = container.querySelector('.ty-cascader__selector');
diff --git a/packages/react/src/cascader/cascader.tsx b/packages/react/src/cascader/cascader.tsx
index 8a939623..95dd879f 100644
--- a/packages/react/src/cascader/cascader.tsx
+++ b/packages/react/src/cascader/cascader.tsx
@@ -98,6 +98,25 @@ const Cascader = React.forwardRef<HTMLDivElement, CascaderProps>((props, ref) =>
     setDropdownOpen(next);
   };
 
+  const handleSelectorKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (disabled) return;
+
+    if (e.key === 'Escape') {
+      if (open) {
+        e.preventDefault();
+        setDropdownOpen(false);
+      }
+      return;
+    }
+
+    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (!open) {
+        setDropdownOpen(true);
+      }
+    }
+  };
+
   const getPathAtLevel = useCallback((level: number): CascaderValue => {
     if (hoveredPath.length > level) {
       return hoveredPath;
@@ -231,7 +250,14 @@ const Cascader = React.forwardRef<HTMLDivElement, CascaderProps>((props, ref) =>
         onVisibleChange={setDropdownOpen}
         content={dropdown}
       >
-        <div className={`${prefixCls}__selector`} onClick={toggleOpen}>
+        <div
+          className={`${prefixCls}__selector`}
+          onClick={toggleOpen}
+          onKeyDown={handleSelectorKeyDown}
+          role="combobox"
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          tabIndex={disabled ? -1 : 0}>
           {displayText ? (
             <span className={`${prefixCls}__display`}>{displayText}</span>
           ) : (
diff --git a/packages/react/src/color-picker/__tests__/__snapshots__/color-picker.test.tsx.snap b/packages/react/src/color-picker/__tests__/__snapshots__/color-picker.test.tsx.snap
index b82a8ca0..7d67a0c9 100644
--- a/packages/react/src/color-picker/__tests__/__snapshots__/color-picker.test.tsx.snap
+++ b/packages/react/src/color-picker/__tests__/__snapshots__/color-picker.test.tsx.snap
@@ -6,7 +6,11 @@ exports[`<ColorPicker /> should match the snapshot 1`] = `
     class="ty-color-picker"
   >
     <div
+      aria-expanded="false"
+      aria-haspopup="dialog"
       class="ty-color-picker__trigger"
+      role="button"
+      tabindex="0"
     >
       <div
         class="ty-color-picker__swatch"
diff --git a/packages/react/src/color-picker/__tests__/color-picker.test.tsx b/packages/react/src/color-picker/__tests__/color-picker.test.tsx
index 05ccb1d2..adc76161 100644
--- a/packages/react/src/color-picker/__tests__/color-picker.test.tsx
+++ b/packages/react/src/color-picker/__tests__/color-picker.test.tsx
@@ -27,6 +27,18 @@ describe('<ColorPicker />', () => {
     expect(document.body.querySelector('.ty-color-picker__panel')).toBeTruthy();
   });
 
+  it('should expose button dialog semantics and open with keyboard', () => {
+    const { container } = render(<ColorPicker />);
+    const trigger = container.querySelector('.ty-color-picker__trigger') as HTMLElement;
+
+    fireEvent.keyDown(trigger, { key: 'Enter' });
+
+    expect(trigger).toHaveAttribute('role', 'button');
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(trigger).toHaveAttribute('aria-controls');
+    expect(document.getElementById(trigger.getAttribute('aria-controls') || '')).toHaveAttribute('role', 'dialog');
+  });
+
   it('should render disabled', () => {
     const { container } = render(<ColorPicker disabled />);
     expect(container.firstChild).toHaveClass('ty-color-picker_disabled');
diff --git a/packages/react/src/color-picker/color-picker.tsx b/packages/react/src/color-picker/color-picker.tsx
index be5eb445..a8b45517 100644
--- a/packages/react/src/color-picker/color-picker.tsx
+++ b/packages/react/src/color-picker/color-picker.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useContext, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useContext, useCallback, useId } from 'react';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
@@ -45,6 +45,7 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
   const alphaRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const colorRef = useRef<Color>(color);
+  const popupId = useId();
 
   const isOpen = ('open' in props ? (props.open as boolean) : undefined) ?? open;
   const controlledOpen = 'open' in props ? (props.open as boolean) : undefined;
@@ -255,7 +256,7 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
   const hueColor = hsbToHex({ h: color.h, s: 100, b: 100, a: 1 });
 
   const renderPanel = () => (
-    <div className={`${prefixCls}__panel`}>
+    <div id={popupId} role="dialog" aria-modal="false" className={`${prefixCls}__panel`}>
       <div
         ref={spectrumRef}
         className={`${prefixCls}__spectrum`}
@@ -360,6 +361,33 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
         content={renderPanel()}>
         <div
           className={`${prefixCls}__trigger`}
+          role="button"
+          tabIndex={disabled ? -1 : 0}
+          aria-haspopup="dialog"
+          aria-expanded={isOpen}
+          aria-controls={isOpen ? popupId : undefined}
+          onKeyDown={(e) => {
+            if (disabled) {
+              return;
+            }
+
+            if ((e.key === 'Enter' || e.key === ' ') && !isOpen) {
+              e.preventDefault();
+              if (controlledOpen === undefined) {
+                setOpen(true);
+              }
+              onOpenChange?.(true);
+              return;
+            }
+
+            if (e.key === 'Escape' && isOpen) {
+              e.preventDefault();
+              if (controlledOpen === undefined) {
+                setOpen(false);
+              }
+              onOpenChange?.(false);
+            }
+          }}
         >
           {children || (
             <div className={`${prefixCls}__swatch`}>
diff --git a/packages/react/src/color-picker/demo/Format.tsx b/packages/react/src/color-picker/demo/Format.tsx
index 24431c79..cf0c7be8 100644
--- a/packages/react/src/color-picker/demo/Format.tsx
+++ b/packages/react/src/color-picker/demo/Format.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { ColorPicker } from '@tiny-design/react';
-import type { ColorFormat } from '@tiny-design/react';
+import ColorPicker from '../index';
+import type { ColorFormat } from '../types';
 
 export default function FormatDemo() {
   const [color, setColor] = React.useState('#1890ff');
diff --git a/packages/react/src/color-picker/demo/Oklch.tsx b/packages/react/src/color-picker/demo/Oklch.tsx
index 0ee936cd..613d8d0b 100644
--- a/packages/react/src/color-picker/demo/Oklch.tsx
+++ b/packages/react/src/color-picker/demo/Oklch.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { ColorPicker } from '@tiny-design/react';
-import type { ColorChangeMeta } from '@tiny-design/react';
+import ColorPicker from '../index';
+import type { ColorChangeMeta, ColorFormat } from '../types';
 
 export default function OklchDemo() {
+  const format: ColorFormat = 'oklch';
   const [color, setColor] = React.useState('oklch(0.667 0.178 258.4)');
   const [meta, setMeta] = React.useState<ColorChangeMeta | null>(null);
 
@@ -11,9 +12,9 @@ export default function OklchDemo() {
       <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
         <ColorPicker
           value={color}
-          format="oklch"
+          format={format}
           formats={['hex', 'rgb', 'oklch']}
-          onChange={(next, nextMeta) => {
+          onChange={(next: string, nextMeta: ColorChangeMeta) => {
             setColor(next);
             setMeta(nextMeta);
           }}
diff --git a/packages/react/src/date-picker/__tests__/__snapshots__/date-picker.test.tsx.snap b/packages/react/src/date-picker/__tests__/__snapshots__/date-picker.test.tsx.snap
index 6925a762..a7d740e2 100644
--- a/packages/react/src/date-picker/__tests__/__snapshots__/date-picker.test.tsx.snap
+++ b/packages/react/src/date-picker/__tests__/__snapshots__/date-picker.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`<DatePicker /> should match the snapshot 1`] = `
         class="ty-date-picker__input-field"
         placeholder="Select date"
         readonly=""
+        role="combobox"
         value="2024-01-15"
       />
       <span
diff --git a/packages/react/src/date-picker/__tests__/date-picker.test.tsx b/packages/react/src/date-picker/__tests__/date-picker.test.tsx
index 10b6bb55..65353e0e 100644
--- a/packages/react/src/date-picker/__tests__/date-picker.test.tsx
+++ b/packages/react/src/date-picker/__tests__/date-picker.test.tsx
@@ -86,6 +86,18 @@ describe('<DatePicker />', () => {
     });
   });
 
+  it('should expose combobox dialog semantics and open with keyboard', () => {
+    const { container } = render(<DatePicker />);
+    const input = container.querySelector('input') as HTMLInputElement;
+
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    expect(input).toHaveAttribute('role', 'combobox');
+    expect(input).toHaveAttribute('aria-expanded', 'true');
+    expect(input).toHaveAttribute('aria-controls');
+    expect(document.getElementById(input.getAttribute('aria-controls') || '')).toHaveAttribute('role', 'dialog');
+  });
+
   it('should format month picker', () => {
     const { container } = render(<DatePicker picker="month" defaultValue={new Date(2024, 5, 1)} />);
     expect(container.querySelector('input')?.value).toBe('2024-06');
diff --git a/packages/react/src/date-picker/date-picker.tsx b/packages/react/src/date-picker/date-picker.tsx
index 2f64ce2e..96a47d92 100755
--- a/packages/react/src/date-picker/date-picker.tsx
+++ b/packages/react/src/date-picker/date-picker.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback, useEffect, useContext } from 'react';
+import { useState, useRef, useCallback, useEffect, useContext, useId } from 'react';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
@@ -93,6 +93,7 @@ const DatePicker = (props: DatePickerProps) => {
   const [hoverDate, setHoverDate] = useState<Date | null>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const popupId = useId();
 
   const isOpen = controlledOpen ?? open;
 
@@ -259,7 +260,12 @@ const DatePicker = (props: DatePickerProps) => {
   };
 
   const renderOverlay = () => (
-    <div className={`${prefixCls}__dropdown`} ref={dropdownRef}>
+    <div
+      id={popupId}
+      role="dialog"
+      aria-modal="false"
+      className={`${prefixCls}__dropdown`}
+      ref={dropdownRef}>
       <PickerHeader
         date={panelDate}
         mode={mode}
@@ -273,7 +279,9 @@ const DatePicker = (props: DatePickerProps) => {
         <div className={`${prefixCls}__footer`}>
           {renderExtraFooter?.(mode)}
           {showToday && mode === 'date' && picker === 'date' && (
-            <a className={`${prefixCls}__today-btn`} onClick={handleToday}>{locale.DatePicker.today}</a>
+            <button type="button" className={`${prefixCls}__today-btn`} onClick={handleToday}>
+              {locale.DatePicker.today}
+            </button>
           )}
         </div>
       ) : null}
@@ -296,9 +304,16 @@ const DatePicker = (props: DatePickerProps) => {
             disabled={disabled}
             placeholder={defaultPlaceholder}
             value={displayValue}
+            role="combobox"
             aria-expanded={isOpen}
             aria-haspopup="dialog"
+            aria-controls={isOpen ? popupId : undefined}
             onKeyDown={(e) => {
+              if ((e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') && !isOpen) {
+                e.preventDefault();
+                toggleOpen(true);
+                return;
+              }
               if (e.key === 'Escape' && isOpen) toggleOpen(false);
             }}
           />
diff --git a/packages/react/src/date-picker/demo/Basic.tsx b/packages/react/src/date-picker/demo/Basic.tsx
index e079437b..2a3799bc 100644
--- a/packages/react/src/date-picker/demo/Basic.tsx
+++ b/packages/react/src/date-picker/demo/Basic.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 import { DatePicker } from '@tiny-design/react';
 
 export default function BasicDemo() {
-  const [date, setDate] = React.useState(new Date());
+  const [date, setDate] = React.useState<Date | undefined>(new Date());
   return (
     <DatePicker
       value={date}
       onChange={(d, str) => {
-        setDate(d);
+        setDate(d instanceof Date ? d : undefined);
         console.log(str);
       }}
     />
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/date-picker/demo/DisabledDate.tsx b/packages/react/src/date-picker/demo/DisabledDate.tsx
index 280e2627..5250fc8a 100644
--- a/packages/react/src/date-picker/demo/DisabledDate.tsx
+++ b/packages/react/src/date-picker/demo/DisabledDate.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
 import { DatePicker } from '@tiny-design/react';
 
 export default function DisabledDateDemo() {
-  const disabledDate = (current) => {
+  const disabledDate = (current: Date) => {
     const today = new Date();
     today.setHours(0, 0, 0, 0);
     return current < today;
@@ -10,4 +9,4 @@ export default function DisabledDateDemo() {
   return (
     <DatePicker disabledDate={disabledDate} placeholder="No past dates" />
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/drawer/__tests__/drawer.test.tsx b/packages/react/src/drawer/__tests__/drawer.test.tsx
index a12e5484..2448355a 100644
--- a/packages/react/src/drawer/__tests__/drawer.test.tsx
+++ b/packages/react/src/drawer/__tests__/drawer.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import Drawer from '../index';
 
 describe('<Drawer />', () => {
@@ -27,4 +27,48 @@ describe('<Drawer />', () => {
     const { getByText } = render(<Drawer visible footer={<div>Footer</div>}>Content</Drawer>);
     expect(getByText('Footer')).toBeInTheDocument();
   });
+
+  it('should close on escape by default', () => {
+    const onClose = jest.fn();
+    render(<Drawer visible onClose={onClose}>Content</Drawer>);
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not close on escape when keyboard is disabled', () => {
+    const onClose = jest.fn();
+    render(
+      <Drawer visible keyboard={false} onClose={onClose}>
+        Content
+      </Drawer>
+    );
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('should focus the dialog container when there are no focusable children', async () => {
+    const { baseElement } = render(<Drawer visible closable={false}>Content</Drawer>);
+
+    await waitFor(() => {
+      expect(baseElement.querySelector('.ty-drawer__content')).toHaveFocus();
+    });
+  });
+
+  it('should expose aria relationships for header and body content', () => {
+    render(
+      <Drawer visible header="Filters" onClose={jest.fn()}>
+        Drawer content
+      </Drawer>
+    );
+
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toHaveAttribute('aria-labelledby');
+    expect(dialog).toHaveAttribute('aria-describedby');
+    expect(document.getElementById(dialog.getAttribute('aria-labelledby') || '')).toHaveTextContent('Filters');
+    expect(document.getElementById(dialog.getAttribute('aria-describedby') || '')).toHaveTextContent('Drawer content');
+  });
 });
diff --git a/packages/react/src/drawer/demo/Placement.tsx b/packages/react/src/drawer/demo/Placement.tsx
index f26adc9e..bb7b81e2 100644
--- a/packages/react/src/drawer/demo/Placement.tsx
+++ b/packages/react/src/drawer/demo/Placement.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { Drawer, Button, Radio } from '@tiny-design/react';
+import type { DrawerPlacement } from '../types';
 
 export default function PlacementDemo() {
   const [visible, setVisible] = React.useState(false);
-  const [placement, setPlacement] = React.useState('left');
+  const [placement, setPlacement] = React.useState<DrawerPlacement>('left');
 
   return (
     <>
-      <Radio.Group value={placement} onChange={(val) => setPlacement(val)}>
+      <Radio.Group value={placement} onChange={(val) => setPlacement(val as DrawerPlacement)}>
         <Radio value="top">Top</Radio>
         <Radio value="bottom">Bottom</Radio>
         <Radio value="left">Left</Radio>
@@ -32,4 +33,4 @@ export default function PlacementDemo() {
       </Drawer>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/drawer/drawer.tsx b/packages/react/src/drawer/drawer.tsx
index a57acbc5..ab30c3de 100755
--- a/packages/react/src/drawer/drawer.tsx
+++ b/packages/react/src/drawer/drawer.tsx
@@ -4,11 +4,13 @@ import Transition from '../transition';
 import Overlay from '../overlay';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
+import { Close } from '../_utils/components';
 import { DrawerProps } from './types';
 
 const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {
   const {
     visible,
+    keyboard = true,
     placement = 'right',
     size = 256,
     closable = true,
@@ -35,6 +37,7 @@ const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {
   const nodeRef = useRef<HTMLDivElement>(null);
   const previousFocusRef = useRef<HTMLElement | null>(null);
   const titleId = useId();
+  const bodyId = useId();
 
   // Focus trap + Escape key
   useEffect(() => {
@@ -42,7 +45,7 @@ const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {
     previousFocusRef.current = document.activeElement as HTMLElement;
 
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
+      if (keyboard && e.key === 'Escape') {
         onClose?.(e as unknown as React.MouseEvent);
         return;
       }
@@ -67,7 +70,11 @@ const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {
         const focusable = nodeRef.current.querySelectorAll<HTMLElement>(
           'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
         );
-        if (focusable.length > 0) focusable[0].focus();
+        if (focusable.length > 0) {
+          focusable[0].focus();
+        } else {
+          nodeRef.current.focus();
+        }
       }
     });
 
@@ -75,7 +82,7 @@ const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {
       document.removeEventListener('keydown', handleKeyDown);
       previousFocusRef.current?.focus();
     };
-  }, [visible, onClose]);
+  }, [keyboard, visible, onClose]);
 
   return (
     <Overlay
@@ -102,16 +109,18 @@ const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {
             ref={nodeRef}
             className={`${prefixCls}__content`}
             role="dialog"
+            tabIndex={-1}
             aria-modal="true"
             aria-labelledby={header ? titleId : undefined}
+            aria-describedby={children ? bodyId : undefined}
             onClick={(e) => e.stopPropagation()}>
             {closable && (
               <button type="button" className={`${prefixCls}__close-btn`} onClick={onClose} aria-label="Close">
-                ✕
+                <Close size={16} />
               </button>
             )}
             {header && <div className={`${prefixCls}__header`} id={titleId}>{header}</div>}
-            <div className={`${prefixCls}__body`}>{children}</div>
+            <div className={`${prefixCls}__body`} id={bodyId}>{children}</div>
             {footer && <div className={`${prefixCls}__footer`}>{footer}</div>}
           </div>
         </Transition>
diff --git a/packages/react/src/form/__tests__/form-helper.test.ts b/packages/react/src/form/__tests__/form-helper.test.ts
index bd45d2bb..e7d2177b 100644
--- a/packages/react/src/form/__tests__/form-helper.test.ts
+++ b/packages/react/src/form/__tests__/form-helper.test.ts
@@ -62,17 +62,6 @@ describe('FormHelper validate', () => {
     expect(validate('ab', { min: 5 })).toBe('The length of value is less than the min');
   });
 
-  it('should skip async validators and log a warning', () => {
-    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => { /* noop */ });
-    const asyncValidator = () => Promise.resolve(true);
-    const res = validate('value', { validator: asyncValidator });
-    expect(res).toBe(undefined);
-    expect(warnSpy).toHaveBeenCalledWith(
-      expect.stringContaining('Async validators are not supported')
-    );
-    warnSpy.mockRestore();
-  });
-
   it('should fail sync validator returning false', () => {
     expect(validate('bad', { validator: () => false })).toBe(
       'The value is validated unsuccessfully'
diff --git a/packages/react/src/form/__tests__/form.test.tsx b/packages/react/src/form/__tests__/form.test.tsx
new file mode 100644
index 00000000..48465459
--- /dev/null
+++ b/packages/react/src/form/__tests__/form.test.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import Form from '../index';
+import Input from '../../input';
+
+describe('<Form />', () => {
+  it('should call onFinish when submit passes validation', () => {
+    const onFinish = jest.fn();
+
+    render(
+      <Form initialValues={{ username: 'alice' }} onFinish={onFinish}>
+        <Form.Item name="username" rules={[{ required: true }]}>
+          <Input />
+        </Form.Item>
+        <button type="submit">submit</button>
+      </Form>
+    );
+
+    fireEvent.click(screen.getByText('submit'));
+
+    expect(onFinish).toHaveBeenCalledWith({ username: 'alice' });
+  });
+
+  it('should call onFinishFailed when submit fails validation', () => {
+    const onFinish = jest.fn();
+    const onFinishFailed = jest.fn();
+
+    render(
+      <Form onFinish={onFinish} onFinishFailed={onFinishFailed}>
+        <Form.Item name="username" rules={[{ required: true, message: 'username required' }]}>
+          <Input />
+        </Form.Item>
+        <button type="submit">submit</button>
+      </Form>
+    );
+
+    fireEvent.click(screen.getByText('submit'));
+
+    expect(onFinish).not.toHaveBeenCalled();
+    expect(onFinishFailed).toHaveBeenCalledWith({
+      values: {},
+      errors: { username: ['username required'] },
+    });
+  });
+
+  it('should validate on submit when validateTrigger is onSubmit', () => {
+    render(
+      <Form validateTrigger="onSubmit">
+        <Form.Item name="username" rules={[{ required: true, message: 'username required' }]}>
+          <Input />
+        </Form.Item>
+        <button type="submit">submit</button>
+      </Form>
+    );
+
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: '' } });
+    expect(screen.queryByText('username required')).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('submit'));
+    expect(screen.getByText('username required')).toBeInTheDocument();
+  });
+});
diff --git a/packages/react/src/form/demo/AsyncSubmit.tsx b/packages/react/src/form/demo/AsyncSubmit.tsx
index f998a30d..b296e8b2 100644
--- a/packages/react/src/form/demo/AsyncSubmit.tsx
+++ b/packages/react/src/form/demo/AsyncSubmit.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { Form, Input, InputNumber, Button, Flex, Alert } from '@tiny-design/react';
+import type { FormValues } from '../form-instance';
 
 export default function AsyncSubmitDemo() {
   const [form] = Form.useForm({ username: '', age: 0 });
   const [loading, setLoading] = React.useState(false);
-  const [result, setResult] = React.useState(null);
+  const [result, setResult] = React.useState<FormValues | null>(null);
 
-  const handleFinish = async (values) => {
+  const handleFinish = async (values: FormValues) => {
     setLoading(true);
     setResult(null);
     // Simulate API call
@@ -51,4 +52,4 @@ export default function AsyncSubmitDemo() {
       )}
     </Form>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/form/demo/Layout.tsx b/packages/react/src/form/demo/Layout.tsx
index de5a61ed..98f4ae0b 100644
--- a/packages/react/src/form/demo/Layout.tsx
+++ b/packages/react/src/form/demo/Layout.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { Form, Input, InputPassword, Button, Radio } from '@tiny-design/react';
+import type { FormLayout } from '../types';
 
 export default function LayoutDemo() {
-  const [type, setType] = React.useState('horizontal');
+  const [type, setType] = React.useState<FormLayout>('horizontal');
 
   return (
     <>
-      <Radio.Group value={type} onChange={(val) => setType(val)}>
+      <Radio.Group value={type} onChange={(val) => setType(val as FormLayout)}>
         <Radio value="horizontal">Horizontal</Radio>
         <Radio value="vertical">Vertical</Radio>
         <Radio value="inline">Inline</Radio>
@@ -39,4 +40,4 @@ export default function LayoutDemo() {
       </Form>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/form/form-helper.ts b/packages/react/src/form/form-helper.ts
index 153b7b2e..4ed06b8c 100644
--- a/packages/react/src/form/form-helper.ts
+++ b/packages/react/src/form/form-helper.ts
@@ -1,5 +1,4 @@
 import React from 'react';
-import warning from '../_utils/warning';
 import { Rule } from './types';
 
 export function getPropName(valueProp: string | ((type: any) => string), type: any) {
@@ -56,9 +55,7 @@ export function validate(value: any, rule: Rule): string | undefined {
   }
   if (validator) {
     const res = validator(val);
-    if (res instanceof Promise) {
-      warning(true, 'Async validators are not supported in synchronous validate(). Use a synchronous validator instead.');
-    } else if (!res) {
+    if (!res) {
       return message || 'The value is validated unsuccessfully';
     }
   }
diff --git a/packages/react/src/form/index.md b/packages/react/src/form/index.md
index 9e731e23..0bf36ea9 100644
--- a/packages/react/src/form/index.md
+++ b/packages/react/src/form/index.md
@@ -207,5 +207,5 @@ Form field component for data bidirectional binding, validation and layout.
 | len               | length of string, number, array                           | number                                        |
 | pattern           | regex pattern                                             | RegExp                                        |
 | transform         | transform value to the rule before validation             | (value) => any                                |
-| validator         | customize validation rule                                 | (value) => boolean &#124; `Promise<boolean>`  |
+| validator         | customize validation rule                                 | (value) => boolean                            |
 | whitespace        | failed if only has whitespace                             | boolean                                       |
diff --git a/packages/react/src/form/index.zh_CN.md b/packages/react/src/form/index.zh_CN.md
index cd0fe88d..2b764362 100644
--- a/packages/react/src/form/index.zh_CN.md
+++ b/packages/react/src/form/index.zh_CN.md
@@ -206,5 +206,5 @@ const { Item, useForm, FormInstance } = Form;
 | len               | 字符串、数字、数组的长度                           | number                                        |
 | pattern           | 正则表达式                                        | RegExp                                        |
 | transform         | 校验前对值进行转换                                | (value) => any                                |
-| validator         | 自定义校验规则                                    | (value) => boolean &#124; `Promise<boolean>`  |
+| validator         | 自定义校验规则                                    | (value) => boolean                            |
 | whitespace        | 仅包含空格时是否校验失败                           | boolean                                       |
diff --git a/packages/react/src/form/types.ts b/packages/react/src/form/types.ts
index 4edaf7c9..f3a9c5c3 100644
--- a/packages/react/src/form/types.ts
+++ b/packages/react/src/form/types.ts
@@ -31,7 +31,7 @@ export type Rule = {
   transform?: (value: any) => any;
 
   // customize validation rule.
-  validator?: (value: any) => boolean | Promise<boolean>;
+  validator?: (value: any) => boolean;
 
   // failed if only has whitespace
   whitespace?: boolean;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 4d32b7ef..cff34c70 100755
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -109,6 +109,7 @@ export type * from './checkbox';
 export type * from './col';
 export type * from './config-provider';
 export type * from './copy-to-clipboard';
+export type * from './color-picker';
 export type * from './countdown';
 export type * from './date-picker';
 export type * from './descriptions';
diff --git a/packages/react/src/modal/__tests__/modal.test.tsx b/packages/react/src/modal/__tests__/modal.test.tsx
index 48de4a41..e65af5db 100644
--- a/packages/react/src/modal/__tests__/modal.test.tsx
+++ b/packages/react/src/modal/__tests__/modal.test.tsx
@@ -34,6 +34,80 @@ describe('<Modal />', () => {
     expect(getByText('Cancel')).toBeInTheDocument();
   });
 
+  it('should call onCancel from the cancel button without calling onClose', () => {
+    const onCancel = jest.fn();
+    const onClose = jest.fn();
+    render(
+      <Modal visible onCancel={onCancel} onClose={onClose}>
+        Content
+      </Modal>
+    );
+
+    fireEvent.click(screen.getByText('Cancel'));
+
+    expect(onCancel).toHaveBeenCalledTimes(1);
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('should call onClose from the close button without calling onCancel', () => {
+    const onCancel = jest.fn();
+    const onClose = jest.fn();
+    render(
+      <Modal visible onCancel={onCancel} onClose={onClose}>
+        Content
+      </Modal>
+    );
+
+    fireEvent.click(screen.getByLabelText('Close'));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onCancel).not.toHaveBeenCalled();
+  });
+
+  it('should close on escape by default', () => {
+    const onClose = jest.fn();
+    render(<Modal visible onClose={onClose}>Content</Modal>);
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not close on escape when keyboard is disabled', () => {
+    const onClose = jest.fn();
+    render(
+      <Modal visible keyboard={false} onClose={onClose}>
+        Content
+      </Modal>
+    );
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('should focus the dialog container when there are no focusable children', async () => {
+    const { baseElement } = render(<Modal visible footer={null} closable={false}>Content</Modal>);
+
+    await waitFor(() => {
+      expect(baseElement.querySelector('.ty-modal__content')).toHaveFocus();
+    });
+  });
+
+  it('should expose aria relationships for header and body content', () => {
+    render(
+      <Modal visible header="Settings">
+        Modal content
+      </Modal>
+    );
+
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toHaveAttribute('aria-labelledby');
+    expect(dialog).toHaveAttribute('aria-describedby');
+    expect(document.getElementById(dialog.getAttribute('aria-labelledby') || '')).toHaveTextContent('Settings');
+    expect(document.getElementById(dialog.getAttribute('aria-describedby') || '')).toHaveTextContent('Modal content');
+  });
+
   it('should render custom button text', () => {
     const { getByText } = render(<Modal visible confirmText="Yes" cancelText="No">Content</Modal>);
     expect(getByText('Yes')).toBeInTheDocument();
diff --git a/packages/react/src/modal/demo/Animation.tsx b/packages/react/src/modal/demo/Animation.tsx
index 2968ebaa..3fd767a7 100644
--- a/packages/react/src/modal/demo/Animation.tsx
+++ b/packages/react/src/modal/demo/Animation.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Modal, Button, Flex } from '@tiny-design/react';
 
 export default function AnimationDemo() {
@@ -16,7 +16,7 @@ export default function AnimationDemo() {
       <Modal
         header="Default Slide up and down"
         visible={visible1}
-        onOk={() => {}}
+        onConfirm={() => setVisible1(false)}
         onCancel={() => setVisible1(false)}>
         <div>Some contents...</div>
         <div>Some contents...</div>
@@ -26,7 +26,7 @@ export default function AnimationDemo() {
         animation="scale"
         header="I'm a scale animation modal"
         visible={visible2}
-        onOk={() => {}}
+        onConfirm={() => setVisible2(false)}
         onCancel={() => setVisible2(false)}>
         <div>Some contents...</div>
         <div>Some contents...</div>
@@ -34,4 +34,4 @@ export default function AnimationDemo() {
       </Modal>
     </Flex>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/modal/demo/Basic.tsx b/packages/react/src/modal/demo/Basic.tsx
index a27d1073..f424c07d 100644
--- a/packages/react/src/modal/demo/Basic.tsx
+++ b/packages/react/src/modal/demo/Basic.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Modal, Button } from '@tiny-design/react';
 
 export default function BasicDemo() {
@@ -10,7 +10,7 @@ export default function BasicDemo() {
       <Modal
         header="Basic Modal"
         visible={visible}
-        onOk={() => {}}
+        onConfirm={() => setVisible(false)}
         onCancel={() => setVisible(false)}>
         <div>Some contents...</div>
         <div>Some contents...</div>
@@ -18,4 +18,4 @@ export default function BasicDemo() {
       </Modal>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/modal/demo/Position.tsx b/packages/react/src/modal/demo/Position.tsx
index 29678b52..4c52ccd6 100644
--- a/packages/react/src/modal/demo/Position.tsx
+++ b/packages/react/src/modal/demo/Position.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Modal, Button } from '@tiny-design/react';
 
 export default function PositionDemo() {
@@ -19,7 +19,7 @@ export default function PositionDemo() {
         top={20}
         header="20px to Top"
         visible={visible1}
-        onOk={() => {}}
+        onConfirm={() => setVisible1(false)}
         onCancel={() => setVisible1(false)}>
         <div>Some contents...</div>
         <div>Some contents...</div>
@@ -29,7 +29,7 @@ export default function PositionDemo() {
         centered
         header="Vertically centered modal dialog"
         visible={visible2}
-        onOk={() => {}}
+        onConfirm={() => setVisible2(false)}
         onCancel={() => setVisible2(false)}>
         <div>Some contents...</div>
         <div>Some contents...</div>
@@ -37,4 +37,4 @@ export default function PositionDemo() {
       </Modal>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/modal/modal.tsx b/packages/react/src/modal/modal.tsx
index 0b66095a..7520fac4 100755
--- a/packages/react/src/modal/modal.tsx
+++ b/packages/react/src/modal/modal.tsx
@@ -6,6 +6,7 @@ import Button from '../button/button';
 import Flex from '../flex/flex';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
+import { Close } from '../_utils/components';
 import { useLocale } from '../_utils/use-locale';
 import { ModalProps } from './types';
 
@@ -13,6 +14,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
   const locale = useLocale();
   const {
     visible = false,
+    keyboard = true,
     width = 520,
     centered = false,
     closable = true,
@@ -42,7 +44,6 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
     footerStyle,
     prefixCls: customisedCls,
   } = props;
-  const onCancel = onCloseProp ?? onCancelProp;
   const [modalVisible, setModalVisible] = useState(visible);
   const configContext = useContext(ConfigContext);
   const prefixCls = getPrefixCls('modal', configContext.prefixCls, customisedCls);
@@ -50,6 +51,23 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
   const nodeRef = useRef<HTMLDivElement>(null);
   const previousFocusRef = useRef<HTMLElement | null>(null);
   const titleId = useId();
+  const bodyId = useId();
+
+  const handleCancel = (e: React.MouseEvent): void => {
+    if (onCancelProp) {
+      onCancelProp(e);
+      return;
+    }
+    onCloseProp?.(e);
+  };
+
+  const handleClose = (e: React.MouseEvent): void => {
+    if (onCloseProp) {
+      onCloseProp(e);
+      return;
+    }
+    onCancelProp?.(e);
+  };
 
   // Focus trap + Escape key
   useEffect(() => {
@@ -57,8 +75,8 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
     previousFocusRef.current = document.activeElement as HTMLElement;
 
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onCancel?.(e as unknown as React.MouseEvent);
+      if (keyboard && e.key === 'Escape') {
+        handleClose(e as unknown as React.MouseEvent);
         return;
       }
       if (e.key === 'Tab' && nodeRef.current) {
@@ -83,7 +101,11 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
         const focusable = nodeRef.current.querySelectorAll<HTMLElement>(
           'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
         );
-        if (focusable.length > 0) focusable[0].focus();
+        if (focusable.length > 0) {
+          focusable[0].focus();
+        } else {
+          nodeRef.current.focus();
+        }
       }
     });
 
@@ -91,17 +113,17 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
       document.removeEventListener('keydown', handleKeyDown);
       previousFocusRef.current?.focus();
     };
-  }, [visible, onCancel]);
+  }, [handleClose, keyboard, visible]);
 
   const renderFooter = (): React.ReactNode => {
     if (React.isValidElement(footer)) {
-      return footer;
+          return footer;
     } else if (footer === null) {
       return null;
     } else {
       return (
         <Flex gap="sm" justify='end' className={`${prefixCls}__footer`} style={footerStyle}>
-          <Button onClick={onCancel} className={`${prefixCls}__footer-btn`} {...cancelButtonProps}>
+          <Button onClick={handleCancel} className={`${prefixCls}__footer-btn`} {...cancelButtonProps}>
             {cancelText}
           </Button>
           <Button
@@ -127,7 +149,9 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
       isShow={visible}
       onExited={afterClose}
       clickCallback={(e: React.MouseEvent): void => {
-        maskClosable && onCancel ? onCancel(e) : undefined;
+        if (maskClosable) {
+          handleClose(e);
+        }
       }}
       style={maskStyle}>
       <div ref={ref} className={cls} style={{ top }}>
@@ -143,12 +167,14 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
               ref={nodeRef}
               className={`${prefixCls}__content`}
               role="dialog"
+              tabIndex={-1}
               aria-modal="true"
               aria-labelledby={header ? titleId : undefined}
+              aria-describedby={children ? bodyId : undefined}
               onClick={(e): void => e.stopPropagation()}>
               {closable && (
-                <button type="button" className={`${prefixCls}__close-btn`} onClick={onCancel} aria-label="Close">
-                  ✕
+                <button type="button" className={`${prefixCls}__close-btn`} onClick={handleClose} aria-label="Close">
+                  <Close size={16} />
                 </button>
               )}
               {header && (
@@ -156,7 +182,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
                   <div className={`${prefixCls}__title`} id={titleId}>{header}</div>
                 </div>
               )}
-              <div className={`${prefixCls}__body`} style={bodyStyle}>
+              <div className={`${prefixCls}__body`} id={bodyId} style={bodyStyle}>
                 {children}
               </div>
               {renderFooter()}
diff --git a/packages/react/src/modal/types.ts b/packages/react/src/modal/types.ts
index 13c50bad..663d4495 100644
--- a/packages/react/src/modal/types.ts
+++ b/packages/react/src/modal/types.ts
@@ -7,6 +7,7 @@ export type ModalAnimation = 'slide' | 'scale';
 
 export interface ModalProps extends BaseProps {
   visible?: boolean;
+  keyboard?: boolean;
   header?: ReactNode;
   footer?: ReactNode;
   width?: number | string;
diff --git a/packages/react/src/pop-confirm/__tests__/pop-confirm.test.tsx b/packages/react/src/pop-confirm/__tests__/pop-confirm.test.tsx
index e9e0c8fc..8e754e19 100644
--- a/packages/react/src/pop-confirm/__tests__/pop-confirm.test.tsx
+++ b/packages/react/src/pop-confirm/__tests__/pop-confirm.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
 import PopConfirm from '../index';
 
 describe('<PopConfirm />', () => {
@@ -45,4 +45,16 @@ describe('<PopConfirm />', () => {
     expect(onConfirm).toHaveBeenCalledTimes(1);
     expect(onVisibleChange).toHaveBeenCalledWith(false);
   });
+
+  it('should expose alertdialog semantics linked to the title', () => {
+    render(
+      <PopConfirm title="Sure?" visible={true}>
+        <button>Delete</button>
+      </PopConfirm>
+    );
+
+    const dialog = screen.getByRole('alertdialog');
+    expect(dialog).toHaveAttribute('aria-labelledby');
+    expect(document.getElementById(dialog.getAttribute('aria-labelledby') || '')).toHaveTextContent('Sure?');
+  });
 });
diff --git a/packages/react/src/pop-confirm/pop-confirm.tsx b/packages/react/src/pop-confirm/pop-confirm.tsx
index 0db539ad..ce5dc1e8 100755
--- a/packages/react/src/pop-confirm/pop-confirm.tsx
+++ b/packages/react/src/pop-confirm/pop-confirm.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useCallback, useContext, useId, useState } from 'react';
 import classNames from 'classnames';
 import Popover from '../popover';
 import Button from '../button';
@@ -32,6 +32,7 @@ const PopConfirm = (props: PopConfirmProps): JSX.Element => {
   const isControlled = visible !== undefined;
   const [uncontrolledVisible, setUncontrolledVisible] = useState(defaultVisible);
   const popupVisible = isControlled ? visible : uncontrolledVisible;
+  const titleId = useId();
 
   const setPopupVisibleState = useCallback((nextVisible: boolean): void => {
     if (!isControlled) {
@@ -55,7 +56,7 @@ const PopConfirm = (props: PopConfirmProps): JSX.Element => {
       <div className={`${prefixCls}__overlay`}>
         <div className={`${prefixCls}__messages`}>
           {icon ? icon : <WarningCircle size={14} />}
-          <span className={`${prefixCls}__title`}>{title}</span>
+          <span id={titleId} className={`${prefixCls}__title`}>{title}</span>
         </div>
         <div className={`${prefixCls}__buttons`}>
           <Button size="sm" onClick={cancelOnClick}>
@@ -74,6 +75,7 @@ const PopConfirm = (props: PopConfirmProps): JSX.Element => {
       {...otherProps}
       className={cls}
       role="alertdialog"
+      aria-labelledby={titleId}
       visible={popupVisible}
       onVisibleChange={setPopupVisibleState}
       content={overlay()}
diff --git a/packages/react/src/popover/popover.tsx b/packages/react/src/popover/popover.tsx
index d2cf2577..7005da75 100755
--- a/packages/react/src/popover/popover.tsx
+++ b/packages/react/src/popover/popover.tsx
@@ -9,6 +9,9 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>((props, ref) => {
   const {
     theme = 'light',
     role = 'tooltip',
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy,
     prefixCls: customisedCls,
     title,
     content,
@@ -21,7 +24,13 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>((props, ref) => {
   const cls = classNames(className, prefixCls, `${prefixCls}_${theme}`);
 
   const renderContent = (): React.ReactElement => (
-    <div ref={ref} role={role} className={`${prefixCls}__inner`}>
+    <div
+      ref={ref}
+      role={role}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-describedby={ariaDescribedBy}
+      className={`${prefixCls}__inner`}>
       {title && <div className={`${prefixCls}__title`}>{title}</div>}
       {content && <div className={`${prefixCls}__content`}>{content}</div>}
     </div>
diff --git a/packages/react/src/popup/popup.tsx b/packages/react/src/popup/popup.tsx
index 4a508feb..7c0dd65e 100644
--- a/packages/react/src/popup/popup.tsx
+++ b/packages/react/src/popup/popup.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { createPopper, Instance } from '@popperjs/core';
 import Transition, { AnimationName } from '../transition';
@@ -39,6 +39,7 @@ const Popup = (props: PopupProps): JSX.Element => {
     visible,
     onVisibleChange,
     className,
+    style: popupInlineStyle,
     children,
     ...otherProps
   } = props;
@@ -71,14 +72,17 @@ const Popup = (props: PopupProps): JSX.Element => {
     window.clearTimeout(delayHidePopupTimer.current);
   }, []);
 
+  const onVisibleChangeRef = useRef(onVisibleChange);
+  onVisibleChangeRef.current = onVisibleChange;
+
   const setPopupVisibleState = useCallback(
     (nextVisible: boolean): void => {
       if (!isControlled) {
         setUncontrolledVisible(nextVisible);
       }
-      onVisibleChange && onVisibleChange(nextVisible);
+      onVisibleChangeRef.current?.(nextVisible);
     },
-    [isControlled, onVisibleChange]
+    [isControlled]
   );
 
   const displayPopup = useCallback(() => {
@@ -109,20 +113,31 @@ const Popup = (props: PopupProps): JSX.Element => {
     }, mouseLeaveDelay);
   }, [clearTimers, mouseLeaveDelay, hidePopup]);
 
-  const handlePopupOnMouseEnter = (): void => {
+  const handlePopupOnMouseEnterRef = useRef((): void => {});
+  const handlePopupOnMouseLeaveRef = useRef((): void => {});
+
+  handlePopupOnMouseEnterRef.current = (): void => {
     if (trigger === 'hover') {
       displayPopup();
       window.clearTimeout(delayHidePopupTimer.current);
     }
   };
 
-  const handlePopupOnMouseLeave = (): void => {
+  handlePopupOnMouseLeaveRef.current = (): void => {
     if (trigger === 'hover') {
       delayHidePopup();
       window.clearTimeout(delayDisplayPopupTimer.current);
     }
   };
 
+  const handlePopupOnMouseEnter = useCallback((): void => {
+    handlePopupOnMouseEnterRef.current();
+  }, []);
+
+  const handlePopupOnMouseLeave = useCallback((): void => {
+    handlePopupOnMouseLeaveRef.current();
+  }, []);
+
   const handleTargetOnMouseEnter = useCallback((): void => {
     delayDisplayPopup();
     window.clearTimeout(delayHidePopupTimer.current);
@@ -186,16 +201,41 @@ const Popup = (props: PopupProps): JSX.Element => {
     [displayPopup, hidePopup, popupVisible, trigger]
   );
 
-  const transitionOnEnter = (): void => {
-    if (!targetRef.current || !popupRef.current) {
+  const destroyPopper = useCallback((): void => {
+    const popperInstance = popperRef.current;
+    if (!popperInstance) {
       return;
     }
 
-    popperRef.current?.destroy();
-    const instance = createPopper(
-      targetRef.current as HTMLElement,
-      popupRef.current as HTMLElement,
-      {
+    if (trigger === 'hover') {
+      popperInstance.state.elements.popper.removeEventListener(
+        'mouseenter',
+        handlePopupOnMouseEnter
+      );
+      popperInstance.state.elements.popper.removeEventListener(
+        'mouseleave',
+        handlePopupOnMouseLeave
+      );
+    }
+
+    popperInstance.destroy();
+    popperRef.current = undefined;
+  }, [handlePopupOnMouseEnter, handlePopupOnMouseLeave, trigger]);
+
+  const initPopper = useCallback(
+    (popupNode: HTMLDivElement): void => {
+      if (!targetRef.current) {
+        return;
+      }
+
+      destroyPopper();
+
+      // Do NOT set `strategy: 'fixed'` here.
+      // With 'fixed', the popup is positioned in viewport coordinates, so Popper must
+      // recalculate on every scroll frame via JS — causing visible lag.
+      // The default 'absolute' positions in document coordinates, so the browser
+      // handles scroll following natively with zero delay.
+      const instance = createPopper(targetRef.current as HTMLElement, popupNode, {
         placement: placement as Placement,
         modifiers: [
           {
@@ -216,32 +256,34 @@ const Popup = (props: PopupProps): JSX.Element => {
             },
           },
         ],
-      }
-    );
-    if (trigger === 'hover') {
-      instance.state.elements.popper.addEventListener('mouseenter', handlePopupOnMouseEnter);
-      instance.state.elements.popper.addEventListener('mouseleave', handlePopupOnMouseLeave);
-    }
-    popperRef.current = instance;
-  };
+      });
 
-  const transitionOnExited = (): void => {
-    const popperInstance = popperRef.current;
-    if (popperInstance) {
       if (trigger === 'hover') {
-        popperInstance.state.elements.popper.removeEventListener(
-          'mouseenter',
-          handlePopupOnMouseEnter
-        );
-        popperInstance.state.elements.popper.removeEventListener(
-          'mouseleave',
-          handlePopupOnMouseLeave
-        );
+        instance.state.elements.popper.addEventListener('mouseenter', handlePopupOnMouseEnter);
+        instance.state.elements.popper.addEventListener('mouseleave', handlePopupOnMouseLeave);
       }
-      popperInstance.destroy();
-      popperRef.current = undefined;
+
+      popperRef.current = instance;
+      instance.forceUpdate();
+    },
+    [
+      arrow,
+      destroyPopper,
+      flip,
+      handlePopupOnMouseEnter,
+      handlePopupOnMouseLeave,
+      offset,
+      placement,
+      trigger,
+    ]
+  );
+
+  const setPopupNodeRef = useCallback((node: HTMLDivElement | null) => {
+    popupRef.current = node;
+    if (node && popupVisible) {
+      initPopper(node);
     }
-  };
+  }, [initPopper, popupVisible]);
 
   const getAnimationName = () => {
     const mapping = {
@@ -314,24 +356,39 @@ const Popup = (props: PopupProps): JSX.Element => {
     }
   }, [clearTimers, popupVisible]);
 
+  useLayoutEffect(() => {
+    if (!popupVisible || !targetRef.current || !popupRef.current) {
+      destroyPopper();
+      return;
+    }
+
+    initPopper(popupRef.current);
+
+    return destroyPopper;
+  }, [
+    popupVisible,
+    destroyPopper,
+    initPopper,
+  ]);
+
   useEffect(() => {
     return () => {
       clearTimers();
       removeDocumentClickListener();
-      popperRef.current?.destroy();
-      popperRef.current = undefined;
+      destroyPopper();
     };
-  }, [clearTimers, removeDocumentClickListener]);
+  }, [clearTimers, destroyPopper, removeDocumentClickListener]);
 
   const renderContent = () => (
-    <Transition
-      in={popupVisible}
-      nodeRef={popupRef}
-      onEnter={transitionOnEnter}
-      onExited={transitionOnExited}
-      animation={getAnimationName()}>
-      <div {...otherProps} className={cls} ref={popupRef}>
-        {content && arrow && <div data-popper-arrow className={`${prefixCls}__arrow`} />}
+    <Transition in={popupVisible} nodeRef={popupRef} animation={getAnimationName()}>
+      <div
+        {...otherProps}
+        className={cls}
+        ref={setPopupNodeRef}
+        style={popupInlineStyle}>
+        {content && arrow && (
+          <div data-popper-arrow className={`${prefixCls}__arrow`} />
+        )}
         {content}
       </div>
     </Transition>
diff --git a/packages/react/src/popup/style/index.scss b/packages/react/src/popup/style/index.scss
index 6687dd83..6ca2d557 100755
--- a/packages/react/src/popup/style/index.scss
+++ b/packages/react/src/popup/style/index.scss
@@ -2,12 +2,15 @@
 
 .#{$prefix}-popup {
   box-sizing: border-box;
-  border-radius: var(--ty-popup-radius);
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: var(--ty-popup-radius, var(--ty-border-radius));
   white-space: nowrap;
-  font-size: var(--ty-popup-font-size);
+  font-size: var(--ty-popup-font-size, var(--ty-font-size-base));
   text-align: left;
-  box-shadow: var(--ty-popup-shadow);
-  z-index: var(--ty-popup-z-index);
+  box-shadow: var(--ty-popup-shadow, var(--ty-shadow-popup));
+  z-index: var(--ty-popup-z-index, 999);
 
   &__arrow, &__arrow::before {
     width: var(--ty-popover-arrow-size);
@@ -22,21 +25,21 @@
   }
 
   &_light {
-    background-color: var(--ty-popup-light-bg);
-    color: var(--ty-popup-color-light);
+    background-color: var(--ty-popup-light-bg, var(--ty-color-bg-container));
+    color: var(--ty-popup-color-light, var(--ty-color-text-secondary));
     .#{$prefix}-popup {
       &__arrow::before {
-        background: var(--ty-popup-light-bg);
+        background: var(--ty-popup-light-bg, var(--ty-color-bg-container));
       }
     }
   }
 
   &_dark {
-    background-color: var(--ty-popup-dark-bg);
-    color: var(--ty-popup-color-dark);
+    background-color: var(--ty-popup-dark-bg, #262626);
+    color: var(--ty-popup-color-dark, #fff);
     .#{$prefix}-popup {
       &__arrow::before {
-        background: var(--ty-popup-dark-bg);
+        background: var(--ty-popup-dark-bg, #262626);
       }
     }
   }
@@ -46,7 +49,7 @@
       bottom: calc(var(--ty-popover-arrow-size) / -2);
 
       &::before {
-        box-shadow: 3px 3px 7px var(--ty-popup-arrow-shadow);
+        box-shadow: 3px 3px 7px var(--ty-popup-arrow-shadow, rgb(0 0 0 / 7%));
       }
     }
   }
@@ -56,7 +59,7 @@
       top: calc(var(--ty-popover-arrow-size) / -2);
 
       &::before {
-        box-shadow: -2px -2px 5px var(--ty-popup-arrow-shadow);
+        box-shadow: -2px -2px 5px var(--ty-popup-arrow-shadow, rgb(0 0 0 / 7%));
       }
     }
   }
@@ -66,7 +69,7 @@
       right: calc(var(--ty-popover-arrow-size) / -2);
 
       &::before {
-        box-shadow: 3px -3px 7px var(--ty-popup-arrow-shadow);
+        box-shadow: 3px -3px 7px var(--ty-popup-arrow-shadow, rgb(0 0 0 / 7%));
       }
     }
   }
@@ -76,7 +79,7 @@
       left: calc(var(--ty-popover-arrow-size) / -2);
 
       &::before {
-        box-shadow: -3px 3px 7px var(--ty-popup-arrow-shadow);
+        box-shadow: -3px 3px 7px var(--ty-popup-arrow-shadow, rgb(0 0 0 / 7%));
       }
     }
   }
diff --git a/packages/react/src/select/__tests__/select.test.tsx b/packages/react/src/select/__tests__/select.test.tsx
index fa5dffc7..458b4570 100644
--- a/packages/react/src/select/__tests__/select.test.tsx
+++ b/packages/react/src/select/__tests__/select.test.tsx
@@ -190,6 +190,29 @@ describe('<Select />', () => {
     expect(options[0]).toHaveTextContent('Banana');
   });
 
+  it('should start searching when typing immediately after opening', () => {
+    const { container } = render(
+      <Select showSearch>
+        <Option value="a">Apple</Option>
+        <Option value="b">Banana</Option>
+        <Option value="c">Cherry</Option>
+      </Select>
+    );
+
+    const selector = container.querySelector('.ty-select__selector') as HTMLElement;
+    const selectEl = container.firstChild as HTMLElement;
+
+    fireEvent.click(selector);
+    fireEvent.keyDown(selectEl, { key: 'b' });
+
+    const searchInput = container.querySelector('.ty-select__search') as HTMLInputElement;
+    expect(searchInput.value).toBe('b');
+
+    const options = getOptions();
+    expect(options.length).toBe(1);
+    expect(options[0]).toHaveTextContent('Banana');
+  });
+
   // Keyboard
   it('should navigate with arrow keys and select with Enter', () => {
     const onChange = jest.fn();
@@ -206,6 +229,27 @@ describe('<Select />', () => {
     expect(onChange).toHaveBeenCalledWith('b', expect.objectContaining({ value: 'b' }));
   });
 
+  it('should expose combobox aria relationships when navigating options', () => {
+    const { container } = render(
+      <Select
+        options={[
+          { value: 'a', label: 'Apple' },
+          { value: 'b', label: 'Banana' },
+        ]}
+      />
+    );
+
+    const selectEl = container.firstChild as HTMLElement;
+    fireEvent.keyDown(selectEl, { key: 'ArrowDown' });
+
+    const listboxId = selectEl.getAttribute('aria-controls');
+    expect(listboxId).toBeTruthy();
+    expect(selectEl).toHaveAttribute('aria-haspopup', 'listbox');
+    expect(selectEl).toHaveAttribute('aria-expanded', 'true');
+    expect(selectEl).toHaveAttribute('aria-activedescendant', `${listboxId}-option-0`);
+    expect(document.getElementById(`${listboxId}-option-0`)).toHaveTextContent('Apple');
+  });
+
   it('should close on Escape', () => {
     const { container } = render(
       <Select defaultOpen>
@@ -440,7 +484,9 @@ describe('<Select />', () => {
     });
 
     fireEvent.click(selector);
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
 
     const dropdown = document.querySelector('.ty-select__dropdown') as HTMLElement;
     expect(dropdown.scrollTop).toBe(400);
@@ -462,7 +508,9 @@ describe('<Select />', () => {
     const selector = container.querySelector('.ty-select__selector') as HTMLElement;
     fireEvent.click(selector);
 
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
 
     const dropdown = document.querySelector('.ty-select__dropdown') as HTMLElement;
     expect(dropdown.scrollTop).toBe(0);
diff --git a/packages/react/src/select/demo/Basic.tsx b/packages/react/src/select/demo/Basic.tsx
index 732b7ab8..3d0963ed 100644
--- a/packages/react/src/select/demo/Basic.tsx
+++ b/packages/react/src/select/demo/Basic.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 import { Select } from '@tiny-design/react';
+import type { SelectValue } from '../types';
 
 export default function BasicDemo() {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState<SelectValue>('');
 
   return (
     <div style={{ width: 240 }}>
       <Select
         placeholder="Select a fruit"
         value={value}
-        onChange={(val) => setValue(val)}
+        onChange={setValue}
       >
         <Select.Option value="apple">Apple</Select.Option>
         <Select.Option value="banana">Banana</Select.Option>
@@ -18,4 +19,4 @@ export default function BasicDemo() {
       </Select>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/select/demo/Groups.tsx b/packages/react/src/select/demo/Groups.tsx
index 036c23c0..64fa37c2 100644
--- a/packages/react/src/select/demo/Groups.tsx
+++ b/packages/react/src/select/demo/Groups.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 import { Select } from '@tiny-design/react';
+import type { SelectValue } from '../types';
 
 export default function GroupsDemo() {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState<SelectValue>('');
 
   return (
     <div style={{ width: 240 }}>
       <Select
         placeholder="Select a food"
         value={value}
-        onChange={(val) => setValue(val)}
+        onChange={setValue}
       >
         <Select.OptGroup label="Fruits">
           <Select.Option value="apple">Apple</Select.Option>
@@ -24,4 +25,4 @@ export default function GroupsDemo() {
       </Select>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/select/demo/Multiple.tsx b/packages/react/src/select/demo/Multiple.tsx
index b1524728..28557648 100644
--- a/packages/react/src/select/demo/Multiple.tsx
+++ b/packages/react/src/select/demo/Multiple.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Select } from '@tiny-design/react';
+import type { SelectValue } from '../types';
 
 export default function MultipleDemo() {
-  const [value, setValue] = React.useState(['apple', 'cherry']);
+  const [value, setValue] = React.useState<SelectValue>(['apple', 'cherry']);
 
   return (
     <div style={{ width: 360 }}>
@@ -11,7 +12,7 @@ export default function MultipleDemo() {
         showSearch
         placeholder="Select fruits"
         value={value}
-        onChange={(val) => setValue(val)}
+        onChange={setValue}
         allowClear
       >
         <Select.Option value="apple">Apple</Select.Option>
@@ -22,4 +23,4 @@ export default function MultipleDemo() {
       </Select>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/select/demo/Search.tsx b/packages/react/src/select/demo/Search.tsx
index 396a7d3f..f1610013 100644
--- a/packages/react/src/select/demo/Search.tsx
+++ b/packages/react/src/select/demo/Search.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Select } from '@tiny-design/react';
+import type { SelectValue } from '../types';
 
 export default function SearchDemo() {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState<SelectValue>('');
 
   return (
     <div style={{ width: 240 }}>
@@ -10,7 +11,7 @@ export default function SearchDemo() {
         showSearch
         placeholder="Search and select"
         value={value}
-        onChange={(val) => setValue(val)}
+        onChange={setValue}
       >
         <Select.Option value="apple">Apple</Select.Option>
         <Select.Option value="banana">Banana</Select.Option>
@@ -21,4 +22,4 @@ export default function SearchDemo() {
       </Select>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/select/select.tsx b/packages/react/src/select/select.tsx
index e58d8577..2c4ffb12 100644
--- a/packages/react/src/select/select.tsx
+++ b/packages/react/src/select/select.tsx
@@ -218,6 +218,24 @@ const Select = (props: SelectProps): React.ReactElement => {
   const handleKeyDown = (e: React.KeyboardEvent): void => {
     if (disabled) return;
 
+    const isSearchPrintableKey =
+      showSearch &&
+      e.key.length === 1 &&
+      !e.ctrlKey &&
+      !e.metaKey &&
+      !e.altKey;
+
+    if (isSearchPrintableKey && e.target !== searchInputRef.current) {
+      e.preventDefault();
+      if (!combo.isOpen) {
+        combo.openDropdown();
+      }
+      const nextSearchValue = `${searchValue}${e.key}`;
+      setSearchValue(nextSearchValue);
+      onSearch?.(nextSearchValue);
+      return;
+    }
+
     if (e.key === 'Backspace' && isMultiple && !searchValue) {
       const arr = Array.isArray(selectVal) ? selectVal : [];
       if (arr.length > 0) {
@@ -229,6 +247,22 @@ const Select = (props: SelectProps): React.ReactElement => {
       return;
     }
 
+    if (
+      showSearch &&
+      e.key === 'Backspace' &&
+      e.target !== searchInputRef.current &&
+      searchValue
+    ) {
+      e.preventDefault();
+      const nextSearchValue = searchValue.slice(0, -1);
+      setSearchValue(nextSearchValue);
+      onSearch?.(nextSearchValue);
+      if (!combo.isOpen) {
+        combo.openDropdown();
+      }
+      return;
+    }
+
     if (e.key === ' ') {
       if (!combo.isOpen) {
         e.preventDefault();
@@ -308,9 +342,12 @@ const Select = (props: SelectProps): React.ReactElement => {
   const renderDropdownContent = (): React.ReactNode => {
     if (loading) {
       return (
-        <div className={`${prefixCls}__loading`}>
+        <li
+          className={`${prefixCls}__loading`}
+          role="option"
+          aria-disabled="true">
           <LoadingCircle size={20} />
-        </div>
+        </li>
       );
     }
 
@@ -337,6 +374,7 @@ const Select = (props: SelectProps): React.ReactElement => {
           return (
             <li
               key={opt.value}
+              id={`${listboxId}-option-${index}`}
               role="option"
               className={optCls}
               aria-selected={isSelected}
@@ -360,9 +398,12 @@ const Select = (props: SelectProps): React.ReactElement => {
     const contentArray = React.Children.toArray(content);
     if (!contentArray || contentArray.length === 0) {
       return (
-        <div className={`${prefixCls}__empty`}>
+        <li
+          className={`${prefixCls}__empty`}
+          role="option"
+          aria-disabled="true">
           {notFoundContent ?? 'No data'}
-        </div>
+        </li>
       );
     }
 
@@ -468,7 +509,13 @@ const Select = (props: SelectProps): React.ReactElement => {
       role="combobox"
       aria-expanded={combo.isOpen}
       aria-haspopup="listbox"
+      aria-controls={combo.isOpen ? listboxId : undefined}
       aria-owns={combo.isOpen ? listboxId : undefined}
+      aria-activedescendant={
+        combo.isOpen && combo.focusedIndex >= 0
+          ? `${listboxId}-option-${combo.focusedIndex}`
+          : undefined
+      }
       onKeyDown={handleKeyDown}
       tabIndex={disabled ? undefined : 0}>
       <Popup
diff --git a/packages/react/src/table/__tests__/table.test.tsx b/packages/react/src/table/__tests__/table.test.tsx
index d2514e01..cd5eacd7 100644
--- a/packages/react/src/table/__tests__/table.test.tsx
+++ b/packages/react/src/table/__tests__/table.test.tsx
@@ -72,6 +72,59 @@ describe('<Table />', () => {
     expect(onChange).toHaveBeenCalled();
   });
 
+  it('should sync controlled selectedRowKeys when parent clears selection', () => {
+    const ControlledTable = () => {
+      const [selectedRowKeys, setSelectedRowKeys] = React.useState<React.Key[]>(['1']);
+      return (
+        <>
+          <Table
+            columns={columns}
+            dataSource={dataSource}
+            pagination={false}
+            rowSelection={{ selectedRowKeys, onChange: setSelectedRowKeys }}
+          />
+          <button onClick={() => setSelectedRowKeys([])}>clear</button>
+        </>
+      );
+    };
+
+    const { container, getByText } = render(<ControlledTable />);
+    expect(container.querySelectorAll('input[type="checkbox"]')[1]).toBeChecked();
+
+    fireEvent.click(getByText('clear'));
+
+    expect(container.querySelectorAll('input[type="checkbox"]')[1]).not.toBeChecked();
+  });
+
+  it('should sync controlled pagination current from parent updates', () => {
+    const ControlledPaginationTable = () => {
+      const [current, setCurrent] = React.useState(1);
+      return (
+        <>
+          <Table
+            columns={columns}
+            dataSource={[
+              ...dataSource,
+              { key: '4', name: 'David', age: 22 },
+              { key: '5', name: 'Eve', age: 28 },
+            ]}
+            pagination={{ current, pageSize: 2 }}
+          />
+          <button onClick={() => setCurrent(2)}>page-2</button>
+        </>
+      );
+    };
+
+    const { getByText, queryByText } = render(<ControlledPaginationTable />);
+    expect(getByText('Alice')).toBeInTheDocument();
+    expect(queryByText('Charlie')).not.toBeInTheDocument();
+
+    fireEvent.click(getByText('page-2'));
+
+    expect(getByText('Charlie')).toBeInTheDocument();
+    expect(queryByText('Alice')).not.toBeInTheDocument();
+  });
+
   it('should show loading state', () => {
     const { getByText } = render(<Table columns={columns} dataSource={dataSource} loading />);
     expect(getByText('Loading...')).toBeInTheDocument();
diff --git a/packages/react/src/table/table.tsx b/packages/react/src/table/table.tsx
index 0375ba62..11662723 100644
--- a/packages/react/src/table/table.tsx
+++ b/packages/react/src/table/table.tsx
@@ -69,11 +69,17 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((props, ref) => {
   );
 
   useEffect(() => {
-    if (rowSelection?.selectedRowKeys) {
+    if (rowSelection?.selectedRowKeys !== undefined) {
       setSelectedKeys(rowSelection.selectedRowKeys);
     }
   }, [rowSelection?.selectedRowKeys]);
 
+  useEffect(() => {
+    if (pagination && typeof pagination === 'object' && pagination.current !== undefined) {
+      setCurrentPage(pagination.current);
+    }
+  }, [pagination]);
+
   // Initialize default sort
   useEffect(() => {
     for (const col of columns) {
diff --git a/packages/react/src/time-picker/__tests__/__snapshots__/time-picker.test.tsx.snap b/packages/react/src/time-picker/__tests__/__snapshots__/time-picker.test.tsx.snap
index d5806435..0192a1a7 100644
--- a/packages/react/src/time-picker/__tests__/__snapshots__/time-picker.test.tsx.snap
+++ b/packages/react/src/time-picker/__tests__/__snapshots__/time-picker.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`<TimePicker /> should match the snapshot 1`] = `
         class="ty-time-picker__input-field"
         placeholder="Select time"
         readonly=""
+        role="combobox"
         value="10:30:00"
       />
       <span
diff --git a/packages/react/src/time-picker/__tests__/time-picker.test.tsx b/packages/react/src/time-picker/__tests__/time-picker.test.tsx
index 0f61c2eb..c1c0a413 100644
--- a/packages/react/src/time-picker/__tests__/time-picker.test.tsx
+++ b/packages/react/src/time-picker/__tests__/time-picker.test.tsx
@@ -98,6 +98,18 @@ describe('<TimePicker />', () => {
     });
   });
 
+  it('should expose combobox dialog semantics and open with keyboard', () => {
+    const { container } = render(<TimePicker />);
+    const input = container.querySelector('input') as HTMLInputElement;
+
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    expect(input).toHaveAttribute('role', 'combobox');
+    expect(input).toHaveAttribute('aria-expanded', 'true');
+    expect(input).toHaveAttribute('aria-controls');
+    expect(document.getElementById(input.getAttribute('aria-controls') || '')).toHaveAttribute('role', 'dialog');
+  });
+
   it('should clear value on clear button click', () => {
     const fn = jest.fn();
     const { container } = render(
diff --git a/packages/react/src/time-picker/demo/Basic.tsx b/packages/react/src/time-picker/demo/Basic.tsx
index 63984953..b79ae090 100644
--- a/packages/react/src/time-picker/demo/Basic.tsx
+++ b/packages/react/src/time-picker/demo/Basic.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import { TimePicker } from '@tiny-design/react';
 
 export default function BasicDemo() {
-  const [time, setTime] = React.useState(new Date());
+  const [time, setTime] = React.useState<Date | undefined>(new Date());
   return (
     <TimePicker
       value={time}
-      onChange={(t) => setTime(t)}
+      onChange={(t) => setTime(t ?? undefined)}
     />
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/time-picker/demo/Controlled.tsx b/packages/react/src/time-picker/demo/Controlled.tsx
index 49355e28..93ddcc94 100644
--- a/packages/react/src/time-picker/demo/Controlled.tsx
+++ b/packages/react/src/time-picker/demo/Controlled.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 import { TimePicker, Space, Button } from '@tiny-design/react';
 
 export default function ControlledDemo() {
-  const [time, setTime] = React.useState(new Date(2024, 0, 1, 9, 0, 0));
+  const [time, setTime] = React.useState<Date | undefined>(new Date(2024, 0, 1, 9, 0, 0));
   return (
     <Space>
-      <TimePicker value={time} onChange={(t) => setTime(t)} />
+      <TimePicker value={time} onChange={(t) => setTime(t ?? undefined)} />
       <Button size="sm" onClick={() => setTime(new Date())}>Now</Button>
-      <Button size="sm" onClick={() => setTime(null)}>Clear</Button>
+      <Button size="sm" onClick={() => setTime(undefined)}>Clear</Button>
     </Space>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/time-picker/demo/ExtraFooter.tsx b/packages/react/src/time-picker/demo/ExtraFooter.tsx
index ea56a20c..42b3700a 100644
--- a/packages/react/src/time-picker/demo/ExtraFooter.tsx
+++ b/packages/react/src/time-picker/demo/ExtraFooter.tsx
@@ -5,7 +5,7 @@ export default function ExtraFooterDemo() {
   const [time, setTime] = React.useState<Date | null>(null);
   return (
     <TimePicker
-      value={time}
+      value={time ?? undefined}
       onChange={setTime}
       placeholder="With footer"
       renderExtraFooter={() => (
@@ -18,4 +18,4 @@ export default function ExtraFooterDemo() {
       )}
     />
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/time-picker/time-picker.tsx b/packages/react/src/time-picker/time-picker.tsx
index b575f7d4..f39adefc 100644
--- a/packages/react/src/time-picker/time-picker.tsx
+++ b/packages/react/src/time-picker/time-picker.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef, useCallback, useContext, useMemo } from 'react';
+import { useEffect, useState, useRef, useCallback, useContext, useMemo, useId } from 'react';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
@@ -87,6 +87,7 @@ const TimePicker = (props: TimePickerProps): React.ReactElement => {
   const [open, setOpen] = useState(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const popupId = useId();
 
   const isOpen = controlledOpen ?? open;
 
@@ -182,7 +183,12 @@ const TimePicker = (props: TimePickerProps): React.ReactElement => {
   });
 
   const renderOverlay = () => (
-    <div className={`${prefixCls}__dropdown`} ref={dropdownRef}>
+    <div
+      id={popupId}
+      role="dialog"
+      aria-modal="false"
+      className={`${prefixCls}__dropdown`}
+      ref={dropdownRef}>
       <div className={`${prefixCls}__panel`}>
         <TimePanel
           prefixCls={prefixCls}
@@ -219,7 +225,11 @@ const TimePicker = (props: TimePickerProps): React.ReactElement => {
       <div className={`${prefixCls}__footer`}>
         {renderExtraFooter && <div className={`${prefixCls}__extra-footer`}>{renderExtraFooter()}</div>}
         <div className={`${prefixCls}__footer-actions`}>
-          {showNow && <a className={`${prefixCls}__now-btn`} onClick={handleNow}>{locale.TimePicker.now}</a>}
+          {showNow && (
+            <button type="button" className={`${prefixCls}__now-btn`} onClick={handleNow}>
+              {locale.TimePicker.now}
+            </button>
+          )}
           <button type="button" className={`${prefixCls}__ok-btn`} onClick={handleOk}>{locale.TimePicker.okText}</button>
         </div>
       </div>
@@ -244,9 +254,16 @@ const TimePicker = (props: TimePickerProps): React.ReactElement => {
             disabled={disabled}
             placeholder={placeholder}
             value={displayValue}
+            role="combobox"
             aria-expanded={isOpen}
             aria-haspopup="dialog"
+            aria-controls={isOpen ? popupId : undefined}
             onKeyDown={(e) => {
+              if ((e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') && !isOpen) {
+                e.preventDefault();
+                toggleOpen(true);
+                return;
+              }
               if (e.key === 'Escape' && isOpen) toggleOpen(false);
             }}
           />
diff --git a/packages/react/src/tour/__tests__/tour.test.tsx b/packages/react/src/tour/__tests__/tour.test.tsx
index c61359fd..e167e288 100644
--- a/packages/react/src/tour/__tests__/tour.test.tsx
+++ b/packages/react/src/tour/__tests__/tour.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import Tour from '../index';
 import { TourStepProps } from '../types';
 import ConfigProvider from '../../config-provider';
@@ -28,6 +28,16 @@ describe('<Tour />', () => {
     expect(getByText('Description 1')).toBeInTheDocument();
   });
 
+  it('should expose aria relationships for step title and description', () => {
+    render(<Tour open steps={steps} />);
+
+    const dialog = document.querySelector('.ty-tour') as HTMLElement;
+    expect(dialog).toHaveAttribute('aria-labelledby');
+    expect(dialog).toHaveAttribute('aria-describedby');
+    expect(document.getElementById(dialog.getAttribute('aria-labelledby') || '')).toHaveTextContent('Step 1');
+    expect(document.getElementById(dialog.getAttribute('aria-describedby') || '')).toHaveTextContent('Description 1');
+  });
+
   it('should navigate to next step', () => {
     const onChange = jest.fn();
     const { getByText } = render(<Tour open steps={steps} onChange={onChange} />);
@@ -95,6 +105,35 @@ describe('<Tour />', () => {
     expect(onClose).toHaveBeenCalled();
   });
 
+  it('should ignore keyboard events when keyboard is disabled', () => {
+    const onClose = jest.fn();
+    render(<Tour open steps={steps} keyboard={false} onClose={onClose} />);
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('should focus the panel when opened and restore focus on close', async () => {
+    const trigger = document.createElement('button');
+    trigger.textContent = 'trigger';
+    document.body.appendChild(trigger);
+    trigger.focus();
+
+    const { rerender } = render(<Tour open steps={[{ title: 'Centered' }]} />);
+
+    await waitFor(() => {
+      const closeBtn = document.querySelector('.ty-tour__close-btn') as HTMLElement | null;
+      expect(closeBtn).toHaveFocus();
+    });
+
+    rerender(<Tour open={false} steps={[{ title: 'Centered' }]} />);
+
+    await waitFor(() => {
+      expect(trigger).toHaveFocus();
+    });
+
+    document.body.removeChild(trigger);
+  });
+
   it('should center panel when no target', () => {
     const { baseElement } = render(<Tour open steps={[{ title: 'Centered' }]} />);
     expect(
diff --git a/packages/react/src/tour/tour-panel.tsx b/packages/react/src/tour/tour-panel.tsx
index df49e4a8..2489a38a 100644
--- a/packages/react/src/tour/tour-panel.tsx
+++ b/packages/react/src/tour/tour-panel.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Button from '../button/button';
+import { Close } from '../_utils/components';
 import { TourStepProps } from './types';
 
 export interface TourPanelProps {
@@ -8,6 +9,8 @@ export interface TourPanelProps {
   total: number;
   type: 'default' | 'primary';
   prefixCls: string;
+  titleId: string;
+  descriptionId: string;
   prevButtonText: string;
   nextButtonText: string;
   finishButtonText: string;
@@ -24,6 +27,8 @@ const TourPanel = React.forwardRef<HTMLDivElement, TourPanelProps>((props, ref)
     total,
     type,
     prefixCls,
+    titleId,
+    descriptionId,
     prevButtonText,
     nextButtonText,
     finishButtonText,
@@ -68,11 +73,15 @@ const TourPanel = React.forwardRef<HTMLDivElement, TourPanelProps>((props, ref)
         className={`${prefixCls}__close-btn`}
         onClick={onClose}
         aria-label="Close">
-        ✕
+        <Close size={12} />
       </button>
       {step.cover && <div className={`${prefixCls}__cover`}>{step.cover}</div>}
-      {step.title && <div className={`${prefixCls}__title`}>{step.title}</div>}
-      {step.description && <div className={`${prefixCls}__description`}>{step.description}</div>}
+      {step.title && <div id={titleId} className={`${prefixCls}__title`}>{step.title}</div>}
+      {step.description && (
+        <div id={descriptionId} className={`${prefixCls}__description`}>
+          {step.description}
+        </div>
+      )}
       <div className={`${prefixCls}__footer`}>
         {renderIndicators()}
         <div className={`${prefixCls}__actions`}>
diff --git a/packages/react/src/tour/tour.tsx b/packages/react/src/tour/tour.tsx
index 244e763f..059d7499 100644
--- a/packages/react/src/tour/tour.tsx
+++ b/packages/react/src/tour/tour.tsx
@@ -49,6 +49,8 @@ const Tour = React.forwardRef<HTMLDivElement, TourProps>((props, ref) => {
   const cls = classNames(prefixCls, className);
   const gap = { ...DEFAULT_GAP, ...gapProp };
   const maskId = useId();
+  const titleId = useId();
+  const descriptionId = useId();
 
   const [internalCurrent, setInternalCurrent] = useState(0);
   const current = currentProp ?? internalCurrent;
@@ -57,6 +59,7 @@ const Tour = React.forwardRef<HTMLDivElement, TourProps>((props, ref) => {
 
   const panelRef = useRef<HTMLDivElement>(null);
   const popperRef = useRef<Instance | null>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
 
   const currentStep = steps[current];
   const stepPlacement = currentStep?.placement ?? globalPlacement;
@@ -191,6 +194,30 @@ const Tour = React.forwardRef<HTMLDivElement, TourProps>((props, ref) => {
     return acquireScrollLock(resolveTargetContainer(configContext));
   }, [configContext, open]);
 
+  useEffect(() => {
+    if (!open || !panelVisible) return undefined;
+
+    previousFocusRef.current = document.activeElement as HTMLElement;
+
+    const frameId = requestAnimationFrame(() => {
+      const panel = panelRef.current;
+      if (!panel) return;
+      const focusable = panel.querySelector<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusable) {
+        focusable.focus();
+      } else {
+        panel.focus();
+      }
+    });
+
+    return () => {
+      cancelAnimationFrame(frameId);
+      previousFocusRef.current?.focus();
+    };
+  }, [open, panelVisible, current]);
+
   // Keyboard navigation
   useEffect(() => {
     if (!open || !keyboard) return undefined;
@@ -241,11 +268,19 @@ const Tour = React.forwardRef<HTMLDivElement, TourProps>((props, ref) => {
   if (!open || !currentStep) return null;
 
   const hasTarget = !!resolveTarget(currentStep.target);
-  const ariaLabel = typeof currentStep.title === 'string' ? currentStep.title : 'Tour';
+  const ariaLabel = currentStep.title ? undefined : 'Tour';
 
   return (
     <Portal>
-      <div ref={ref} className={cls} style={{ ...style, zIndex }} role="dialog" aria-modal="true" aria-label={ariaLabel}>
+      <div
+        ref={ref}
+        className={cls}
+        style={{ ...style, zIndex }}
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+        aria-labelledby={currentStep.title ? titleId : undefined}
+        aria-describedby={currentStep.description ? descriptionId : undefined}>
         {stepMask && (
           <TourMask
             maskId={maskId}
@@ -269,6 +304,7 @@ const Tour = React.forwardRef<HTMLDivElement, TourProps>((props, ref) => {
               [`${prefixCls}__panel-wrapper`]: true,
               [`${prefixCls}__panel-wrapper_centered`]: !hasTarget,
             })}
+            tabIndex={-1}
             style={{ zIndex: zIndex + 1 }}
             onClick={(e) => e.stopPropagation()}>
             {stepArrow && hasTarget && (
@@ -280,6 +316,8 @@ const Tour = React.forwardRef<HTMLDivElement, TourProps>((props, ref) => {
               total={steps.length}
               type={type}
               prefixCls={prefixCls}
+              titleId={titleId}
+              descriptionId={descriptionId}
               prevButtonText={locale.Tour.prevText}
               nextButtonText={locale.Tour.nextText}
               finishButtonText={locale.Tour.finishText}
diff --git a/packages/react/src/transfer/__tests__/transfer.test.tsx b/packages/react/src/transfer/__tests__/transfer.test.tsx
index 38df803d..b9e4eb74 100644
--- a/packages/react/src/transfer/__tests__/transfer.test.tsx
+++ b/packages/react/src/transfer/__tests__/transfer.test.tsx
@@ -1,4 +1,5 @@
-import { render } from '@testing-library/react';
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
 import Transfer from '../index';
 
 describe('<Transfer />', () => {
@@ -22,4 +23,26 @@ describe('<Transfer />', () => {
     const { container } = render(<Transfer dataSource={dataSource} />);
     expect(container.querySelectorAll('.ty-transfer-panel').length).toBe(2);
   });
+
+  it('should not clear panel selection on unrelated parent rerenders in controlled mode', () => {
+    const ControlledTransfer = () => {
+      const [tick, setTick] = React.useState(0);
+      return (
+        <>
+          <Transfer dataSource={dataSource} value={['3']} />
+          <button onClick={() => setTick((n) => n + 1)}>rerender-{tick}</button>
+        </>
+      );
+    };
+
+    const { container, getByText } = render(<ControlledTransfer />);
+    const checkboxes = container.querySelectorAll('.ty-transfer-panel input[type="checkbox"]');
+
+    fireEvent.click(checkboxes[1]);
+    expect(checkboxes[1]).toBeChecked();
+
+    fireEvent.click(getByText('rerender-0'));
+
+    expect(container.querySelectorAll('.ty-transfer-panel input[type="checkbox"]')[1]).toBeChecked();
+  });
 });
diff --git a/packages/react/src/transfer/transfer.tsx b/packages/react/src/transfer/transfer.tsx
index e31d5c53..f28df957 100644
--- a/packages/react/src/transfer/transfer.tsx
+++ b/packages/react/src/transfer/transfer.tsx
@@ -28,6 +28,7 @@ const Transfer = React.forwardRef<HTMLDivElement, TransferProps>(
     const configContext = useContext(ConfigContext);
     const prefixCls = getPrefixCls('transfer', configContext.prefixCls, customisedCls);
     const cls = classNames(prefixCls, className);
+    const controlledValueSignature = (props.value ?? []).join('|');
 
     const getDataKeys = useCallback((): [TransferItem[], TransferItem[]] => {
       const rightKeys: string[] = 'value' in props ? (value as string[]) : defaultValue;
@@ -80,7 +81,7 @@ const Transfer = React.forwardRef<HTMLDivElement, TransferProps>(
 
     useEffect(() => {
       if ('value' in props) {
-        const rightKeys = props.value as string[];
+        const rightKeys = props.value ?? [];
         const rightData: TransferItem[] = dataSource.filter((item) => rightKeys.includes(item.key));
         const leftData: TransferItem[] = dataSource.filter((item) => !rightKeys.includes(item.key));
         setSourceData(leftData);
@@ -88,7 +89,7 @@ const Transfer = React.forwardRef<HTMLDivElement, TransferProps>(
         setLeftCheckedKeys([]);
         setRightCheckedKeys([]);
       }
-    }, [props, dataSource]);
+    }, [controlledValueSignature, dataSource]);
 
     return (
       <div {...otherProps} className={cls} ref={ref}>
diff --git a/packages/react/src/tree/__tests__/tree.test.tsx b/packages/react/src/tree/__tests__/tree.test.tsx
index 04e2a802..9a9b57a4 100644
--- a/packages/react/src/tree/__tests__/tree.test.tsx
+++ b/packages/react/src/tree/__tests__/tree.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import Tree from '../index';
 
 describe('<Tree />', () => {
@@ -30,4 +30,29 @@ describe('<Tree />', () => {
     expect(getByText('Node 1')).toBeInTheDocument();
     expect(getByText('Node 2')).toBeInTheDocument();
   });
+
+  it('should update rendered nodes when data changes', () => {
+    const DynamicTree = () => {
+      const [data, setData] = React.useState(treeData);
+      return (
+        <>
+          <Tree data={data} />
+          <button
+            onClick={() =>
+              setData([
+                ...treeData,
+                { key: '3', title: 'Node 3' },
+              ])
+            }
+          >
+            add-node
+          </button>
+        </>
+      );
+    };
+
+    const { getByText } = render(<DynamicTree />);
+    fireEvent.click(getByText('add-node'));
+    expect(getByText('Node 3')).toBeInTheDocument();
+  });
 });
diff --git a/packages/react/src/tree/tree.tsx b/packages/react/src/tree/tree.tsx
index 4f0578b5..a1599f5d 100644
--- a/packages/react/src/tree/tree.tsx
+++ b/packages/react/src/tree/tree.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
@@ -6,12 +6,14 @@ import { TreeProps } from './types';
 import { TreeInstance } from './tree-instance';
 import TreeNode from './tree-node';
 
+const EMPTY_KEYS: string[] = [];
+
 const Tree = React.forwardRef<HTMLUListElement, TreeProps>(
   (props: TreeProps, ref): JSX.Element => {
     const {
       data = [],
-      defaultCheckedKeys = [],
-      defaultExpandedKeys = [],
+      defaultCheckedKeys = EMPTY_KEYS,
+      defaultExpandedKeys = EMPTY_KEYS,
       defaultExpandAll = false,
       indent = 20,
       blockNode = true,
@@ -30,6 +32,16 @@ const Tree = React.forwardRef<HTMLUListElement, TreeProps>(
     );
     const [treeNodes, setTreeNodes] = useState(treeInstance.current.nodes);
 
+    useEffect(() => {
+      treeInstance.current = new TreeInstance(
+        data,
+        defaultCheckedKeys,
+        defaultExpandedKeys,
+        defaultExpandAll
+      );
+      setTreeNodes([...treeInstance.current.nodes]);
+    }, [data, defaultCheckedKeys, defaultExpandedKeys, defaultExpandAll]);
+
     const onCheckboxChange = (key: string, e: React.ChangeEvent<HTMLInputElement>) => {
       const tree = treeInstance.current;
       tree.setNodeChecked(key, e.currentTarget.checked);
diff --git a/packages/react/src/upload/__tests__/upload.test.tsx b/packages/react/src/upload/__tests__/upload.test.tsx
index 7602f9c6..c94d3516 100644
--- a/packages/react/src/upload/__tests__/upload.test.tsx
+++ b/packages/react/src/upload/__tests__/upload.test.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import Upload from '../index';
+import type { UploadFile } from '../types';
 
 describe('<Upload />', () => {
+  const createFile = (name = 'demo.txt') => new File(['hello'], name, { type: 'text/plain' });
+
   it('should match the snapshot', () => {
     const { asFragment } = render(<Upload action="/upload" />);
     expect(asFragment()).toMatchSnapshot();
@@ -22,4 +25,107 @@ describe('<Upload />', () => {
     const { container } = render(<Upload action="/upload" disabled />);
     expect(container.firstChild).toHaveClass('ty-upload_disabled');
   });
+
+  it('should append an uploading file and emit onChange with the latest file list', async () => {
+    const onChange = jest.fn();
+    const httpRequest = jest.fn();
+    const { container } = render(
+      <Upload action="/upload" onChange={onChange} httpRequest={httpRequest} />
+    );
+
+    const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+    fireEvent.change(input, { target: { files: [createFile()] } });
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledTimes(1);
+    });
+
+    const [file, fileList] = onChange.mock.calls[0];
+    expect(file.name).toBe('demo.txt');
+    expect(file.status).toBe('ready');
+    expect(fileList).toHaveLength(1);
+    expect(fileList[0].name).toBe('demo.txt');
+    expect(httpRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it('should respect controlled fileList updates from the parent', () => {
+    const ControlledUpload = () => {
+      const [fileList, setFileList] = React.useState<UploadFile[]>([]);
+      return (
+        <>
+          <Upload
+            action="/upload"
+            fileList={fileList}
+            onChange={(file) => {
+              setFileList((prev) => [...prev, file]);
+            }}
+            httpRequest={jest.fn()}
+          />
+          <button
+            onClick={() =>
+              setFileList([
+                {
+                  uid: 'external',
+                  name: 'server.pdf',
+                  status: 'done',
+                },
+              ])
+            }
+          >
+            sync
+          </button>
+        </>
+      );
+    };
+
+    const { container } = render(<ControlledUpload />);
+    const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { files: [createFile()] } });
+    expect(screen.getByText('demo.txt')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('sync'));
+    expect(screen.queryByText('demo.txt')).not.toBeInTheDocument();
+    expect(screen.getByText('server.pdf')).toBeInTheDocument();
+  });
+
+  it('should remove files and emit the next file list', () => {
+    const onChange = jest.fn();
+    const onRemove = jest.fn();
+    render(
+      <Upload
+        action="/upload"
+        defaultFileList={[
+          { uid: '1', name: 'a.png', status: 'done' },
+          { uid: '2', name: 'b.png', status: 'done' },
+        ]}
+        onChange={onChange}
+        onRemove={onRemove}
+      />
+    );
+
+    fireEvent.click(screen.getByLabelText('Remove a.png'));
+
+    expect(onRemove).toHaveBeenCalledWith(expect.objectContaining({ uid: '1', name: 'a.png' }));
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ uid: '1', name: 'a.png' }),
+      [expect.objectContaining({ uid: '2', name: 'b.png' })]
+    );
+  });
+
+  it('should not upload when beforeUpload returns false', () => {
+    const httpRequest = jest.fn();
+    const { container } = render(
+      <Upload
+        action="/upload"
+        beforeUpload={() => false}
+        httpRequest={httpRequest}
+      />
+    );
+
+    const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+    fireEvent.change(input, { target: { files: [createFile()] } });
+
+    expect(httpRequest).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/react/src/upload/ajax.ts b/packages/react/src/upload/ajax.ts
index 91405b57..441db46f 100644
--- a/packages/react/src/upload/ajax.ts
+++ b/packages/react/src/upload/ajax.ts
@@ -1,17 +1,6 @@
-type AjaxOption = {
-  action: string;
-  file: File;
-  filename: string;
-  method: string;
-  onProgress: (percent: number) => void;
-  onSuccess: (e: ProgressEvent) => void;
-  onError: (e: ProgressEvent) => void;
-  headers?: { [key: string]: string };
-  withCredentials?: boolean;
-  data?: { [key: string]: string };
-};
+import { UploadRequestOption } from './types';
 
-export default function ajax(option: AjaxOption): XMLHttpRequest {
+export default function ajax(option: UploadRequestOption): XMLHttpRequest {
   const { action, file, filename, method, onProgress, onSuccess, onError, headers, withCredentials, data } = option;
   const xhr = new XMLHttpRequest();
   xhr.open(method, action, true);
diff --git a/packages/react/src/upload/index.md b/packages/react/src/upload/index.md
index 2377535b..ad8c7c3f 100644
--- a/packages/react/src/upload/index.md
+++ b/packages/react/src/upload/index.md
@@ -75,13 +75,13 @@ You can drag files to a specific area, to upload. Alternatively, you can also up
 | fileList          | uploaded files                                    | object[]                      | -         |
 | defaultFileList   | default uploaded files                            | object[]                      | -         |
 | limit             | maximum number of uploads allowed	                | number                        | -         |
-| beforeUpload      | hook function before uploading with the file to be uploaded as its parameter. If false or a Promise is returned, uploading will be aborted    | (file: File) => void  | -   |
+| beforeUpload      | hook before uploading. Return `false` to stop, return a `File` to replace the upload file, or return a Promise that resolves to either        | (file: File) => boolean &#124; File &#124; Promise&lt;boolean &#124; File&gt; | -   |
 | onProgress        | hook function when some progress occurs           | (percent: number) => void     | -         |
 | onSuccess         | hook function when uploaded successfully          | (file, fileList) => void      | -         |
 | onError           | hook function when some errors occurs             | (file, fileList) => void      | -         |
 | onChange          | hook function when file status change             | (file, fileList) => void      | -         |
 | onRemove          | hook function when files are removed              | (file) => void                | -         |
 | onExceed          | hook function when limit is exceeded              | (files, fileList) => void     | -         |
-| httpRequest       | override default xhr behavior                     | Function                      | ajax      |
+| httpRequest       | override default xhr behavior                     | (option: UploadRequestOption) => XMLHttpRequest &#124; void | ajax      |
 | style	            | style object of container	object                  | CSSProperties                 | -         |
 | className	        | className of container                            | string                        | -         |
diff --git a/packages/react/src/upload/index.zh_CN.md b/packages/react/src/upload/index.zh_CN.md
index 62b2612c..ccef9ac4 100644
--- a/packages/react/src/upload/index.zh_CN.md
+++ b/packages/react/src/upload/index.zh_CN.md
@@ -75,13 +75,13 @@ import { Upload } from 'tiny-design';
 | fileList          | 已上传的文件列表                                  | object[]                      | -         |
 | defaultFileList   | 默认已上传的文件列表                              | object[]                      | -         |
 | limit             | 允许上传的最大数量                                | number                        | -         |
-| beforeUpload      | 上传前的钩子函数，参数为待上传文件。返回 false 或 Promise 时将中止上传    | (file: File) => void  | -   |
+| beforeUpload      | 上传前的钩子函数。返回 `false` 可中止上传，返回 `File` 可替换上传文件，也可返回 Promise 并解析为这两种结果之一 | (file: File) => boolean &#124; File &#124; Promise&lt;boolean &#124; File&gt; | -   |
 | onProgress        | 上传进度回调钩子                                  | (percent: number) => void     | -         |
 | onSuccess         | 上传成功时的钩子                                  | (file, fileList) => void      | -         |
 | onError           | 上传出错时的钩子                                  | (file, fileList) => void      | -         |
 | onChange          | 文件状态变化时的钩子                              | (file, fileList) => void      | -         |
 | onRemove          | 文件被移除时的钩子                                | (file) => void                | -         |
 | onExceed          | 超出数量限制时的钩子                              | (files, fileList) => void     | -         |
-| httpRequest       | 覆盖默认的 xhr 行为                               | Function                      | ajax      |
+| httpRequest       | 覆盖默认的 xhr 行为                               | (option: UploadRequestOption) => XMLHttpRequest &#124; void | ajax      |
 | style	            | 容器的样式对象                                    | CSSProperties                 | -         |
 | className	        | 容器的类名                                        | string                        | -         |
diff --git a/packages/react/src/upload/style/index.scss b/packages/react/src/upload/style/index.scss
index fe6c27b2..6ebecc90 100644
--- a/packages/react/src/upload/style/index.scss
+++ b/packages/react/src/upload/style/index.scss
@@ -59,8 +59,17 @@
 
   &__upload-list-item-delete {
     display: none;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    background: transparent;
+    color: var(--ty-upload-list-item-delete-color, var(--ty-color-text-tertiary));
     padding-right: var(--ty-upload-list-item-delete-padding-end, 3px);
     cursor: pointer;
+
+    &:hover {
+      color: var(--ty-upload-list-item-delete-color-hover, var(--ty-color-text));
+    }
   }
 
   &__upload-list-item-status,
diff --git a/packages/react/src/upload/types.ts b/packages/react/src/upload/types.ts
index 6924e4b1..d13e9e92 100644
--- a/packages/react/src/upload/types.ts
+++ b/packages/react/src/upload/types.ts
@@ -11,6 +11,19 @@ export interface UploadFile {
   url?: string;
 }
 
+export interface UploadRequestOption {
+  action: string;
+  file: File;
+  filename: string;
+  method: string;
+  onProgress: (percent: number) => void;
+  onSuccess: (e: ProgressEvent) => void;
+  onError: (e: ProgressEvent) => void;
+  headers?: { [key: string]: string };
+  withCredentials?: boolean;
+  data?: { [key: string]: string };
+}
+
 export interface UploadProps extends BaseProps {
   action: string;
   accept?: string;
@@ -26,13 +39,13 @@ export interface UploadProps extends BaseProps {
   limit?: number;
   fileList?: UploadFile[];
   defaultFileList?: UploadFile[];
-  beforeUpload?: (file: File) => boolean | Promise<File>;
+  beforeUpload?: (file: File) => boolean | File | Promise<boolean | File>;
   onProgress?: (percent: number, file: UploadFile, fileList: UploadFile[]) => void;
   onSuccess?: (e: ProgressEvent, file: UploadFile, fileList: UploadFile[]) => void;
   onError?: (e: ProgressEvent, file: UploadFile, fileList: UploadFile[]) => void;
   onChange?: (file: UploadFile, fileList: UploadFile[]) => void;
   onRemove?: (file: UploadFile) => void;
   onExceed?: (files: FileList, fileList: UploadFile[]) => void;
-  httpRequest?: (...args: unknown[]) => void;
+  httpRequest?: (option: UploadRequestOption) => XMLHttpRequest | void;
   children?: React.ReactNode;
 }
diff --git a/packages/react/src/upload/upload-list.tsx b/packages/react/src/upload/upload-list.tsx
index 6c5b8f40..dc15bf57 100755
--- a/packages/react/src/upload/upload-list.tsx
+++ b/packages/react/src/upload/upload-list.tsx
@@ -1,4 +1,4 @@
-import { CheckCircle, CloseCircle, LoadingCircle, PaperClip } from '../_utils/components';
+import { CheckCircle, Close, CloseCircle, LoadingCircle, PaperClip } from '../_utils/components';
 import Progress from '../progress';
 import { UploadFile } from './types';
 
@@ -31,11 +31,13 @@ const UploadList = (props: UploadListProps): JSX.Element => {
                   />
                 )}
               </span>
-              <span
+              <button
+                type="button"
                 className={`${prefixCls}__upload-list-item-delete`}
-                onClick={(): void => onRemove && onRemove(file)}>
-                ✕
-              </span>
+                onClick={(): void => onRemove && onRemove(file)}
+                aria-label={`Remove ${name}`}>
+                <Close size={12} />
+              </button>
             </div>
             {status === 'uploading' && (
               <Progress.Bar
diff --git a/packages/react/src/upload/upload.tsx b/packages/react/src/upload/upload.tsx
index 3045f888..4d4bb492 100644
--- a/packages/react/src/upload/upload.tsx
+++ b/packages/react/src/upload/upload.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
@@ -41,42 +41,70 @@ const Upload = React.forwardRef<HTMLDivElement, UploadProps>((props, ref) => {
     [`${prefixCls}_disabled`]: disabled,
   });
   const fileRef = useRef<HTMLInputElement | null>(null);
+  const fileListRef = useRef<UploadFile[]>([]);
+  const isControlled = Array.isArray(props.fileList);
   const [fileList, setFileList] = useState<UploadFile[]>(
-    'fileList' in props && Array.isArray(props.fileList) ? props.fileList : defaultFileList
+    isControlled ? props.fileList ?? [] : defaultFileList
+  );
+  const mergedFileList = useMemo(
+    () => (isControlled ? props.fileList ?? [] : fileList),
+    [fileList, isControlled, props.fileList]
   );
 
-  const updateFileList = (updateFile: UploadFile, targetObj: Partial<UploadFile>): void => {
-    setFileList((prevState) =>
-      prevState.map((file: UploadFile) => {
-        if (file.uid === updateFile.uid) {
-          return { ...file, ...targetObj };
-        } else {
-          return file;
-        }
-      })
-    );
+  useEffect(() => {
+    fileListRef.current = mergedFileList;
+  }, [mergedFileList]);
+
+  useEffect(() => {
+    if (isControlled) {
+      setFileList(props.fileList ?? []);
+    }
+  }, [isControlled, props.fileList]);
+
+  const setMergedFileList = (
+    nextFileListOrUpdater: UploadFile[] | ((currentFileList: UploadFile[]) => UploadFile[])
+  ): UploadFile[] => {
+    const nextFileList =
+      typeof nextFileListOrUpdater === 'function'
+        ? nextFileListOrUpdater(fileListRef.current)
+        : nextFileListOrUpdater;
+    fileListRef.current = nextFileList;
+    if (!isControlled) {
+      setFileList(nextFileList);
+    }
+    return nextFileList;
+  };
+
+  const updateFileList = (updateFile: UploadFile, targetObj: Partial<UploadFile>): UploadFile[] => {
+    const nextFileList = fileListRef.current.map((file: UploadFile) => {
+      if (file.uid === updateFile.uid) {
+        return { ...file, ...targetObj };
+      }
+      return file;
+    });
+    return setMergedFileList(nextFileList);
   };
 
   const xhrOnProgress = (percent: number, uploadFile: UploadFile): void => {
     const updateObj: Partial<UploadFile> = { percent, status: 'uploading' };
-    updateFileList(uploadFile, updateObj);
-    onProgress && onProgress(percent, { ...uploadFile, ...updateObj }, fileList);
+    const nextFileList = updateFileList(uploadFile, updateObj);
+    onProgress && onProgress(percent, { ...uploadFile, ...updateObj }, nextFileList);
   };
 
   const xhrOnComplete = (e: ProgressEvent, uploadFile: UploadFile): void => {
     const updateObj: Partial<UploadFile> = { status: 'done' };
-    updateFileList(uploadFile, updateObj);
+    const nextFileList = updateFileList(uploadFile, updateObj);
     const updatedUploadFile = { ...uploadFile, ...updateObj };
-    onSuccess && onSuccess(e, updatedUploadFile, fileList);
-    onChange && onChange(updatedUploadFile, fileList);
+    onSuccess && onSuccess(e, updatedUploadFile, nextFileList);
+    onChange && onChange(updatedUploadFile, nextFileList);
   };
 
   const xhrOnError = (e: ProgressEvent, uploadFile: UploadFile): void => {
     const updateObj: Partial<UploadFile> = { status: 'error' };
-    updateFileList(uploadFile, { status: 'error' });
+    const nextFileList = updateFileList(uploadFile, updateObj);
     const updatedUploadFile = { ...uploadFile, ...updateObj };
-    onError && onError(e, updatedUploadFile, fileList);
-    onChange && onChange(updatedUploadFile, fileList);
+    onError && onError(e, updatedUploadFile, nextFileList);
+    onChange && onChange(updatedUploadFile, nextFileList);
   };
 
   const postRequest = (file: File): void => {
@@ -87,7 +115,8 @@ const Upload = React.forwardRef<HTMLDivElement, UploadProps>((props, ref) => {
       status: 'ready',
       percent: 0,
     };
-    setFileList((prevState) => [uploadFile, ...prevState]);
+    const nextFileList = setMergedFileList((currentFileList) => [uploadFile, ...currentFileList]);
+    onChange && onChange(uploadFile, nextFileList);
 
     httpRequest({
       headers,
@@ -104,8 +133,8 @@ const Upload = React.forwardRef<HTMLDivElement, UploadProps>((props, ref) => {
   };
 
   const uploadFiles = (files: FileList): void => {
-    if (limit && fileList.length + files.length > limit) {
-      onExceed && onExceed(files, fileList);
+    if (limit && mergedFileList.length + files.length > limit) {
+      onExceed && onExceed(files, mergedFileList);
       return;
     }
 
@@ -116,7 +145,12 @@ const Upload = React.forwardRef<HTMLDivElement, UploadProps>((props, ref) => {
       } else {
         const res = beforeUpload(file);
         if (res && res instanceof Promise) {
-          res.then((processedFile: File) => postRequest(processedFile));
+          res
+            .then((processedFile: File | boolean) => {
+              if (processedFile === false) return;
+              postRequest(processedFile instanceof File ? processedFile : file);
+            })
+            .catch(() => undefined);
         } else if (res !== false) {
           postRequest(file);
         }
@@ -144,8 +178,11 @@ const Upload = React.forwardRef<HTMLDivElement, UploadProps>((props, ref) => {
   };
 
   const handleOnRemove = (uploadFile: UploadFile): void => {
-    setFileList((prevState) => prevState.filter((file) => file.uid !== uploadFile.uid));
+    const nextFileList = setMergedFileList(
+      fileListRef.current.filter((file) => file.uid !== uploadFile.uid)
+    );
     onRemove && onRemove(uploadFile);
+    onChange && onChange(uploadFile, nextFileList);
   };
 
   return (
@@ -168,7 +205,7 @@ const Upload = React.forwardRef<HTMLDivElement, UploadProps>((props, ref) => {
           onChange={handleFileOnChange}
         />
       </div>
-      <UploadList prefixCls={prefixCls} fileList={fileList} onRemove={handleOnRemove} />
+      <UploadList prefixCls={prefixCls} fileList={mergedFileList} onRemove={handleOnRemove} />
     </>
   );
 });
diff --git a/packages/react/tsconfig.test.json b/packages/react/tsconfig.test.json
index d19a95bf..5eba60c6 100644
--- a/packages/react/tsconfig.test.json
+++ b/packages/react/tsconfig.test.json
@@ -4,6 +4,7 @@
     "noEmit": false,
     "outDir": "./dist",
     "noUnusedLocals": false,
+    "isolatedModules": true,
     "moduleResolution": "node",
     "types": [
       "node",

From 619e69cbdb4bc405018f1338b70527d31ffefcfa Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Fri, 10 Apr 2026 10:06:15 +1000
Subject: [PATCH 08/12] chore: clean up

---
 .../__tests__/autocomplete.test.tsx           |  16 +++
 .../react/src/auto-complete/auto-complete.tsx |   6 +-
 .../src/cascader/__tests__/cascader.test.tsx  |  13 ++
 .../__tests__/color-picker.test.tsx           |  21 ++++
 .../react/src/color-picker/color-picker.tsx   |  21 ++++
 .../src/drawer/__tests__/drawer.test.tsx      |  30 +++++
 packages/react/src/drawer/drawer.tsx          |   7 +-
 .../react/src/modal/__tests__/modal.test.tsx  |  30 +++++
 packages/react/src/modal/modal.tsx            |  19 +--
 .../react/src/table/__tests__/table.test.tsx  | 114 ++++++++++++++++++
 packages/react/src/table/table.tsx            |  28 ++++-
 .../react/src/tour/__tests__/tour.test.tsx    |  21 ++++
 packages/react/src/tour/tour.tsx              |  25 ++--
 .../src/transfer/__tests__/transfer.test.tsx  |  38 ++++++
 .../react/src/transfer/transfer-panel.tsx     |  27 +++--
 .../react/src/tree/__tests__/tree.test.tsx    |  73 +++++++++++
 packages/react/src/tree/tree.tsx              |  47 +++++++-
 .../src/upload/__tests__/upload.test.tsx      |  81 +++++++++++++
 packages/react/src/upload/index.md            |   8 +-
 packages/react/src/upload/index.zh_CN.md      |   8 +-
 packages/react/src/upload/upload.tsx          |   2 +-
 21 files changed, 595 insertions(+), 40 deletions(-)

diff --git a/packages/react/src/auto-complete/__tests__/autocomplete.test.tsx b/packages/react/src/auto-complete/__tests__/autocomplete.test.tsx
index 5765b4ae..b2806306 100644
--- a/packages/react/src/auto-complete/__tests__/autocomplete.test.tsx
+++ b/packages/react/src/auto-complete/__tests__/autocomplete.test.tsx
@@ -195,6 +195,22 @@ describe('<AutoComplete />', () => {
     expect(items[0]).toHaveTextContent('Cherry');
   });
 
+  it('should render empty content as a listbox option when no results match', () => {
+    const { container } = render(
+      <AutoComplete options={options} notFoundContent="No data" />
+    );
+    const input = container.querySelector('input')!;
+    fireEvent.change(input, { target: { value: 'zzz' } });
+
+    const listbox = document.querySelector('.ty-auto-complete__dropdown');
+    const emptyItem = document.querySelector('.ty-auto-complete__empty');
+
+    expect(listbox?.querySelector('li.ty-auto-complete__empty')).toBeInTheDocument();
+    expect(emptyItem).toHaveAttribute('role', 'option');
+    expect(emptyItem).toHaveAttribute('aria-disabled', 'true');
+    expect(emptyItem).toHaveTextContent('No data');
+  });
+
   it('should not select disabled option', () => {
     const onSelect = jest.fn();
     const disabledOptions = [
diff --git a/packages/react/src/auto-complete/auto-complete.tsx b/packages/react/src/auto-complete/auto-complete.tsx
index 311735d0..cda40458 100644
--- a/packages/react/src/auto-complete/auto-complete.tsx
+++ b/packages/react/src/auto-complete/auto-complete.tsx
@@ -113,7 +113,11 @@ const AutoComplete = React.forwardRef<HTMLDivElement, AutoCompleteProps>(
     const renderDropdown = () => {
       if (combo.filteredItems.length === 0) {
         if (notFoundContent) {
-          return <div className={`${prefixCls}__empty`}>{notFoundContent}</div>;
+          return (
+            <li className={`${prefixCls}__empty`} role="option" aria-disabled="true">
+              {notFoundContent}
+            </li>
+          );
         }
         return null;
       }
diff --git a/packages/react/src/cascader/__tests__/cascader.test.tsx b/packages/react/src/cascader/__tests__/cascader.test.tsx
index 0c6b2771..4e75e2db 100644
--- a/packages/react/src/cascader/__tests__/cascader.test.tsx
+++ b/packages/react/src/cascader/__tests__/cascader.test.tsx
@@ -256,4 +256,17 @@ describe('<Cascader />', () => {
       expect(onDropdownVisibleChange).toHaveBeenCalledWith(false);
     });
   });
+
+  it('should keep the dropdown open in controlled mode when Escape requests closing', () => {
+    const onDropdownVisibleChange = jest.fn();
+    const { container } = render(
+      <Cascader options={options} open onDropdownVisibleChange={onDropdownVisibleChange} />
+    );
+
+    const selector = container.querySelector('.ty-cascader__selector') as HTMLElement;
+    fireEvent.keyDown(selector, { key: 'Escape' });
+
+    expect(container.querySelector('.ty-cascader')).toHaveClass('ty-cascader_open');
+    expect(onDropdownVisibleChange).toHaveBeenCalledWith(false);
+  });
 });
diff --git a/packages/react/src/color-picker/__tests__/color-picker.test.tsx b/packages/react/src/color-picker/__tests__/color-picker.test.tsx
index adc76161..273dc9b5 100644
--- a/packages/react/src/color-picker/__tests__/color-picker.test.tsx
+++ b/packages/react/src/color-picker/__tests__/color-picker.test.tsx
@@ -81,6 +81,27 @@ describe('<ColorPicker />', () => {
     });
   });
 
+  it('should move focus into the panel when opened and restore it on close', async () => {
+    const trigger = document.createElement('button');
+    trigger.textContent = 'outside-trigger';
+    document.body.appendChild(trigger);
+    trigger.focus();
+
+    const { container, rerender } = render(<ColorPicker open />);
+
+    await waitFor(() => {
+      expect(document.body.querySelector('.ty-color-picker__format-btn')).toHaveFocus();
+    });
+
+    rerender(<ColorPicker open={false} />);
+
+    await waitFor(() => {
+      expect(trigger).toHaveFocus();
+    });
+
+    document.body.removeChild(trigger);
+  });
+
   it('should render presets', () => {
     render(<ColorPicker open presets={['#ff0000', '#00ff00', '#0000ff']} />);
     const presets = document.body.querySelectorAll('.ty-color-picker__preset');
diff --git a/packages/react/src/color-picker/color-picker.tsx b/packages/react/src/color-picker/color-picker.tsx
index a8b45517..af75e741 100644
--- a/packages/react/src/color-picker/color-picker.tsx
+++ b/packages/react/src/color-picker/color-picker.tsx
@@ -44,6 +44,7 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
   const hueRef = useRef<HTMLDivElement>(null);
   const alphaRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
   const colorRef = useRef<Color>(color);
   const popupId = useId();
 
@@ -76,6 +77,26 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _
     if ('open' in props) setOpen(props.open as boolean);
   }, [props.open]);
 
+  useEffect(() => {
+    if (!isOpen) {
+      previousFocusRef.current?.focus();
+      return;
+    }
+
+    previousFocusRef.current = document.activeElement as HTMLElement;
+    const frameId = requestAnimationFrame(() => {
+      const panel = document.getElementById(popupId);
+      const focusable = panel?.querySelector<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      focusable?.focus();
+    });
+
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [isOpen, popupId]);
+
   const emitChange = useCallback(
     (c: Color, nextFormat: ColorFormat = format) => {
       const formatted = formatColor(c, nextFormat);
diff --git a/packages/react/src/drawer/__tests__/drawer.test.tsx b/packages/react/src/drawer/__tests__/drawer.test.tsx
index 2448355a..0650ba8f 100644
--- a/packages/react/src/drawer/__tests__/drawer.test.tsx
+++ b/packages/react/src/drawer/__tests__/drawer.test.tsx
@@ -71,4 +71,34 @@ describe('<Drawer />', () => {
     expect(document.getElementById(dialog.getAttribute('aria-labelledby') || '')).toHaveTextContent('Filters');
     expect(document.getElementById(dialog.getAttribute('aria-describedby') || '')).toHaveTextContent('Drawer content');
   });
+
+  it('should keep focus inside the drawer across rerenders while visible', async () => {
+    const { rerender } = render(
+      <div>
+        <button>Trigger</button>
+        <Drawer visible closable={false} size={280}>
+          Content
+        </Drawer>
+      </div>
+    );
+
+    const trigger = screen.getByText('Trigger');
+    trigger.focus();
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toHaveFocus();
+    });
+
+    rerender(
+      <div>
+        <button>Trigger</button>
+        <Drawer visible closable={false} size={320}>
+          Content
+        </Drawer>
+      </div>
+    );
+
+    expect(screen.getByRole('dialog')).toHaveFocus();
+    expect(trigger).not.toHaveFocus();
+  });
 });
diff --git a/packages/react/src/drawer/drawer.tsx b/packages/react/src/drawer/drawer.tsx
index ab30c3de..3c23bc09 100755
--- a/packages/react/src/drawer/drawer.tsx
+++ b/packages/react/src/drawer/drawer.tsx
@@ -36,9 +36,12 @@ const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {
     placement === 'top' || placement === 'bottom' ? { height: size } : { width: size };
   const nodeRef = useRef<HTMLDivElement>(null);
   const previousFocusRef = useRef<HTMLElement | null>(null);
+  const onCloseRef = useRef(onClose);
   const titleId = useId();
   const bodyId = useId();
 
+  onCloseRef.current = onClose;
+
   // Focus trap + Escape key
   useEffect(() => {
     if (!visible) return;
@@ -46,7 +49,7 @@ const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {
 
     const handleKeyDown = (e: KeyboardEvent) => {
       if (keyboard && e.key === 'Escape') {
-        onClose?.(e as unknown as React.MouseEvent);
+        onCloseRef.current?.(e as unknown as React.MouseEvent);
         return;
       }
       if (e.key === 'Tab' && nodeRef.current) {
@@ -82,7 +85,7 @@ const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {
       document.removeEventListener('keydown', handleKeyDown);
       previousFocusRef.current?.focus();
     };
-  }, [keyboard, visible, onClose]);
+  }, [keyboard, visible]);
 
   return (
     <Overlay
diff --git a/packages/react/src/modal/__tests__/modal.test.tsx b/packages/react/src/modal/__tests__/modal.test.tsx
index e65af5db..41422fe7 100644
--- a/packages/react/src/modal/__tests__/modal.test.tsx
+++ b/packages/react/src/modal/__tests__/modal.test.tsx
@@ -108,6 +108,36 @@ describe('<Modal />', () => {
     expect(document.getElementById(dialog.getAttribute('aria-describedby') || '')).toHaveTextContent('Modal content');
   });
 
+  it('should keep focus inside the modal across rerenders while visible', async () => {
+    const { rerender } = render(
+      <div>
+        <button>Trigger</button>
+        <Modal visible footer={null} closable={false} style={{ width: 320 }}>
+          Content
+        </Modal>
+      </div>
+    );
+
+    const trigger = screen.getByText('Trigger');
+    trigger.focus();
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toHaveFocus();
+    });
+
+    rerender(
+      <div>
+        <button>Trigger</button>
+        <Modal visible footer={null} closable={false} style={{ width: 360 }}>
+          Content
+        </Modal>
+      </div>
+    );
+
+    expect(screen.getByRole('dialog')).toHaveFocus();
+    expect(trigger).not.toHaveFocus();
+  });
+
   it('should render custom button text', () => {
     const { getByText } = render(<Modal visible confirmText="Yes" cancelText="No">Content</Modal>);
     expect(getByText('Yes')).toBeInTheDocument();
diff --git a/packages/react/src/modal/modal.tsx b/packages/react/src/modal/modal.tsx
index 7520fac4..8dae8e59 100755
--- a/packages/react/src/modal/modal.tsx
+++ b/packages/react/src/modal/modal.tsx
@@ -50,23 +50,28 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
   const cls = classNames(prefixCls, className, { [`${prefixCls}_centered`]: centered });
   const nodeRef = useRef<HTMLDivElement>(null);
   const previousFocusRef = useRef<HTMLElement | null>(null);
+  const onCloseRef = useRef(onCloseProp);
+  const onCancelRef = useRef(onCancelProp);
   const titleId = useId();
   const bodyId = useId();
 
+  onCloseRef.current = onCloseProp;
+  onCancelRef.current = onCancelProp;
+
   const handleCancel = (e: React.MouseEvent): void => {
-    if (onCancelProp) {
-      onCancelProp(e);
+    if (onCancelRef.current) {
+      onCancelRef.current(e);
       return;
     }
-    onCloseProp?.(e);
+    onCloseRef.current?.(e);
   };
 
   const handleClose = (e: React.MouseEvent): void => {
-    if (onCloseProp) {
-      onCloseProp(e);
+    if (onCloseRef.current) {
+      onCloseRef.current(e);
       return;
     }
-    onCancelProp?.(e);
+    onCancelRef.current?.(e);
   };
 
   // Focus trap + Escape key
@@ -113,7 +118,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
       document.removeEventListener('keydown', handleKeyDown);
       previousFocusRef.current?.focus();
     };
-  }, [handleClose, keyboard, visible]);
+  }, [keyboard, visible]);
 
   const renderFooter = (): React.ReactNode => {
     if (React.isValidElement(footer)) {
diff --git a/packages/react/src/table/__tests__/table.test.tsx b/packages/react/src/table/__tests__/table.test.tsx
index cd5eacd7..c93ad2e9 100644
--- a/packages/react/src/table/__tests__/table.test.tsx
+++ b/packages/react/src/table/__tests__/table.test.tsx
@@ -125,6 +125,120 @@ describe('<Table />', () => {
     expect(queryByText('Alice')).not.toBeInTheDocument();
   });
 
+  it('should preserve uncontrolled current page when pagination object rerenders without current', () => {
+    const RerenderingTable = () => {
+      const [version, setVersion] = React.useState(1);
+      return (
+        <>
+          <Table
+            columns={columns}
+            dataSource={[
+              ...dataSource,
+              { key: '4', name: 'David', age: 22 },
+              { key: '5', name: 'Eve', age: 28 },
+            ]}
+            pagination={{ pageSize: 2, showQuickJumper: version > 1 }}
+          />
+          <button onClick={() => setVersion((current) => current + 1)}>rerender</button>
+        </>
+      );
+    };
+
+    const { getByText, queryByText } = render(<RerenderingTable />);
+    fireEvent.click(getByText('2'));
+
+    expect(getByText('Charlie')).toBeInTheDocument();
+    expect(queryByText('Alice')).not.toBeInTheDocument();
+
+    fireEvent.click(getByText('rerender'));
+
+    expect(getByText('Charlie')).toBeInTheDocument();
+    expect(queryByText('Alice')).not.toBeInTheDocument();
+  });
+
+  it('should preserve active sort when columns rerender without changing the chosen sort', () => {
+    const SortingTable = () => {
+      const [wide, setWide] = React.useState(false);
+      return (
+        <>
+          <Table
+            columns={[
+              { title: 'Name', dataIndex: 'name', key: 'name', width: wide ? 180 : 160 },
+              { title: 'Age', dataIndex: 'age', key: 'age', sorter: (a: any, b: any) => a.age - b.age },
+            ]}
+            dataSource={dataSource}
+            pagination={false}
+          />
+          <button onClick={() => setWide((current) => !current)}>rerender</button>
+        </>
+      );
+    };
+
+    const { container, getByText } = render(<SortingTable />);
+    const ageHeader = container.querySelector('.ty-table__cell_sortable');
+    fireEvent.click(ageHeader!);
+
+    let rows = container.querySelectorAll('.ty-table__tbody .ty-table__row');
+    expect(rows[0]).toHaveTextContent(/Bob/);
+
+    fireEvent.click(getByText('rerender'));
+
+    rows = container.querySelectorAll('.ty-table__tbody .ty-table__row');
+    expect(rows[0]).toHaveTextContent(/Bob/);
+  });
+
+  it('should prune uncontrolled selected keys when the data source removes those rows', () => {
+    const DynamicSelectionTable = () => {
+      const [rows, setRows] = React.useState(dataSource);
+      return (
+        <>
+          <Table
+            columns={columns}
+            dataSource={rows}
+            pagination={false}
+            rowSelection={{}}
+          />
+          <button onClick={() => setRows(dataSource.slice(1))}>shrink</button>
+        </>
+      );
+    };
+
+    const { container, getByText } = render(<DynamicSelectionTable />);
+    const checkboxes = container.querySelectorAll('input[type="checkbox"]');
+    fireEvent.click(checkboxes[1]);
+    expect(checkboxes[1]).toBeChecked();
+
+    fireEvent.click(getByText('shrink'));
+
+    const nextCheckboxes = container.querySelectorAll('input[type="checkbox"]');
+    expect(nextCheckboxes[1]).not.toBeChecked();
+  });
+
+  it('should clamp uncontrolled current page when the data source shrinks', () => {
+    const DynamicPaginationTable = () => {
+      const [rows, setRows] = React.useState([
+        ...dataSource,
+        { key: '4', name: 'David', age: 22 },
+        { key: '5', name: 'Eve', age: 28 },
+      ]);
+      return (
+        <>
+          <Table columns={columns} dataSource={rows} pagination={{ pageSize: 2 }} />
+          <button onClick={() => setRows(dataSource.slice(0, 2))}>shrink</button>
+        </>
+      );
+    };
+
+    const { getByText, queryByText } = render(<DynamicPaginationTable />);
+    fireEvent.click(getByText('3'));
+    expect(getByText('Eve')).toBeInTheDocument();
+
+    fireEvent.click(getByText('shrink'));
+
+    expect(getByText('Alice')).toBeInTheDocument();
+    expect(queryByText('Eve')).not.toBeInTheDocument();
+  });
+
   it('should show loading state', () => {
     const { getByText } = render(<Table columns={columns} dataSource={dataSource} loading />);
     expect(getByText('Loading...')).toBeInTheDocument();
diff --git a/packages/react/src/table/table.tsx b/packages/react/src/table/table.tsx
index 11662723..85b9d586 100644
--- a/packages/react/src/table/table.tsx
+++ b/packages/react/src/table/table.tsx
@@ -74,14 +74,29 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((props, ref) => {
     }
   }, [rowSelection?.selectedRowKeys]);
 
+  useEffect(() => {
+    if (rowSelection?.selectedRowKeys !== undefined) {
+      return;
+    }
+
+    const dataKeys = new Set(
+      dataSource.map((record, index) => getRowKey(record, rowKey, index))
+    );
+
+    setSelectedKeys((currentKeys) => currentKeys.filter((key) => dataKeys.has(key)));
+  }, [dataSource, rowKey, rowSelection?.selectedRowKeys]);
+
   useEffect(() => {
     if (pagination && typeof pagination === 'object' && pagination.current !== undefined) {
       setCurrentPage(pagination.current);
     }
-  }, [pagination]);
+  }, [pagination && typeof pagination === 'object' ? pagination.current : undefined]);
 
   // Initialize default sort
   useEffect(() => {
+    if (sortField || sortOrder) {
+      return;
+    }
     for (const col of columns) {
       if (col.defaultSortOrder) {
         setSortField(col.dataIndex);
@@ -89,7 +104,7 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((props, ref) => {
         break;
       }
     }
-  }, [columns]);
+  }, [columns, sortField, sortOrder]);
 
   const sortedData = useMemo(() => {
     if (!sortField || !sortOrder) return [...dataSource];
@@ -132,6 +147,15 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((props, ref) => {
   const totalItems = paginationConfig?.total ?? dataSource.length;
   const activePage = paginationConfig?.current ?? currentPage;
 
+  useEffect(() => {
+    if (pagination === false || paginationConfig?.current !== undefined) {
+      return;
+    }
+
+    const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+    setCurrentPage((page) => Math.min(page, totalPages));
+  }, [pageSize, pagination, paginationConfig?.current, totalItems]);
+
   const handleSort = (col: ColumnType) => {
     if (!col.sorter) return;
     let newOrder: SortOrder;
diff --git a/packages/react/src/tour/__tests__/tour.test.tsx b/packages/react/src/tour/__tests__/tour.test.tsx
index e167e288..f9bd4901 100644
--- a/packages/react/src/tour/__tests__/tour.test.tsx
+++ b/packages/react/src/tour/__tests__/tour.test.tsx
@@ -134,6 +134,27 @@ describe('<Tour />', () => {
     document.body.removeChild(trigger);
   });
 
+  it('should keep focus inside the panel across rerenders while open', async () => {
+    const trigger = document.createElement('button');
+    trigger.textContent = 'trigger';
+    document.body.appendChild(trigger);
+    trigger.focus();
+
+    const { rerender } = render(<Tour open steps={[{ title: 'Step 1', description: 'Body' }]} zIndex={1001} />);
+
+    await waitFor(() => {
+      const closeBtn = document.querySelector('.ty-tour__close-btn') as HTMLElement | null;
+      expect(closeBtn).toHaveFocus();
+    });
+
+    rerender(<Tour open steps={[{ title: 'Step 1', description: 'Body' }]} zIndex={1002} />);
+
+    expect(document.querySelector('.ty-tour__close-btn')).toHaveFocus();
+    expect(trigger).not.toHaveFocus();
+
+    document.body.removeChild(trigger);
+  });
+
   it('should center panel when no target', () => {
     const { baseElement } = render(<Tour open steps={[{ title: 'Centered' }]} />);
     expect(
diff --git a/packages/react/src/tour/tour.tsx b/packages/react/src/tour/tour.tsx
index 059d7499..259a5667 100644
--- a/packages/react/src/tour/tour.tsx
+++ b/packages/react/src/tour/tour.tsx
@@ -60,6 +60,13 @@ const Tour = React.forwardRef<HTMLDivElement, TourProps>((props, ref) => {
   const panelRef = useRef<HTMLDivElement>(null);
   const popperRef = useRef<Instance | null>(null);
   const previousFocusRef = useRef<HTMLElement | null>(null);
+  const onCloseRef = useRef(onClose);
+  const onChangeRef = useRef(onChange);
+  const onFinishRef = useRef(onFinish);
+
+  onCloseRef.current = onClose;
+  onChangeRef.current = onChange;
+  onFinishRef.current = onFinish;
 
   const currentStep = steps[current];
   const stepPlacement = currentStep?.placement ?? globalPlacement;
@@ -225,27 +232,27 @@ const Tour = React.forwardRef<HTMLDivElement, TourProps>((props, ref) => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         currentStep?.onClose?.();
-        onClose?.();
+        onCloseRef.current?.();
       } else if (e.key === 'ArrowLeft' && current > 0) {
         const next = current - 1;
         if (currentProp === undefined) setInternalCurrent(next);
-        onChange?.(next);
+        onChangeRef.current?.(next);
       } else if (e.key === 'ArrowRight' && current < steps.length - 1) {
         const next = current + 1;
         if (currentProp === undefined) setInternalCurrent(next);
-        onChange?.(next);
+        onChangeRef.current?.(next);
       }
     };
 
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [open, keyboard, current, steps.length, currentProp, currentStep, onChange, onClose]);
+  }, [open, keyboard, current, steps.length, currentProp, currentStep]);
 
   const handlePrev = () => {
     if (current > 0) {
       const next = current - 1;
       if (currentProp === undefined) setInternalCurrent(next);
-      onChange?.(next);
+      onChangeRef.current?.(next);
     }
   };
 
@@ -253,16 +260,16 @@ const Tour = React.forwardRef<HTMLDivElement, TourProps>((props, ref) => {
     if (current < steps.length - 1) {
       const next = current + 1;
       if (currentProp === undefined) setInternalCurrent(next);
-      onChange?.(next);
+      onChangeRef.current?.(next);
     } else {
-      onFinish?.();
-      onClose?.();
+      onFinishRef.current?.();
+      onCloseRef.current?.();
     }
   };
 
   const handleClose = () => {
     currentStep?.onClose?.();
-    onClose?.();
+    onCloseRef.current?.();
   };
 
   if (!open || !currentStep) return null;
diff --git a/packages/react/src/transfer/__tests__/transfer.test.tsx b/packages/react/src/transfer/__tests__/transfer.test.tsx
index b9e4eb74..8de27f9f 100644
--- a/packages/react/src/transfer/__tests__/transfer.test.tsx
+++ b/packages/react/src/transfer/__tests__/transfer.test.tsx
@@ -45,4 +45,42 @@ describe('<Transfer />', () => {
 
     expect(container.querySelectorAll('.ty-transfer-panel input[type="checkbox"]')[1]).toBeChecked();
   });
+
+  it('should preserve checked items outside the current search filter', () => {
+    const { container } = render(<Transfer dataSource={dataSource} showSearch />);
+    const sourcePanel = container.querySelectorAll('.ty-transfer-panel')[0];
+    const searchInput = sourcePanel.querySelector('input') as HTMLInputElement;
+
+    fireEvent.click(sourcePanel.querySelector('input[name="1"]') as HTMLInputElement);
+    expect(sourcePanel.querySelector('input[name="1"]')).toBeChecked();
+
+    fireEvent.change(searchInput, { target: { value: 'Item 2' } });
+
+    fireEvent.click(sourcePanel.querySelector('input[name="2"]') as HTMLInputElement);
+
+    fireEvent.change(searchInput, { target: { value: '' } });
+
+    expect(sourcePanel.querySelector('input[name="1"]')).toBeChecked();
+    expect(sourcePanel.querySelector('input[name="2"]')).toBeChecked();
+  });
+
+  it('should keep hidden checked items when select-all is used under a search filter', () => {
+    const { container } = render(<Transfer dataSource={dataSource} showSearch />);
+    const sourcePanel = container.querySelectorAll('.ty-transfer-panel')[0];
+    const searchInput = sourcePanel.querySelector('input') as HTMLInputElement;
+
+    fireEvent.click(sourcePanel.querySelector('input[name="1"]') as HTMLInputElement);
+    expect(sourcePanel.querySelector('input[name="1"]')).toBeChecked();
+
+    fireEvent.change(searchInput, { target: { value: 'Item 2' } });
+
+    fireEvent.click(
+      sourcePanel.querySelector('.ty-transfer-panel__footer input[type="checkbox"]') as HTMLInputElement
+    );
+
+    fireEvent.change(searchInput, { target: { value: '' } });
+
+    expect(sourcePanel.querySelector('input[name="1"]')).toBeChecked();
+    expect(sourcePanel.querySelector('input[name="2"]')).toBeChecked();
+  });
 });
diff --git a/packages/react/src/transfer/transfer-panel.tsx b/packages/react/src/transfer/transfer-panel.tsx
index 80bb0bdc..4a92252c 100644
--- a/packages/react/src/transfer/transfer-panel.tsx
+++ b/packages/react/src/transfer/transfer-panel.tsx
@@ -61,21 +61,34 @@ const TransferPanel = React.forwardRef<HTMLDivElement, TransferPanelProps>(
 
     const filteredData = getFilteredData();
     const checkableData = filteredData.filter((item) => !item.disabled);
-    const isAllChecked = checkableData.length > 0 && checkedKeys.length === checkableData.length;
-    const isIndeterminate = checkedKeys.length > 0 && checkedKeys.length < checkableData.length;
+    const filteredKeySet = new Set(filteredData.map((item) => item.key));
+    const filteredCheckedKeys = checkedKeys.filter((key) => filteredKeySet.has(key));
+    const hiddenCheckedKeys = checkedKeys.filter((key) => !filteredKeySet.has(key));
+    const disabledFilteredCheckedKeys = filteredData
+      .filter((item) => item.disabled && checkedKeys.includes(item.key))
+      .map((item) => item.key);
+    const selectableFilteredCheckedKeys = filteredCheckedKeys.filter(
+      (key) => !disabledFilteredCheckedKeys.includes(key)
+    );
+    const isAllChecked =
+      checkableData.length > 0 && selectableFilteredCheckedKeys.length === checkableData.length;
+    const isIndeterminate =
+      selectableFilteredCheckedKeys.length > 0 && selectableFilteredCheckedKeys.length < checkableData.length;
 
     /**
      * Footer checkbox onChange event
      */
     const handleAllCheckedChange = (e: ChangeEvent<HTMLInputElement>) => {
       const isChecked = e.currentTarget.checked;
-      const checkedKeys = isChecked ? checkableData.map((item) => item.key) : [];
-      onChange(checkedKeys);
+      const nextCheckedKeys = isChecked
+        ? [...hiddenCheckedKeys, ...disabledFilteredCheckedKeys, ...checkableData.map((item) => item.key)]
+        : [...hiddenCheckedKeys, ...disabledFilteredCheckedKeys];
+      onChange(nextCheckedKeys);
     };
 
     const checkedSummary = (): string => {
       if (isIndeterminate || isAllChecked) {
-        return `${checkedKeys.length} / ${filteredData.length} checked`;
+        return `${filteredCheckedKeys.length} / ${filteredData.length} checked`;
       }
       return `${filteredData.length} items`;
     };
@@ -101,8 +114,8 @@ const TransferPanel = React.forwardRef<HTMLDivElement, TransferPanelProps>(
           <div className={`${prefixCls}__list-container`}>
             {filteredData.length > 0 ? (
               <CheckboxGroup
-                value={checkedKeys}
-                onChange={(values) => onChange(values)}
+                value={filteredCheckedKeys}
+                onChange={(values) => onChange([...hiddenCheckedKeys, ...disabledFilteredCheckedKeys, ...values])}
                 className={`${prefixCls}__list`}>
                 {filteredData.map((item) => {
                   const { key, label, disabled } = item;
diff --git a/packages/react/src/tree/__tests__/tree.test.tsx b/packages/react/src/tree/__tests__/tree.test.tsx
index 9a9b57a4..f959e3ca 100644
--- a/packages/react/src/tree/__tests__/tree.test.tsx
+++ b/packages/react/src/tree/__tests__/tree.test.tsx
@@ -55,4 +55,77 @@ describe('<Tree />', () => {
     fireEvent.click(getByText('add-node'));
     expect(getByText('Node 3')).toBeInTheDocument();
   });
+
+  it('should preserve expanded state when data rerenders with new nodes', () => {
+    const DynamicTree = () => {
+      const [data, setData] = React.useState(treeData);
+      return (
+        <>
+          <Tree data={data} />
+          <button
+            onClick={() =>
+              setData([
+                {
+                  key: '1',
+                  title: 'Node 1',
+                  children: [
+                    { key: '1-1', title: 'Node 1-1' },
+                    { key: '1-2', title: 'Node 1-2' },
+                    { key: '1-3', title: 'Node 1-3' },
+                  ],
+                },
+                { key: '2', title: 'Node 2' },
+              ])
+            }
+          >
+            refresh
+          </button>
+        </>
+      );
+    };
+
+    const { getByText, container } = render(<DynamicTree />);
+    const rootTreeItem = container.querySelector('[role="treeitem"]') as HTMLElement;
+    expect(rootTreeItem).toHaveAttribute('aria-expanded', 'false');
+
+    fireEvent.click(getByText('Node 1'));
+    expect(rootTreeItem).toHaveAttribute('aria-expanded', 'true');
+
+    fireEvent.click(getByText('refresh'));
+
+    expect(rootTreeItem).toHaveAttribute('aria-expanded', 'true');
+    expect(getByText('Node 1-1')).toBeInTheDocument();
+    expect(getByText('Node 1-3')).toBeInTheDocument();
+  });
+
+  it('should preserve checked state when data rerenders with new nodes', () => {
+    const DynamicCheckTree = () => {
+      const [data, setData] = React.useState(treeData);
+      return (
+        <>
+          <Tree data={data} checkable />
+          <button
+            onClick={() =>
+              setData([
+                ...treeData,
+                { key: '3', title: 'Node 3' },
+              ])
+            }
+          >
+            refresh
+          </button>
+        </>
+      );
+    };
+
+    const { container, getByText } = render(<DynamicCheckTree />);
+    const checkboxes = container.querySelectorAll('input[type="checkbox"]');
+    fireEvent.click(checkboxes[0]);
+    expect(checkboxes[0]).toBeChecked();
+
+    fireEvent.click(getByText('refresh'));
+
+    const nextCheckboxes = container.querySelectorAll('input[type="checkbox"]');
+    expect(nextCheckboxes[0]).toBeChecked();
+  });
 });
diff --git a/packages/react/src/tree/tree.tsx b/packages/react/src/tree/tree.tsx
index a1599f5d..06466beb 100644
--- a/packages/react/src/tree/tree.tsx
+++ b/packages/react/src/tree/tree.tsx
@@ -3,11 +3,47 @@ import classNames from 'classnames';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
 import { TreeProps } from './types';
-import { TreeInstance } from './tree-instance';
+import { Node, TreeInstance } from './tree-instance';
 import TreeNode from './tree-node';
 
 const EMPTY_KEYS: string[] = [];
 
+type NodeStateMap = Record<string, { checked: boolean; expanded: boolean }>;
+
+function collectNodeState(nodes: Node[], stateMap: NodeStateMap): void {
+  nodes.forEach((node) => {
+    const stateKey = node.key ?? node.uniqueKey;
+    stateMap[stateKey] = {
+      checked: node.checked,
+      expanded: node.expanded,
+    };
+
+    if (node.children) {
+      collectNodeState(node.children, stateMap);
+    }
+  });
+}
+
+function applyNodeState(nodes: Node[], stateMap: NodeStateMap): void {
+  nodes.forEach((node) => {
+    const stateKey = node.key ?? node.uniqueKey;
+    const previousState = stateMap[stateKey];
+    if (previousState) {
+      node.checked = previousState.checked;
+      node.expanded = previousState.expanded;
+    }
+
+    if (node.children) {
+      applyNodeState(node.children, stateMap);
+      node.indeterminate = node.children.some((child) => child.indeterminate)
+        || (
+          node.children.filter((child) => child.checked).length > 0
+          && node.children.filter((child) => child.checked).length < node.children.length
+        );
+    }
+  });
+}
+
 const Tree = React.forwardRef<HTMLUListElement, TreeProps>(
   (props: TreeProps, ref): JSX.Element => {
     const {
@@ -33,13 +69,18 @@ const Tree = React.forwardRef<HTMLUListElement, TreeProps>(
     const [treeNodes, setTreeNodes] = useState(treeInstance.current.nodes);
 
     useEffect(() => {
-      treeInstance.current = new TreeInstance(
+      const previousStateMap: NodeStateMap = {};
+      collectNodeState(treeInstance.current.nodes, previousStateMap);
+
+      const nextTree = new TreeInstance(
         data,
         defaultCheckedKeys,
         defaultExpandedKeys,
         defaultExpandAll
       );
-      setTreeNodes([...treeInstance.current.nodes]);
+      applyNodeState(nextTree.nodes, previousStateMap);
+      treeInstance.current = nextTree;
+      setTreeNodes([...nextTree.nodes]);
     }, [data, defaultCheckedKeys, defaultExpandedKeys, defaultExpandAll]);
 
     const onCheckboxChange = (key: string, e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/packages/react/src/upload/__tests__/upload.test.tsx b/packages/react/src/upload/__tests__/upload.test.tsx
index c94d3516..4488d191 100644
--- a/packages/react/src/upload/__tests__/upload.test.tsx
+++ b/packages/react/src/upload/__tests__/upload.test.tsx
@@ -48,6 +48,44 @@ describe('<Upload />', () => {
     expect(httpRequest).toHaveBeenCalledTimes(1);
   });
 
+  it('should use a stable default field name when name is not provided', async () => {
+    const httpRequest = jest.fn();
+    const { container } = render(<Upload action="/upload" httpRequest={httpRequest} />);
+
+    const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+    fireEvent.change(input, { target: { files: [createFile()] } });
+
+    await waitFor(() => {
+      expect(httpRequest).toHaveBeenCalledTimes(1);
+    });
+
+    expect(httpRequest).toHaveBeenCalledWith(
+      expect.objectContaining({
+        filename: 'file',
+      })
+    );
+  });
+
+  it('should use the provided upload field name when name is set', async () => {
+    const httpRequest = jest.fn();
+    const { container } = render(
+      <Upload action="/upload" name="attachment" httpRequest={httpRequest} />
+    );
+
+    const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+    fireEvent.change(input, { target: { files: [createFile()] } });
+
+    await waitFor(() => {
+      expect(httpRequest).toHaveBeenCalledTimes(1);
+    });
+
+    expect(httpRequest).toHaveBeenCalledWith(
+      expect.objectContaining({
+        filename: 'attachment',
+      })
+    );
+  });
+
   it('should respect controlled fileList updates from the parent', () => {
     const ControlledUpload = () => {
       const [fileList, setFileList] = React.useState<UploadFile[]>([]);
@@ -128,4 +166,47 @@ describe('<Upload />', () => {
 
     expect(httpRequest).not.toHaveBeenCalled();
   });
+
+  it('should upload the replacement file returned from beforeUpload', async () => {
+    const httpRequest = jest.fn();
+    const replacedFile = new File(['world'], 'processed.txt', { type: 'text/plain' });
+    const { container } = render(
+      <Upload
+        action="/upload"
+        beforeUpload={() => replacedFile}
+        httpRequest={httpRequest}
+      />
+    );
+
+    const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+    fireEvent.change(input, { target: { files: [createFile()] } });
+
+    await waitFor(() => {
+      expect(httpRequest).toHaveBeenCalledTimes(1);
+    });
+
+    expect(httpRequest).toHaveBeenCalledWith(
+      expect.objectContaining({
+        file: replacedFile,
+      })
+    );
+  });
+
+  it('should not upload when async beforeUpload resolves to false', async () => {
+    const httpRequest = jest.fn();
+    const { container } = render(
+      <Upload
+        action="/upload"
+        beforeUpload={() => Promise.resolve(false)}
+        httpRequest={httpRequest}
+      />
+    );
+
+    const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+    fireEvent.change(input, { target: { files: [createFile()] } });
+
+    await waitFor(() => {
+      expect(httpRequest).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/packages/react/src/upload/index.md b/packages/react/src/upload/index.md
index ad8c7c3f..8265f848 100644
--- a/packages/react/src/upload/index.md
+++ b/packages/react/src/upload/index.md
@@ -64,7 +64,7 @@ You can drag files to a specific area, to upload. Alternatively, you can also up
 | action            | request URL                                       | string                        | -         |
 | accept            | accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)        | string    | -     |
 | method            | http request method                               | string                        | `POST`    |
-| name              | key name for uploaded file	                    | string                        | -         |
+| name              | form field name for uploaded file              | string                        | `file`    |
 | disabled          | disabled state of button                          | boolean                       | false     |
 | data              | additions options of request                      | object                        | -         |
 | headers           | request headers                                   | object                        | -         |
@@ -76,9 +76,9 @@ You can drag files to a specific area, to upload. Alternatively, you can also up
 | defaultFileList   | default uploaded files                            | object[]                      | -         |
 | limit             | maximum number of uploads allowed	                | number                        | -         |
 | beforeUpload      | hook before uploading. Return `false` to stop, return a `File` to replace the upload file, or return a Promise that resolves to either        | (file: File) => boolean &#124; File &#124; Promise&lt;boolean &#124; File&gt; | -   |
-| onProgress        | hook function when some progress occurs           | (percent: number) => void     | -         |
-| onSuccess         | hook function when uploaded successfully          | (file, fileList) => void      | -         |
-| onError           | hook function when some errors occurs             | (file, fileList) => void      | -         |
+| onProgress        | hook function when some progress occurs           | (percent: number, file, fileList) => void | - |
+| onSuccess         | hook function when uploaded successfully          | (event, file, fileList) => void | -       |
+| onError           | hook function when some errors occurs             | (event, file, fileList) => void | -       |
 | onChange          | hook function when file status change             | (file, fileList) => void      | -         |
 | onRemove          | hook function when files are removed              | (file) => void                | -         |
 | onExceed          | hook function when limit is exceeded              | (files, fileList) => void     | -         |
diff --git a/packages/react/src/upload/index.zh_CN.md b/packages/react/src/upload/index.zh_CN.md
index ccef9ac4..3ad5560d 100644
--- a/packages/react/src/upload/index.zh_CN.md
+++ b/packages/react/src/upload/index.zh_CN.md
@@ -64,7 +64,7 @@ import { Upload } from 'tiny-design';
 | action            | 上传请求的 URL                                    | string                        | -         |
 | accept            | 接受的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)        | string    | -     |
 | method            | HTTP 请求方法                                     | string                        | `POST`    |
-| name              | 上传文件的字段名                                  | string                        | -         |
+| name              | 上传文件的表单字段名                              | string                        | `file`    |
 | disabled          | 按钮的禁用状态                                    | boolean                       | false     |
 | data              | 请求的附加参数                                    | object                        | -         |
 | headers           | 请求头                                            | object                        | -         |
@@ -76,9 +76,9 @@ import { Upload } from 'tiny-design';
 | defaultFileList   | 默认已上传的文件列表                              | object[]                      | -         |
 | limit             | 允许上传的最大数量                                | number                        | -         |
 | beforeUpload      | 上传前的钩子函数。返回 `false` 可中止上传，返回 `File` 可替换上传文件，也可返回 Promise 并解析为这两种结果之一 | (file: File) => boolean &#124; File &#124; Promise&lt;boolean &#124; File&gt; | -   |
-| onProgress        | 上传进度回调钩子                                  | (percent: number) => void     | -         |
-| onSuccess         | 上传成功时的钩子                                  | (file, fileList) => void      | -         |
-| onError           | 上传出错时的钩子                                  | (file, fileList) => void      | -         |
+| onProgress        | 上传进度回调钩子                                  | (percent: number, file, fileList) => void | - |
+| onSuccess         | 上传成功时的钩子                                  | (event, file, fileList) => void | -      |
+| onError           | 上传出错时的钩子                                  | (event, file, fileList) => void | -      |
 | onChange          | 文件状态变化时的钩子                              | (file, fileList) => void      | -         |
 | onRemove          | 文件被移除时的钩子                                | (file) => void                | -         |
 | onExceed          | 超出数量限制时的钩子                              | (files, fileList) => void     | -         |
diff --git a/packages/react/src/upload/upload.tsx b/packages/react/src/upload/upload.tsx
index 4d4bb492..6e501071 100644
--- a/packages/react/src/upload/upload.tsx
+++ b/packages/react/src/upload/upload.tsx
@@ -123,7 +123,7 @@ const Upload = React.forwardRef<HTMLDivElement, UploadProps>((props, ref) => {
       withCredentials,
       file,
       data,
-      filename: name || file.name,
+      filename: name || 'file',
       method,
       action,
       onProgress: (percent: number) => xhrOnProgress(percent, uploadFile),

From e589c442573fa427c4aa96c30fa782343e195dae Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Fri, 10 Apr 2026 10:27:37 +1000
Subject: [PATCH 09/12] chore: remove plan doc

---
 REFACTOR_CHECKLIST.md           | 152 ---------------
 THEME_TOKEN_REFACTOR_ROADMAP.md | 317 --------------------------------
 2 files changed, 469 deletions(-)
 delete mode 100644 REFACTOR_CHECKLIST.md
 delete mode 100644 THEME_TOKEN_REFACTOR_ROADMAP.md

diff --git a/REFACTOR_CHECKLIST.md b/REFACTOR_CHECKLIST.md
deleted file mode 100644
index c88837f5..00000000
--- a/REFACTOR_CHECKLIST.md
+++ /dev/null
@@ -1,152 +0,0 @@
-# Refactor Checklist
-
-## Progress Tracker
-
-Overall status:
-
-- estimated progress: `88%`
-- estimated progress: `93%`
-- current focus: a11y and interaction sweep for complex popup, picker, and dialog components
-- current mode: breaking-major refactor, no legacy compatibility work
-
-### Phases
-
-| Phase | Scope | Status | Notes |
-| --- | --- | --- | --- |
-| 1 | tokens core | done | shared resolver, strict new contract, no alias/migration runtime |
-| 2 | react theme integration | done | `ConfigProvider` uses shared token resolver |
-| 3 | bottom-layer popup infrastructure | done | `Popup`, `Overlay`, `Portal` stabilized and test-covered |
-| 4 | first-layer popup consumers | done | `Dropdown`, `Popover`, `Tooltip`, `Modal static`, `Menu.SubMenu`, `PopConfirm`, `SpeedDial` |
-| 5 | selection and picker core | done at current checkpoint | `Select`, `AutoComplete`, `Cascader`, `DatePicker`, `TimePicker`, `ColorPicker` stabilized with focused keyboard / state fixes |
-| 6 | token coverage expansion | mostly done at current checkpoint | first high-value namespaces landed and are wired into component styles |
-| 7 | quality platform | in progress | focused regression tests and targeted a11y semantics improved, no full visual regression sweep yet |
-
-### Component Groups
-
-Completed or stable checkpoint:
-
-- `Popup`
-- `Overlay`
-- `Portal`
-- `Dropdown`
-- `Popover`
-- `Tooltip`
-- `ConfigProvider`
-- `DatePicker`
-- `TimePicker`
-- `Select`
-- `AutoComplete`
-- `Cascader`
-- `ColorPicker`
-- `Menu.SubMenu`
-- `PopConfirm`
-- `SpeedDial`
-- `Calendar`
-- `Upload`
-- `Modal`
-- `Drawer`
-- `Table`
-- `Tree`
-- `Transfer`
-- `Tour`
-- `Form`
-- `NativeSelect`
-
-Token ownership completed or materially improved:
-
-- `picker`
-- `date-picker`
-- `time-picker`
-- `calendar`
-- `dropdown`
-- `overlay`
-- `pop-confirm`
-- `tour`
-- `select`
-- `auto-complete`
-- `cascader`
-- `color-picker`
-- `speed-dial`
-- `upload`
-
-Queued next:
-
-- full-library visual regression sweep
-- broader docs/demo smoke check
-- remaining component token gaps with lower business value
-
-Known unfinished areas:
-
-- `Modal / Drawer / Tour` focus, keyboard, and close semantics are substantially improved, but not fully systematized into shared hooks
-- `Form` is stabilized at a synchronous-validation checkpoint, but not redesigned
-- `Select / Cascader / AutoComplete / DatePicker / TimePicker / ColorPicker` have focused a11y improvements, but not a full WAI-ARIA parity pass
-- full-library visual regression has not started
-- docs/demo smoke coverage is still partial
-
-## Phase Checklist
-
-Use this before starting any new phase.
-
-- phase scope is explicit
-- entry files are identified
-- verification commands are identified
-- stop condition is identified
-- upstream dependencies are already stable
-
-## Component Checklist
-
-Use this for every component refactor.
-
-- read implementation
-- read public types
-- read existing tests
-- read docs/examples if they exist
-- list behavior worth preserving
-- list behavior that is inconsistent or fragile
-- confirm controlled and uncontrolled state model
-- confirm event names and firing points
-- confirm container / portal / popup behavior where relevant
-- confirm cleanup behavior for timers, listeners, and instances
-- add or update focused tests
-- run the smallest useful regression set
-- stop when the component reaches a stable checkpoint
-
-## Theme And Token Checklist
-
-- JSON sources remain the only editable token source
-- theme runtime uses shared resolver logic
-- Theme Studio uses the same validation and resolution contract
-- preset resolution still works
-- browser ESM runtime still works
-- registry output still builds
-- no alias or migration logic is introduced
-- docs only describe canonical token keys
-
-## Popup Stack Checklist
-
-Apply to:
-
-- `Popup`
-- `Overlay`
-- `Portal`
-- `Dropdown`
-- `Popover`
-- `Tooltip`
-- `Modal`
-
-- visibility source is unambiguous
-- outside click behavior is defined
-- escape behavior is defined if applicable
-- popup container behavior is defined
-- portal rendering is test-covered
-- listeners are removed on cleanup
-- timers are removed on cleanup
-- popper / instance objects are destroyed on cleanup
-
-## Before Moving Up A Layer
-
-- current layer tests pass
-- no known runtime regression remains in the current layer
-- docs / Theme Studio still render
-- there is a clear summary of what changed
-- next component group is identified
diff --git a/THEME_TOKEN_REFACTOR_ROADMAP.md b/THEME_TOKEN_REFACTOR_ROADMAP.md
deleted file mode 100644
index c6fa44f0..00000000
--- a/THEME_TOKEN_REFACTOR_ROADMAP.md
+++ /dev/null
@@ -1,317 +0,0 @@
-# Theme And Token Refactor Roadmap
-
-## Goal
-
-Build the next major version of Tiny Design theming with one rule:
-
-- only the new token model is supported
-
-This roadmap assumes a breaking release. We are not preserving legacy token names, legacy theme keys, or parallel token systems.
-
-## Upgrade Policy
-
-The next major version follows these constraints:
-
-- `packages/tokens/source/**.json` is the only source of truth
-- runtime, docs, Theme Studio, and React all consume the same theme contract
-- old SCSS-era token names are removed, not translated
-- old API aliases are removed, not dual-supported
-- documentation only describes the new contract
-
-## Current Progress
-
-Completed:
-
-- tokens runtime resolution is shared across `@tiny-design/tokens`, `@tiny-design/react`, and Theme Studio
-- preset theme resolution with `extends`
-- browser-safe ESM runtime for docs and Theme Studio
-- `ConfigProvider` integrated with token resolution
-- `Popup / Overlay / Portal` bottom-layer cleanup and tests
-- temporary alias and migration logic removed again for the breaking-major path
-- first-layer popup consumers stabilized:
-  - `Dropdown`
-  - `Popover`
-  - `Tooltip`
-  - `Modal static`
-  - `Menu.SubMenu`
-  - `PopConfirm`
-  - `SpeedDial`
-- picker and selection core partially stabilized:
-  - `DatePicker`
-  - `TimePicker`
-  - `Select`
-  - `AutoComplete`
-  - `Cascader`
-- `ColorPicker`
-- `Upload`
-- `Modal`
-- `Drawer`
-- `Table`
-- `Tree`
-- `Transfer`
-- `Tour`
-- `Form`
-- token ownership expanded for:
-  - `picker`
-  - `date-picker`
-  - `time-picker`
-  - `calendar`
-  - `dropdown`
-  - `overlay`
-  - `pop-confirm`
-  - `tour`
-  - `select`
-  - `auto-complete`
-  - `cascader`
-  - `color-picker`
-  - `speed-dial`
-
-In progress:
-
-- broader a11y and docs/demo sweep
-- checklist-driven progress tracking
-- token coverage expansion for the remaining component gaps
-
-Recently stabilized:
-
-- `Upload`
-  - controlled `fileList` behavior corrected
-  - callbacks now receive the latest file list snapshots
-  - shared remove icon usage aligned
-- `Modal`
-  - `onClose` and `onCancel` semantics separated
-  - `keyboard` support added and tested
-  - shared close icon usage aligned
-- `Drawer`
-  - `keyboard` prop now works
-  - shared close icon usage aligned
-- `Table`
-  - controlled `selectedRowKeys` clearing fixed
-  - controlled `pagination.current` sync fixed
-- `Tree`
-  - node tree now refreshes when `data` changes
-- `Transfer`
-  - controlled mode no longer clears panel selection on unrelated rerenders
-- `Tour`
-  - keyboard-disabled regression covered
-  - shared close icon usage aligned
-  - focus is now captured on open and restored on close
-  - title and description now participate in dialog semantics
-- `Form`
-  - contract tightened to synchronous validation only
-  - submit-level behavior now has direct regression coverage
-- `Select`
-  - combobox/listbox aria relationships improved
-- `Cascader`
-  - selector keyboard open/close behavior added
-  - combobox semantics improved
-- `AutoComplete`
-  - `onOpenChange` support aligned with controlled `open`
-  - combobox/listbox aria relationships improved
-- `DatePicker`
-  - combobox/dialog semantics added
-  - keyboard open behavior added
-- `TimePicker`
-  - combobox/dialog semantics added
-  - keyboard open behavior added
-- `ColorPicker`
-  - trigger now exposes button/dialog semantics
-  - keyboard open behavior added
-- `Modal / Drawer`
-  - body/header aria relationships added
-- `PopConfirm`
-  - alertdialog title relationship added
-
-## Target Architecture
-
-### `@tiny-design/tokens`
-
-Owns:
-
-- semantic token source
-- component token source
-- theme documents
-- schema
-- registry generation
-- preset generation
-- theme validation
-- theme resolution
-- typed token exports
-
-Does not own:
-
-- legacy token aliases
-- migration shims
-- dual-format theme support
-
-### `@tiny-design/react`
-
-Owns:
-
-- scoped CSS variable application
-- `ConfigProvider` theme integration
-- container / popup scoping behavior
-- component token consumption discipline
-
-Does not own:
-
-- ad-hoc token flattening
-- custom theme parsing separate from `@tiny-design/tokens`
-
-### Theme Studio / Docs
-
-Own:
-
-- authoring UI
-- preview and export flows
-- token browsing and documentation
-
-Must consume:
-
-- the same validation and resolution contract as runtime
-
-## Execution Phases
-
-### Phase 1: Tokens Core
-
-Objectives:
-
-- keep JSON as the only editable token source
-- keep presets and schema aligned
-- validate theme documents against registry
-- remove alias and migration support from runtime and build outputs
-
-Acceptance:
-
-- no runtime alias translation
-- no generated alias metadata
-- new token keys are the only supported authored keys
-
-### Phase 2: React Theme Integration
-
-Objectives:
-
-- keep `ConfigProvider` on top of `resolveTheme`
-- standardize theme mode resolution
-- keep scoped CSS variable injection stable
-
-Acceptance:
-
-- React runtime does not implement its own theme parser
-- local provider scoping remains stable
-
-### Phase 3: Bottom-Layer Popup Infrastructure
-
-Scope:
-
-- `Popup`
-- `Overlay`
-- `Portal`
-
-Objectives:
-
-- stabilize visibility flow
-- stabilize popup container usage
-- clean up event listener lifecycle
-- preserve existing good behavior
-
-Acceptance:
-
-- bottom-layer popup tests pass
-- no listener leaks in current flows
-
-### Phase 4: First-Layer Popup Consumers
-
-Scope:
-
-- `Dropdown`
-- `Popover`
-- `Tooltip`
-- `Modal`
-
-Objectives:
-
-- reuse the cleaned popup stack
-- remove duplicated open/close mechanics
-- keep API changes deliberate and minimal
-
-Acceptance:
-
-- each component has controlled/uncontrolled coverage
-- outside click / escape / focus behavior is defined and tested
-
-### Phase 5: Form And Selection Core
-
-Scope:
-
-- `Form`
-- `Select`
-- `AutoComplete`
-- `DatePicker`
-- `TimePicker`
-
-Objectives:
-
-- align state models
-- align popup usage
-- align token consumption
-
-Acceptance:
-
-- no type/runtime contract mismatch
-- no parallel internal state paths for the same behavior
-
-### Phase 6: Token Coverage Expansion
-
-Objectives:
-
-- define missing component namespaces
-- document namespace reuse explicitly
-- replace remaining hardcoded visual values where tokens should own them
-
-Priority targets:
-
-- `dropdown`
-- `overlay`
-- `date-picker`
-- `time-picker`
-- `auto-complete`
-- `modal`
-- `tooltip`
-- `popover`
-
-Acceptance:
-
-- each production component has explicit token ownership
-
-### Phase 7: Quality Platform
-
-Objectives:
-
-- interaction tests for complex components
-- a11y checks for core flows
-- visual regression for key docs examples
-
-Acceptance:
-
-- complex components have behavior coverage, not just snapshots
-
-## Working Rules
-
-These rules apply to every phase:
-
-- read implementation, types, tests, and docs before editing
-- keep existing good behavior
-- remove only the parts that are inconsistent, redundant, or unstable
-- do not expand scope upward until the current layer is stable
-- stop at a clear verification point before moving to the next component group
-
-## Immediate Next Queue
-
-1. Finish removing temporary alias/migration support from `packages/tokens`
-2. Keep Theme Studio aligned with the strict new token contract
-3. Start the first-layer popup consumers:
-   - `Dropdown`
-   - `Popover`
-   - `Tooltip`
-   - `Modal`

From bdac6d63b0d6d8ee3a2d036ae8730aa1ba43ef94 Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Fri, 10 Apr 2026 10:31:07 +1000
Subject: [PATCH 10/12] chore: add changeset for react popup and overlay fixes

---
 .changeset/fix-react-popup-and-overlays.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fix-react-popup-and-overlays.md

diff --git a/.changeset/fix-react-popup-and-overlays.md b/.changeset/fix-react-popup-and-overlays.md
new file mode 100644
index 00000000..5bf480ca
--- /dev/null
+++ b/.changeset/fix-react-popup-and-overlays.md
@@ -0,0 +1,5 @@
+---
+"@tiny-design/react": patch
+---
+
+Fix popup positioning and interaction regressions across overlay-based React components, and align related input, table, tree, tour, and upload behaviors

From 2446215a72683ed360d7376277b3f01e9ed8352d Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Fri, 10 Apr 2026 11:29:01 +1000
Subject: [PATCH 11/12] fix: pro build

---
 apps/pro/src/app/globals.scss            |  7 +++++++
 apps/pro/src/app/layout.tsx              | 17 +----------------
 packages/react/src/input/input-group.tsx |  6 +++++-
 packages/react/src/textarea/textarea.tsx |  2 +-
 4 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/apps/pro/src/app/globals.scss b/apps/pro/src/app/globals.scss
index 3c62bdd0..95bb9c30 100644
--- a/apps/pro/src/app/globals.scss
+++ b/apps/pro/src/app/globals.scss
@@ -1,6 +1,13 @@
 @use '@tiny-design/tokens/scss/base' as *;
 @use 'style/component' as *;
 
+:root {
+  --font-heading:
+    'Avenir Next', avenir, montserrat, 'Segoe UI', 'Helvetica Neue', arial, sans-serif;
+  --font-body:
+    'Aptos', 'Avenir Next', 'Segoe UI', inter, roboto, 'Helvetica Neue', arial, sans-serif;
+}
+
 *,
 *::before,
 *::after {
diff --git a/apps/pro/src/app/layout.tsx b/apps/pro/src/app/layout.tsx
index fe2f40b1..549eb9bf 100644
--- a/apps/pro/src/app/layout.tsx
+++ b/apps/pro/src/app/layout.tsx
@@ -1,23 +1,8 @@
 import type { Metadata } from 'next';
-import { Bricolage_Grotesque, DM_Sans } from 'next/font/google';
 import { ThemeScript } from '../components/theme-script';
 import { SiteHeader } from '../components/layout/site-header';
 import './globals.scss';
 
-const heading = Bricolage_Grotesque({
-  subsets: ['latin'],
-  variable: '--font-heading',
-  display: 'swap',
-  weight: ['400', '500', '600', '700', '800'],
-});
-
-const body = DM_Sans({
-  subsets: ['latin'],
-  variable: '--font-body',
-  display: 'swap',
-  weight: ['400', '500', '600', '700'],
-});
-
 export const metadata: Metadata = {
   title: 'Tiny Design Pro',
   description: 'Beautiful, ready-to-use UI blocks built with Tiny Design components.',
@@ -25,7 +10,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={`${heading.variable} ${body.variable}`} suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning>
       <body>
         <ThemeScript />
         <SiteHeader />
diff --git a/packages/react/src/input/input-group.tsx b/packages/react/src/input/input-group.tsx
index b62bb4f6..6972dcc5 100755
--- a/packages/react/src/input/input-group.tsx
+++ b/packages/react/src/input/input-group.tsx
@@ -21,7 +21,11 @@ const InputGroup = (props: InputGroupProps): React.ReactElement => {
 
   return (
     <div {...otherProps} className={cls}>
-      {React.Children.map(children, (child: React.ReactElement) => {
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) {
+          return child;
+        }
+
         const childProps: Partial<InputProps> = {
           disabled,
           size: inputSize as SizeType,
diff --git a/packages/react/src/textarea/textarea.tsx b/packages/react/src/textarea/textarea.tsx
index 2b041e35..70eaa8f0 100755
--- a/packages/react/src/textarea/textarea.tsx
+++ b/packages/react/src/textarea/textarea.tsx
@@ -34,7 +34,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((props, ref) =>
     [`${prefixCls}_disabled`]: disabled,
   });
   const [count, setCount] = useState(0);
-  const containerRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
   const minHeightRef = useRef<number | null>(null);
 
   const textareaOnChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {

From 5285d4c11087f639f2817bca956dc7b931baf166 Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Fri, 10 Apr 2026 11:34:50 +1000
Subject: [PATCH 12/12] fix: test

---
 packages/react/src/carousel/__tests__/carousel.test.tsx    | 6 ++++--
 .../src/flip/__tests__/__snapshots__/flip.test.tsx.snap    | 7 +++++++
 packages/react/src/flip/__tests__/flip.test.tsx            | 4 ++++
 .../__tests__/__snapshots__/input-password.test.tsx.snap   | 2 +-
 .../__tests__/__snapshots__/split-button.test.tsx.snap     | 2 +-
 5 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/carousel/__tests__/carousel.test.tsx b/packages/react/src/carousel/__tests__/carousel.test.tsx
index 23e17f80..d4a0efc4 100644
--- a/packages/react/src/carousel/__tests__/carousel.test.tsx
+++ b/packages/react/src/carousel/__tests__/carousel.test.tsx
@@ -1,4 +1,4 @@
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, act } from '@testing-library/react';
 import Carousel from '../index';
 import { CarouselRef } from '../types';
 import { createRef } from 'react';
@@ -134,7 +134,9 @@ describe('<Carousel />', () => {
         <div>3</div>
       </Carousel>
     );
-    ref.current!.goTo(2, true);
+    act(() => {
+      ref.current!.goTo(2, true);
+    });
     expect(before).toHaveBeenCalledWith(0, 2);
   });
 
diff --git a/packages/react/src/flip/__tests__/__snapshots__/flip.test.tsx.snap b/packages/react/src/flip/__tests__/__snapshots__/flip.test.tsx.snap
index cab46138..47a8f309 100644
--- a/packages/react/src/flip/__tests__/__snapshots__/flip.test.tsx.snap
+++ b/packages/react/src/flip/__tests__/__snapshots__/flip.test.tsx.snap
@@ -16,6 +16,13 @@ exports[`<Flip /> should match the snapshot 1`] = `
           Front
         </div>
       </div>
+      <div
+        class="ty-flip__item-back ty-flip__item-back_hor"
+      >
+        <div>
+          Back
+        </div>
+      </div>
     </div>
   </div>
 </DocumentFragment>
diff --git a/packages/react/src/flip/__tests__/flip.test.tsx b/packages/react/src/flip/__tests__/flip.test.tsx
index fc13cef2..157bdd7e 100644
--- a/packages/react/src/flip/__tests__/flip.test.tsx
+++ b/packages/react/src/flip/__tests__/flip.test.tsx
@@ -6,6 +6,7 @@ describe('<Flip />', () => {
     const { asFragment } = render(
       <Flip width={200} height={200}>
         <Flip.Item><div>Front</div></Flip.Item>
+        <Flip.Item><div>Back</div></Flip.Item>
       </Flip>
     );
     expect(asFragment()).toMatchSnapshot();
@@ -15,6 +16,7 @@ describe('<Flip />', () => {
     const { container } = render(
       <Flip width={200} height={200}>
         <Flip.Item><div>Front</div></Flip.Item>
+        <Flip.Item><div>Back</div></Flip.Item>
       </Flip>
     );
     expect(container.firstChild).toHaveClass('ty-flip');
@@ -24,8 +26,10 @@ describe('<Flip />', () => {
     const { getByText } = render(
       <Flip width={200} height={200}>
         <Flip.Item><div>Front Side</div></Flip.Item>
+        <Flip.Item><div>Back Side</div></Flip.Item>
       </Flip>
     );
     expect(getByText('Front Side')).toBeInTheDocument();
+    expect(getByText('Back Side')).toBeInTheDocument();
   });
 });
diff --git a/packages/react/src/input-password/__tests__/__snapshots__/input-password.test.tsx.snap b/packages/react/src/input-password/__tests__/__snapshots__/input-password.test.tsx.snap
index 8216501a..25a2ed7b 100644
--- a/packages/react/src/input-password/__tests__/__snapshots__/input-password.test.tsx.snap
+++ b/packages/react/src/input-password/__tests__/__snapshots__/input-password.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<InputPassword /> should match the snapshot 1`] = `
   >
     <input
       class="ty-input__input"
-      style="padding-left: 7px; padding-right: 7px;"
+      style="--ty-input-padding-inline-start-extra: 0px; --ty-input-padding-inline-end-extra: 0px;"
       type="password"
       value=""
     />
diff --git a/packages/react/src/split-button/__tests__/__snapshots__/split-button.test.tsx.snap b/packages/react/src/split-button/__tests__/__snapshots__/split-button.test.tsx.snap
index 523bb68e..ea23ae38 100644
--- a/packages/react/src/split-button/__tests__/__snapshots__/split-button.test.tsx.snap
+++ b/packages/react/src/split-button/__tests__/__snapshots__/split-button.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SplitButton /> should match the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="ty-btn-group ty-btn-group_default ty-split-button"
+    class="ty-btn-group ty-btn-group_default ty-btn-group_md ty-split-button"
   >
     <button
       class="ty-btn ty-btn_md ty-btn_default"