@teamix-evo/ui 0.5.2 → 0.6.1

package/src/components/float-button/meta.md

@@ -35,16 +35,8 @@
 
 ```tsx
 <DemoContainer>
-  <FloatButton
-    icon={<MessageCircleIcon />}
-    aria-label="客服"
-    badge="3"
-  />
-  <FloatButton
-    variant="default"
-    icon={<PlusIcon />}
-    aria-label="新建"
-  />
+  <FloatButton icon={<MessageCircleIcon />} aria-label="客服" badge="3" />
+  <FloatButton variant="default" icon={<PlusIcon />} aria-label="新建" />
 </DemoContainer>
 ```
 
@@ -54,11 +46,7 @@
 
 ```tsx
 <DemoContainer>
-  <FloatButton
-    shape="square"
-    icon={<PlusIcon />}
-    aria-label="新建"
-  />
+  <FloatButton shape="square" icon={<PlusIcon />} aria-label="新建" />
 </DemoContainer>
 ```
 

package/src/components/icon/index.tsx

@@ -20,8 +20,7 @@
  * <span className="text-success"><SuccessFilledIcon /></span>
  * ```
  *
- * 尺寸：默认 `size-5`（20px），通过 `className` 覆盖（如 `size-3.5` / `size-4`）。
- * viewBox 采用 `-1 -1 22 22`，使图形在容器内自带 1px 内边距留白。
+ * 尺寸：默认 `size-4`（16px），通过 `className` 覆盖（如 `size-3.5` / `size-5`）。
  */
 import * as React from 'react';
 
@@ -37,9 +36,9 @@ function BaseFilledIcon({
   return (
     <svg
       data-slot="icon"
-      viewBox="-1 -1 22 22"
+      viewBox="0 0 20 20"
       aria-hidden="true"
-      className={cn('size-5 shrink-0', className)}
+      className={cn('size-4 shrink-0', className)}
       {...props}
     >
       {children}

package/src/components/icon/meta.md

@@ -22,8 +22,7 @@
 - ```tsx
 - <span className="text-success"><SuccessFilledIcon /></span>
 - ```
-- 尺寸：默认 `size-5`（20px），通过 `className` 覆盖（如 `size-3.5` / `size-4`）。
-- viewBox 采用 `-1 -1 22 22`，使图形在容器内自带 1px 内边距留白。
+- 尺寸：默认 `size-4`（16px），通过 `className` 覆盖（如 `size-3.5` / `size-5`）。
 
 ## 示例
 

package/src/components/input/index.tsx

@@ -46,11 +46,19 @@ export interface InputProps
 // ─── Input ──────────────────────────────────────────────────────────────────
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, size, ...props }, ref) => {
+  ({ className, type, size, role: roleProp, ...props }, ref) => {
+    // <input type="search"> 会被浏览器渲染原生 clear / 放大镜 / IE Reveal 按钮，
+    // 与 Input 自带的 `clearable` / `suffix={<Search/>}` 视觉冲突。组件层透明屏蔽：
+    // 渲染为 type="text" + role="searchbox"，保留无障碍语义，免除业务侧 globals.css
+    // 补 webkit/ms 伪元素 reset（原 ADR 0023 §4 “手动加 CSS” 路径）。
+    const isSearch = type === 'search';
+    const safeType = isSearch ? 'text' : type;
+    const role = isSearch ? roleProp ?? 'searchbox' : roleProp;
     return (
       <input
         ref={ref}
-        type={type}
+        type={safeType}
+        role={role}
         data-slot="input"
         className={cn(inputVariants({ size, className }))}
         {...props}

package/src/components/input-group/index.tsx

@@ -32,7 +32,7 @@ const InputGroup = React.forwardRef<
       data-slot="input-group"
       role="group"
       className={cn(
-        'group/input-group relative flex h-8 w-full min-w-0 items-center rounded-md border border-input transition-colors outline-none has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
+        'group/input-group relative flex h-8 w-full min-w-0 items-center rounded-md border border-input transition-colors outline-none has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/20 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
         className,
       )}
       {...props}
@@ -136,7 +136,7 @@ function InputGroupInput({ className, ...props }: InputProps) {
     <Input
       data-slot="input-group-control"
       className={cn(
-        'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0',
+        'h-full flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0',
         className,
       )}
       {...props}
@@ -278,7 +278,7 @@ function InputGroupShowCount({
       data-slot="input-group-show-count"
       data-overflow={overflow || undefined}
       className={cn(
-        'flex items-center text-xs tabular-nums text-muted-foreground select-none',
+        'flex items-center text-xs tabular-nums text-muted-foreground/60 select-none',
         'data-[overflow]:text-destructive',
         className,
       )}

package/src/components/input-group/meta.md

@@ -44,6 +44,21 @@
 </InputGroup>
 ```
 
+### WithTrailingIcon
+
+后置图标插槽：搜索图标在右侧。
+
+```tsx
+<InputGroup className="w-64">
+  <InputGroupInput placeholder="搜索..." />
+  <InputGroupAddon align="inline-end">
+    <InputGroupText>
+      <SearchIcon />
+    </InputGroupText>
+  </InputGroupAddon>
+</InputGroup>
+```
+
 ### Email
 
 邮箱输入：左侧邮件图标 + 右侧域名后缀文本。

package/src/components/input-group/stories.tsx

@@ -44,6 +44,20 @@ export const WithLeadingIcon: Story = {
   ),
 };
 
+/** 后置图标插槽：搜索图标在右侧。 */
+export const WithTrailingIcon: Story = {
+  render: () => (
+    <InputGroup className="w-64">
+      <InputGroupInput placeholder="搜索..." />
+      <InputGroupAddon align="inline-end">
+        <InputGroupText>
+          <SearchIcon />
+        </InputGroupText>
+      </InputGroupAddon>
+    </InputGroup>
+  ),
+};
+
 /**
  * 搜索场景：左侧 SearchIcon + 右侧 InputGroupClear 受控清除按钮。
  * 仅当 value 非空时显示清除按钮。

package/src/components/input-ip/index.tsx

@@ -27,7 +27,7 @@ const inputIpVariants = cva(
     // `w-fit` 显式锁定“宽度 = 内容”，避免被 flex/grid 父容器 cross-axis stretch 拉满。
     // 消费方需要铺满父容器时，可通过 className="w-full" 覆盖。
     'inline-flex w-fit items-center rounded-md border border-input bg-transparent transition-colors',
-    'focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
+    'focus-within:border-ring focus-within:ring-ring/20',
     'aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-1 aria-[invalid=true]:ring-destructive/20',
   ].join(' '),
   {

package/src/components/input-number/index.tsx

@@ -21,8 +21,8 @@ import { cn } from '@/lib/utils';
 
 const inputNumberVariants = cva(
   [
-    'inline-flex w-full min-w-0 items-stretch overflow-hidden rounded-md border border-input bg-transparent transition-colors',
-    'focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
+    'group/input-number inline-flex w-full min-w-0 items-stretch overflow-hidden rounded-md border border-input bg-transparent transition-colors',
+    'focus-within:border-ring focus-within:ring-ring/20',
     'has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-input/50 has-[input:disabled]:opacity-50',
     'has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]]:ring-1 has-[input[aria-invalid=true]]:ring-destructive/20',
   ].join(' '),
@@ -253,7 +253,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
     };
 
     const stepBtnClass =
-      'flex cursor-pointer items-center justify-center text-muted-foreground hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-muted-foreground';
+      'flex cursor-pointer items-center justify-center text-muted-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent';
 
     const upDisabled =
       disabled ||
@@ -325,7 +325,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
         {controls && variant === 'default' ? (
           <div
             data-slot="input-number-handlers"
-            className="flex flex-col border-l border-input"
+            className="flex flex-col divide-y divide-input border-l border-input opacity-0 transition-opacity group-hover/input-number:opacity-100 group-focus-within/input-number:opacity-100"
           >
             <button
               type="button"
@@ -345,7 +345,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
               onClick={() => stepBy(-1)}
               aria-label="减少"
               data-slot="input-number-decrement"
-              className={cn(stepBtnClass, 'h-1/2 border-t border-input px-1.5')}
+              className={cn(stepBtnClass, 'h-1/2 px-1.5')}
             >
               <ChevronDown className="size-3.5" />
             </button>

package/src/components/item/meta.md

@@ -16,20 +16,20 @@
 - 图文卡片（horizontal 布局）
 - 通知/消息列表
 - 带操作的资源列表
-- 组合结构：ItemGroup [bordered] [divider] > ItemGroupHeader + Item\* > ItemMedia + ItemContent (> ItemTitle + ItemDescription) + ItemExtra + ItemActions [separated] > ItemGroupFooter
+- 组合结构：ItemGroup [bordered] [divider] > ItemGroupHeader + Item* > ItemMedia + ItemContent (> ItemTitle + ItemDescription) + ItemExtra + ItemActions [separated] > ItemGroupFooter
 
 ## Props
 
-| 名称        | 类型                                        | 默认值       | 必填 | 说明                         |
-| ----------- | ------------------------------------------- | ------------ | ---- | ---------------------------- |
-| `bordered`  | `"true" \| "false"`                         | –            | –    | –                            |
-| `divider`   | `"true" \| "false"`                         | –            | –    | –                            |
-| `variant`   | `"default" \| "outline" \| "muted"`         | `"default"`  | –    | –                            |
-| `size`      | `"default" \| "sm" \| "xs"`                 | `"default"`  | –    | –                            |
-| `layout`    | `"vertical" \| "horizontal"`                | `"vertical"` | –    | –                            |
-| `asChild`   | `boolean`                                   | –            | –    | 使用 Slot 模式渲染子元素     |
-| `variant`   | `"default" \| "icon" \| "image" \| "cover"` | `"default"`  | –    | –                            |
-| `separated` | `boolean`                                   | –            | –    | 子元素之间自动插入竖向分隔线 |
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `bordered` | `"true" \| "false"` | – | – | – |
+| `divider` | `"true" \| "false"` | – | – | – |
+| `variant` | `"default" \| "outline" \| "muted"` | `"default"` | – | – |
+| `size` | `"default" \| "sm" \| "xs"` | `"default"` | – | – |
+| `layout` | `"vertical" \| "horizontal"` | `"vertical"` | – | – |
+| `asChild` | `boolean` | – | – | 使用 Slot 模式渲染子元素 |
+| `variant` | `"default" \| "icon" \| "image" \| "cover"` | `"default"` | – | – |
+| `separated` | `boolean` | – | – | 子元素之间自动插入竖向分隔线 |
 
 ## 示例
 

package/src/components/radio-group/index.tsx

@@ -60,7 +60,7 @@ function RadioGroupItem({ className, ...props }: RadioGroupItemProps) {
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        'peer relative flex aspect-square size-4 shrink-0 cursor-pointer items-center justify-center rounded-full border border-input shadow-xs transition-[color,box-shadow] outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:text-primary',
+        'peer relative flex aspect-square size-4 shrink-0 cursor-pointer items-center justify-center rounded-full border border-input shadow-xs transition-[color,box-shadow] outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:text-primary',
         className,
       )}
       {...props}

package/src/components/rate/index.tsx

@@ -232,7 +232,7 @@ function Rate({
                   rateItemVariants({ size }),
                   'inline-flex items-center justify-center',
                   state === 'empty' && 'text-border',
-                  state !== 'empty' && 'text-warning',
+                  state !== 'empty' && 'text-primary',
                 )}
               >
                 {state === 'half' ? (
@@ -241,7 +241,7 @@ function Rate({
                       {character}
                     </span>
                     <span
-                      className="absolute inset-0 inline-flex items-center justify-center text-warning"
+                      className="absolute inset-0 inline-flex items-center justify-center text-primary"
                       style={{ clipPath: 'inset(0 50% 0 0)' }}
                     >
                       {character}
@@ -261,7 +261,7 @@ function Rate({
                 {Icon}
                 {state !== 'empty' && (
                   <span
-                    className={cn('absolute inset-0 inline-block text-warning')}
+                    className={cn('absolute inset-0 inline-block text-primary')}
                     style={
                       state === 'half'
                         ? { clipPath: 'inset(0 50% 0 0)' }

package/src/components/select/index.tsx

@@ -112,7 +112,7 @@ function SelectTrigger({
       data-size={size}
       data-loading={loading ? 'true' : undefined}
       className={cn(
-        "flex w-fit cursor-pointer items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-xs whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=lg]:h-9 data-[size=lg]:text-sm *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit cursor-pointer items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-xs whitespace-nowrap transition-colors outline-none select-none focus:border-ring focus:ring-ring/20 data-[state=open]:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=lg]:h-9 data-[size=lg]:text-sm *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -198,7 +198,7 @@ function SelectContent({
         className={cn(
           // 面板高度上限 `max-h-80`（20rem ≈ 10 个选项），避免选项多时面板过长；
           // 配合 `overflow-y-auto` 使用浏览器原生滚动条，不再渲染 ScrollUp/Down 按钮。
-          'relative z-50 max-h-80 min-w-(--radix-select-trigger-width) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+          'relative z-50 max-h-80 min-w-(--radix-select-trigger-width) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           className,

package/src/components/sidebar/index.tsx

@@ -33,7 +33,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/tooltip';
-import { PanelLeftIcon } from 'lucide-react';
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -268,7 +268,7 @@ function SidebarTrigger({
   onClick,
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar();
+  const { toggleSidebar, open } = useSidebar();
 
   return (
     <Button
@@ -276,14 +276,14 @@ function SidebarTrigger({
       data-slot="sidebar-trigger"
       variant="ghost"
       size="icon"
-      className={cn(className)}
+      className={cn('text-muted-foreground', className)}
       onClick={(event) => {
         onClick?.(event);
         toggleSidebar();
       }}
       {...props}
     >
-      <PanelLeftIcon />
+      {open ? <PanelLeftClose /> : <PanelLeftOpen />}
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );

package/src/components/skeleton/index.tsx

@@ -204,7 +204,7 @@ function SkeletonImage({
       className={cn(skeletonImageVariants({ size, block }), className)}
       {...props}
     >
-      {icon ?? <ImageIcon aria-hidden="true" />}
+      {icon ?? <ImageIcon strokeWidth={1.5} aria-hidden="true" />}
     </Skeleton>
   );
 }

package/src/components/skeleton/meta.md

@@ -52,19 +52,19 @@ SkeletonInput / SkeletonTitle / SkeletonParagraph（独立子家族，可单独
 ```tsx
 <div className="flex flex-col gap-3">
   <div className="flex items-center gap-3">
-    <span className="w-24 text-muted-foreground">text</span>
+    <span className="w-24 text-xs text-muted-foreground">text</span>
     <Skeleton variant="text" className="max-w-64" />
   </div>
   <div className="flex items-center gap-3">
-    <span className="w-24 text-muted-foreground">rectangular</span>
+    <span className="w-24 text-xs text-muted-foreground">rectangular</span>
     <Skeleton variant="rectangular" className="h-4 w-64" />
   </div>
   <div className="flex items-center gap-3">
-    <span className="w-24 text-muted-foreground">rounded</span>
+    <span className="w-24 text-xs text-muted-foreground">rounded</span>
     <Skeleton variant="rounded" className="h-4 w-64" />
   </div>
   <div className="flex items-center gap-3">
-    <span className="w-24 text-muted-foreground">circular</span>
+    <span className="w-24 text-xs text-muted-foreground">circular</span>
     <Skeleton variant="circular" className="size-10" />
   </div>
 </div>
@@ -77,11 +77,11 @@ pulse / none 两种动画对照。
 ```tsx
 <div className="flex flex-col gap-3">
   <div className="flex items-center gap-3">
-    <span className="w-16 text-muted-foreground">pulse</span>
+    <span className="w-16 text-xs text-muted-foreground">pulse</span>
     <Skeleton animation="pulse" className="h-4 w-64" />
   </div>
   <div className="flex items-center gap-3">
-    <span className="w-16 text-muted-foreground">none</span>
+    <span className="w-16 text-xs text-muted-foreground">none</span>
     <Skeleton animation="none" className="h-4 w-64" />
   </div>
 </div>

package/src/components/skeleton/stories.tsx

@@ -31,19 +31,19 @@ export const Variants: Story = {
   render: () => (
     <div className="flex flex-col gap-3">
       <div className="flex items-center gap-3">
-        <span className="w-24 text-muted-foreground">text</span>
+        <span className="w-24 text-xs text-muted-foreground">text</span>
         <Skeleton variant="text" className="max-w-64" />
       </div>
       <div className="flex items-center gap-3">
-        <span className="w-24 text-muted-foreground">rectangular</span>
+        <span className="w-24 text-xs text-muted-foreground">rectangular</span>
         <Skeleton variant="rectangular" className="h-4 w-64" />
       </div>
       <div className="flex items-center gap-3">
-        <span className="w-24 text-muted-foreground">rounded</span>
+        <span className="w-24 text-xs text-muted-foreground">rounded</span>
         <Skeleton variant="rounded" className="h-4 w-64" />
       </div>
       <div className="flex items-center gap-3">
-        <span className="w-24 text-muted-foreground">circular</span>
+        <span className="w-24 text-xs text-muted-foreground">circular</span>
         <Skeleton variant="circular" className="size-10" />
       </div>
     </div>
@@ -55,11 +55,11 @@ export const Animations: Story = {
   render: () => (
     <div className="flex flex-col gap-3">
       <div className="flex items-center gap-3">
-        <span className="w-16 text-muted-foreground">pulse</span>
+        <span className="w-16 text-xs text-muted-foreground">pulse</span>
         <Skeleton animation="pulse" className="h-4 w-64" />
       </div>
       <div className="flex items-center gap-3">
-        <span className="w-16 text-muted-foreground">none</span>
+        <span className="w-16 text-xs text-muted-foreground">none</span>
         <Skeleton animation="none" className="h-4 w-64" />
       </div>
     </div>
@@ -84,8 +84,8 @@ export const Loading: Story = {
     return (
       <div className="flex flex-col gap-3">
         <Button onClick={() => setLoading((v) => !v)}>切换</Button>
-        <Skeleton loading={loading} className="h-4 w-64">
-          <span className="text-foreground">真实内容已加载</span>
+        <Skeleton loading={loading} className="h-8 w-64">
+          <span className="text-xs text-foreground">真实内容已加载</span>
         </Skeleton>
       </div>
     );

package/src/components/slider/index.tsx

@@ -78,8 +78,9 @@ function Slider({
   showTooltip = 'auto',
   tooltipFormatter,
   reverse = false,
+  onValueChange,
   ...props
-}: SliderProps) {
+}: SliderProps & { onValueChange?: (value: number[]) => void }) {
   const _values = React.useMemo(
     () =>
       Array.isArray(value)
@@ -90,6 +91,29 @@ function Slider({
     [value, defaultValue, min, max],
   );
 
+  // Track current slider values for mark in-range detection
+  const [currentValues, setCurrentValues] = React.useState(_values);
+  React.useEffect(() => {
+    if (value) setCurrentValues(Array.isArray(value) ? value : [value]);
+  }, [value]);
+
+  const handleValueChange = React.useCallback(
+    (vals: number[]) => {
+      setCurrentValues(vals);
+      onValueChange?.(vals);
+    },
+    [onValueChange],
+  );
+
+  const isInRange = (markValue: number) => {
+    const first = currentValues[0] ?? min;
+    if (currentValues.length === 1) {
+      return reverse ? markValue >= first : markValue <= first;
+    }
+    const last = currentValues[currentValues.length - 1] ?? max;
+    return markValue >= first && markValue <= last;
+  };
+
   const parsedMarks = React.useMemo(
     () => parseMarks(marks, min, max),
     [marks, min, max],
@@ -178,6 +202,7 @@ function Slider({
         min={min}
         max={max}
         orientation={orientation}
+        onValueChange={handleValueChange}
         className={cn(
           'group/slider relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
           className,
@@ -196,6 +221,7 @@ function Slider({
             <span
               key={`mark-${m.value}`}
               data-slot="slider-mark"
+              data-in-range={isInRange(m.value) || undefined}
               aria-hidden="true"
               style={markDotStyle(m.value)}
               className="pointer-events-none absolute size-1 rounded-full bg-border"

package/src/components/sonner/index.tsx

@@ -21,16 +21,18 @@ import {
   toast,
   type ToasterProps as SonnerToasterProps,
 } from 'sonner';
-import {
-  CircleCheckIcon,
-  CircleHelpIcon,
-  InfoIcon,
-  Loader2Icon,
-  OctagonXIcon,
-  TriangleAlertIcon,
-} from 'lucide-react';
+import { Loader2Icon } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
+import {
+  ErrorFilledIcon,
+  HelpFilledIcon,
+  InfoFilledIcon,
+  SuccessFilledIcon,
+  WarningFilledIcon,
+} from '@/components/icon';
+
+/* ─── Types ────────────────────────────────────────────────────────────────── */
 
 /**
  * 容器级摆放位置 — cloud-design Notification.config({ placement }) 的 6 档形态。
@@ -52,17 +54,13 @@ export interface ToasterProps
   maxToasts?: number;
 }
 
-/* ────────────────────────────────────────────────────────────────────────── */
-/* 内置状态图标（占位）                                                        */
-/*                                                                            */
-/* TODO(icon): 项目自研 Icon 组件就绪后，统一替换以下 STATE_ICONS 即可，         */
-/*             不影响 Toaster / toast 的 API。                                 */
-/* ────────────────────────────────────────────────────────────────────────── */
+/* ─── 内置语义图标（对齐 Alert 面性图标体系） ──────────────────────────────── */
+
 const STATE_ICONS = {
-  success: <CircleCheckIcon className="size-4 shrink-0 text-success" />,
-  info: <InfoIcon className="size-4 shrink-0 text-info" />,
-  warning: <TriangleAlertIcon className="size-4 shrink-0 text-warning" />,
-  error: <OctagonXIcon className="size-4 shrink-0 text-destructive" />,
+  success: <SuccessFilledIcon className="size-4 shrink-0 text-success" />,
+  info: <InfoFilledIcon className="size-4 shrink-0 text-info" />,
+  warning: <WarningFilledIcon className="size-4 shrink-0 text-warning" />,
+  error: <ErrorFilledIcon className="size-4 shrink-0 text-destructive" />,
   loading: (
     <Loader2Icon className="size-4 shrink-0 animate-spin text-muted-foreground" />
   ),
@@ -70,12 +68,14 @@ const STATE_ICONS = {
 
 /**
  * `help` 状态在 sonner 原生类型中不存在，作为业界常见第六档语义保留。
- * 业务侧通过 `toast(msg, { icon: HelpToastIcon })` 触发，或参考 stories 演示。
+ * 业务侧通过 `toast(msg, { icon: HelpToastIcon })` 触发。
  */
 export const HelpToastIcon = (
-  <CircleHelpIcon className="size-4 shrink-0 text-help" />
+  <HelpFilledIcon className="size-4 shrink-0 text-help" />
 );
 
+/* ─── Toaster 容器 ─────────────────────────────────────────────────────────── */
+
 function Toaster({
   theme,
   placement = 'top-right',
@@ -104,32 +104,35 @@ function Toaster({
       className={cn('toaster group', className)}
       style={
         {
-          // 容器与文字基础变量 — 沿用主题语义 token，dark 自动跟随
-          '--normal-bg': 'var(--popover)',
-          '--normal-text': 'var(--popover-foreground)',
-          '--normal-border': 'var(--border)',
+          // 基础外观 — 桥接 Tailwind v4 主题 token 到 sonner CSS 变量
+          '--normal-bg': 'var(--color-popover)',
+          '--normal-text': 'var(--color-popover-foreground)',
+          '--normal-border': 'var(--color-border)',
           '--border-radius': 'var(--radius)',
-          // 状态变量桥接 — 开启 richColors 时由 sonner 消费
-          '--success-bg': 'var(--success-bg)',
-          '--success-text': 'var(--success)',
-          '--success-border': 'var(--success-border)',
-          '--info-bg': 'var(--info-bg)',
-          '--info-text': 'var(--info)',
-          '--info-border': 'var(--info-border)',
-          '--warning-bg': 'var(--warning-bg)',
-          '--warning-text': 'var(--warning)',
-          '--warning-border': 'var(--warning-border)',
-          '--error-bg': 'var(--destructive-bg)',
-          '--error-text': 'var(--destructive)',
-          '--error-border': 'var(--destructive-border)',
+          // 关闭按钮定位 — 右上角内部
+          '--toast-close-button-start': 'unset',
+          '--toast-close-button-end': '8px',
+          '--toast-close-button-transform': 'translate(0, 8px)',
+          // richColors 状态变量桥接
+          '--success-bg': 'var(--color-success-bg)',
+          '--success-text': 'var(--color-success)',
+          '--success-border': 'var(--color-success-border)',
+          '--info-bg': 'var(--color-info-bg)',
+          '--info-text': 'var(--color-info)',
+          '--info-border': 'var(--color-info-border)',
+          '--warning-bg': 'var(--color-warning-bg)',
+          '--warning-text': 'var(--color-warning)',
+          '--warning-border': 'var(--color-warning-border)',
+          '--error-bg': 'var(--color-destructive-bg)',
+          '--error-text': 'var(--color-destructive)',
+          '--error-border': 'var(--color-destructive-border)',
           ...style,
         } as React.CSSProperties
       }
       toastOptions={{
         ...toastOptions,
         classNames: {
-          toast:
-            'group toast group-[.toaster]:bg-popover group-[.toaster]:text-popover-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          toast: 'group toast shadow-none',
           title: 'text-sm font-medium leading-5 text-foreground',
           description: 'text-xs leading-5 text-muted-foreground',
           actionButton:
@@ -137,7 +140,7 @@ function Toaster({
           cancelButton:
             'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground group-[.toast]:rounded-sm group-[.toast]:text-xs group-[.toast]:px-2 group-[.toast]:py-1 group-[.toast]:cursor-pointer hover:group-[.toast]:bg-muted/80',
           closeButton:
-            'group-[.toast]:bg-transparent group-[.toast]:text-muted-foreground group-[.toast]:border-border hover:group-[.toast]:text-foreground',
+            '!size-5 !border-0 !rounded-sm !bg-transparent !text-muted-foreground hover:!text-foreground hover:!bg-transparent [&>svg]:!size-4',
           ...toastOptions?.classNames,
         },
       }}