diff --git a/apps/docs/src/components/demo-block/index.tsx b/apps/docs/src/components/demo-block/index.tsx
index a5639da25..d9eda7dbd 100644
--- a/apps/docs/src/components/demo-block/index.tsx
+++ b/apps/docs/src/components/demo-block/index.tsx
@@ -40,7 +40,6 @@ const ResetIcon = () => (
   </svg>
 );
 
-// Build scope for react-runner to resolve imports
 const scope = {
   import: {
     react: React,
diff --git a/apps/docs/src/components/highlighted-code/HighlightedCode.tsx b/apps/docs/src/components/highlighted-code/HighlightedCode.tsx
index f2f8ecde8..5c5d13c63 100644
--- a/apps/docs/src/components/highlighted-code/HighlightedCode.tsx
+++ b/apps/docs/src/components/highlighted-code/HighlightedCode.tsx
@@ -53,4 +53,4 @@ Prism.languages.bash = Prism.languages.shell = {
         )}
       </Highlight>
     );
-  };
\ No newline at end of file
+  };
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 3eff1c899..765342491 100644
--- a/apps/docs/src/containers/theme-studio/theme-document-adapter.ts
+++ b/apps/docs/src/containers/theme-studio/theme-document-adapter.ts
@@ -203,14 +203,25 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'date-picker.header-border': fields.border,
         'date-picker.header-button-color': fields.mutedForeground,
         'date-picker.header-button-color-hover': fields.primary,
+        'date-picker.header-action-hover-bg': fields.muted,
+        'date-picker.header-action-focus-ring': fields.ring,
         'date-picker.today-color': fields.primary,
         'date-picker.today-color-hover': fields.primary,
+        'date-picker.today-hover-bg': fields.accent,
+        'date-picker.today-active-bg': fields.muted,
+        'date-picker.today-focus-ring': fields.ring,
         'picker.cell-hover-bg': fields.muted,
         'date-picker.cell-selected-bg': fields.primary,
         'date-picker.cell-selected-color': fields.primaryForeground,
         'date-picker.cell-selected-hover-bg': fields.primary,
         'date-picker.cell-today-border': fields.primary,
         'date-picker.cell-radius': fields.inputRadius,
+        'date-picker.panel-item-hover-bg': fields.muted,
+        'date-picker.panel-item-current-color': fields.primary,
+        'date-picker.panel-item-current-border': fields.primary,
+        'date-picker.panel-item-selected-bg': fields.accent,
+        'date-picker.panel-item-selected-color': fields.primary,
+        'date-picker.panel-item-selected-hover-bg': fields.muted,
         'date-picker.range-bg': fields.accent,
         'time-picker.column-border': fields.border,
         'time-picker.cell-bg-selected': fields.primary,
@@ -222,11 +233,15 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'calendar.bg': fields.card,
         'calendar.border': fields.border,
         'calendar.radius': fields.cardRadius,
-        'calendar.hover': fields.muted,
-        'calendar.nav-button-color': fields.mutedForeground,
-        'calendar.nav-button-color-hover': fields.primary,
-        'calendar.title-color': fields.cardForeground,
-        'calendar.title-color-hover': fields.primary,
+        'calendar.cell-hover-bg': fields.muted,
+        'calendar.header-action-color': fields.mutedForeground,
+        'calendar.header-action-color-hover': fields.primary,
+        'calendar.header-action-hover-bg': fields.muted,
+        'calendar.header-action-focus-ring': fields.ring,
+        'calendar.header-label-color': fields.cardForeground,
+        'calendar.header-label-color-hover': fields.primary,
+        'calendar.header-label-hover-bg': fields.muted,
+        'calendar.header-label-focus-ring': fields.ring,
         'calendar.cell-header-color': fields.mutedForeground,
         'calendar.week-number-color': fields.mutedForeground,
         'calendar.cell-color': fields.cardForeground,
@@ -238,10 +253,16 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'calendar.range-bg': fields.accent,
         'calendar.cell-focus-outline': fields.shadowFocus,
         'calendar.cell-dot-color': fields.primary,
-        'calendar.panel-cell-radius': fields.inputRadius,
-        'calendar.panel-cell-color-selected': fields.primaryForeground,
-        'calendar.panel-cell-bg-selected': fields.primary,
-        'calendar.today-link-color': fields.primary,
+        'calendar.panel-item-radius': fields.inputRadius,
+        'calendar.panel-item-hover-bg': fields.muted,
+        'calendar.panel-item-selected-color': fields.primaryForeground,
+        'calendar.panel-item-selected-bg': fields.primary,
+        'calendar.panel-item-selected-hover-bg': fields.primary,
+        'calendar.today-color': fields.primary,
+        'calendar.today-color-hover': fields.primary,
+        'calendar.today-hover-bg': fields.accent,
+        'calendar.today-active-bg': fields.muted,
+        'calendar.today-focus-ring': fields.ring,
         'cascader.height.sm': fields.fieldHeightSm,
         'cascader.height.md': fields.fieldHeightMd,
         'cascader.height.lg': fields.fieldHeightLg,
diff --git a/apps/docs/src/containers/token-explorer/index.tsx b/apps/docs/src/containers/token-explorer/index.tsx
new file mode 100644
index 000000000..07c06727b
--- /dev/null
+++ b/apps/docs/src/containers/token-explorer/index.tsx
@@ -0,0 +1,601 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import registryData from '@tiny-design/tokens/registry-runtime';
+import { useSearchParams } from 'react-router-dom';
+import {
+  Button,
+  Calendar,
+  Card,
+  DatePicker,
+  Input,
+  Select,
+  Tag,
+  Textarea,
+  TimePicker,
+} from '@tiny-design/react';
+import { useLocaleContext } from '../../context/locale-context';
+import './token-explorer.scss';
+
+type RegistryToken = {
+  key: string;
+  cssVar: string;
+  category: string;
+  component?: string;
+  type: string;
+  group?: string;
+  description?: string;
+  source: string;
+  defaultValue?: string;
+  fallback?: string;
+  status: string;
+};
+
+type RegistryShape = {
+  version: number;
+  generatedAt: string;
+  tokens: RegistryToken[];
+};
+
+type PreviewRenderer = () => React.ReactElement;
+
+const registry = registryData as RegistryShape;
+
+function titleCase(value: string): string {
+  return value
+    .split(/[-.]/)
+    .filter(Boolean)
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join(' ');
+}
+
+function getSemanticGroup(component: string, tokenKey: string): string {
+  const remainder = tokenKey.replace(`${component}.`, '');
+
+  if (remainder.startsWith('header-')) return 'Header';
+  if (remainder.startsWith('cell-')) return 'Cells';
+  if (remainder.startsWith('panel-item-')) return 'Panel Items';
+  if (remainder.startsWith('today-')) return 'Today Action';
+  if (remainder.startsWith('input-')) return 'Input';
+  if (remainder.startsWith('range-')) return 'Range';
+  if (remainder.startsWith('week-number-')) return 'Week Numbers';
+  if (remainder.startsWith('month-content-')) return 'Panel Items';
+  if (remainder.startsWith('footer-')) return 'Footer';
+  if (remainder.startsWith('body-')) return 'Body';
+
+  const [firstSegment] = remainder.split('.');
+  return titleCase(firstSegment);
+}
+
+function formatComponentLabel(component: string): string {
+  return component
+    .split('-')
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join(' ');
+}
+
+function isColorValue(value: string | undefined): boolean {
+  if (!value) return false;
+  if (typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
+    return CSS.supports('color', value);
+  }
+  return false;
+}
+
+const TokenExplorer = (): React.ReactElement => {
+  const { siteLocale } = useLocaleContext();
+  const isZh = siteLocale.locale === 'zh_CN';
+  const labels = useMemo(
+    () =>
+      isZh
+        ? {
+            title: 'Token Explorer',
+            intro:
+              '浏览组件 token 的最小可用面板。组件列表会自动从 registry 生成，重点组件提供实时预览，用来检查命名、分组、默认值与运行时 CSS 变量。',
+            component: '组件',
+            search: '搜索 token',
+            searchPlaceholder: '按 key、描述或 CSS 变量搜索',
+            summary: '摘要',
+            groups: '分组',
+            type: '类型',
+            tokens: 'Tokens',
+            components: '组件数',
+            generatedAt: '生成时间',
+            previewStatus: '预览',
+            defaultValue: '默认值',
+            fallback: 'Fallback',
+            resolvedValue: '当前值',
+            source: '来源',
+            preview: '实时预览',
+            previewDesc:
+              '右侧预览直接使用当前 docs 主题环境，适合快速核对 token 是否命中对应界面。',
+            previewMissing: '这个组件还没有专用预览，当前版本先提供 token 浏览能力。',
+            copyKey: '复制 Key',
+            copyVar: '复制变量',
+            copied: '已复制',
+            empty: '没有匹配的 token。',
+            allGroups: '全部分组',
+            allTypes: '全部类型',
+            previewReady: '已配置',
+            previewMissingBadge: '待补',
+          }
+        : {
+            title: 'Token Explorer',
+            intro:
+              'A minimal token browser for component tokens. The component list is generated from the registry, and key components include live previews so token naming, grouping, defaults, and runtime CSS vars are easy to inspect.',
+            component: 'Component',
+            search: 'Search Tokens',
+            searchPlaceholder: 'Search by key, description, or CSS variable',
+            summary: 'Summary',
+            groups: 'Groups',
+            type: 'Type',
+            tokens: 'Tokens',
+            components: 'Components',
+            generatedAt: 'Generated',
+            previewStatus: 'Preview',
+            defaultValue: 'Default',
+            fallback: 'Fallback',
+            resolvedValue: 'Resolved',
+            source: 'Source',
+            preview: 'Live Preview',
+            previewDesc:
+              'The preview uses the current docs theme environment, so it is useful for quick token-to-UI verification.',
+            previewMissing:
+              'This component does not have a dedicated preview yet. In this version, token browsing still works without it.',
+            copyKey: 'Copy Key',
+            copyVar: 'Copy Var',
+            copied: 'Copied',
+            empty: 'No matching tokens.',
+            allGroups: 'All Groups',
+            allTypes: 'All Types',
+            previewReady: 'Ready',
+            previewMissingBadge: 'Pending',
+          },
+    [isZh]
+  );
+
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const previewRenderers = useMemo<Record<string, PreviewRenderer>>(
+    () => ({
+      'date-picker': () => (
+        <div className="token-explorer__preview-stack">
+          <Card className="token-explorer__preview-card" title="Date Panel">
+            <Card.Content>
+              <div className="token-explorer__preview-date-picker">
+                <DatePicker open defaultValue={new Date(2026, 3, 15)} />
+              </div>
+            </Card.Content>
+          </Card>
+          <Card className="token-explorer__preview-card" title="Year Panel">
+            <Card.Content>
+              <div className="token-explorer__preview-date-picker">
+                <DatePicker open picker="year" defaultValue={new Date(2026, 0, 1)} />
+              </div>
+            </Card.Content>
+          </Card>
+        </div>
+      ),
+      calendar: () => (
+        <div className="token-explorer__preview-stack">
+          <Card className="token-explorer__preview-card" title="Card Calendar">
+            <Card.Content>
+              <div className="token-explorer__preview-calendar">
+                <Calendar fullscreen={false} showToday value={new Date(2026, 3, 15)} />
+              </div>
+            </Card.Content>
+          </Card>
+        </div>
+      ),
+      button: () => (
+        <div className="token-explorer__preview-stack">
+          <Card className="token-explorer__preview-card" title="Buttons">
+            <Card.Content>
+              <div className="token-explorer__button-preview">
+                <Button color="primary">Primary</Button>
+                <Button variant="outline" color="primary">
+                  Outline
+                </Button>
+                <Button variant="ghost" color="primary">
+                  Ghost
+                </Button>
+              </div>
+            </Card.Content>
+          </Card>
+        </div>
+      ),
+      input: () => (
+        <div className="token-explorer__preview-stack">
+          <Card className="token-explorer__preview-card" title="Inputs">
+            <Card.Content>
+              <div className="token-explorer__form-preview">
+                <Input defaultValue="Tokyo Design Team" />
+                <Input placeholder="Search tokens" />
+              </div>
+            </Card.Content>
+          </Card>
+        </div>
+      ),
+      textarea: () => (
+        <div className="token-explorer__preview-stack">
+          <Card className="token-explorer__preview-card" title="Textarea">
+            <Card.Content>
+              <Textarea rows={4} defaultValue="Token explorer preview for multiline field states." />
+            </Card.Content>
+          </Card>
+        </div>
+      ),
+      select: () => (
+        <div className="token-explorer__preview-stack">
+          <Card className="token-explorer__preview-card" title="Select">
+            <Card.Content>
+              <Select defaultValue="design" style={{ width: '100%' }}>
+                <Select.Option value="design">Design</Select.Option>
+                <Select.Option value="engineering">Engineering</Select.Option>
+                <Select.Option value="product">Product</Select.Option>
+              </Select>
+            </Card.Content>
+          </Card>
+        </div>
+      ),
+      'time-picker': () => (
+        <div className="token-explorer__preview-stack">
+          <Card className="token-explorer__preview-card" title="Time Picker">
+            <Card.Content>
+              <div className="token-explorer__preview-time-picker">
+                <TimePicker open value={new Date(2026, 3, 15, 9, 30, 0)} />
+              </div>
+            </Card.Content>
+          </Card>
+        </div>
+      ),
+    }),
+    []
+  );
+
+  const componentOptions = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          registry.tokens
+            .filter((token) => token.category === 'component' && token.component)
+            .map((token) => token.component as string)
+        )
+      )
+        .sort((a, b) => {
+          const aHasPreview = Number(Boolean(previewRenderers[a]));
+          const bHasPreview = Number(Boolean(previewRenderers[b]));
+          if (aHasPreview !== bHasPreview) return bHasPreview - aHasPreview;
+          return a.localeCompare(b);
+        })
+        .map((component) => ({
+          value: component,
+          label: formatComponentLabel(component),
+          hasPreview: Boolean(previewRenderers[component]),
+        })),
+    [previewRenderers]
+  );
+
+  const defaultComponent = useMemo(
+    () =>
+      componentOptions.find((option) => option.value === 'date-picker')?.value ??
+      componentOptions[0]?.value ??
+      '',
+    [componentOptions]
+  );
+
+  const [selectedComponent, setSelectedComponent] = useState<string>(
+    searchParams.get('component') || defaultComponent
+  );
+  const [search, setSearch] = useState(searchParams.get('q') || '');
+  const [selectedGroup, setSelectedGroup] = useState(searchParams.get('group') || 'all');
+  const [selectedType, setSelectedType] = useState(searchParams.get('type') || 'all');
+  const [resolvedValues, setResolvedValues] = useState<Record<string, string>>({});
+  const [copiedValue, setCopiedValue] = useState<string | null>(null);
+
+  const componentTokens = useMemo(
+    () =>
+      registry.tokens.filter(
+        (token) => token.category === 'component' && token.component === selectedComponent
+      ),
+    [selectedComponent]
+  );
+
+  const typeOptions = useMemo(
+    () => [labels.allTypes, ...Array.from(new Set(componentTokens.map((token) => token.type))).sort()],
+    [componentTokens, labels.allTypes]
+  );
+
+  const groupOptions = useMemo(() => {
+    const groups = Array.from(
+      new Set(componentTokens.map((token) => getSemanticGroup(selectedComponent, token.key)))
+    );
+
+    return [labels.allGroups, ...groups];
+  }, [componentTokens, labels.allGroups, selectedComponent]);
+
+  const filteredTokens = useMemo(() => {
+    const query = search.trim().toLowerCase();
+
+    return componentTokens.filter((token) => {
+      const semanticGroup = getSemanticGroup(selectedComponent, token.key);
+      const matchesGroup = selectedGroup === 'all' || semanticGroup === selectedGroup;
+      const matchesType = selectedType === 'all' || token.type === selectedType;
+      const matchesSearch =
+        query.length === 0 ||
+        token.key.toLowerCase().includes(query) ||
+        token.cssVar.toLowerCase().includes(query) ||
+        (token.description ?? '').toLowerCase().includes(query);
+
+      return matchesGroup && matchesType && matchesSearch;
+    });
+  }, [componentTokens, search, selectedComponent, selectedGroup, selectedType]);
+
+  const groupedTokens = useMemo(() => {
+    const groups = new Map<string, RegistryToken[]>();
+
+    filteredTokens.forEach((token) => {
+      const semanticGroup = getSemanticGroup(selectedComponent, token.key);
+      const current = groups.get(semanticGroup) ?? [];
+      current.push(token);
+      groups.set(semanticGroup, current);
+    });
+
+    return Array.from(groups.entries());
+  }, [filteredTokens, selectedComponent]);
+
+  useEffect(() => {
+    const updateResolvedValues = () => {
+      const styles = getComputedStyle(document.documentElement);
+      const nextValues: Record<string, string> = {};
+      componentTokens.forEach((token) => {
+        nextValues[token.cssVar] = styles.getPropertyValue(token.cssVar).trim();
+      });
+      setResolvedValues(nextValues);
+    };
+
+    updateResolvedValues();
+
+    const observer = new MutationObserver(updateResolvedValues);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'style', 'data-tiny-theme'],
+    });
+
+    return () => observer.disconnect();
+  }, [componentTokens]);
+
+  useEffect(() => {
+    setSelectedGroup('all');
+    setSelectedType('all');
+  }, [selectedComponent]);
+
+  useEffect(() => {
+    if (!componentOptions.some((option) => option.value === selectedComponent)) {
+      setSelectedComponent(defaultComponent);
+    }
+  }, [componentOptions, defaultComponent, selectedComponent]);
+
+  useEffect(() => {
+    const nextParams = new URLSearchParams();
+    if (selectedComponent) nextParams.set('component', selectedComponent);
+    if (search.trim()) nextParams.set('q', search.trim());
+    if (selectedGroup !== 'all') nextParams.set('group', selectedGroup);
+    if (selectedType !== 'all') nextParams.set('type', selectedType);
+    if (nextParams.toString() !== searchParams.toString()) {
+      setSearchParams(nextParams, { replace: true });
+    }
+  }, [search, searchParams, selectedComponent, selectedGroup, selectedType, setSearchParams]);
+
+  const handleCopy = async (value: string) => {
+    if (!value) return;
+    await navigator.clipboard.writeText(value);
+    setCopiedValue(value);
+    window.setTimeout(() => {
+      setCopiedValue((current) => (current === value ? null : current));
+    }, 1200);
+  };
+
+  const renderPreview = () => {
+    const renderer = previewRenderers[selectedComponent];
+
+    if (renderer) {
+      return renderer();
+    }
+
+    return (
+      <div className="token-explorer__preview-stack">
+        <Card className="token-explorer__preview-card" title={formatComponentLabel(selectedComponent)}>
+          <Card.Content>
+            <p className="token-explorer__preview-empty">{labels.previewMissing}</p>
+          </Card.Content>
+        </Card>
+      </div>
+    );
+  };
+
+  return (
+    <div className="token-explorer">
+      <h1 className="markdown__heading-1">{labels.title}</h1>
+      <p className="markdown__p">{labels.intro}</p>
+
+      <div className="token-explorer__layout">
+        <div className="token-explorer__main">
+          <Card className="token-explorer__controls-card">
+            <Card.Content>
+              <div className="token-explorer__controls">
+                <label className="token-explorer__field">
+                  <span className="token-explorer__field-label">{labels.component}</span>
+                  <Select
+                    value={selectedComponent}
+                    onChange={(value) => setSelectedComponent(String(value))}>
+                    {componentOptions.map((option) => (
+                      <Select.Option key={option.value} value={option.value}>
+                        {option.label}
+                      </Select.Option>
+                    ))}
+                  </Select>
+                </label>
+
+                <label className="token-explorer__field">
+                  <span className="token-explorer__field-label">{labels.groups}</span>
+                  <Select value={selectedGroup} onChange={(value) => setSelectedGroup(String(value))}>
+                    <Select.Option value="all">{labels.allGroups}</Select.Option>
+                    {groupOptions
+                      .filter((group) => group !== labels.allGroups)
+                      .map((group) => (
+                        <Select.Option key={group} value={group}>
+                          {group}
+                        </Select.Option>
+                      ))}
+                  </Select>
+                </label>
+
+                <label className="token-explorer__field">
+                  <span className="token-explorer__field-label">{labels.type}</span>
+                  <Select value={selectedType} onChange={(value) => setSelectedType(String(value))}>
+                    <Select.Option value="all">{labels.allTypes}</Select.Option>
+                    {typeOptions
+                      .filter((type) => type !== labels.allTypes)
+                      .map((type) => (
+                        <Select.Option key={type} value={type}>
+                          {type}
+                        </Select.Option>
+                      ))}
+                  </Select>
+                </label>
+
+                <label className="token-explorer__field token-explorer__field_search">
+                  <span className="token-explorer__field-label">{labels.search}</span>
+                  <Input
+                    value={search}
+                    placeholder={labels.searchPlaceholder}
+                    onChange={(event) => setSearch(event.target.value)}
+                  />
+                </label>
+              </div>
+
+              <div className="token-explorer__summary">
+                <div className="token-explorer__summary-item">
+                  <span>{labels.summary}</span>
+                  <strong>{componentOptions.find((option) => option.value === selectedComponent)?.label}</strong>
+                </div>
+                <div className="token-explorer__summary-item">
+                  <span>{labels.previewStatus}</span>
+                  <strong>
+                    {componentOptions.find((option) => option.value === selectedComponent)?.hasPreview
+                      ? labels.previewReady
+                      : labels.previewMissingBadge}
+                  </strong>
+                </div>
+                <div className="token-explorer__summary-item">
+                  <span>{labels.groups}</span>
+                  <strong>{groupedTokens.length}</strong>
+                </div>
+                <div className="token-explorer__summary-item">
+                  <span>{labels.tokens}</span>
+                  <strong>{filteredTokens.length}</strong>
+                </div>
+                <div className="token-explorer__summary-item">
+                  <span>{labels.components}</span>
+                  <strong>{componentOptions.length}</strong>
+                </div>
+                <div className="token-explorer__summary-item">
+                  <span>{labels.generatedAt}</span>
+                  <strong>{new Date(registry.generatedAt).toLocaleDateString()}</strong>
+                </div>
+              </div>
+            </Card.Content>
+          </Card>
+
+          {groupedTokens.length === 0 ? (
+            <Card className="token-explorer__group-card">
+              <Card.Content>{labels.empty}</Card.Content>
+            </Card>
+          ) : null}
+
+          {groupedTokens.map(([groupName, tokens]) => (
+            <Card key={groupName} className="token-explorer__group-card">
+              <Card.Content>
+                <div className="token-explorer__group-header">
+                  <h2 className="token-explorer__group-title">{groupName}</h2>
+                  <Tag>{tokens.length}</Tag>
+                </div>
+                <div className="token-explorer__token-list">
+                  {tokens.map((token) => (
+                    <article key={token.key} className="token-explorer__token-card">
+                      <div className="token-explorer__token-head">
+                        <div>
+                          <div className="token-explorer__token-key">{token.key}</div>
+                          <div className="token-explorer__token-var">{token.cssVar}</div>
+                        </div>
+                        <div className="token-explorer__token-badges">
+                          {isColorValue(resolvedValues[token.cssVar]) ? (
+                            <span
+                              className="token-explorer__token-swatch"
+                              style={{ backgroundColor: resolvedValues[token.cssVar] }}
+                              aria-label={resolvedValues[token.cssVar]}
+                              title={resolvedValues[token.cssVar]}
+                            />
+                          ) : null}
+                          <Tag variant="soft">{token.type}</Tag>
+                        </div>
+                      </div>
+                      {token.description ? (
+                        <p className="token-explorer__token-desc">{token.description}</p>
+                      ) : null}
+                      <div className="token-explorer__token-actions">
+                        <button
+                          type="button"
+                          className="token-explorer__copy-btn"
+                          onClick={() => handleCopy(token.key)}>
+                          {copiedValue === token.key ? labels.copied : labels.copyKey}
+                        </button>
+                        <button
+                          type="button"
+                          className="token-explorer__copy-btn"
+                          onClick={() => handleCopy(token.cssVar)}>
+                          {copiedValue === token.cssVar ? labels.copied : labels.copyVar}
+                        </button>
+                      </div>
+                      <dl className="token-explorer__token-meta">
+                        <div>
+                          <dt>{labels.defaultValue}</dt>
+                          <dd>{token.defaultValue ?? '-'}</dd>
+                        </div>
+                        <div>
+                          <dt>{labels.fallback}</dt>
+                          <dd>{token.fallback ?? '-'}</dd>
+                        </div>
+                        <div>
+                          <dt>{labels.resolvedValue}</dt>
+                          <dd>{resolvedValues[token.cssVar] || '-'}</dd>
+                        </div>
+                        <div>
+                          <dt>{labels.source}</dt>
+                          <dd>{token.source}</dd>
+                        </div>
+                      </dl>
+                    </article>
+                  ))}
+                </div>
+              </Card.Content>
+            </Card>
+          ))}
+        </div>
+
+        <aside className="token-explorer__aside">
+          <Card className="token-explorer__preview-shell">
+            <Card.Content>
+              <div className="token-explorer__preview-header">
+                <h2 className="token-explorer__preview-title">{labels.preview}</h2>
+                <p className="token-explorer__preview-desc">{labels.previewDesc}</p>
+              </div>
+              {renderPreview()}
+            </Card.Content>
+          </Card>
+        </aside>
+      </div>
+    </div>
+  );
+};
+
+export default TokenExplorer;
diff --git a/apps/docs/src/containers/token-explorer/token-explorer.scss b/apps/docs/src/containers/token-explorer/token-explorer.scss
new file mode 100644
index 000000000..b2aeda669
--- /dev/null
+++ b/apps/docs/src/containers/token-explorer/token-explorer.scss
@@ -0,0 +1,267 @@
+.token-explorer {
+  &__layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.9fr);
+    gap: 24px;
+    align-items: start;
+  }
+
+  &__main,
+  &__preview-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  &__aside {
+    position: sticky;
+    top: 24px;
+  }
+
+  &__controls-card,
+  &__group-card,
+  &__preview-shell,
+  &__preview-card {
+    border-radius: 16px;
+  }
+
+  &__controls {
+    display: grid;
+    grid-template-columns: 180px 180px 160px minmax(0, 1fr);
+    gap: 16px;
+    align-items: end;
+  }
+
+  &__field {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  &__field_search {
+    min-width: 0;
+  }
+
+  &__field-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--ty-color-text-secondary);
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+  }
+
+  &__summary {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 12px;
+    margin-top: 16px;
+  }
+
+  &__summary-item {
+    padding: 12px 14px;
+    border: 1px solid var(--ty-color-border-light);
+    border-radius: 12px;
+    background: linear-gradient(180deg, var(--ty-color-bg-container) 0%, var(--ty-color-fill-quaternary) 100%);
+  }
+
+  &__summary-item span {
+    display: block;
+    margin-bottom: 6px;
+    font-size: 12px;
+    color: var(--ty-color-text-secondary);
+  }
+
+  &__summary-item strong {
+    font-size: 14px;
+    color: var(--ty-color-text);
+    word-break: break-word;
+  }
+
+  &__group-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+
+  &__group-title,
+  &__preview-title {
+    margin: 0;
+    font-size: 18px;
+    line-height: 1.2;
+  }
+
+  &__token-list {
+    display: grid;
+    gap: 12px;
+  }
+
+  &__token-card {
+    padding: 16px;
+    border: 1px solid var(--ty-color-border-light);
+    border-radius: 14px;
+    background: var(--ty-color-bg-container);
+  }
+
+  &__token-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  &__token-badges {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  &__token-swatch {
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--ty-color-border-light);
+    border-radius: 999px;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
+  }
+
+  &__token-key {
+    font-family: var(--ty-font-mono);
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--ty-color-text);
+    word-break: break-word;
+  }
+
+  &__token-var {
+    margin-top: 4px;
+    font-family: var(--ty-font-mono);
+    font-size: 12px;
+    color: var(--ty-color-text-secondary);
+    word-break: break-word;
+  }
+
+  &__token-desc {
+    margin: 12px 0 0;
+    color: var(--ty-color-text-secondary);
+  }
+
+  &__token-actions {
+    display: flex;
+    gap: 8px;
+    margin-top: 12px;
+  }
+
+  &__copy-btn {
+    padding: 4px 10px;
+    border: 1px solid var(--ty-color-border-light);
+    border-radius: 999px;
+    background: var(--ty-color-bg-container);
+    color: var(--ty-color-text-secondary);
+    cursor: pointer;
+    font-size: 12px;
+    line-height: 1.4;
+    transition:
+      color 0.2s,
+      border-color 0.2s,
+      background-color 0.2s;
+  }
+
+  &__copy-btn:hover {
+    color: var(--ty-color-primary);
+    border-color: var(--ty-color-primary-border);
+    background: var(--ty-color-primary-bg);
+  }
+
+  &__token-meta {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px 16px;
+    margin: 14px 0 0;
+  }
+
+  &__token-meta div {
+    min-width: 0;
+  }
+
+  &__token-meta dt {
+    margin-bottom: 4px;
+    font-size: 12px;
+    color: var(--ty-color-text-secondary);
+  }
+
+  &__token-meta dd {
+    margin: 0;
+    font-family: var(--ty-font-mono);
+    font-size: 12px;
+    color: var(--ty-color-text);
+    word-break: break-word;
+  }
+
+  &__preview-header {
+    margin-bottom: 16px;
+  }
+
+  &__preview-desc {
+    margin: 8px 0 0;
+    color: var(--ty-color-text-secondary);
+  }
+
+  &__preview-date-picker {
+    width: 100%;
+    min-height: 360px;
+  }
+
+  &__preview-date-picker .ty-date-picker {
+    max-width: 100%;
+  }
+
+  &__preview-date-picker .ty-date-picker__dropdown {
+    position: static;
+    margin-top: 12px;
+    box-shadow: var(--ty-shadow-card);
+  }
+
+  &__preview-time-picker .ty-time-picker__dropdown {
+    position: static;
+    margin-top: 12px;
+    box-shadow: var(--ty-shadow-card);
+  }
+
+  &__preview-calendar {
+    display: flex;
+    justify-content: center;
+  }
+
+  &__button-preview,
+  &__form-preview {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  &__preview-empty {
+    margin: 0;
+    color: var(--ty-color-text-secondary);
+  }
+
+  @media (max-width: 1100px) {
+    &__layout {
+      grid-template-columns: 1fr;
+    }
+
+    &__aside {
+      position: static;
+    }
+  }
+
+  @media (max-width: 720px) {
+    &__controls,
+    &__summary,
+    &__token-meta {
+      grid-template-columns: 1fr;
+    }
+  }
+}
diff --git a/apps/docs/src/index.tsx b/apps/docs/src/index.tsx
index 5e2a1d973..8614c6fdb 100755
--- a/apps/docs/src/index.tsx
+++ b/apps/docs/src/index.tsx
@@ -1,21 +1,22 @@
-import React from 'react';
+import React, { Suspense, lazy } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { MDXProvider } from '@mdx-js/react';
 import '@tiny-design/react/style/index.scss';
 import '@tiny-design/charts/style/index.scss';
+import { IntlProvider, Loader } from '@tiny-design/react';
 import './index.scss';
 import './utils/theme-persistence';
 
-import { IntlProvider } from '@tiny-design/react';
 import { components } from './components/markdown-tag';
 import { Header } from './components/header';
 import { SidebarToggleProvider } from './context/sidebar-toggle-context';
 import { LocaleProvider, useLocaleContext } from './context/locale-context';
-import HomePage from './containers/home';
-import GuidePage from './containers/guide';
-import ThemePage from './containers/theme';
-import ComponentsPage from './containers/components';
+
+const HomePage = lazy(() => import('./containers/home'));
+const GuidePage = lazy(() => import('./containers/guide'));
+const ThemePage = lazy(() => import('./containers/theme'));
+const ComponentsPage = lazy(() => import('./containers/components'));
 
 const basename = (import.meta.env.BASE_URL || '/').replace(/\/$/, '');
 
@@ -24,12 +25,19 @@ const AppInner = (): React.ReactElement => {
   return (
     <IntlProvider locale={locale}>
       <Header />
-      <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/guide/*" element={<GuidePage />} />
-        <Route path="/theme/*" element={<ThemePage />} />
-        <Route path="/components/*" element={<ComponentsPage />} />
-      </Routes>
+      <Suspense
+        fallback={
+          <div className="doc-container__fallback">
+            <Loader />
+          </div>
+        }>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/guide/*" element={<GuidePage />} />
+          <Route path="/theme/*" element={<ThemePage />} />
+          <Route path="/components/*" element={<ComponentsPage />} />
+        </Routes>
+      </Suspense>
     </IntlProvider>
   );
 };
diff --git a/apps/docs/src/locale/en_US.ts b/apps/docs/src/locale/en_US.ts
index b81cddc06..ce10f2f53 100644
--- a/apps/docs/src/locale/en_US.ts
+++ b/apps/docs/src/locale/en_US.ts
@@ -152,6 +152,7 @@ const en_US: SiteLocale = {
   themeMenu: {
     customiseTheme: 'Customise Theme',
     colors: 'Colors',
+    tokenExplorer: 'Token Explorer',
     themeStudio: 'Theme Studio',
   },
   color: {
diff --git a/apps/docs/src/locale/types.ts b/apps/docs/src/locale/types.ts
index a0ea10f5e..6247ef28f 100644
--- a/apps/docs/src/locale/types.ts
+++ b/apps/docs/src/locale/types.ts
@@ -81,6 +81,7 @@ export type SiteLocale = {
   themeMenu: {
     customiseTheme: string;
     colors: string;
+    tokenExplorer: string;
     themeStudio: string;
   };
   color: {
diff --git a/apps/docs/src/locale/zh_CN.ts b/apps/docs/src/locale/zh_CN.ts
index 45efb8b01..0574cc0c1 100644
--- a/apps/docs/src/locale/zh_CN.ts
+++ b/apps/docs/src/locale/zh_CN.ts
@@ -148,6 +148,7 @@ const zh_CN: SiteLocale = {
   themeMenu: {
     customiseTheme: '自定义主题',
     colors: '色彩',
+    tokenExplorer: 'Token 浏览器',
     themeStudio: '主题工作台',
   },
   color: {
diff --git a/apps/docs/src/routers.tsx b/apps/docs/src/routers.tsx
index 81a047c32..2b5cf75c1 100755
--- a/apps/docs/src/routers.tsx
+++ b/apps/docs/src/routers.tsx
@@ -62,6 +62,10 @@ const guide = {
     () => import('./containers/theme-studio'),
     () => import('./containers/theme-studio'),
   ),
+  tokenExplorer: ll(
+    () => import('./containers/token-explorer'),
+    () => import('./containers/token-explorer'),
+  ),
 };
 
 // Component lazy imports
@@ -192,6 +196,7 @@ export const getThemeMenu = (s: SiteLocale): RouterItem[] => {
   return [
     { title: s.themeMenu.customiseTheme, route: 'customise-theme', component: pick(guide.customiseTheme, isZh) },
     { title: s.themeMenu.colors, route: 'colors', component: pick(guide.colors, isZh) },
+    { title: s.themeMenu.tokenExplorer, route: 'token-explorer', component: pick(guide.tokenExplorer, isZh) },
     { title: s.themeMenu.themeStudio, route: 'theme-studio', component: pick(guide.themeStudio, isZh) },
   ];
 };
diff --git a/apps/docs/src/utils/sandbox.ts b/apps/docs/src/utils/sandbox.ts
index 053be21e4..bda7cace2 100644
--- a/apps/docs/src/utils/sandbox.ts
+++ b/apps/docs/src/utils/sandbox.ts
@@ -6,6 +6,9 @@ declare const __TINY_VERSION__: string;
 const TINY_VERSION = `^${__TINY_VERSION__}`;
 const TINY_DESIGN_VERSION = TINY_VERSION;
 const TINY_ICONS_VERSION = TINY_VERSION;
+const TINY_CHARTS_VERSION = TINY_VERSION;
+const RECHARTS_VERSION = '^3.8.1';
+const REACT_IS_VERSION = '^18.3.1';
 
 const BOOTSTRAP_CODE = `import React from 'react';
 import { createRoot } from 'react-dom/client';
@@ -17,6 +20,36 @@ createRoot(document.getElementById('root')!).render(
   </React.StrictMode>,
 );`;
 
+function getSandboxDependencies(sourceCode: string): Record<string, string> {
+  const dependencies: Record<string, string> = {
+    react: '^18.2.0',
+    'react-dom': '^18.2.0',
+    '@tiny-design/react': TINY_DESIGN_VERSION,
+    '@tiny-design/icons': TINY_ICONS_VERSION,
+  };
+
+  const importPattern = /(?:from\s+|import\s+)['"]([^'"]+)['"]/g;
+  const importedPackages = new Set<string>();
+
+  for (const match of sourceCode.matchAll(importPattern)) {
+    importedPackages.add(match[1]);
+  }
+
+  if (
+    importedPackages.has('@tiny-design/charts') ||
+    importedPackages.has('@tiny-design/charts/style')
+  ) {
+    dependencies['@tiny-design/charts'] = TINY_CHARTS_VERSION;
+  }
+
+  if (importedPackages.has('recharts')) {
+    dependencies.recharts = RECHARTS_VERSION;
+    dependencies['react-is'] = REACT_IS_VERSION;
+  }
+
+  return dependencies;
+}
+
 /**
  * Generate the file set for StackBlitz (Vite-based).
  */
@@ -27,12 +60,7 @@ function buildStackBlitzFiles(sourceCode: string): Record<string, string> {
         name: 'tiny-design-demo',
         private: true,
         scripts: { dev: 'vite', build: 'vite build' },
-        dependencies: {
-          react: '^18.2.0',
-          'react-dom': '^18.2.0',
-          '@tiny-design/react': TINY_DESIGN_VERSION,
-          '@tiny-design/icons': TINY_ICONS_VERSION,
-        },
+        dependencies: getSandboxDependencies(sourceCode),
         devDependencies: {
           '@vitejs/plugin-react': '^4.0.0',
           vite: '^5.0.0',
@@ -77,12 +105,7 @@ function buildCodeSandboxFiles(sourceCode: string): Record<string, string> {
       {
         name: 'tiny-design-demo',
         private: true,
-        dependencies: {
-          react: '^18.2.0',
-          'react-dom': '^18.2.0',
-          '@tiny-design/react': TINY_DESIGN_VERSION,
-          '@tiny-design/icons': TINY_ICONS_VERSION,
-        },
+        dependencies: getSandboxDependencies(sourceCode),
       },
       null,
       2,
diff --git a/apps/docs/vite.config.ts b/apps/docs/vite.config.ts
index 2b052b9af..ec5fd0fcb 100644
--- a/apps/docs/vite.config.ts
+++ b/apps/docs/vite.config.ts
@@ -7,13 +7,28 @@ import path from 'path';
 import { readFileSync } from 'fs';
 
 const reactPkg = path.resolve(__dirname, '../../packages/react/package.json');
-const reactSrc = path.resolve(__dirname, '../../packages/react/src');
-const iconsSrc = path.resolve(__dirname, '../../packages/icons/src');
-const chartsSrc = path.resolve(__dirname, '../../packages/charts/src');
+const reactDir = path.resolve(__dirname, '../../packages/react');
+const reactEs = path.join(reactDir, 'es/index.js');
+const iconsDir = path.resolve(__dirname, '../../packages/icons');
+const iconsEs = path.join(iconsDir, 'es/index.js');
+const chartsDir = path.resolve(__dirname, '../../packages/charts');
+const chartsEs = path.join(chartsDir, 'es/index.js');
 const tokensDir = path.resolve(__dirname, '../../packages/tokens');
 
 const tinyVersion = JSON.parse(readFileSync(reactPkg, 'utf-8')).version;
 
+function getPackageName(id: string): string | null {
+  const match = id.match(
+    /\/node_modules\/(?:\.pnpm\/[^/]+\/node_modules\/)?((?:@[^/]+\/)?[^/]+)/
+  );
+
+  return match?.[1] || null;
+}
+
+function sanitizeChunkName(value: string): string {
+  return value.replace(/[^a-zA-Z0-9_-]/g, '-');
+}
+
 export default defineConfig({
   base: process.env.VITE_BASE || '/',
   define: {
@@ -30,13 +45,16 @@ export default defineConfig({
     react({ include: /\.(jsx|tsx|md|mdx)$/ }),
   ],
   resolve: {
-    alias: {
-      '@tiny-design/react': reactSrc,
-      '@tiny-design/icons': iconsSrc,
-      '@tiny-design/charts': chartsSrc,
-      '@tiny-design/tokens/registry': path.join(tokensDir, 'dist/registry.json'),
-      '@mdx-js/react': path.resolve(__dirname, 'node_modules/@mdx-js/react'),
-    },
+    alias: [
+      { find: /^@tiny-design\/react$/, replacement: reactEs },
+      { find: /^@tiny-design\/react\/(.*)$/, replacement: path.join(reactDir, 'es/$1') },
+      { find: /^@tiny-design\/icons$/, replacement: iconsEs },
+      { find: /^@tiny-design\/icons\/(.*)$/, replacement: path.join(iconsDir, 'es/$1') },
+      { find: /^@tiny-design\/charts$/, replacement: chartsEs },
+      { find: /^@tiny-design\/charts\/(.*)$/, replacement: path.join(chartsDir, 'es/$1') },
+      { find: '@tiny-design/tokens/registry-runtime', replacement: path.join(tokensDir, 'runtime/registry.mjs') },
+      { find: '@mdx-js/react', replacement: path.resolve(__dirname, 'node_modules/@mdx-js/react') },
+    ],
     dedupe: ['react', 'react-dom'],
   },
   server: {
@@ -48,6 +66,76 @@ export default defineConfig({
   },
   build: {
     outDir: 'build',
+    chunkSizeWarningLimit: 750,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('/packages/react/es/')) {
+            return 'tiny-react';
+          }
+
+          if (id.includes('/packages/icons/es/')) {
+            return 'tiny-icons';
+          }
+
+          if (id.includes('/packages/charts/es/')) {
+            return 'tiny-charts';
+          }
+
+          if (id.includes('/apps/docs/src/containers/home/')) {
+            return 'docs-home';
+          }
+
+          if (!id.includes('node_modules')) {
+            return undefined;
+          }
+
+          const packageName = getPackageName(id);
+
+          if (packageName && ['react', 'react-dom', 'scheduler'].includes(packageName)) {
+            return 'vendor-react';
+          }
+
+          if (packageName && ['@babel/runtime', 'dom-helpers'].includes(packageName)) {
+            return 'vendor-react';
+          }
+
+          if (
+            packageName &&
+            (
+              packageName.startsWith('@mdx-js') ||
+              packageName.startsWith('remark-') ||
+              packageName.startsWith('rehype-') ||
+              [
+                'unified',
+                'micromark',
+                'mdast-util-from-markdown',
+                'mdast-util-mdx',
+                'mdast-util-mdx-expression',
+                'mdast-util-mdx-jsx',
+                'mdast-util-mdxjs-esm',
+                'mdast-util-to-hast',
+                'hast-util-to-jsx-runtime',
+                'hast-util-from-html',
+                'vfile',
+              ].includes(packageName)
+            )
+          ) {
+            return 'vendor-mdx';
+          }
+
+          if (packageName && ['prism-react-renderer', 'react-runner'].includes(packageName)) {
+            return 'vendor-code';
+          }
+
+          if (packageName === 'recharts' || packageName === 'victory-vendor') {
+            return 'vendor-charts';
+          }
+
+          return packageName ? `vendor-${sanitizeChunkName(packageName)}` : 'vendor';
+        },
+      },
+    },
   },
   css: {
     preprocessorOptions: {
diff --git a/packages/mcp/src/data/components.json b/packages/mcp/src/data/components.json
index 30b5149f8..aa9a18c88 100644
--- a/packages/mcp/src/data/components.json
+++ b/packages/mcp/src/data/components.json
@@ -5764,6 +5764,14 @@
         "name": "Basic",
         "code": "import React from 'react';\nimport { Segmented } from '@tiny-design/react';\n\nexport default function BasicDemo() {\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n      <Segmented\n        options={[\n          { label: 'Daily', value: 'daily' },\n          { label: 'Weekly', value: 'weekly' },\n          { label: 'Monthly', value: 'monthly' },\n          { label: 'Yearly', value: 'yearly' },\n        ]}\n      />\n      <Segmented\n        options={[\n          { label: 'Small', value: 'sm' },\n          { label: 'Medium', value: 'md' },\n          { label: 'Large', value: 'lg' },\n        ]}\n        size=\"sm\"\n      />\n      <Segmented\n        options={[\n          { label: 'Map', value: 'map' },\n          { label: 'Transit', value: 'transit' },\n          { label: 'Satellite', value: 'satellite' },\n        ]}\n        block\n      />\n    </div>\n  );\n}\n"
       },
+      {
+        "name": "Controlled",
+        "code": "import React from 'react';\nimport { Segmented, Text } from '@tiny-design/react';\n\nconst options = [\n  { label: 'List', value: 'list' },\n  { label: 'Board', value: 'board' },\n  { label: 'Timeline', value: 'timeline' },\n];\n\nexport default function ControlledDemo() {\n  const [value, setValue] = React.useState('list');\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n      <Segmented\n        options={options}\n        value={value}\n        onChange={(nextValue) => setValue(String(nextValue))}\n      />\n      <Text type=\"secondary\">Current value: {value}</Text>\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "DefaultValue",
+        "code": "import React from 'react';\nimport { Segmented, Text } from '@tiny-design/react';\n\nexport default function DefaultValueDemo() {\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n      <Segmented\n        options={[\n          { label: 'Draft', value: 'draft' },\n          { label: 'Review', value: 'review' },\n          { label: 'Published', value: 'published' },\n        ]}\n        defaultValue=\"review\"\n      />\n      <Text type=\"secondary\">Initial selection is set with defaultValue.</Text>\n    </div>\n  );\n}\n"
+      },
       {
         "name": "Disabled",
         "code": "import React from 'react';\nimport { Segmented } from '@tiny-design/react';\n\nexport default function DisabledDemo() {\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n      <Segmented\n        options={[\n          { label: 'Daily', value: 'daily' },\n          { label: 'Weekly', value: 'weekly' },\n          { label: 'Monthly', value: 'monthly' },\n        ]}\n        disabled\n      />\n      <Segmented\n        options={[\n          { label: 'Active', value: 'active' },\n          { label: 'Disabled', value: 'disabled', disabled: true },\n          { label: 'Active', value: 'active2' },\n        ]}\n      />\n    </div>\n  );\n}\n"
@@ -5772,6 +5780,10 @@
         "name": "Icon",
         "code": "import React from 'react';\nimport { Segmented } from '@tiny-design/react';\nimport { IconUser, IconStar, IconWifi } from '@tiny-design/icons';\n\nexport default function IconDemo() {\n  return (\n    <Segmented\n      options={[\n        { label: 'User', value: 'user', icon: <IconUser /> },\n        { label: 'Star', value: 'star', icon: <IconStar /> },\n        { label: 'Wifi', value: 'wifi', icon: <IconWifi /> },\n      ]}\n    />\n  );\n}"
       },
+      {
+        "name": "NoSelection",
+        "code": "import React from 'react';\nimport { Segmented, Text } from '@tiny-design/react';\n\nexport default function NoSelectionDemo() {\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n      <Segmented\n        options={[\n          { label: 'All', value: 'all' },\n          { label: 'Open', value: 'open' },\n          { label: 'Closed', value: 'closed' },\n        ]}\n      />\n      <Text type=\"secondary\">Without value or defaultValue, no option is selected initially.</Text>\n    </div>\n  );\n}\n"
+      },
       {
         "name": "Size",
         "code": "import React from 'react';\nimport { Segmented } from '@tiny-design/react';\n\nexport default function SizeDemo() {\n  const options = [\n    { label: 'Small', value: 'sm' },\n    { label: 'Medium', value: 'md' },\n    { label: 'Large', value: 'lg' },\n  ];\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n      <Segmented options={options} size=\"sm\" />\n      <Segmented options={options} size=\"md\" />\n      <Segmented options={options} size=\"lg\" />\n    </div>\n  );\n}\n"
diff --git a/packages/react/src/calendar/index.md b/packages/react/src/calendar/index.md
index 4fcd826c0..ad5624221 100644
--- a/packages/react/src/calendar/index.md
+++ b/packages/react/src/calendar/index.md
@@ -27,6 +27,17 @@ Display a full calendar view with date selection. Useful for scheduling, event m
 import { Calendar } from 'tiny-design';
 ```
 
+## Design Tokens
+
+`Calendar` follows the same semantic token structure as `DatePicker`, but keeps its own component namespace:
+
+- `calendar.header-*`: header spacing, navigation actions, caption labels, and focus states
+- `calendar.cell-*`: month grid cells, weekday headers, week numbers, selected dates, and range states
+- `calendar.panel-item-*`: year and decade panel items for hover and selected states
+- `calendar.today-*`: footer "Today" action typography and interaction states
+
+This alignment is intentional: `Calendar` and `DatePicker` should feel related, but token keys stay separate so product teams can tune them independently.
+
 ## Examples
 
 <Layout>
@@ -160,4 +171,4 @@ Compact card calendar with keyboard navigation. Use arrow keys, Enter, and Escap
 | ↑ | Move focus to previous week |
 | ↓ | Move focus to next week |
 | Enter | Select the focused date |
-| Escape | Reset focus |
\ No newline at end of file
+| Escape | Reset focus |
diff --git a/packages/react/src/calendar/index.zh_CN.md b/packages/react/src/calendar/index.zh_CN.md
index 41eb892f8..609ae5c1e 100644
--- a/packages/react/src/calendar/index.zh_CN.md
+++ b/packages/react/src/calendar/index.zh_CN.md
@@ -27,6 +27,17 @@ import CardModeSource from './demo/CardMode.tsx?raw';
 import { Calendar } from 'tiny-design';
 ```
 
+## Design Tokens
+
+`Calendar` 与 `DatePicker` 使用同构的 token 语义结构，但保留独立的组件命名空间：
+
+- `calendar.header-*`：头部间距、导航操作、标题标签与焦点状态
+- `calendar.cell-*`：月份网格单元、星期标题、周数、选中日期和范围状态
+- `calendar.panel-item-*`：年份 / 十年面板项的 hover 与选中状态
+- `calendar.today-*`：页脚 “Today / 今天” 操作的字体与交互状态
+
+这种设计是刻意的：`Calendar` 和 `DatePicker` 在视觉语义上应当保持一致，但 token key 不共享，这样业务侧可以分别微调两个组件。
+
 ## 代码演示
 
 <Layout>
@@ -160,4 +171,4 @@ import { Calendar } from 'tiny-design';
 | ↑ | 移动到上一周 |
 | ↓ | 移动到下一周 |
 | Enter | 选择当前焦点日期 |
-| Escape | 重置焦点 |
\ No newline at end of file
+| Escape | 重置焦点 |
diff --git a/packages/react/src/calendar/style/index.scss b/packages/react/src/calendar/style/index.scss
index 97f88e4a9..05abe2d74 100644
--- a/packages/react/src/calendar/style/index.scss
+++ b/packages/react/src/calendar/style/index.scss
@@ -33,18 +33,27 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--ty-calendar-nav-button-size);
-    height: var(--ty-calendar-nav-button-size);
+    width: var(--ty-calendar-header-action-size);
+    height: var(--ty-calendar-header-action-size);
     border: none;
     background: transparent;
     cursor: pointer;
-    border-radius: var(--ty-calendar-nav-button-radius);
-    font-size: var(--ty-calendar-nav-button-font-size);
-    color: var(--ty-calendar-nav-button-color);
-    transition: color 0.2s;
+    border-radius: var(--ty-calendar-header-action-radius);
+    font-size: var(--ty-calendar-header-action-font-size);
+    color: var(--ty-calendar-header-action-color);
+    transition:
+      color 0.2s,
+      background-color 0.2s,
+      box-shadow 0.2s;
 
     &:hover:not(&_disabled) {
-      color: var(--ty-calendar-nav-button-color-hover);
+      color: var(--ty-calendar-header-action-color-hover);
+      background: var(--ty-calendar-header-action-hover-bg);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--ty-calendar-header-action-focus-ring);
     }
 
     &_disabled {
@@ -56,24 +65,39 @@
   &__title {
     display: flex;
     align-items: center;
-    gap: var(--ty-calendar-title-gap);
-    font-weight: var(--ty-calendar-title-font-weight);
-    font-size: var(--ty-calendar-title-font-size);
+    gap: var(--ty-calendar-header-caption-gap);
+    font-weight: var(--ty-calendar-header-label-font-weight);
+    font-size: var(--ty-calendar-header-label-font-size);
   }
 
   &__title-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     border: none;
     background: transparent;
     cursor: pointer;
-    font-weight: var(--ty-calendar-title-font-weight);
+    min-height: var(--ty-calendar-header-label-min-height);
+    padding: 0 var(--ty-calendar-header-label-padding-inline);
+    font-weight: var(--ty-calendar-header-label-font-weight);
     font-size: inherit;
-    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;
+    font-family: inherit;
+    line-height: 1;
+    border-radius: var(--ty-calendar-header-label-radius);
+    color: var(--ty-calendar-header-label-color);
+    transition:
+      color 0.2s,
+      background-color 0.2s,
+      box-shadow 0.2s;
 
     &:hover {
-      color: var(--ty-calendar-title-color-hover);
+      color: var(--ty-calendar-header-label-color-hover);
+      background: var(--ty-calendar-header-label-hover-bg);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--ty-calendar-header-label-focus-ring);
     }
   }
 
@@ -134,7 +158,7 @@
     }
 
     &:not(&_disabled):hover .#{$prefix}-calendar__cell-inner {
-      background: var(--ty-calendar-hover);
+      background: var(--ty-calendar-cell-hover-bg);
     }
 
     &_selected:not(&_disabled):hover .#{$prefix}-calendar__cell-inner {
@@ -264,21 +288,22 @@
 
   &__month-cell {
     text-align: center;
-    padding: var(--ty-calendar-panel-cell-padding);
+    min-height: var(--ty-calendar-panel-item-min-height);
+    padding: 16px var(--ty-calendar-panel-item-padding-inline);
     cursor: pointer;
-    border-radius: var(--ty-calendar-panel-cell-radius);
+    border-radius: var(--ty-calendar-panel-item-radius);
     transition: all 0.2s;
 
     &:hover {
-      background: var(--ty-calendar-hover);
+      background: var(--ty-calendar-panel-item-hover-bg);
     }
 
     &_selected {
-      background: var(--ty-calendar-panel-cell-bg-selected);
-      color: var(--ty-calendar-panel-cell-color-selected);
+      background: var(--ty-calendar-panel-item-selected-bg);
+      color: var(--ty-calendar-panel-item-selected-color);
 
       &:hover {
-        background: var(--ty-calendar-panel-cell-bg-selected-hover);
+        background: var(--ty-calendar-panel-item-selected-hover-bg);
       }
     }
   }
@@ -305,22 +330,23 @@
 
   &__decade-cell {
     text-align: center;
-    padding: var(--ty-calendar-panel-cell-padding);
+    min-height: var(--ty-calendar-panel-item-min-height);
+    padding: 16px var(--ty-calendar-panel-item-padding-inline);
     cursor: pointer;
-    border-radius: var(--ty-calendar-panel-cell-radius);
+    border-radius: var(--ty-calendar-panel-item-radius);
     transition: all 0.2s;
     font-size: var(--ty-calendar-decade-font-size);
 
     &:hover {
-      background: var(--ty-calendar-hover);
+      background: var(--ty-calendar-panel-item-hover-bg);
     }
 
     &_selected {
-      background: var(--ty-calendar-panel-cell-bg-selected);
-      color: var(--ty-calendar-panel-cell-color-selected);
+      background: var(--ty-calendar-panel-item-selected-bg);
+      color: var(--ty-calendar-panel-item-selected-color);
 
       &:hover {
-        background: var(--ty-calendar-panel-cell-bg-selected-hover);
+        background: var(--ty-calendar-panel-item-selected-hover-bg);
       }
     }
 
@@ -338,12 +364,38 @@
   }
 
   &__today-link {
-    color: var(--ty-calendar-today-link-color);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 28px;
+    padding: 0 12px;
+    border: 1px solid transparent;
+    border-radius: var(--ty-calendar-header-label-radius);
+    background: transparent;
+    color: var(--ty-calendar-today-color);
     cursor: pointer;
-    font-size: var(--ty-calendar-today-link-font-size);
+    font: inherit;
+    font-size: var(--ty-calendar-today-font-size);
+    line-height: 1;
+    appearance: none;
+    transition:
+      color 0.2s,
+      background-color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
 
     &:hover {
-      color: var(--ty-calendar-today-link-color-hover);
+      color: var(--ty-calendar-today-color-hover);
+      background: var(--ty-calendar-today-hover-bg);
+    }
+
+    &:active {
+      background: var(--ty-calendar-today-active-bg);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--ty-calendar-today-focus-ring);
     }
   }
 }
diff --git a/packages/react/src/date-picker/index.md b/packages/react/src/date-picker/index.md
index 9808b6a91..1adf596ca 100644
--- a/packages/react/src/date-picker/index.md
+++ b/packages/react/src/date-picker/index.md
@@ -25,6 +25,17 @@ To select or input a date.
 import { DatePicker } from 'tiny-design';
 ```
 
+## Design Tokens
+
+`DatePicker` uses component-scoped tokens with a small set of stable semantic groups:
+
+- `date-picker.header-*`: header layout, navigation buttons, caption spacing, and interactive header states
+- `date-picker.cell-*`: date grid cells, selected dates, muted dates, and range states
+- `date-picker.panel-item-*`: month/year panel items for hover, current item, and selected item styling
+- `date-picker.today-*`: footer "Today" action typography and interaction states
+
+`DatePicker` intentionally does not share token keys with `Calendar`. The two components align on token semantics, but keep separate namespaces so each component can evolve independently.
+
 ## Examples
 
 <Layout>
diff --git a/packages/react/src/date-picker/index.zh_CN.md b/packages/react/src/date-picker/index.zh_CN.md
index a3fdc75b6..0b46c5ae5 100644
--- a/packages/react/src/date-picker/index.zh_CN.md
+++ b/packages/react/src/date-picker/index.zh_CN.md
@@ -25,6 +25,17 @@ import RangeDisabledSource from './demo/RangeDisabled.tsx?raw';
 import { DatePicker } from 'tiny-design';
 ```
 
+## Design Tokens
+
+`DatePicker` 使用组件级 token，并按稳定的语义分组组织：
+
+- `date-picker.header-*`：头部布局、翻页按钮、标题间距以及头部交互状态
+- `date-picker.cell-*`：日期网格单元、选中态、弱化态和范围选择状态
+- `date-picker.panel-item-*`：月份 / 年份面板项的 hover、当前项和选中项样式
+- `date-picker.today-*`：页脚 “Today / 今天” 操作的字体与交互状态
+
+`DatePicker` 不会与 `Calendar` 共享同一个 token key。两个组件只对齐语义结构，不共用命名空间，这样可以保证后续样式演进彼此独立。
+
 ## 代码示例
 
 <Layout>
diff --git a/packages/react/src/date-picker/picker-header.tsx b/packages/react/src/date-picker/picker-header.tsx
index 85da61058..0d6d551fe 100755
--- a/packages/react/src/date-picker/picker-header.tsx
+++ b/packages/react/src/date-picker/picker-header.tsx
@@ -50,23 +50,26 @@ const PickerHeader = ({ date, mode, months, onChange, onModeChange, prefixCls }:
             {startDecade} – {startDecade + 9}
           </span>
         ) : mode === 'month' ? (
-          <span
+          <button
+            type="button"
             className={`${prefixCls}__header-label`}
             onClick={() => onModeChange('year')}>
             {year}
-          </span>
+          </button>
         ) : (
           <>
-            <span
+            <button
+              type="button"
               className={`${prefixCls}__header-label`}
               onClick={() => onModeChange('month')}>
               {months[date.getMonth()]}
-            </span>
-            <span
+            </button>
+            <button
+              type="button"
               className={`${prefixCls}__header-label`}
               onClick={() => onModeChange('year')}>
               {year}
-            </span>
+            </button>
           </>
         )}
       </div>
diff --git a/packages/react/src/date-picker/picker-month.tsx b/packages/react/src/date-picker/picker-month.tsx
index 34753cce9..f00c342cc 100755
--- a/packages/react/src/date-picker/picker-month.tsx
+++ b/packages/react/src/date-picker/picker-month.tsx
@@ -16,13 +16,13 @@ const PickerMonth = ({ date, panelDate, months, onChange, prefixCls }: PickerMon
 
   return (
     <div className={`${prefixCls}__body`}>
-      <table className={`${prefixCls}__table`}>
+      <table className={classNames(`${prefixCls}__table`, `${prefixCls}__month-table`)}>
         <tbody>
           {[0, 1, 2].map((row) => (
             <tr key={row}>
               {[0, 1, 2, 3].map((col) => {
                 const monthIdx = row * 4 + col;
-                const cls = classNames(`${prefixCls}__cell`, {
+                const cls = classNames(`${prefixCls}__cell`, `${prefixCls}__month-cell`, {
                   [`${prefixCls}__cell_selected`]: monthIdx === selectedMonth,
                   [`${prefixCls}__cell_today`]: isCurrentYear && monthIdx === now.getMonth(),
                 });
@@ -31,7 +31,9 @@ const PickerMonth = ({ date, panelDate, months, onChange, prefixCls }: PickerMon
                     key={col}
                     className={cls}
                     onClick={() => onChange(new Date(panelYear, monthIdx, 1))}>
-                    <div className={`${prefixCls}__cell-inner`}>{months[monthIdx]}</div>
+                    <div className={classNames(`${prefixCls}__cell-inner`, `${prefixCls}__month-cell-inner`)}>
+                      {months[monthIdx]}
+                    </div>
                   </td>
                 );
               })}
diff --git a/packages/react/src/date-picker/picker-year.tsx b/packages/react/src/date-picker/picker-year.tsx
index e6111af5c..36c84d5f1 100755
--- a/packages/react/src/date-picker/picker-year.tsx
+++ b/packages/react/src/date-picker/picker-year.tsx
@@ -20,7 +20,7 @@ const PickerYear = ({ date, panelDate, onChange, prefixCls }: PickerYearProps) =
 
   return (
     <div className={`${prefixCls}__body`}>
-      <table className={`${prefixCls}__table`}>
+      <table className={classNames(`${prefixCls}__table`, `${prefixCls}__year-table`)}>
         <tbody>
           {[0, 1, 2].map((row) => (
             <tr key={row}>
@@ -28,7 +28,7 @@ const PickerYear = ({ date, panelDate, onChange, prefixCls }: PickerYearProps) =
                 const idx = row * 4 + col;
                 const year = years[idx];
                 const isOutOfRange = year < startYear || year > startYear + 9;
-                const cls = classNames(`${prefixCls}__cell`, {
+                const cls = classNames(`${prefixCls}__cell`, `${prefixCls}__year-cell`, {
                   [`${prefixCls}__cell_selected`]: year === selectedYear,
                   [`${prefixCls}__cell_today`]: year === now.getFullYear(),
                   [`${prefixCls}__cell_dim`]: isOutOfRange,
@@ -38,7 +38,9 @@ const PickerYear = ({ date, panelDate, onChange, prefixCls }: PickerYearProps) =
                     key={col}
                     className={cls}
                     onClick={() => onChange(new Date(year, panelDate.getMonth(), 1))}>
-                    <div className={`${prefixCls}__cell-inner`}>{year}</div>
+                    <div className={classNames(`${prefixCls}__cell-inner`, `${prefixCls}__year-cell-inner`)}>
+                      {year}
+                    </div>
                   </td>
                 );
               })}
diff --git a/packages/react/src/date-picker/style/index.scss b/packages/react/src/date-picker/style/index.scss
index 1ecb5b742..b62fbd1c5 100755
--- a/packages/react/src/date-picker/style/index.scss
+++ b/packages/react/src/date-picker/style/index.scss
@@ -158,10 +158,19 @@ $dp: #{$prefix}-date-picker;
     cursor: pointer;
     font-size: 18px;
     border-radius: var(--ty-date-picker-header-button-radius);
-    transition: color 0.2s;
+    transition:
+      color 0.2s,
+      background-color 0.2s,
+      box-shadow 0.2s;
 
     &:hover {
       color: var(--ty-date-picker-header-button-color-hover);
+      background: var(--ty-date-picker-header-action-hover-bg);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--ty-date-picker-header-action-focus-ring);
     }
   }
 
@@ -173,15 +182,33 @@ $dp: #{$prefix}-date-picker;
   }
 
   &__header-label {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 32px;
+    padding: 0 10px;
+    border: none;
+    background: transparent;
+    color: var(--ty-date-picker-cell-color);
     font-weight: var(--ty-date-picker-header-label-font-weight);
     font-size: var(--ty-date-picker-header-label-font-size);
+    font-family: inherit;
+    line-height: 1;
     cursor: pointer;
-    padding: 2px 6px;
     border-radius: var(--ty-date-picker-header-button-radius);
-    transition: color 0.2s;
+    transition:
+      color 0.2s,
+      background-color 0.2s,
+      box-shadow 0.2s;
 
     &:hover {
       color: var(--ty-date-picker-header-button-color-hover);
+      background: var(--ty-date-picker-header-action-hover-bg);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--ty-date-picker-header-action-focus-ring);
     }
   }
 
@@ -293,6 +320,69 @@ $dp: #{$prefix}-date-picker;
     color: var(--ty-date-picker-cell-color-muted);
   }
 
+  &__month-table,
+  &__year-table {
+    border-collapse: separate;
+    border-spacing: 0 var(--ty-date-picker-panel-item-gap-y);
+  }
+
+  &__month-cell,
+  &__year-cell {
+    padding: 0;
+  }
+
+  &__month-cell-inner,
+  &__year-cell-inner {
+    width: auto;
+    min-width: var(--ty-date-picker-panel-item-min-width);
+    height: var(--ty-date-picker-panel-item-height);
+    padding: 0 var(--ty-date-picker-panel-item-padding-inline);
+    border: 1px solid transparent;
+    border-radius: var(--ty-date-picker-panel-item-radius);
+    color: var(--ty-date-picker-cell-color);
+    font-weight: 500;
+    transition:
+      color 0.2s,
+      background-color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
+  }
+
+  &__month-cell:hover &__month-cell-inner,
+  &__year-cell:hover &__year-cell-inner {
+    background: var(--ty-date-picker-panel-item-hover-bg);
+  }
+
+  &__month-cell.#{$dp}__cell_dim &__month-cell-inner,
+  &__year-cell.#{$dp}__cell_dim &__year-cell-inner {
+    color: var(--ty-date-picker-cell-color-muted);
+    font-weight: 400;
+  }
+
+  &__month-cell.#{$dp}__cell_today &__month-cell-inner,
+  &__year-cell.#{$dp}__cell_today &__year-cell-inner {
+    border-color: var(--ty-date-picker-panel-item-current-border);
+    color: var(--ty-date-picker-panel-item-current-color);
+    background: transparent;
+  }
+
+  &__month-cell.#{$dp}__cell_selected &__month-cell-inner,
+  &__year-cell.#{$dp}__cell_selected &__year-cell-inner {
+    background: var(--ty-date-picker-panel-item-selected-bg);
+    color: var(--ty-date-picker-panel-item-selected-color);
+    font-weight: 600;
+  }
+
+  &__month-cell.#{$dp}__cell_selected:hover &__month-cell-inner,
+  &__year-cell.#{$dp}__cell_selected:hover &__year-cell-inner {
+    background: var(--ty-date-picker-panel-item-selected-hover-bg);
+  }
+
+  &__month-cell.#{$dp}__cell_selected.#{$dp}__cell_today &__month-cell-inner,
+  &__year-cell.#{$dp}__cell_selected.#{$dp}__cell_today &__year-cell-inner {
+    box-shadow: inset 0 0 0 1px var(--ty-date-picker-panel-item-current-border);
+  }
+
   // ---- Footer ----
   &__footer {
     padding: var(--ty-date-picker-footer-padding);
@@ -301,12 +391,38 @@ $dp: #{$prefix}-date-picker;
   }
 
   &__today-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 28px;
+    padding: 0 12px;
+    border: 1px solid transparent;
+    border-radius: var(--ty-border-radius);
+    background: transparent;
     color: var(--ty-date-picker-today-color);
     cursor: pointer;
+    font: inherit;
     font-size: var(--ty-date-picker-today-font-size);
+    line-height: 1;
+    appearance: none;
+    transition:
+      color 0.2s,
+      background-color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
 
     &:hover {
       color: var(--ty-date-picker-today-color-hover);
+      background: var(--ty-date-picker-today-hover-bg);
+    }
+
+    &:active {
+      background: var(--ty-date-picker-today-active-bg);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--ty-date-picker-today-focus-ring);
+      outline-offset: 2px;
     }
   }
 }
diff --git a/packages/tokens/README.md b/packages/tokens/README.md
index 5dd1f4903..d7c18bbe0 100644
--- a/packages/tokens/README.md
+++ b/packages/tokens/README.md
@@ -52,6 +52,18 @@ Light and dark themes are supported via the `data-tiny-theme` attribute on the d
 
 Three modes are available: `light`, `dark`, and `system` (follows `prefers-color-scheme`).
 
+## Component Token Conventions
+
+Component tokens are scoped by component name and should not be shared across different components, even when the semantics line up closely.
+
+For example, `DatePicker` and `Calendar` intentionally use parallel token groups without sharing the same key space:
+
+- `date-picker.header-*` and `calendar.header-*`
+- `date-picker.panel-item-*` and `calendar.panel-item-*`
+- `date-picker.today-*` and `calendar.today-*`
+
+This keeps token semantics aligned across related components while allowing each component to evolve or be themed independently.
+
 ## License
 
 MIT
diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index a77b27960..963a613a9 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -16,6 +16,11 @@
     ".": "./css/base.css",
     "./css/*": "./css/*",
     "./registry": "./dist/registry.json",
+    "./registry-runtime": {
+      "types": "./runtime/registry.d.ts",
+      "import": "./runtime/registry.mjs",
+      "require": "./runtime/registry.cjs"
+    },
     "./presets": {
       "types": "./runtime/presets.d.ts",
       "import": "./runtime/presets.mjs",
diff --git a/packages/tokens/runtime/registry.cjs b/packages/tokens/runtime/registry.cjs
new file mode 100644
index 000000000..ece03998d
--- /dev/null
+++ b/packages/tokens/runtime/registry.cjs
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('../dist/registry.json');
diff --git a/packages/tokens/runtime/registry.d.ts b/packages/tokens/runtime/registry.d.ts
new file mode 100644
index 000000000..1bc4beaff
--- /dev/null
+++ b/packages/tokens/runtime/registry.d.ts
@@ -0,0 +1,19 @@
+declare const registry: {
+  version: number;
+  generatedAt: string;
+  tokens: Array<{
+    key: string;
+    cssVar: string;
+    category: string;
+    component?: string;
+    type: string;
+    group?: string;
+    description?: string;
+    source: string;
+    defaultValue?: string;
+    fallback?: string;
+    status: string;
+  }>;
+};
+
+export default registry;
diff --git a/packages/tokens/runtime/registry.mjs b/packages/tokens/runtime/registry.mjs
new file mode 100644
index 000000000..e448efe3d
--- /dev/null
+++ b/packages/tokens/runtime/registry.mjs
@@ -0,0 +1,3 @@
+import registry from '../dist/registry.json' with { type: 'json' };
+
+export default registry;
diff --git a/packages/tokens/source/components/calendar.json b/packages/tokens/source/components/calendar.json
index b74c77d1c..4ea4e620d 100644
--- a/packages/tokens/source/components/calendar.json
+++ b/packages/tokens/source/components/calendar.json
@@ -16,7 +16,7 @@
     "description": "Calendar panel border radius.",
     "fallback": "--ty-border-radius"
   },
-  "calendar.hover": {
+  "calendar.cell-hover-bg": {
     "$value": "#f6f9fc",
     "$type": "color",
     "description": "Calendar cell hover background color."
@@ -26,70 +26,99 @@
     "$type": "string",
     "description": "Calendar header padding."
   },
-  "calendar.nav-button-size": {
+  "calendar.header-action-size": {
     "$value": "28px",
     "$type": "dimension",
-    "description": "Calendar nav button size."
+    "description": "Calendar header action size."
   },
-  "calendar.nav-button-radius": {
+  "calendar.header-action-radius": {
     "$value": "4px",
     "$type": "dimension",
-    "description": "Calendar nav button radius."
+    "description": "Calendar header action radius."
   },
-  "calendar.nav-button-font-size": {
+  "calendar.header-action-font-size": {
     "$value": "18px",
     "$type": "dimension",
-    "description": "Calendar nav button font size."
+    "description": "Calendar header action font size."
   },
-  "calendar.nav-button-color": {
+  "calendar.header-action-color": {
     "$value": "{color-text-tertiary}",
     "$type": "color",
-    "description": "Calendar nav button color.",
+    "description": "Calendar header action color.",
     "fallback": "--ty-color-text-tertiary"
   },
-  "calendar.nav-button-color-hover": {
+  "calendar.header-action-color-hover": {
     "$value": "{color-primary}",
     "$type": "color",
-    "description": "Calendar nav button hover color.",
+    "description": "Calendar header action hover color.",
     "fallback": "--ty-color-primary"
   },
-  "calendar.title-font-size": {
+  "calendar.header-action-hover-bg": {
+    "$value": "{color-fill-secondary}",
+    "$type": "color",
+    "description": "Calendar header action hover background color.",
+    "fallback": "--ty-color-fill-secondary"
+  },
+  "calendar.header-action-focus-ring": {
+    "$value": "{color-primary-border}",
+    "$type": "color",
+    "description": "Calendar header action keyboard focus ring color.",
+    "fallback": "--ty-color-primary-border"
+  },
+  "calendar.header-label-font-size": {
     "$value": "16px",
     "$type": "dimension",
-    "description": "Calendar title font size."
+    "description": "Calendar header label font size."
   },
-  "calendar.title-font-weight": {
+  "calendar.header-label-font-weight": {
     "$value": "500",
     "$type": "font-weight",
-    "description": "Calendar title font weight."
+    "description": "Calendar header label font weight."
   },
-  "calendar.title-gap": {
+  "calendar.header-caption-gap": {
     "$value": "8px",
     "$type": "dimension",
-    "description": "Calendar title item gap."
+    "description": "Calendar header caption gap."
   },
-  "calendar.title-button-padding": {
-    "$value": "2px 6px",
-    "$type": "string",
-    "description": "Calendar title action padding."
+  "calendar.header-label-min-height": {
+    "$value": "32px",
+    "$type": "dimension",
+    "description": "Calendar header label minimum height."
   },
-  "calendar.title-button-radius": {
+  "calendar.header-label-padding-inline": {
+    "$value": "10px",
+    "$type": "dimension",
+    "description": "Calendar header label horizontal padding."
+  },
+  "calendar.header-label-radius": {
     "$value": "4px",
     "$type": "dimension",
-    "description": "Calendar title action radius."
+    "description": "Calendar header label radius."
   },
-  "calendar.title-color": {
+  "calendar.header-label-color": {
     "$value": "{color-text}",
     "$type": "color",
-    "description": "Calendar title color.",
+    "description": "Calendar header label color.",
     "fallback": "--ty-color-text"
   },
-  "calendar.title-color-hover": {
+  "calendar.header-label-color-hover": {
     "$value": "{color-primary}",
     "$type": "color",
-    "description": "Calendar title action hover color.",
+    "description": "Calendar header label hover color.",
     "fallback": "--ty-color-primary"
   },
+  "calendar.header-label-hover-bg": {
+    "$value": "{color-fill-secondary}",
+    "$type": "color",
+    "description": "Calendar header label hover background color.",
+    "fallback": "--ty-color-fill-secondary"
+  },
+  "calendar.header-label-focus-ring": {
+    "$value": "{color-primary-border}",
+    "$type": "color",
+    "description": "Calendar header label keyboard focus ring color.",
+    "fallback": "--ty-color-primary-border"
+  },
   "calendar.body-padding": {
     "$value": "8px",
     "$type": "dimension",
@@ -247,32 +276,43 @@
     "$type": "dimension",
     "description": "Calendar month and decade panel padding."
   },
-  "calendar.panel-cell-padding": {
-    "$value": "16px 8px",
-    "$type": "string",
-    "description": "Calendar month and decade cell padding."
+  "calendar.panel-item-min-height": {
+    "$value": "48px",
+    "$type": "dimension",
+    "description": "Calendar month and decade panel item minimum height."
+  },
+  "calendar.panel-item-padding-inline": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Calendar month and decade panel item horizontal padding."
   },
-  "calendar.panel-cell-radius": {
+  "calendar.panel-item-radius": {
     "$value": "{border-radius}",
     "$type": "dimension",
-    "description": "Calendar month and decade cell radius.",
+    "description": "Calendar month and decade panel item radius.",
     "fallback": "--ty-border-radius"
   },
-  "calendar.panel-cell-color-selected": {
+  "calendar.panel-item-hover-bg": {
+    "$value": "{color-fill-secondary}",
+    "$type": "color",
+    "description": "Calendar month and decade panel item hover background color.",
+    "fallback": "--ty-color-fill-secondary"
+  },
+  "calendar.panel-item-selected-color": {
     "$value": "#fff",
     "$type": "color",
-    "description": "Calendar selected month and decade cell text color."
+    "description": "Calendar selected month and decade panel item text color."
   },
-  "calendar.panel-cell-bg-selected": {
+  "calendar.panel-item-selected-bg": {
     "$value": "{color-primary}",
     "$type": "color",
-    "description": "Calendar selected month and decade cell background color.",
+    "description": "Calendar selected month and decade panel item background color.",
     "fallback": "--ty-color-primary"
   },
-  "calendar.panel-cell-bg-selected-hover": {
+  "calendar.panel-item-selected-hover-bg": {
     "$value": "{color-primary-hover}",
     "$type": "color",
-    "description": "Calendar selected month and decade cell hover background color.",
+    "description": "Calendar selected month and decade panel item hover background color.",
     "fallback": "--ty-color-primary-hover"
   },
   "calendar.month-content-font-size": {
@@ -302,21 +342,39 @@
     "$type": "string",
     "description": "Calendar footer padding."
   },
-  "calendar.today-link-color": {
+  "calendar.today-color": {
     "$value": "{color-primary}",
     "$type": "color",
-    "description": "Calendar today link color.",
+    "description": "Calendar today action color.",
     "fallback": "--ty-color-primary"
   },
-  "calendar.today-link-color-hover": {
+  "calendar.today-color-hover": {
     "$value": "{color-primary-hover}",
     "$type": "color",
-    "description": "Calendar today link hover color.",
+    "description": "Calendar today action hover color.",
     "fallback": "--ty-color-primary-hover"
   },
-  "calendar.today-link-font-size": {
+  "calendar.today-font-size": {
     "$value": "13px",
     "$type": "dimension",
-    "description": "Calendar today link font size."
+    "description": "Calendar today action font size."
+  },
+  "calendar.today-hover-bg": {
+    "$value": "{color-primary-bg}",
+    "$type": "color",
+    "description": "Calendar today action hover background color.",
+    "fallback": "--ty-color-primary-bg"
+  },
+  "calendar.today-active-bg": {
+    "$value": "{color-primary-bg-hover}",
+    "$type": "color",
+    "description": "Calendar today action active background color.",
+    "fallback": "--ty-color-primary-bg-hover"
+  },
+  "calendar.today-focus-ring": {
+    "$value": "{color-primary-border}",
+    "$type": "color",
+    "description": "Calendar today action keyboard focus ring color.",
+    "fallback": "--ty-color-primary-border"
   }
 }
diff --git a/packages/tokens/source/components/date-picker.json b/packages/tokens/source/components/date-picker.json
index a3ee0d000..8902ccf98 100644
--- a/packages/tokens/source/components/date-picker.json
+++ b/packages/tokens/source/components/date-picker.json
@@ -47,6 +47,18 @@
     "description": "Date picker header button hover color.",
     "fallback": "--ty-color-primary"
   },
+  "date-picker.header-action-hover-bg": {
+    "$value": "{color-fill-secondary}",
+    "$type": "color",
+    "description": "Date picker header action hover background color.",
+    "fallback": "--ty-color-fill-secondary"
+  },
+  "date-picker.header-action-focus-ring": {
+    "$value": "{color-primary-border}",
+    "$type": "color",
+    "description": "Date picker header action keyboard focus ring color.",
+    "fallback": "--ty-color-primary-border"
+  },
   "date-picker.header-label-font-size": {
     "$value": "16px",
     "$type": "dimension",
@@ -100,6 +112,67 @@
     "description": "Date picker cell disabled background color.",
     "fallback": "--ty-color-fill-secondary"
   },
+  "date-picker.panel-item-gap-y": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Date picker month and year panel row gap."
+  },
+  "date-picker.panel-item-min-width": {
+    "$value": "56px",
+    "$type": "dimension",
+    "description": "Date picker month and year panel item minimum width."
+  },
+  "date-picker.panel-item-height": {
+    "$value": "40px",
+    "$type": "dimension",
+    "description": "Date picker month and year panel item height."
+  },
+  "date-picker.panel-item-padding-inline": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Date picker month and year panel item horizontal padding."
+  },
+  "date-picker.panel-item-radius": {
+    "$value": "10px",
+    "$type": "dimension",
+    "description": "Date picker month and year panel item radius."
+  },
+  "date-picker.panel-item-hover-bg": {
+    "$value": "{color-fill-secondary}",
+    "$type": "color",
+    "description": "Date picker month and year panel item hover background color.",
+    "fallback": "--ty-color-fill-secondary"
+  },
+  "date-picker.panel-item-current-color": {
+    "$value": "{color-primary}",
+    "$type": "color",
+    "description": "Date picker current month/year panel item text color.",
+    "fallback": "--ty-color-primary"
+  },
+  "date-picker.panel-item-current-border": {
+    "$value": "{color-primary}",
+    "$type": "color",
+    "description": "Date picker current month/year panel item border color.",
+    "fallback": "--ty-color-primary"
+  },
+  "date-picker.panel-item-selected-bg": {
+    "$value": "{color-primary-bg-hover}",
+    "$type": "color",
+    "description": "Date picker month and year panel item selected background color.",
+    "fallback": "--ty-color-primary-bg-hover"
+  },
+  "date-picker.panel-item-selected-color": {
+    "$value": "{color-primary}",
+    "$type": "color",
+    "description": "Date picker month and year panel item selected text color.",
+    "fallback": "--ty-color-primary"
+  },
+  "date-picker.panel-item-selected-hover-bg": {
+    "$value": "{color-primary-bg}",
+    "$type": "color",
+    "description": "Date picker month and year panel item selected hover background color.",
+    "fallback": "--ty-color-primary-bg"
+  },
   "date-picker.cell-today-border": {
     "$value": "{color-primary}",
     "$type": "color",
@@ -150,5 +223,23 @@
     "$type": "color",
     "description": "Date picker today action hover color.",
     "fallback": "--ty-color-primary-hover"
+  },
+  "date-picker.today-hover-bg": {
+    "$value": "{color-primary-bg}",
+    "$type": "color",
+    "description": "Date picker today action hover background color.",
+    "fallback": "--ty-color-primary-bg"
+  },
+  "date-picker.today-active-bg": {
+    "$value": "{color-primary-bg-hover}",
+    "$type": "color",
+    "description": "Date picker today action active background color.",
+    "fallback": "--ty-color-primary-bg-hover"
+  },
+  "date-picker.today-focus-ring": {
+    "$value": "{color-primary-border}",
+    "$type": "color",
+    "description": "Date picker today action keyboard focus ring color.",
+    "fallback": "--ty-color-primary-border"
   }
 }
diff --git a/packages/tokens/source/themes/dark.json b/packages/tokens/source/themes/dark.json
index 9dc964028..d1bdccc3a 100644
--- a/packages/tokens/source/themes/dark.json
+++ b/packages/tokens/source/themes/dark.json
@@ -86,7 +86,10 @@
       "badge.shadow": "0 0 0 1.5px #1f1f1f",
       "calendar.bg": "#1f1f1f",
       "calendar.border": "#363636",
-      "calendar.hover": "#2a2a2a",
+      "calendar.cell-hover-bg": "#2a2a2a",
+      "calendar.header-action-hover-bg": "#2a2a2a",
+      "calendar.header-label-hover-bg": "#2a2a2a",
+      "calendar.panel-item-hover-bg": "#2a2a2a",
       "carousel.arrow-bg": "rgba(255, 255, 255, 0.15)",
       "carousel.arrow-hover-bg": "rgba(255, 255, 255, 0.25)",
       "cascader.bg": "#1f1f1f",