@fangxinyan/lumina 0.6.2 → 0.6.4

package/README.md

@@ -92,10 +92,11 @@ package/
 所有设计令牌都在 `:root` 上定义，可以通过 `data-*` 属性切换主题：
 
 ```html
-<html data-theme="dark" data-accent="sky" data-density="compact">
+<html data-theme="dark" data-theme-mode="graphite" data-accent="sky" data-density="compact">
 ```
 
 - `data-theme`: `light` | `dark`
+- `data-theme-mode`: 当前模式名，例如 `light` / `dark` / `system` / 自定义模式名
 - `data-accent`: `rose` | `sky` | `coral` | `mint` | `violet` | `amber`
 - `data-density`: `compact` | `comfortable` | `spacious`
 

package/dist/{Alert-JJ7GB3UU.css → Alert-HVPI6L4V.css}

@@ -6,7 +6,7 @@
   padding: 14px 16px;
   border-radius: var(--r-md);
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   position: relative;
 }
 .alert-ico {
@@ -14,6 +14,13 @@
   display: grid; place-items: center;
   flex-shrink: 0;
   margin-top: 1px;
+  line-height: 0;
+}
+.alert-ico img {
+  display: block;
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
 }
 .alert.info    .alert-ico { color: var(--info); }
 .alert.success .alert-ico { color: var(--success); }
@@ -43,4 +50,4 @@
   cursor: pointer;
   border: none; background: transparent;
 }
-.alert-close:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-flat); }
+.alert-close:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-shadow-subtle); }

package/dist/Alert.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunk35ZGBAA3_cjs = require('./chunk-35ZGBAA3.cjs');
-require('./chunk-TJII7BQ2.cjs');
+var chunkYSCIMHOI_cjs = require('./chunk-YSCIMHOI.cjs');
+require('./chunk-6LARTGLP.cjs');
 
 
 
 Object.defineProperty(exports, "Alert", {
   enumerable: true,
-  get: function () { return chunk35ZGBAA3_cjs.Alert; }
+  get: function () { return chunkYSCIMHOI_cjs.Alert; }
 });

package/dist/Alert.d.cts

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { IconName } from './Icon.cjs';
+import { IconSlot } from './Icon.cjs';
+import 'react/jsx-runtime';
 
 type AlertTone = "info" | "success" | "warning" | "danger";
 interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
     tone?: AlertTone;
     title?: React.ReactNode;
     children?: React.ReactNode;
-    icon?: IconName;
+    icon?: IconSlot;
     /** Controls the leading semantic icon. Defaults to `true`. */
     showIcon?: boolean;
     closable?: boolean;

package/dist/Alert.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { IconName } from './Icon.js';
+import { IconSlot } from './Icon.js';
+import 'react/jsx-runtime';
 
 type AlertTone = "info" | "success" | "warning" | "danger";
 interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
     tone?: AlertTone;
     title?: React.ReactNode;
     children?: React.ReactNode;
-    icon?: IconName;
+    icon?: IconSlot;
     /** Controls the leading semantic icon. Defaults to `true`. */
     showIcon?: boolean;
     closable?: boolean;

package/dist/Alert.js

@@ -1,2 +1,2 @@
-export { Alert } from './chunk-UMDGS4BP.js';
-import './chunk-OF3SGLZY.js';
+export { Alert } from './chunk-3YP7CBJT.js';
+import './chunk-YT5NLCRC.js';

package/dist/{AppShell-RCALXUCZ.css → AppShell-FZCD4C56.css}

@@ -43,7 +43,7 @@
   border: none; padding: 0;
   border-radius: 999px;
   background: var(--bg);
-  box-shadow: var(--neu-flat);
+  box-shadow: var(--neu-shadow-subtle);
   position: relative;
   cursor: pointer;
   transition: transform var(--dur-fast) var(--ease);
@@ -84,7 +84,7 @@
   overflow: visible;
 }
 .win-controls.windows .win-btn svg { display: block; flex-shrink: 0; }
-.win-controls.windows .win-btn:hover { background: var(--bg); box-shadow: var(--neu-in-sm); color: var(--fg); }
+.win-controls.windows .win-btn:hover { background: var(--bg); box-shadow: var(--neu-shadow-inset); color: var(--fg); }
 .win-controls.windows .win-btn.close:hover {
   background: var(--danger);
   color: white;
@@ -121,11 +121,11 @@
   width: 100%;
   transition: all var(--dur-fast) var(--ease);
 }
-.sidebar-item:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-flat); }
+.sidebar-item:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
 .sidebar-item.active {
   color: var(--accent-ink);
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   font-weight: 500;
 }
 .sidebar-icon { display: inline-flex; flex-shrink: 0; }

package/dist/AppShell.cjs

@@ -1,22 +1,22 @@
 'use strict';
 
-var chunk7ABFUIOB_cjs = require('./chunk-7ABFUIOB.cjs');
+var chunkYNCDTKAE_cjs = require('./chunk-YNCDTKAE.cjs');
 
 
 
 Object.defineProperty(exports, "AppShell", {
   enumerable: true,
-  get: function () { return chunk7ABFUIOB_cjs.AppShell; }
+  get: function () { return chunkYNCDTKAE_cjs.AppShell; }
 });
 Object.defineProperty(exports, "Sidebar", {
   enumerable: true,
-  get: function () { return chunk7ABFUIOB_cjs.Sidebar; }
+  get: function () { return chunkYNCDTKAE_cjs.Sidebar; }
 });
 Object.defineProperty(exports, "TitleBar", {
   enumerable: true,
-  get: function () { return chunk7ABFUIOB_cjs.TitleBar; }
+  get: function () { return chunkYNCDTKAE_cjs.TitleBar; }
 });
 Object.defineProperty(exports, "WindowControls", {
   enumerable: true,
-  get: function () { return chunk7ABFUIOB_cjs.WindowControls; }
+  get: function () { return chunkYNCDTKAE_cjs.WindowControls; }
 });

package/dist/AppShell.js

@@ -1 +1 @@
-export { AppShell, Sidebar, TitleBar, WindowControls } from './chunk-XRR3CYQL.js';
+export { AppShell, Sidebar, TitleBar, WindowControls } from './chunk-QP7RXZES.js';

package/dist/{AutoComplete-P5KZMZO5.css → AutoComplete-4YZBMW4E.css}

@@ -9,7 +9,7 @@
   z-index: 1500;
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-float);
+  box-shadow: var(--neu-shadow-float);
   padding: 6px;
   max-height: 280px;
   overflow-y: auto;
@@ -43,7 +43,7 @@
 .autocomplete-item.active:not(:disabled) {
   background: var(--bg);
   color: var(--accent-ink);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
 }
 
 .autocomplete-empty {

package/dist/AutoComplete.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
-var chunkSKMP2A5O_cjs = require('./chunk-SKMP2A5O.cjs');
+var chunk66GXZQKL_cjs = require('./chunk-66GXZQKL.cjs');
 require('./chunk-YB3IWIOJ.cjs');
-require('./chunk-6LZ54NPO.cjs');
-require('./chunk-OQBDU5I2.cjs');
-require('./chunk-TJII7BQ2.cjs');
+require('./chunk-VAXWWJJP.cjs');
+require('./chunk-5NFSDFBB.cjs');
+require('./chunk-6LARTGLP.cjs');
 
 
 
 Object.defineProperty(exports, "AutoComplete", {
   enumerable: true,
-  get: function () { return chunkSKMP2A5O_cjs.AutoComplete; }
+  get: function () { return chunk66GXZQKL_cjs.AutoComplete; }
 });

package/dist/AutoComplete.js

@@ -1,5 +1,5 @@
-export { AutoComplete } from './chunk-FJNWUELL.js';
+export { AutoComplete } from './chunk-ZPP7LTHP.js';
 import './chunk-DUFRASGO.js';
-import './chunk-XTIN5545.js';
-import './chunk-WGZ2KJTZ.js';
-import './chunk-OF3SGLZY.js';
+import './chunk-XVP7IKLZ.js';
+import './chunk-56PHETWO.js';
+import './chunk-YT5NLCRC.js';

package/dist/{Avatar-R5A4AFKZ.css → Avatar-TNPOHVY5.css}

@@ -4,7 +4,7 @@
   width: var(--size); height: var(--size);
   border-radius: 999px;
   background: var(--bg);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   display: grid; place-items: center;
   overflow: hidden;
   color: var(--accent-ink);

package/dist/Avatar.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkSWBWZIL4_cjs = require('./chunk-SWBWZIL4.cjs');
+var chunkS6OKX4H7_cjs = require('./chunk-S6OKX4H7.cjs');
 
 
 
 Object.defineProperty(exports, "Avatar", {
   enumerable: true,
-  get: function () { return chunkSWBWZIL4_cjs.Avatar; }
+  get: function () { return chunkS6OKX4H7_cjs.Avatar; }
 });

package/dist/Avatar.js

@@ -1 +1 @@
-export { Avatar } from './chunk-7PQJCLIR.js';
+export { Avatar } from './chunk-KMG7OMOS.js';

package/dist/Badge.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkQ5SZIU7Z_cjs = require('./chunk-Q5SZIU7Z.cjs');
+var chunkJFQ53MO4_cjs = require('./chunk-JFQ53MO4.cjs');
 
 
 
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
-  get: function () { return chunkQ5SZIU7Z_cjs.Badge; }
+  get: function () { return chunkJFQ53MO4_cjs.Badge; }
 });

package/dist/Badge.d.cts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TagTone } from './Tag.cjs';
 import './Icon.cjs';
+import 'react/jsx-runtime';
 
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** Numeric count — renders as "max+" if greater than `max`. */

package/dist/Badge.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TagTone } from './Tag.js';
 import './Icon.js';
+import 'react/jsx-runtime';
 
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** Numeric count — renders as "max+" if greater than `max`. */

package/dist/Badge.js

@@ -1 +1 @@
-export { Badge } from './chunk-F6RYCBQG.js';
+export { Badge } from './chunk-NFXHIO3G.js';

package/dist/Button-TUMZUQLI.css

@@ -0,0 +1,118 @@
+/* ============ Button ============ */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: var(--ctrl-h);
+  padding: 0 var(--ctrl-pad-x);
+  border: 1px solid transparent;
+  border-radius: var(--r-md);
+  font-size: var(--fs-md);
+  font-weight: 500;
+  font-family: inherit;
+  color: var(--fg);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-control);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition:
+    background var(--dur-fast) var(--ease),
+    box-shadow var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease);
+}
+.btn > svg,
+.btn-icon-slot {
+  flex-shrink: 0;
+}
+.btn-icon-slot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.btn-icon-slot img {
+  display: block;
+  max-width: 1.25em;
+  max-height: 1.25em;
+  object-fit: contain;
+}
+.btn.icon {
+  flex-shrink: 0;
+  overflow: visible;
+}
+
+.btn.primary {
+  color: var(--accent-ink);
+  background: color-mix(in oklch, var(--accent-soft) 62%, var(--bg));
+  font-weight: 600;
+}
+
+.btn.ghost {
+  background: transparent;
+  box-shadow: none;
+  color: var(--fg-muted);
+}
+
+.btn.danger { color: var(--danger); }
+
+.btn:hover {
+  box-shadow: var(--neu-shadow-panel);
+}
+.btn.ghost:hover {
+  background: var(--bg);
+  border-color: transparent;
+  box-shadow: var(--neu-shadow-subtle);
+  color: var(--fg);
+}
+.btn.danger:hover {
+  color: var(--danger);
+}
+.btn:active,
+.btn.pressed {
+  box-shadow: var(--neu-shadow-inset-strong);
+}
+.btn.ghost:active,
+.btn.ghost.pressed {
+  background: var(--bg);
+  color: var(--fg);
+}
+.btn.danger:active,
+.btn.danger.pressed {
+  color: var(--danger);
+}
+
+.btn.icon { width: var(--ctrl-h); padding: 0; }
+.btn.sm { height: var(--ctrl-h-sm); padding: 0 var(--ctrl-pad-x-sm); font-size: var(--fs-sm); border-radius: var(--r-sm); }
+.btn.sm.icon { width: var(--ctrl-h-sm); padding: 0; }
+.btn.lg { height: var(--ctrl-h-lg); padding: 0 var(--ctrl-pad-x-lg); font-size: var(--fs-xl); border-radius: var(--r-lg); }
+.btn.lg.icon { width: var(--ctrl-h-lg); padding: 0; }
+
+.btn.block { width: 100%; flex-shrink: 1; }
+
+.btn[disabled], .btn.disabled, .btn:disabled {
+  color: var(--fg-subtle);
+  cursor: not-allowed;
+  border-color: transparent;
+  box-shadow: var(--neu-shadow-subtle);
+  transform: none;
+}
+.btn[disabled]:hover, .btn:disabled:hover, .btn.disabled:hover {
+  color: var(--fg-subtle);
+  background: var(--bg);
+  border-color: transparent;
+  box-shadow: var(--neu-shadow-subtle);
+  transform: none;
+}
+
+.btn.loading { cursor: wait; }
+.btn .spinner {
+  width: 14px; height: 14px;
+  border-radius: 999px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  animation: spin 0.8s linear infinite;
+  display: inline-block;
+}

package/dist/Button.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunk5WAXZJG5_cjs = require('./chunk-5WAXZJG5.cjs');
-require('./chunk-TJII7BQ2.cjs');
+var chunk2ZADGBUN_cjs = require('./chunk-2ZADGBUN.cjs');
+require('./chunk-6LARTGLP.cjs');
 
 
 
 Object.defineProperty(exports, "Button", {
   enumerable: true,
-  get: function () { return chunk5WAXZJG5_cjs.Button; }
+  get: function () { return chunk2ZADGBUN_cjs.Button; }
 });

package/dist/Button.d.cts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { IconName } from './Icon.cjs';
+import { IconSlot } from './Icon.cjs';
+import 'react/jsx-runtime';
 
 type ButtonVariant = "default" | "primary" | "ghost" | "danger";
 type ButtonSize = "sm" | "md" | "lg";
@@ -8,10 +9,10 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     variant?: ButtonVariant;
     /** Control height preset. */
     size?: ButtonSize;
-    /** Leading icon. */
-    icon?: IconName;
-    /** Trailing icon. */
-    trailingIcon?: IconName;
+    /** Leading icon. Accepts a built-in icon name or custom React node. */
+    icon?: IconSlot;
+    /** Trailing icon. Accepts a built-in icon name or custom React node. */
+    trailingIcon?: IconSlot;
     /** Render as a square icon-only button. Automatically enabled when `icon` is set and no children are provided. */
     iconOnly?: boolean;
     /** Native tooltip/title for compact icon-only buttons. */

package/dist/Button.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { IconName } from './Icon.js';
+import { IconSlot } from './Icon.js';
+import 'react/jsx-runtime';
 
 type ButtonVariant = "default" | "primary" | "ghost" | "danger";
 type ButtonSize = "sm" | "md" | "lg";
@@ -8,10 +9,10 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     variant?: ButtonVariant;
     /** Control height preset. */
     size?: ButtonSize;
-    /** Leading icon. */
-    icon?: IconName;
-    /** Trailing icon. */
-    trailingIcon?: IconName;
+    /** Leading icon. Accepts a built-in icon name or custom React node. */
+    icon?: IconSlot;
+    /** Trailing icon. Accepts a built-in icon name or custom React node. */
+    trailingIcon?: IconSlot;
     /** Render as a square icon-only button. Automatically enabled when `icon` is set and no children are provided. */
     iconOnly?: boolean;
     /** Native tooltip/title for compact icon-only buttons. */

package/dist/Button.js

@@ -1,2 +1,2 @@
-export { Button } from './chunk-JD7A6VM3.js';
-import './chunk-OF3SGLZY.js';
+export { Button } from './chunk-CNGKJYGZ.js';
+import './chunk-YT5NLCRC.js';

package/dist/{Calendar-LHZELUDL.css → Calendar-RUTPKREW.css}

@@ -3,7 +3,7 @@
   background: var(--bg);
   border-radius: var(--r-lg);
   padding: var(--gap-4);
-  box-shadow: var(--neu-out);
+  box-shadow: var(--neu-shadow-panel);
   width: 320px;
 }
 .calendar-head {
@@ -18,7 +18,7 @@
   font-family: inherit;
   transition: all var(--dur-fast) var(--ease);
 }
-.calendar-title:hover { background: var(--bg); box-shadow: var(--neu-flat); }
+.calendar-title:hover { background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
 .calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
@@ -47,7 +47,7 @@
   transition: all var(--dur-fast) var(--ease);
 }
 .calendar-cell.out { color: var(--fg-subtle); opacity: 0.5; }
-.calendar-cell:hover { background: var(--bg); box-shadow: var(--neu-flat); }
+.calendar-cell:hover { background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
 .calendar-cell.today { font-weight: 700; color: var(--accent-ink); }
 .calendar-cell.today::after {
   content: ""; position: absolute; bottom: 4px; left: 50%;
@@ -57,7 +57,7 @@
 }
 .calendar-cell.selected {
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   color: var(--accent-ink);
   font-weight: 600;
 }

package/dist/Calendar.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunk4WTU5P3O_cjs = require('./chunk-4WTU5P3O.cjs');
-require('./chunk-TJII7BQ2.cjs');
+var chunkACQSRMLF_cjs = require('./chunk-ACQSRMLF.cjs');
+require('./chunk-6LARTGLP.cjs');
 
 
 
 Object.defineProperty(exports, "Calendar", {
   enumerable: true,
-  get: function () { return chunk4WTU5P3O_cjs.Calendar; }
+  get: function () { return chunkACQSRMLF_cjs.Calendar; }
 });

package/dist/Calendar.js

@@ -1,2 +1,2 @@
-export { Calendar } from './chunk-33NCTOEB.js';
-import './chunk-OF3SGLZY.js';
+export { Calendar } from './chunk-CEZ2DR4R.js';
+import './chunk-YT5NLCRC.js';

package/dist/{Card-6RMVIHWX.css → Card-MA6SV7D5.css}

@@ -2,11 +2,11 @@
 .card {
   background: var(--bg);
   border-radius: var(--r-lg);
-  box-shadow: var(--neu-out);
+  box-shadow: var(--neu-shadow-panel);
   padding: var(--gap-5);
 }
-.card.flat   { box-shadow: var(--neu-flat); }
-.card.sunken { box-shadow: var(--neu-in); }
+.card.flat   { box-shadow: var(--neu-shadow-subtle); }
+.card.sunken { box-shadow: var(--neu-shadow-inset-strong); }
 .card.pad-none { padding: 0; }
 .card.pad-sm   { padding: var(--gap-3); }
 .card.pad-lg   { padding: var(--gap-6); }
@@ -17,10 +17,10 @@
 }
 .card.hoverable:hover {
   transform: translateY(-3px);
-  box-shadow: var(--neu-out-lg);
+  box-shadow: var(--neu-shadow-lift);
 }
-.card.hoverable.flat:hover { box-shadow: var(--neu-out-sm); }
-.card.hoverable.sunken:hover { box-shadow: var(--neu-out); }
+.card.hoverable.flat:hover { box-shadow: var(--neu-shadow-control); }
+.card.hoverable.sunken:hover { box-shadow: var(--neu-shadow-panel); }
 
 .card-head {
   display: flex; align-items: flex-start; justify-content: space-between;

package/dist/Card.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkGMN74OEY_cjs = require('./chunk-GMN74OEY.cjs');
+var chunkCBKJXKVI_cjs = require('./chunk-CBKJXKVI.cjs');
 
 
 
 Object.defineProperty(exports, "Card", {
   enumerable: true,
-  get: function () { return chunkGMN74OEY_cjs.Card; }
+  get: function () { return chunkCBKJXKVI_cjs.Card; }
 });

package/dist/Card.js

@@ -1 +1 @@
-export { Card } from './chunk-AXZ7ELMA.js';
+export { Card } from './chunk-WEJKY3DF.js';

package/dist/{Cascader-C2DFSMKJ.css → Cascader-ANEQUPMI.css}

@@ -11,7 +11,7 @@
   padding: 0 36px 0 var(--ctrl-pad-x);
   border-radius: var(--r-md);
   background: var(--bg);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   display: inline-flex;
   align-items: center;
   font-size: 13px;
@@ -23,7 +23,7 @@
   text-align: left;
 }
 .cascader-trigger.placeholder { color: var(--fg-subtle); }
-.cascader.open .cascader-trigger { box-shadow: var(--neu-in-sm); color: var(--accent-ink); }
+.cascader.open .cascader-trigger { box-shadow: var(--neu-shadow-inset); color: var(--accent-ink); }
 .cascader-clear {
   position: absolute;
   right: 30px;
@@ -33,7 +33,7 @@
   height: 20px;
   border-radius: 999px;
   background: var(--bg);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   display: inline-grid;
   place-items: center;
   color: var(--fg-subtle);
@@ -41,13 +41,13 @@
   transition: all var(--dur-fast) var(--ease);
 }
 .cascader:hover .cascader-clear { opacity: 1; }
-.cascader-clear:hover { color: var(--accent-ink); box-shadow: var(--neu-in-sm); }
+.cascader-clear:hover { color: var(--accent-ink); box-shadow: var(--neu-shadow-inset); }
 .cascader-panel {
   z-index: 1000;
   display: flex;
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-float);
+  box-shadow: var(--neu-shadow-float);
   padding: 6px;
   animation: menuIn var(--dur) var(--ease);
   gap: 4px;
@@ -88,7 +88,7 @@
 }
 .cascader-search-item:hover {
   background: var(--bg);
-  box-shadow: var(--neu-flat);
+  box-shadow: var(--neu-shadow-subtle);
   color: var(--accent-ink);
 }
 .cascader-path-sep { color: var(--fg-subtle); }
@@ -126,10 +126,23 @@
   width: 100%;
   text-align: left;
 }
-.cascader-item:hover { background: var(--bg); box-shadow: var(--neu-flat); color: var(--accent-ink); }
+.cascader-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  flex-shrink: 0;
+}
+.cascader-icon img {
+  display: block;
+  width: 15px;
+  height: 15px;
+  object-fit: contain;
+}
+.cascader-item:hover { background: var(--bg); box-shadow: var(--neu-shadow-subtle); color: var(--accent-ink); }
 .cascader-item.active {
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   color: var(--accent-ink);
   font-weight: 500;
 }