@fangxinyan/lumina 0.6.1 → 0.6.2

package/dist/styles.css

@@ -302,7 +302,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   animation: spin 0.8s linear infinite;
   display: inline-block;
 }
-/* ============ Input / Textarea ============ */
+/* ============ Input ============ */
 .input-shell {
   display: inline-flex;
   flex-direction: column;
@@ -372,6 +372,19 @@ input, textarea, select { font-family: inherit; color: inherit; }
   color: var(--fg);
   background: var(--bg-sunken);
 }
+.input-password-toggle {
+  border: none;
+  background: transparent;
+  color: var(--fg-subtle);
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-family: inherit;
+  flex-shrink: 0;
+}
+.input-password-toggle:hover { color: var(--fg); }
 .input-wrap > .input {
   flex: 1;
   min-width: 0;
@@ -390,6 +403,19 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .input-wrap.lg > .input { font-size: 14px; }
 .input-wrap > .input::placeholder { color: var(--fg-subtle); }
 .input-wrap.disabled > .input { cursor: not-allowed; }
+/* ============ Textarea ============ */
+.textarea-shell {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+.textarea-count {
+  font-size: 11px;
+  color: var(--fg-subtle);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
 .textarea-wrap { position: relative; width: 100%; }
 .textarea-wrap .textarea-clear {
   position: absolute;
@@ -519,8 +545,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .switch.sm .switch-inner-off { right: 5px; left: calc(var(--h) - 2px); }
 .switch.on .switch-inner-on { opacity: 1; transform: translateX(0); }
 .switch.on .switch-inner-off { opacity: 0; transform: translateX(4px); }
-/* ============ Checkbox & Radio ============ */
-.checkbox, .radio {
+/* ============ Checkbox ============ */
+.checkbox {
   display: inline-flex;
   align-items: center;
   gap: 10px;
@@ -529,7 +555,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   font-size: 13px;
   color: var(--fg);
 }
-.checkbox.disabled, .radio.disabled { opacity: 0.5; cursor: not-allowed; }
+.checkbox.disabled { opacity: 0.5; cursor: not-allowed; }
 .checkbox-box {
   width: 20px; height: 20px;
   border: none;
@@ -541,7 +567,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   place-items: center;
   flex-shrink: 0;
   cursor: inherit;
-  color: white;
+  color: var(--bg);
   transition: all var(--dur) var(--ease);
 }
 .checkbox-box svg { opacity: 0; transform: scale(0.6); transition: all var(--dur) var(--ease); }
@@ -557,10 +583,21 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .checkbox.indeterminate .checkbox-box::after {
   content: "";
   width: 10px; height: 2px;
-  background: white;
+  background: var(--bg);
   border-radius: 2px;
 }
 .checkbox.indeterminate .checkbox-box svg { display: none; }
+/* ============ Radio ============ */
+.radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  user-select: none;
+  font-size: 13px;
+  color: var(--fg);
+}
+.radio.disabled { opacity: 0.5; cursor: not-allowed; }
 .radio-dot {
   width: 20px; height: 20px;
   border: none;
@@ -584,11 +621,62 @@ input, textarea, select { font-family: inherit; color: inherit; }
   transform: translate(-50%, -50%);
   width: 8px; height: 8px;
   border-radius: 999px;
-  background: white;
+  background: var(--bg);
 }
 .radio-group { display: flex; gap: 14px; }
 .radio-group.vertical { flex-direction: column; gap: 10px; }
 .radio-group.horizontal { flex-direction: row; flex-wrap: wrap; }
+.radio-group.segmented {
+  position: relative;
+  display: inline-flex;
+  padding: 4px;
+  border-radius: var(--r-md);
+  background: var(--bg);
+  box-shadow: var(--neu-in-sm);
+  gap: 2px;
+  flex-wrap: nowrap;
+}
+.radio-group.segmented .radio {
+  position: relative;
+  z-index: 1;
+  height: 32px;
+  padding: 6px 14px;
+  border-radius: calc(var(--r-md) - 4px);
+  color: var(--fg-muted);
+  font-size: 12px;
+  gap: 6px;
+  transition: all var(--dur-fast) var(--ease);
+}
+.radio-group.segmented .radio:hover { color: var(--fg); }
+.radio-group.segmented .radio.checked {
+  color: var(--accent-ink);
+  font-weight: 600;
+}
+.radio-group.segmented .radio-dot { display: none; }
+.radio-group.segmented .radio-label { line-height: 1; }
+.radio-group.segmented .radio.disabled { opacity: 0.4; }
+.radio-group.segmented.sm .radio { height: 26px; padding: 4px 10px; font-size: 11px; }
+.radio-group.segmented.lg .radio { height: 38px; padding: 8px 18px; font-size: 13px; }
+.radio-segment-thumb {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  left: 0;
+  border-radius: calc(var(--r-md) - 4px);
+  background: var(--bg);
+  box-shadow: var(--neu-out-sm);
+  pointer-events: none;
+  transition:
+    transform var(--dur-slow) var(--ease),
+    width var(--dur-slow) var(--ease),
+    opacity var(--dur-fast) var(--ease);
+  will-change: transform, width;
+}
+@media (prefers-reduced-motion: reduce) {
+  .radio-segment-thumb {
+    transition: none;
+  }
+}
 /* ============ Slider ============ */
 .slider {
   position: relative;
@@ -789,7 +877,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   );
   pointer-events: none;
 }
-/* ============ Tag & Badge ============ */
+/* ============ Tag ============ */
 .tag {
   display: inline-flex;
   align-items: center;
@@ -808,16 +896,17 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .tag.success { color: var(--success); }
 .tag.warning { color: var(--warning); }
 .tag.danger  { color: var(--danger); }
-.tag.solid          { background: var(--accent); color: white; box-shadow: 0 2px 6px var(--accent-glow); }
-.tag.solid.info     { background: var(--info);    color: white; box-shadow: 0 2px 6px color-mix(in oklch, var(--info) 35%, transparent); }
-.tag.solid.success  { background: var(--success); color: white; box-shadow: 0 2px 6px color-mix(in oklch, var(--success) 35%, transparent); }
-.tag.solid.warning  { background: var(--warning); color: white; box-shadow: 0 2px 6px color-mix(in oklch, var(--warning) 35%, transparent); }
-.tag.solid.danger   { background: var(--danger);  color: white; box-shadow: 0 2px 6px color-mix(in oklch, var(--danger) 35%, transparent); }
+.tag.solid          { background: var(--accent); color: var(--bg); box-shadow: 0 2px 6px var(--accent-glow); }
+.tag.solid.info     { background: var(--info);    color: var(--bg); box-shadow: 0 2px 6px color-mix(in oklch, var(--info) 35%, transparent); }
+.tag.solid.success  { background: var(--success); color: var(--bg); box-shadow: 0 2px 6px color-mix(in oklch, var(--success) 35%, transparent); }
+.tag.solid.warning  { background: var(--warning); color: var(--bg); box-shadow: 0 2px 6px color-mix(in oklch, var(--warning) 35%, transparent); }
+.tag.solid.danger   { background: var(--danger);  color: var(--bg); box-shadow: 0 2px 6px color-mix(in oklch, var(--danger) 35%, transparent); }
 .tag.borderless { background: transparent; box-shadow: none; }
 .tag .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
 .tag .tag-ico { color: currentColor; display: inline-flex; }
 .tag .x { cursor: pointer; color: var(--fg-subtle); margin-left: 2px; display: inline-flex; }
 .tag .x:hover { color: var(--fg); }
+/* ============ Badge ============ */
 .badge {
   display: inline-flex;
   align-items: center; justify-content: center;
@@ -827,8 +916,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
   font-size: 10px;
   font-weight: 700;
   background: var(--danger);
-  color: white;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
+  color: var(--bg);
+  box-shadow: 0 1px 4px color-mix(in oklch, var(--shadow-dark) 35%, transparent);
   font-variant-numeric: tabular-nums;
 }
 .badge.dot { min-width: 10px; height: 10px; padding: 0; }
@@ -836,7 +925,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .badge.info    { background: var(--info);    box-shadow: 0 1px 4px color-mix(in oklch, var(--info) 35%, transparent); }
 .badge.success { background: var(--success); box-shadow: 0 1px 4px color-mix(in oklch, var(--success) 35%, transparent); }
 .badge.warning { background: var(--warning); box-shadow: 0 1px 4px color-mix(in oklch, var(--warning) 35%, transparent); }
-.badge.neutral { background: var(--fg-muted); box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
+.badge.neutral { background: var(--fg-muted); box-shadow: 0 1px 4px color-mix(in oklch, var(--shadow-dark) 35%, transparent); }
 .badge-wrap { position: relative; display: inline-block; }
 .badge-wrap > .badge { position: absolute; top: -4px; right: -4px; }
 /* ============ Avatar ============ */
@@ -955,7 +1044,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .divider.orient-right::before { flex: 1; }
 .divider.orient-right::after { flex: 0 0 var(--gap-4); }
 /* center is default (both flex: 1) */
-/* ============ Card & Panel ============ */
+/* ============ Card ============ */
 .card {
   background: var(--bg);
   border-radius: var(--r-lg);
@@ -977,21 +1066,15 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .card.hoverable.flat:hover { box-shadow: var(--neu-out-sm); }
 .card.hoverable.sunken:hover { box-shadow: var(--neu-out); }
-.panel {
-  background: var(--bg);
-  border-radius: var(--r-lg);
-  box-shadow: var(--neu-out);
-  padding: var(--gap-5);
-}
-.panel-head {
+.card-head {
   display: flex; align-items: flex-start; justify-content: space-between;
   gap: var(--gap-3); margin-bottom: var(--gap-4);
 }
-.panel-titles { display: flex; flex-direction: column; gap: 2px; }
-.panel-title { font-size: 15px; font-weight: 600; }
-.panel-desc  { font-size: 12px; color: var(--fg-muted); }
-.panel-actions { display: flex; gap: 6px; }
-.panel-body { font-size: 13px; }
+.card-titles { display: flex; flex-direction: column; gap: 2px; }
+.card-title { font-size: 15px; font-weight: 600; }
+.card-desc  { font-size: 12px; color: var(--fg-muted); }
+.card-actions { display: flex; gap: 6px; }
+.card-body { font-size: 13px; }
 /* ============ Tabs ============ */
 .tabs { display: flex; flex-direction: column; gap: var(--gap-3); }
 .tabs-nav {
@@ -1057,49 +1140,21 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .tabs.centered.line .tabs-nav .tab,
 .tabs.centered.underline .tabs-nav .tab { margin-right: 11px; margin-left: 11px; }
 .tabs-content { padding: var(--gap-2) 0; }
-/* Segmented (owned by Tabs.tsx — Segmented is co-exported) */
-.segmented {
-  display: inline-flex;
-  padding: 4px;
-  border-radius: var(--r-md);
-  background: var(--bg);
-  box-shadow: var(--neu-in-sm);
-  gap: 2px;
-}
-.segmented .seg {
-  padding: 6px 14px;
-  height: 32px;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  border: none;
-  background: transparent;
-  border-radius: calc(var(--r-md) - 4px);
-  font-size: 12px;
-  font-family: inherit;
-  color: var(--fg-muted);
-  cursor: pointer;
-  transition: all var(--dur-fast) var(--ease);
-}
-.segmented .seg:hover { color: var(--fg); }
-.segmented .seg.active {
-  color: var(--accent-ink);
-  background: var(--bg);
-  box-shadow: var(--neu-out-sm);
-  font-weight: 600;
-}
-.segmented.sm .seg { height: 26px; padding: 4px 10px; font-size: 11px; }
-.segmented.lg .seg { height: 38px; padding: 8px 18px; font-size: 13px; }
-/* ============ Accordion ============ */
-.accordion { display: flex; flex-direction: column; gap: 10px; }
-.accordion-item {
+/* ============ Collapse ============ */
+.collapse { display: flex; flex-direction: column; gap: 10px; }
+.collapse-item {
   background: var(--bg);
   border-radius: var(--r-md);
   box-shadow: var(--neu-out-sm);
   overflow: hidden;
 }
-.accordion-item.disabled { opacity: 0.5; }
-.accordion-head {
+.collapse.ghost .collapse-item {
+  background: transparent;
+  box-shadow: none;
+  border-radius: var(--r-sm);
+}
+.collapse-item.disabled { opacity: 0.5; }
+.collapse-head {
   width: 100%;
   border: none;
   background: transparent;
@@ -1114,26 +1169,30 @@ input, textarea, select { font-family: inherit; color: inherit; }
   color: var(--fg);
   text-align: left;
 }
-.accordion-item.disabled .accordion-head { cursor: not-allowed; }
-.accordion-item.icon-only .accordion-head:not(:disabled) { cursor: default; }
-.accordion-body {
+.collapse.small .collapse-head { padding: 10px 14px; font-size: 12px; }
+.collapse.large .collapse-head { padding: 18px 22px; font-size: 14px; }
+.collapse-item.disabled .collapse-head { cursor: not-allowed; }
+.collapse-item.icon-only .collapse-head:not(:disabled) { cursor: default; }
+.collapse-body {
   max-height: 0;
   overflow: hidden;
   transition: max-height var(--dur) var(--ease);
   color: var(--fg-muted);
   font-size: 13px;
 }
-.accordion-body-inner { padding: 0 18px 16px; }
-.accordion-chev {
+.collapse-body-inner { padding: 0 18px 16px; }
+.collapse.small .collapse-body-inner { padding: 0 14px 12px; }
+.collapse.large .collapse-body-inner { padding: 0 22px 20px; }
+.collapse-chev {
   transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
   color: var(--fg-subtle);
   display: inline-flex;
-  border-radius: 6px;
+  border-radius: var(--r-xs);
   padding: 2px;
 }
-.accordion-chev.clickable { cursor: pointer; }
-.accordion-chev.clickable:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-flat); }
-.accordion-item.open .accordion-chev { transform: rotate(180deg); color: var(--accent); }
+.collapse-chev.clickable { cursor: pointer; }
+.collapse-chev.clickable:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-flat); }
+.collapse-item.open .collapse-chev { transform: rotate(180deg); color: var(--accent); }
 /* ============ Select ============ */
 .select {
   position: relative;
@@ -1261,32 +1320,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 /* Menu search — flush with menu, single subtle separator (no nested frame) */
 .menu-search {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 32px;
-  padding: 0 6px;
+  display: block;
+  padding: 4px 2px 8px;
   margin: -2px -2px 4px;
   border-bottom: 1px solid var(--divider);
-  color: var(--fg-subtle);
-  transition: color var(--dur) var(--ease);
 }
-.menu-search:focus-within { color: var(--accent); }
-.menu-search input {
-  flex: 1;
-  min-width: 0;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--fg);
-  font-size: 13px;
-  font-family: inherit;
-  height: 100%;
-  padding: 0;
-}
-.menu-search input::placeholder { color: var(--fg-subtle); }
-.menu-search input:focus,
-.menu-search input:focus-visible { box-shadow: none; }
+.menu-search .input-wrap { width: 100%; }
 /* Menu state (loading / empty) */
 .menu-state {
   display: flex;
@@ -1311,8 +1350,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .menu-state .menu-state-ico .spinner {
   width: 16px;
   height: 16px;
+  display: inline-block;
+  border-radius: 999px;
+  border: 2px solid var(--accent);
   border-color: var(--accent);
   border-right-color: transparent;
+  animation: spin 0.8s linear infinite;
 }
 /* Option body — supports description line under label */
 .menu-item-body {
@@ -1459,6 +1502,29 @@ input, textarea, select { font-family: inherit; color: inherit; }
   background: var(--bg);
   box-shadow: var(--neu-flat);
 }
+.modal-static-body {
+  display: flex;
+  gap: var(--gap-3);
+  align-items: flex-start;
+}
+.modal-static-icon {
+  width: 34px;
+  height: 34px;
+  border-radius: var(--r-md);
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  background: var(--bg);
+  box-shadow: var(--neu-in-sm);
+  color: var(--accent);
+}
+.modal-static-icon.success { color: var(--success); }
+.modal-static-icon.warning { color: var(--warning); }
+.modal-static-icon.error { color: var(--danger); }
+.modal-static-content {
+  min-width: 0;
+  color: var(--fg-muted);
+}
 /* ============ Drawer ============ */
 .drawer-overlay {
   position: fixed;
@@ -1575,8 +1641,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
   animation: fadeIn var(--dur) var(--ease);
   z-index: 1000;
 }
-/* ============ Toast ============ */
-.toast-container {
+/* ============ Message ============ */
+.message-container {
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -1584,12 +1650,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
   z-index: 300;
   pointer-events: none;
 }
-.toast-container.top-right    { top: 56px; right: 20px; }
-.toast-container.top-left     { top: 56px; left: 20px; }
-.toast-container.bottom-right { bottom: 20px; right: 20px; }
-.toast-container.bottom-left  { bottom: 20px; left: 20px; }
-.toast-container.top-center   { top: 56px; left: 50%; transform: translateX(-50%); align-items: center; }
-.toast {
+.message-container.top-right    { top: 56px; right: 20px; }
+.message-container.top-left     { top: 56px; left: 20px; }
+.message-container.bottom-right { bottom: 20px; right: 20px; }
+.message-container.bottom-left  { bottom: 20px; left: 20px; }
+.message-container.top-center   { top: 56px; left: 50%; transform: translateX(-50%); align-items: center; }
+.message {
   background: var(--bg);
   border-radius: var(--r-md);
   box-shadow: var(--neu-float);
@@ -1598,28 +1664,28 @@ input, textarea, select { font-family: inherit; color: inherit; }
   display: flex; align-items: center; gap: 10px;
   font-size: 13px;
   pointer-events: auto;
-  animation: toastIn var(--dur-slow) var(--ease);
+  animation: messageIn var(--dur-slow) var(--ease);
   border-left: 3px solid var(--accent);
 }
-.toast.success { border-color: var(--success); }
-.toast.warning { border-color: var(--warning); }
-.toast.danger  { border-color: var(--danger); }
-.toast .toast-icon { color: var(--accent); flex-shrink: 0; }
-.toast.success .toast-icon { color: var(--success); }
-.toast.warning .toast-icon { color: var(--warning); }
-.toast.danger  .toast-icon { color: var(--danger); }
-.toast-body { flex: 1; min-width: 0; }
-.toast-title { font-weight: 600; margin-bottom: 2px; }
-.toast-msg { color: var(--fg-muted); font-size: 12px; }
-.toast-close {
+.message.success { border-color: var(--success); }
+.message.warning { border-color: var(--warning); }
+.message.error   { border-color: var(--danger); }
+.message .message-icon { color: var(--accent); flex-shrink: 0; }
+.message.success .message-icon { color: var(--success); }
+.message.warning .message-icon { color: var(--warning); }
+.message.error   .message-icon { color: var(--danger); }
+.message-body { flex: 1; min-width: 0; }
+.message-title { font-weight: 600; margin-bottom: 2px; }
+.message-content { color: var(--fg-muted); font-size: 12px; }
+.message-close {
   background: transparent; border: none;
   color: var(--fg-subtle); cursor: pointer;
   padding: 0 2px; font-family: inherit;
 }
-.toast-close:hover { color: var(--fg); }
-.toast.leaving { animation: toastOut var(--dur) var(--ease) forwards; }
-@keyframes toastIn  { from { opacity: 0; transform: translateX(20px); } }
-@keyframes toastOut { to   { opacity: 0; transform: translateX(20px); } }
+.message-close:hover { color: var(--fg); }
+.message.leaving { animation: messageOut var(--dur) var(--ease) forwards; }
+@keyframes messageIn  { from { opacity: 0; transform: translateX(20px); } }
+@keyframes messageOut { to   { opacity: 0; transform: translateX(20px); } }
 /* ============ Popover ============ */
 .popover {
   z-index: 1000;
@@ -1756,12 +1822,6 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .alert-close:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-flat); }
 /* ============ Table ============ */
-.table-card {
-  border-radius: var(--r-lg);
-  background: var(--bg);
-  box-shadow: var(--neu-out-sm);
-  overflow: hidden;
-}
 .table-wrap {
   border-radius: var(--r-lg);
   background: var(--bg);
@@ -1993,7 +2053,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .table-pagination {
   margin-top: 12px;
 }
-/* Pro: card-wrap with toolbar + table + footer */
+/* ============ TablePro ============ */
 .table-card {
   border-radius: var(--r-lg);
   background: var(--bg);
@@ -2002,7 +2062,6 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .table-card .table-wrap { background: transparent; box-shadow: none; border-radius: 0; }
 .table-card .table-wrap.joined { border-radius: 0; }
-/* When TablePro hosts the built-in pagination, seat it inside the card. */
 .table-card .table-pagination {
   margin-top: 0;
   padding: 6px 16px;
@@ -2131,52 +2190,21 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .list-item-desc  { font-size: 12px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .list-item-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
 .list-item-avatar { display: inline-flex; align-items: center; justify-content: center; color: var(--fg-muted); flex-shrink: 0; }
-/* ============ Empty / Spinner / Skeleton ============ */
-/* .spinner base — legacy border-ring used internally by Select/Button.
-   The public <Spinner> component always sets a variant class (`ring`|`dots`)
-   which overrides this via the more specific rules below. */
-.spinner {
-  width: 14px; height: 14px;
+/* ============ Spin ============ */
+.spin {
+  width: 14px;
+  height: 14px;
   border-radius: 999px;
   border: 2px solid currentColor;
   border-right-color: transparent;
   animation: spin 0.8s linear infinite;
   display: inline-block;
 }
-.empty {
-  padding: 60px 20px;
-  display: grid; place-items: center;
-  gap: 12px;
-  color: var(--fg-muted);
-  text-align: center;
-}
-.empty.sm { padding: 28px 16px; gap: 8px; }
-.empty.sm .empty-ico { width: 40px; height: 40px; }
-.empty.sm .empty-title { font-size: 13px; }
-.empty.sm .empty-desc  { font-size: 11px; }
-.empty.lg { padding: 96px 24px; gap: 16px; }
-.empty.lg .empty-ico { width: 72px; height: 72px; }
-.empty.lg .empty-title { font-size: 16px; }
-.empty.lg .empty-desc  { font-size: 13px; }
-.empty.subtle .empty-ico { background: transparent; box-shadow: none; }
-.empty-ico {
-  width: 56px; height: 56px;
-  border-radius: var(--r-lg);
-  background: var(--bg);
-  box-shadow: var(--neu-in-sm);
-  display: grid; place-items: center;
-  color: var(--fg-subtle);
-}
-.empty-title { font-size: 14px; font-weight: 600; color: var(--fg); }
-.empty-desc  { font-size: 12px; }
-.empty-action { margin-top: 8px; }
-/* Spinner tones */
-.spinner.accent  { color: var(--accent); }
-.spinner.success { color: var(--success); }
-.spinner.warning { color: var(--warning); }
-.spinner.danger  { color: var(--danger); }
-/* --- Ring variant: neumorphic pressed track + rotating arc --- */
-.spinner.ring {
+.spin.accent  { color: var(--accent); }
+.spin.success { color: var(--success); }
+.spin.warning { color: var(--warning); }
+.spin.danger  { color: var(--danger); }
+.spin.ring {
   position: relative;
   display: inline-block;
   border: none;
@@ -2185,7 +2213,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   box-shadow: var(--neu-in-sm);
   animation: none;
 }
-.spinner.ring::before {
+.spin.ring::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -2197,54 +2225,84 @@ input, textarea, select { font-family: inherit; color: inherit; }
     currentColor 220deg,
     currentColor 340deg,
     transparent 360deg);
-  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
-  mask: radial-gradient(circle, transparent 60%, #000 61%);
+  -webkit-mask: radial-gradient(circle, transparent 60%, currentColor 61%);
+  mask: radial-gradient(circle, transparent 60%, currentColor 61%);
   animation: spin 0.9s linear infinite;
 }
-.spinner.ring.accent::before,
-.spinner.ring.success::before,
-.spinner.ring.warning::before,
-.spinner.ring.danger::before {
+.spin.ring.accent::before,
+.spin.ring.success::before,
+.spin.ring.warning::before,
+.spin.ring.danger::before {
   filter: drop-shadow(0 0 4px color-mix(in oklch, currentColor 50%, transparent));
 }
-/* --- Dots variant: raised neumorphic spheres (container is transparent) --- */
-.spinner.dots {
+.spin.dots {
   display: inline-flex;
   align-items: center;
   gap: 0.34em;
   border: none;
   background: none;
   box-shadow: none;
-  width: auto; height: auto;
+  width: auto;
+  height: auto;
   animation: none;
   line-height: 1;
 }
-.spinner.dots i {
-  width: 0.4em; height: 0.4em;
+.spin.dots i {
+  width: 0.4em;
+  height: 0.4em;
   border-radius: 999px;
   background: radial-gradient(circle at 32% 28%,
-    color-mix(in oklch, currentColor 40%, white),
+    color-mix(in oklch, currentColor 40%, var(--bg)),
     currentColor 62%,
-    color-mix(in oklch, currentColor 82%, black) 100%);
+    color-mix(in oklch, currentColor 82%, var(--fg)) 100%);
   box-shadow:
     0 0.06em 0.14em color-mix(in oklch, currentColor 45%, transparent),
     0 0 0.35em color-mix(in oklch, currentColor 50%, transparent);
   display: inline-block;
-  animation: dot-bounce 1.2s ease-in-out infinite;
+  animation: spin-dot-bounce 1.2s ease-in-out infinite;
 }
-.spinner.dots i:nth-child(2) { animation-delay: 0.15s; }
-.spinner.dots i:nth-child(3) { animation-delay: 0.3s; }
-@keyframes dot-bounce {
+.spin.dots i:nth-child(2) { animation-delay: 0.15s; }
+.spin.dots i:nth-child(3) { animation-delay: 0.3s; }
+@keyframes spin-dot-bounce {
   0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
   40% { transform: translateY(-30%); opacity: 1; }
 }
-.spinner-wrap {
+.spin-wrap {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--fg-muted);
 }
-.spinner-label { font-size: 12px; }
+.spin-label { font-size: 12px; }
+/* ============ Empty ============ */
+.empty {
+  padding: 60px 20px;
+  display: grid; place-items: center;
+  gap: 12px;
+  color: var(--fg-muted);
+  text-align: center;
+}
+.empty.sm { padding: 28px 16px; gap: 8px; }
+.empty.sm .empty-ico { width: 40px; height: 40px; }
+.empty.sm .empty-title { font-size: 13px; }
+.empty.sm .empty-desc  { font-size: 11px; }
+.empty.lg { padding: 96px 24px; gap: 16px; }
+.empty.lg .empty-ico { width: 72px; height: 72px; }
+.empty.lg .empty-title { font-size: 16px; }
+.empty.lg .empty-desc  { font-size: 13px; }
+.empty.subtle .empty-ico { background: transparent; box-shadow: none; }
+.empty-ico {
+  width: 56px; height: 56px;
+  border-radius: var(--r-lg);
+  background: var(--bg);
+  box-shadow: var(--neu-in-sm);
+  display: grid; place-items: center;
+  color: var(--fg-subtle);
+}
+.empty-title { font-size: 14px; font-weight: 600; color: var(--fg); }
+.empty-desc  { font-size: 12px; }
+.empty-action { margin-top: 8px; }
+/* ============ Skeleton ============ */
 .skeleton {
   display: block;
   background: color-mix(in oklch, var(--accent-soft) 55%, var(--bg-sunken));
@@ -2263,7 +2321,6 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .skeleton.circle { border-radius: 999px; }
 @keyframes skel-wave  { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
 @keyframes skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
-/* Composite skeleton — avatar + title + paragraph layout */
 .skeleton-box {
   display: flex;
   align-items: flex-start;
@@ -2481,6 +2538,24 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .cascader-trigger.placeholder { color: var(--fg-subtle); }
 .cascader.open .cascader-trigger { box-shadow: var(--neu-in-sm); color: var(--accent-ink); }
+.cascader-clear {
+  position: absolute;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  background: var(--bg);
+  box-shadow: var(--neu-out-sm);
+  display: inline-grid;
+  place-items: center;
+  color: var(--fg-subtle);
+  opacity: 0;
+  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-panel {
   z-index: 1000;
   display: flex;
@@ -2491,6 +2566,52 @@ input, textarea, select { font-family: inherit; color: inherit; }
   animation: menuIn var(--dur) var(--ease);
   gap: 4px;
 }
+.cascader-panel.with-search {
+  flex-direction: column;
+  min-width: 320px;
+}
+.cascader-columns {
+  display: flex;
+  gap: 4px;
+}
+.cascader-search {
+  padding: 4px 2px 8px;
+  border-bottom: 1px solid var(--divider);
+}
+.cascader-search-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 260px;
+  overflow-y: auto;
+  padding: 4px;
+}
+.cascader-search-item {
+  border: none;
+  background: transparent;
+  color: var(--fg);
+  border-radius: var(--r-sm);
+  padding: 8px 10px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.cascader-search-item:hover {
+  background: var(--bg);
+  box-shadow: var(--neu-flat);
+  color: var(--accent-ink);
+}
+.cascader-path-sep { color: var(--fg-subtle); }
+.cascader-empty {
+  padding: 24px 12px;
+  text-align: center;
+  color: var(--fg-muted);
+  font-size: 12px;
+}
 .cascader-col {
   min-width: 160px;
   max-height: 280px;