@veltra/desktop 1.2.22 → 1.2.23

package/dist/components/action/action-group.vue.d.ts

@@ -6,11 +6,11 @@ type __VLS_Slots = {
   default?: () => VNode[];
 };
 declare const __VLS_base: import("vue").DefineComponent<ActionGroupProps, _ActionGroupExposed, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionGroupProps> & Readonly<{}>, {
-  size: "small" | "default" | "large";
   type: import("@veltra/utils").ColorType;
+  size: "small" | "default" | "large";
+  max: number;
   text: boolean;
   circle: boolean;
-  max: number;
   loading: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/action/action.vue.d.ts

@@ -12,8 +12,8 @@ declare const __VLS_base: import("vue").DefineComponent<ActionProps, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<ActionProps> & Readonly<{
   onRun?: (() => any) | undefined;
 }>, {
-  size: import("@veltra/utils").ComponentSize;
   type: ButtonType;
+  size: import("@veltra/utils").ComponentSize;
   text: boolean;
   circle: boolean;
   loading: boolean;

package/dist/components/action/style2.css

@@ -15,18 +15,6 @@
 * --u-height-small: 24px;
 */
 /** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
-.u-action-group {
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-  gap: 2px;
-  padding: 2px 4px;
-  border-radius: 999px;
-  background-color: color-mix(in srgb, var(--u-bg-color-top) 70%, transparent);
-  backdrop-filter: var(--u-bg-filter);
-  -webkit-backdrop-filter: var(--u-bg-filter);
-  box-shadow: 0 1px 4px color-mix(in srgb, var(--u-shadow-color) 35%, transparent);
-}
 .u-action-group__more {
   flex-shrink: 0;
 }

package/dist/components/auto-complete/auto-complete.vue.d.ts

@@ -22,10 +22,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, _Auto
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
   onSelect?: ((value: string) => any) | undefined;
 }>, {
-  disabled: boolean;
-  readonly: boolean;
   placeholder: string;
   clearable: boolean;
+  disabled: boolean;
+  readonly: boolean;
   allowCustom: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/batch-edit/batch-edit.vue.d.ts

@@ -6,20 +6,20 @@ declare const __VLS_base: import("vue").DefineComponent<BatchEditProps, {}, {},
   "update:selected": (value: Record<string, any> | undefined) => any;
   "update:checked": (value: Record<string, any>[]) => any;
   "update:current": (row?: TableRow | undefined) => any;
-  "update:data": (value: Record<string, any>[]) => any;
   "update:rows": (rows: TableRow[]) => any;
   "update:forest": (rows?: import("@cat-kit/core").Forest<Record<string, unknown>, any> | undefined) => any;
   "cell-click": (row: TableRow, column: TableColumn, ev: MouseEvent) => any;
   "row-click": (row: TableRow, ev: MouseEvent) => any;
+  "update:data": (value: Record<string, any>[]) => any;
 }, string, import("vue").PublicProps, Readonly<BatchEditProps> & Readonly<{
   "onUpdate:selected"?: ((value: Record<string, any> | undefined) => any) | undefined;
   "onUpdate:checked"?: ((value: Record<string, any>[]) => any) | undefined;
   "onUpdate:current"?: ((row?: TableRow | undefined) => any) | undefined;
-  "onUpdate:data"?: ((value: Record<string, any>[]) => any) | undefined;
   "onUpdate:rows"?: ((rows: TableRow[]) => any) | undefined;
   "onUpdate:forest"?: ((rows?: import("@cat-kit/core").Forest<Record<string, unknown>, any> | undefined) => any) | undefined;
   "onCell-click"?: ((row: TableRow, column: TableColumn, ev: MouseEvent) => any) | undefined;
   "onRow-click"?: ((row: TableRow, ev: MouseEvent) => any) | undefined;
+  "onUpdate:data"?: ((value: Record<string, any>[]) => any) | undefined;
 }>, {
   cols: string | [string, string];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/batch-edit/style2.css

@@ -51,7 +51,7 @@
   flex-direction: column;
   background-color: var(--u-bg-color-top);
   border-radius: var(--u-batch-edit-form-radius);
-  box-shadow: 0 1px 2px color-mix(in srgb, var(--u-shadow-color) 40%, transparent), 0 12px 32px -16px color-mix(in srgb, var(--u-shadow-color) 50%, transparent);
+  box-shadow: 0 1px 2px var(--u-shadow-color-a-40), 0 12px 32px -16px var(--u-shadow-color-a-50);
   overflow: hidden;
   isolation: isolate;
   min-height: 0;
@@ -62,7 +62,7 @@
   gap: 12px;
   padding: 10px 14px;
   border-bottom: 1px solid var(--u-border-color);
-  background-color: color-mix(in srgb, var(--u-bg-color-top) 96%, var(--u-bg-color-hover));
+  background-color: var(--u-batch-edit-form-header-bg);
   flex-shrink: 0;
 }
 .u-batch-edit__form-icon {

package/dist/components/cascade/cascade.vue.d.ts

@@ -2,23 +2,23 @@ import { CascadeProps } from "../../types/cascade.js";
 //#region src/components/cascade/cascade.vue.d.ts
 declare const __VLS_export: import("vue").DefineComponent<CascadeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
   "update:modelValue": (value?: string | string[] | undefined) => any;
-  clear: () => any;
   change: (...args: [item?: Record<string, any> | undefined] | [items: Record<string, any>[]]) => any;
+  clear: () => any;
   "update:label": (label?: string | string[] | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<CascadeProps> & Readonly<{
   "onUpdate:modelValue"?: ((value?: string | string[] | undefined) => any) | undefined;
-  onClear?: (() => any) | undefined;
   onChange?: ((...args: [item?: Record<string, any> | undefined] | [items: Record<string, any>[]]) => any) | undefined;
+  onClear?: (() => any) | undefined;
   "onUpdate:label"?: ((label?: string | string[] | undefined) => any) | undefined;
 }>, {
-  disabled: boolean;
-  readonly: boolean;
   labelKey: string;
   valueKey: string;
   childrenKey: string;
   data: Record<string, any>[];
   placeholder: string;
   clearable: boolean;
+  disabled: boolean;
+  readonly: boolean;
   filterable: boolean;
   visibilityLimit: number;
   separator: string;

package/dist/components/checkbox/checkbox-button.vue.d.ts

@@ -17,9 +17,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "onUpdate:modelValue"?: ((checked: boolean) => any) | undefined;
   onChange?: ((checked: boolean) => any) | undefined;
 }>, {
+  type: import("@veltra/utils").ColorType;
   disabled: boolean;
   readonly: boolean;
-  type: import("@veltra/utils").ColorType;
   round: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/checkbox-group/checkbox-group.vue.d.ts

@@ -12,10 +12,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
 }>, {
-  disabled: boolean;
-  readonly: boolean;
   labelKey: string;
   valueKey: string;
+  disabled: boolean;
+  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/collapse/style2.css

@@ -25,7 +25,7 @@
   position: relative;
   border-radius: calc(var(--u-radius-default) + 2px);
   overflow: hidden;
-  background-color: var(--u-collapse-item-bg, color-mix(in srgb, var(--u-bg-color-hover) 72%, var(--u-bg-color-top)));
+  background-color: var(--u-collapse-item-bg);
   transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .u-collapse__item::before {
@@ -45,10 +45,10 @@
   margin-top: var(--u-gap-default);
 }
 .u-collapse__item:not(.is-disabled):hover {
-  background-color: var(--u-collapse-item-hover-bg, color-mix(in srgb, var(--u-color-primary) 4%, var(--u-collapse-item-bg, color-mix(in srgb, var(--u-bg-color-hover) 72%, var(--u-bg-color-top)))));
+  background-color: var(--u-collapse-item-hover-bg);
 }
 .u-collapse__item.is-active {
-  background-color: var(--u-collapse-item-active-bg, color-mix(in srgb, var(--u-color-primary) 5%, var(--u-collapse-item-bg, color-mix(in srgb, var(--u-bg-color-hover) 72%, var(--u-bg-color-top)))));
+  background-color: var(--u-collapse-item-active-bg);
 }
 .u-collapse__item.is-active::before {
   opacity: 1;
@@ -80,7 +80,7 @@
 .u-collapse__header.is-active {
   font-weight: 600;
   color: var(--u-collapse-active-title-color, var(--u-color-primary));
-  background-color: var(--u-collapse-header-active-bg, color-mix(in srgb, var(--u-color-primary) 8%, var(--u-collapse-item-bg, color-mix(in srgb, var(--u-bg-color-hover) 72%, var(--u-bg-color-top)))));
+  background-color: var(--u-collapse-header-active-bg);
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -107,7 +107,7 @@
   height: 0;
   border-bottom-right-radius: inherit;
   border-bottom-left-radius: inherit;
-  background-color: var(--u-collapse-content-bg, color-mix(in srgb, var(--u-collapse-item-active-bg, color-mix(in srgb, var(--u-color-primary) 5%, var(--u-collapse-item-bg, color-mix(in srgb, var(--u-bg-color-hover) 72%, var(--u-bg-color-top))))) 42%, var(--u-bg-color-top)));
+  background-color: var(--u-collapse-content-bg);
   transition: height 0.24s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .u-collapse__content {

package/dist/components/date-panel/date-panel.vue.d.ts

@@ -7,8 +7,8 @@ declare const __VLS_export: import("vue").DefineComponent<DatePanelProps, {}, {}
   "onSelect:range-date"?: ((rangeDate?: [import("@cat-kit/core").Dater, import("@cat-kit/core").Dater] | undefined) => any) | undefined;
   "onSelect:date"?: ((date: import("@cat-kit/core").Dater) => any) | undefined;
 }>, {
-  size: import("@veltra/utils").ComponentSize;
   type: "date" | "month" | "year";
+  size: import("@veltra/utils").ComponentSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/date-picker/date-picker.vue.d.ts

@@ -5,11 +5,11 @@ declare const __VLS_export: import("vue").DefineComponent<DatePickerProps, {}, {
 }, string, import("vue").PublicProps, Readonly<DatePickerProps> & Readonly<{
   "onUpdate:modelValue"?: ((value?: string | number | Date | undefined) => any) | undefined;
 }>, {
-  disabled: boolean;
-  readonly: boolean;
   type: "date" | "month" | "year";
   placeholder: string;
   clearable: boolean;
+  disabled: boolean;
+  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/date-range-picker/date-range-picker.vue.d.ts

@@ -5,11 +5,11 @@ declare const __VLS_export: import("vue").DefineComponent<DateRangePickerProps,
 }, string, import("vue").PublicProps, Readonly<DateRangePickerProps> & Readonly<{
   "onUpdate:modelValue"?: ((value?: [string, string] | undefined) => any) | undefined;
 }>, {
-  disabled: boolean;
-  readonly: boolean;
   type: "date" | "month" | "year";
   placeholder: [string, string];
   clearable: boolean;
+  disabled: boolean;
+  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/file-picker/file-picker.vue.d.ts

@@ -11,8 +11,8 @@ declare const __VLS_base: import("vue").DefineComponent<UploaderProps, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<UploaderProps> & Readonly<{
   onPick?: ((files: File[]) => any) | undefined;
 }>, {
-  tag: string;
   multiple: boolean;
+  tag: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/file-viewer/style2.css

@@ -18,6 +18,7 @@
 .u-file-viewer {
   --u-file-viewer-canvas: #101114;
   --u-file-viewer-canvas-soft: #17191f;
+  --u-file-viewer-canvas-overlay: rgba(16, 17, 20, 0.74);
   --u-file-viewer-page-shadow: 0 24px 72px rgba(0, 0, 0, 0.34);
   position: relative;
   display: flex;
@@ -150,7 +151,7 @@
   background: var(--u-bg-color-hover);
 }
 .u-file-viewer__item.is-active {
-  background: color-mix(in srgb, var(--u-color-primary) 8%, transparent);
+  background: var(--u-color-primary-a-8);
 }
 .u-file-viewer__item.is-active::before {
   opacity: 1;
@@ -210,37 +211,51 @@
 }
 .u-file-viewer__badge {
   --u-file-viewer-kind: var(--u-text-color-second);
+  --u-file-viewer-kind-border: fn.color-a(text-color, 28, second);
+  --u-file-viewer-kind-bg: fn.color-a(text-color, 10, second);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 40px;
   height: 26px;
-  border: 1px solid color-mix(in srgb, var(--u-file-viewer-kind) 28%, transparent);
+  border: 1px solid var(--u-file-viewer-kind-border);
   border-radius: 7px;
   color: var(--u-file-viewer-kind);
-  background: color-mix(in srgb, var(--u-file-viewer-kind) 10%, transparent);
+  background: var(--u-file-viewer-kind-bg);
   font-size: 10px;
   font-weight: 760;
   line-height: 1;
 }
 .u-file-viewer__badge--image {
   --u-file-viewer-kind: #0891b2;
+  --u-file-viewer-kind-border: rgba(8, 145, 178, 0.28);
+  --u-file-viewer-kind-bg: rgba(8, 145, 178, 0.1);
 }
 .u-file-viewer__badge--video {
   --u-file-viewer-kind: #db2777;
+  --u-file-viewer-kind-border: rgba(219, 39, 119, 0.28);
+  --u-file-viewer-kind-bg: rgba(219, 39, 119, 0.1);
 }
 .u-file-viewer__badge--pdf {
   --u-file-viewer-kind: #dc2626;
+  --u-file-viewer-kind-border: rgba(220, 38, 38, 0.28);
+  --u-file-viewer-kind-bg: rgba(220, 38, 38, 0.1);
 }
 .u-file-viewer__badge--sheet {
   --u-file-viewer-kind: #15803d;
+  --u-file-viewer-kind-border: rgba(21, 128, 61, 0.28);
+  --u-file-viewer-kind-bg: rgba(21, 128, 61, 0.1);
 }
 .u-file-viewer__badge--docx {
   --u-file-viewer-kind: #2563eb;
+  --u-file-viewer-kind-border: rgba(37, 99, 235, 0.28);
+  --u-file-viewer-kind-bg: rgba(37, 99, 235, 0.1);
 }
 .u-file-viewer__badge--text {
   --u-file-viewer-kind: #64748b;
+  --u-file-viewer-kind-border: rgba(100, 116, 139, 0.28);
+  --u-file-viewer-kind-bg: rgba(100, 116, 139, 0.1);
 }
 .u-file-viewer__stage {
   display: flex;
@@ -341,7 +356,7 @@
   gap: 2px;
   height: 34px;
   padding: 2px;
-  border: 1px solid color-mix(in srgb, var(--u-border-color) 86%, transparent);
+  border: 1px solid var(--u-border-color-a-86);
   border-radius: 8px;
   background: var(--u-bg-color-middle);
 }
@@ -367,7 +382,7 @@
 }
 .u-file-viewer__action:not(:disabled):hover {
   color: var(--u-color-primary);
-  background: color-mix(in srgb, var(--u-color-primary) 10%, transparent);
+  background: var(--u-color-primary-a-10);
 }
 .u-file-viewer__action:not(:disabled):active {
   transform: translateY(1px);
@@ -394,7 +409,7 @@
 }
 .u-file-viewer__action--primary:not(:disabled):hover {
   color: #fff;
-  background: color-mix(in srgb, var(--u-color-primary) 88%, #fff);
+  background: var(--u-color-primary-light-1);
 }
 .u-file-viewer.is-modal .u-file-viewer__action--primary {
   color: #06111d;
@@ -623,8 +638,8 @@
 }
 .u-file-viewer__sheet-tab.is-active {
   color: var(--u-color-primary);
-  background: color-mix(in srgb, var(--u-color-primary) 11%, transparent);
-  border-color: color-mix(in srgb, var(--u-color-primary) 22%, transparent);
+  background: var(--u-color-primary-a-11);
+  border-color: var(--u-color-primary-a-22);
 }
 .u-file-viewer.is-modal .u-file-viewer__sheet-tab {
   color: rgba(255, 255, 255, 0.58);
@@ -650,7 +665,7 @@
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, 0.72);
-  background: color-mix(in srgb, var(--u-file-viewer-canvas) 74%, transparent);
+  background: var(--u-file-viewer-canvas-overlay);
   font-size: 13px;
   pointer-events: none;
 }

package/dist/components/input/input.vue.d.ts

@@ -15,8 +15,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, _Inpu
   "update:modelValue": (value: string | undefined) => any;
 } & {
   "update:modelValue": (value: string) => any;
-  clear: () => any;
   change: (value: string) => any;
+  clear: () => any;
   "suffix:click": (value?: string | undefined) => any;
   "prefix:click": (value?: string | undefined) => any;
   focus: (value?: string | undefined) => any;
@@ -24,18 +24,18 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, _Inpu
   "native:input": (ev: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClear?: (() => any) | undefined;
   onChange?: ((value: string) => any) | undefined;
+  onClear?: (() => any) | undefined;
   "onSuffix:click"?: ((value?: string | undefined) => any) | undefined;
   "onPrefix:click"?: ((value?: string | undefined) => any) | undefined;
   onFocus?: ((value?: string | undefined) => any) | undefined;
   onBlur?: ((value?: string | undefined) => any) | undefined;
   "onNative:input"?: ((ev: Event) => any) | undefined;
 }>, {
-  disabled: boolean;
-  readonly: boolean;
   placeholder: string;
   clearable: boolean;
+  disabled: boolean;
+  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/kbd/style2.css

@@ -39,5 +39,5 @@
    * Adapted from Radix UI Themes Kbd.
    * Multi-layer box-shadow simulates a 3D keycap appearance.
    */
-  box-shadow: inset 0 0.05em color-mix(in srgb, var(--u-bg-color-top) 75%, var(--u-bg-color-black)), 0 0 0 0.05em color-mix(in srgb, var(--u-border-color) 50%, transparent), 0 0.08em 0.17em color-mix(in srgb, var(--u-shadow-color) 60%, transparent);
+  box-shadow: inset 0 0.05em var(--u-kbd-inset-shadow), 0 0 0 0.05em var(--u-kbd-border-shadow), 0 0.08em 0.17em var(--u-kbd-drop-shadow);
 }

package/dist/components/loading/style2.css

@@ -33,7 +33,7 @@
   width: 36px;
   aspect-ratio: 1;
   border-radius: 50%;
-  border: 3px solid color-mix(in srgb, currentColor 22%, transparent);
+  border: 3px solid var(--u-color-primary-a-22);
   border-top-color: currentColor;
   position: relative;
   animation: loading-spin 0.8s linear infinite;
@@ -43,7 +43,7 @@
   position: absolute;
   inset: 5px;
   border-radius: 50%;
-  border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
+  border: 2px solid var(--u-color-primary-a-22);
   border-bottom-color: currentColor;
   animation: loading-spin 1.2s linear infinite reverse;
 }
@@ -78,7 +78,7 @@
   width: 36px;
   aspect-ratio: 1;
   border-radius: 50%;
-  border: 3px solid color-mix(in srgb, currentColor 22%, transparent);
+  border: 3px solid var(--u-color-primary-a-22);
   border-top-color: currentColor;
   animation: loading-spin 0.9s linear infinite;
 }

package/dist/components/multi-select/multi-select.vue.d.ts

@@ -26,13 +26,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
   onChange?: ((options: Record<string, any>[]) => any) | undefined;
 }>, {
-  disabled: boolean;
-  readonly: boolean;
-  minWidth: string;
   labelKey: string;
   valueKey: string;
   placeholder: string;
   clearable: boolean;
+  disabled: boolean;
+  readonly: boolean;
+  minWidth: string;
   visibilityLimit: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts

@@ -14,22 +14,22 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "update:modelValue": (value: (string | number)[]) => any;
 } & {
   "update:modelValue": (value: any[]) => any;
-  clear: () => any;
   change: (checked: Record<string, any>[]) => any;
+  clear: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
-  onClear?: (() => any) | undefined;
   onChange?: ((checked: Record<string, any>[]) => any) | undefined;
+  onClear?: (() => any) | undefined;
 }>, {
-  disabled: boolean;
-  readonly: boolean;
-  minWidth: string;
   expandAll: boolean;
   labelKey: string;
   valueKey: string;
   placeholder: string;
   clearable: boolean;
+  disabled: boolean;
+  readonly: boolean;
   filterable: boolean;
+  minWidth: string;
   visibilityLimit: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/nav/nav-sub.js

@@ -65,7 +65,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					onAfterLeave: _cache[4] || (_cache[4] = (el) => unref(expandTransition).afterLeave(el)),
 					persisted: ""
 				}, {
-					default: withCtx(() => [withDirectives(createElementVNode("ul", { class: normalizeClass(unref(cls).e("sub-list")) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.item.children, (child, index) => {
+					default: withCtx(() => [withDirectives(createElementVNode("ul", { class: normalizeClass([unref(cls).e("sub-list"), unref(bem).is("has-active", branchActive.value)]) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.item.children, (child, index) => {
 						return openBlock(), createElementBlock(Fragment, { key: unref(getKey)(index, __props.parentKey) }, [!child.children?.length ? (openBlock(), createBlock(_sfc_main$3, {
 							key: 0,
 							item: child,

package/dist/components/nav/nav-sub.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-sub.js","names":[],"sources":["../../../src/components/nav/nav-sub.vue"],"sourcesContent":["<template>\n  <li :class=\"cls.e('sub')\">\n    <div\n      :class=\"[\n        cls.e('sub-content'),\n        bem.is('first-level', depth === 0),\n        bem.is('expanded', expanded),\n        bem.is('branch-active', branchActive)\n      ]\"\n      @click=\"handleToggleExpand\"\n    >\n      <UNavIcon v-if=\"item.icon\" :icon=\"item.icon\" :class=\"cls.e('icon')\" />\n\n      <!-- 文本 -->\n      <span :class=\"cls.e('sub-title')\">\n        {{ item.title }}\n      </span>\n\n      <!-- 展开图标 -->\n      <u-icon :class=\"[cls.e('sub-expand'), bem.is('expanded', expanded)]\">\n        <ArrowRight />\n      </u-icon>\n    </div>\n\n    <!-- @vue-ignore -->\n    <transition\n      @enter=\"(el: Element) => expandTransition.enter(el as HTMLElement)\"\n      @after-enter=\"(el: Element) => expandTransition.afterEnter(el as HTMLElement)\"\n      @before-leave=\"(el: Element) => expandTransition.beforeLeave(el as HTMLElement)\"\n      @leave=\"(el: Element) => expandTransition.leave(el as HTMLElement)\"\n      @after-leave=\"(el: Element) => expandTransition.afterLeave(el as HTMLElement)\"\n    >\n      <ul :class=\"cls.e('sub-list')\" v-show=\"expanded\">\n        <template v-for=\"(child, index) of item.children!\" :key=\"getKey(index, parentKey)\">\n          <UNavItem v-if=\"!child.children?.length\" :item=\"child\" :depth=\"depth + 1\" />\n          <NavSub v-else :item=\"child\" :parent-key=\"getKey(index, parentKey)\" :depth=\"depth + 1\" />\n        </template>\n      </ul>\n    </transition>\n  </li>\n</template>\n\n<script setup lang=\"ts\">\nimport { ArrowRight } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, inject } from 'vue'\n\nimport type { NavItem } from '../../types'\nimport { UIcon } from '../icon'\nimport { NavDIKey } from './di'\nimport { getKey } from './helper'\nimport UNavIcon from './nav-icon.vue'\nimport UNavItem from './nav-item.vue'\n\ndefineOptions({ name: 'UNavSub' })\n\nconst props = defineProps<{ item: NavItem; parentKey: string; depth: number }>()\n\nconst { cls, expandedPath, navProps, expandTransition } = inject(NavDIKey)!\n\nconst expanded = computed(() => expandedPath.has(props.item.path))\n\nconst branchActive = computed(() => {\n  const currentPath = navProps.currentPath\n  if (!currentPath) return false\n\n  const check = (items?: NavItem[]) => {\n    return items?.some((item) => item.path === currentPath || check(item.children)) ?? false\n  }\n\n  return check(props.item.children)\n})\n\nfunction handleToggleExpand() {\n  const { item } = props\n  expandedPath.has(item.path) ? expandedPath.delete(item.path) : expandedPath.add(item.path)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAwDA,MAAM,QAAQ;EAEd,MAAM,EAAE,KAAK,cAAc,UAAU,qBAAqB,OAAO,QAAQ;EAEzE,MAAM,WAAW,eAAe,aAAa,IAAI,MAAM,KAAK,IAAI,CAAC;EAEjE,MAAM,eAAe,eAAe;GAClC,MAAM,cAAc,SAAS;GAC7B,IAAI,CAAC,aAAa,OAAO;GAEzB,MAAM,SAAS,UAAsB;IACnC,OAAO,OAAO,MAAM,SAAS,KAAK,SAAS,eAAe,MAAM,KAAK,QAAQ,CAAC,KAAK;GACrF;GAEA,OAAO,MAAM,MAAM,KAAK,QAAQ;EAClC,CAAC;EAED,SAAS,qBAAqB;GAC5B,MAAM,EAAE,SAAS;GACjB,aAAa,IAAI,KAAK,IAAI,IAAI,aAAa,OAAO,KAAK,IAAI,IAAI,aAAa,IAAI,KAAK,IAAI;EAC3F;;;uBA3EE,mBAsCK,MAAA,EAtCA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,KAAA,CAAA,EAAA,GAAA;IACf,mBAoBM,OAAA;KAnBH,OAAK,eAAA;MAAY,MAAA,GAAA,CAAG,CAAC,EAAC,aAAA;MAAyB,MAAA,GAAA,CAAG,CAAC,GAAE,eAAgB,QAAA,UAAK,CAAA;MAAiB,MAAA,GAAA,CAAG,CAAC,GAAE,YAAa,SAAA,KAAQ;MAAW,MAAA,GAAA,CAAG,CAAC,GAAE,iBAAkB,aAAA,KAAY;;KAMrK,SAAO;;KAEQ,QAAA,KAAK,QAAA,UAAA,GAArB,YAAsE,aAAA;;MAA1C,MAAM,QAAA,KAAK;MAAO,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,MAAA,CAAA;;KAE1D,mBAAA,MAAA;KACA,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,WAAA,CAAA,EAAA,GAAA,gBACd,QAAA,KAAK,KAAK,GAAA,CAAA;KAGf,mBAAA,QAAA;KACA,YAES,MAAA,WAAA,GAAA,EAFA,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,EAAC,YAAA,GAAgB,MAAA,GAAA,CAAG,CAAC,GAAE,YAAa,SAAA,KAAQ,CAAA,CAAA,EAAA,GAAA;6BACjD,CAAd,YAAc,MAAA,UAAA,CAAA,CAAA,CAAA;;;;IAIlB,mBAAA,eAAA;IACA,YAaa,YAAA;KAZV,SAAK,OAAA,OAAA,OAAA,MAAG,OAAgB,MAAA,gBAAA,CAAgB,CAAC,MAAM,EAAE;KACjD,cAAW,OAAA,OAAA,OAAA,MAAG,OAAgB,MAAA,gBAAA,CAAgB,CAAC,WAAW,EAAE;KAC5D,eAAY,OAAA,OAAA,OAAA,MAAG,OAAgB,MAAA,gBAAA,CAAgB,CAAC,YAAY,EAAE;KAC9D,SAAK,OAAA,OAAA,OAAA,MAAG,OAAgB,MAAA,gBAAA,CAAgB,CAAC,MAAM,EAAE;KACjD,cAAW,OAAA,OAAA,OAAA,MAAG,OAAgB,MAAA,gBAAA,CAAgB,CAAC,WAAW,EAAE;KAL/D,WAAA;;4BAYO,CAAA,eALL,mBAKK,MAAA,EALA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,UAAA,CAAA,EAAA,GAAA,EAAA,UAAA,IAAA,GACf,mBAGW,UAAA,MAAA,WAHwB,QAAA,KAAK,WAAtB,OAAO,UAAK;8DAA2B,MAAA,MAAA,CAAM,CAAC,OAAO,QAAA,SAAS,EAAA,GAAA,CAAA,CAC7D,MAAM,UAAU,UAAA,UAAA,GAAjC,YAA4E,aAAA;;OAAlC,MAAM;OAAQ,OAAO,QAAA,QAAK;sDACpE,YAAyF,mBAAA;;OAAzE,MAAM;OAAQ,cAAY,MAAA,MAAA,CAAM,CAAC,OAAO,QAAA,SAAS;OAAI,OAAO,QAAA,QAAK;;;;;;8BAH9C,SAAA,KAAQ,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"nav-sub.js","names":[],"sources":["../../../src/components/nav/nav-sub.vue"],"sourcesContent":["<template>\n  <li :class=\"cls.e('sub')\">\n    <div\n      :class=\"[\n        cls.e('sub-content'),\n        bem.is('first-level', depth === 0),\n        bem.is('expanded', expanded),\n        bem.is('branch-active', branchActive)\n      ]\"\n      @click=\"handleToggleExpand\"\n    >\n      <UNavIcon v-if=\"item.icon\" :icon=\"item.icon\" :class=\"cls.e('icon')\" />\n\n      <!-- 文本 -->\n      <span :class=\"cls.e('sub-title')\">\n        {{ item.title }}\n      </span>\n\n      <!-- 展开图标 -->\n      <u-icon :class=\"[cls.e('sub-expand'), bem.is('expanded', expanded)]\">\n        <ArrowRight />\n      </u-icon>\n    </div>\n\n    <!-- @vue-ignore -->\n    <transition\n      @enter=\"(el: Element) => expandTransition.enter(el as HTMLElement)\"\n      @after-enter=\"(el: Element) => expandTransition.afterEnter(el as HTMLElement)\"\n      @before-leave=\"(el: Element) => expandTransition.beforeLeave(el as HTMLElement)\"\n      @leave=\"(el: Element) => expandTransition.leave(el as HTMLElement)\"\n      @after-leave=\"(el: Element) => expandTransition.afterLeave(el as HTMLElement)\"\n    >\n      <ul :class=\"[cls.e('sub-list'), bem.is('has-active', branchActive)]\" v-show=\"expanded\">\n        <template v-for=\"(child, index) of item.children!\" :key=\"getKey(index, parentKey)\">\n          <UNavItem v-if=\"!child.children?.length\" :item=\"child\" :depth=\"depth + 1\" />\n          <NavSub v-else :item=\"child\" :parent-key=\"getKey(index, parentKey)\" :depth=\"depth + 1\" />\n        </template>\n      </ul>\n    </transition>\n  </li>\n</template>\n\n<script setup lang=\"ts\">\nimport { ArrowRight } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, inject } from 'vue'\n\nimport type { NavItem } from '../../types'\nimport { UIcon } from '../icon'\nimport { NavDIKey } from './di'\nimport { getKey } from './helper'\nimport UNavIcon from './nav-icon.vue'\nimport UNavItem from './nav-item.vue'\n\ndefineOptions({ name: 'UNavSub' })\n\nconst props = defineProps<{ item: NavItem; parentKey: string; depth: number }>()\n\nconst { cls, expandedPath, navProps, expandTransition } = inject(NavDIKey)!\n\nconst expanded = computed(() => expandedPath.has(props.item.path))\n\nconst branchActive = computed(() => {\n  const currentPath = navProps.currentPath\n  if (!currentPath) return false\n\n  const check = (items?: NavItem[]) => {\n    return items?.some((item) => item.path === currentPath || check(item.children)) ?? false\n  }\n\n  return check(props.item.children)\n})\n\nfunction handleToggleExpand() {\n  const { item } = props\n  expandedPath.has(item.path) ? expandedPath.delete(item.path) : expandedPath.add(item.path)\n}\n</script>\n"],"mappings":"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"}

package/dist/components/nav/style2.css

@@ -291,12 +291,10 @@
   overflow: hidden;
   margin: 2px 0 0 12px;
   padding: 2px 0 2px 8px;
-  border-left: 1px solid color-mix(in srgb, var(--u-border-color) 52%, transparent);
+  border-left: 1px solid var(--u-border-color-a-52);
 }
-@supports selector(:has(*)) {
-  .u-nav__sub-list:has(.u-nav__item.is-active) {
-    border-left-color: var(--u-color-primary);
-  }
+.u-nav__sub-list.is-has-active {
+  border-left-color: var(--u-color-primary);
 }
 .u-nav__sub-expand {
   transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1), color 0.18s ease;

package/dist/components/number/number.vue.d.ts

@@ -1,8 +1,8 @@
 import { NumberProps } from "../../types/number.js";
 //#region src/components/number/number.vue.d.ts
 declare const __VLS_export: import("vue").DefineComponent<NumberProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NumberProps> & Readonly<{}>, {
-  format: "currency" | "percent" | "decimal";
   duration: number;
+  format: "currency" | "percent" | "decimal";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/number-input/number-input.vue.d.ts

@@ -13,17 +13,17 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "update:modelValue": (value: number | undefined) => any;
 } & {
   "update:modelValue": (value?: number | undefined) => any;
-  clear: () => any;
   change: (value?: number | undefined) => any;
+  clear: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value?: number | undefined) => any) | undefined;
-  onClear?: (() => any) | undefined;
   onChange?: ((value?: number | undefined) => any) | undefined;
+  onClear?: (() => any) | undefined;
 }>, {
-  disabled: boolean;
-  readonly: boolean;
   placeholder: string;
   clearable: boolean;
+  disabled: boolean;
+  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/number-range-input/number-range-input.vue.d.ts

@@ -22,9 +22,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
   "onUpdate:start"?: ((value: number | undefined) => any) | undefined;
   "onUpdate:end"?: ((value: number | undefined) => any) | undefined;
 }>, {
+  clearable: boolean;
   disabled: boolean;
   readonly: boolean;
-  clearable: boolean;
   startPlaceholder: string;
   endPlaceholder: string;
   separator: string;

package/dist/components/password-input/password-input.vue.d.ts

@@ -13,9 +13,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
+  clearable: boolean;
   disabled: boolean;
   readonly: boolean;
-  clearable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/radio-group/radio-group.vue.d.ts

@@ -14,10 +14,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
   "onUpdate:modelValue"?: ((value: any) => any) | undefined;
   onChange?: ((item: Record<string, any>) => any) | undefined;
 }>, {
-  disabled: boolean;
-  readonly: boolean;
   labelKey: string;
   valueKey: string;
+  disabled: boolean;
+  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/rich-text-editor/rich-text-editor.vue.d.ts

@@ -10,9 +10,9 @@ declare const __VLS_export: import("vue").DefineComponent<RichTextEditorProps &
 }> & Readonly<{
   "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
+  placeholder: string;
   disabled: boolean;
   readonly: boolean;
-  placeholder: string;
   format: RichTextFormat;
   toolbar: ToolbarItem[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/select/select.vue.d.ts

@@ -24,12 +24,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "onUpdate:text"?: ((value: any) => any) | undefined;
   "onUpdate:label"?: ((label?: string | undefined) => any) | undefined;
 }>, {
-  disabled: boolean;
-  readonly: boolean;
   labelKey: string;
   valueKey: string;
   placeholder: string;
   clearable: boolean;
+  disabled: boolean;
+  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/textarea/textarea.vue.d.ts

@@ -9,21 +9,21 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
   "update:modelValue": (value: string | undefined) => any;
 } & {
   "update:modelValue": (value: string) => any;
-  clear: () => any;
   change: (value: string) => any;
+  clear: () => any;
   focus: () => any;
   blur: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClear?: (() => any) | undefined;
   onChange?: ((value: string) => any) | undefined;
+  onClear?: (() => any) | undefined;
   onFocus?: (() => any) | undefined;
   onBlur?: (() => any) | undefined;
 }>, {
-  disabled: boolean;
-  readonly: boolean;
   placeholder: string;
   clearable: boolean;
+  disabled: boolean;
+  readonly: boolean;
   resize: boolean;
   autosize: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/tree-select/tree-select.vue.d.ts

@@ -15,24 +15,24 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "update:modelValue": (value: string | number | undefined) => any;
 } & {
   "update:modelValue": (value?: string | number | undefined) => any;
-  clear: () => any;
   change: (selectedData?: Record<string, any> | undefined) => any;
+  clear: () => any;
   "update:text": (text?: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value?: string | number | undefined) => any) | undefined;
-  onClear?: (() => any) | undefined;
   onChange?: ((selectedData?: Record<string, any> | undefined) => any) | undefined;
+  onClear?: (() => any) | undefined;
   "onUpdate:text"?: ((text?: string | undefined) => any) | undefined;
 }>, {
-  disabled: boolean;
-  readonly: boolean;
-  minWidth: string;
   expandAll: boolean;
   labelKey: string;
   valueKey: string;
   placeholder: string;
   clearable: boolean;
+  disabled: boolean;
+  readonly: boolean;
   filterable: boolean;
+  minWidth: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.2.22",
+  "version": "1.2.23",
   "files": [
     "dist",
     "src"
@@ -57,11 +57,11 @@
     "@cat-kit/core": ">=1.1.8",
     "@cat-kit/excel": ">=1.0.0",
     "@cat-kit/fe": "^1.1.8",
-    "@veltra/compositions": "1.2.22",
-    "@veltra/directives": "1.2.22",
-    "@veltra/icons": "1.2.22",
-    "@veltra/styles": "1.2.22",
-    "@veltra/utils": "1.2.22",
+    "@veltra/compositions": "1.2.23",
+    "@veltra/directives": "1.2.23",
+    "@veltra/icons": "1.2.23",
+    "@veltra/styles": "1.2.23",
+    "@veltra/utils": "1.2.23",
     "vue": ">=3.5.39"
   },
   "devDependencies": {

package/src/components/action/style.scss

@@ -5,17 +5,6 @@ $root-name: action;
 $group-name: action-group;
 
 @include m.b($group-name) {
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-  gap: 2px;
-  padding: 2px 4px;
-  border-radius: 999px;
-  background-color: color-mix(in srgb, #{fn.use-var(bg-color, top)} 70%, transparent);
-  backdrop-filter: fn.use-var(bg-filter);
-  -webkit-backdrop-filter: fn.use-var(bg-filter);
-  box-shadow: 0 1px 4px color-mix(in srgb, #{fn.use-var(shadow, color)} 35%, transparent);
-
   @include m.e(more) {
     flex-shrink: 0;
   }

package/src/components/batch-edit/style.scss

@@ -52,8 +52,8 @@ $root-name: batch-edit;
     background-color: fn.use-var(bg-color, top);
     border-radius: var(--u-batch-edit-form-radius);
     box-shadow:
-      0 1px 2px color-mix(in srgb, #{fn.use-var(shadow, color)} 40%, transparent),
-      0 12px 32px -16px color-mix(in srgb, #{fn.use-var(shadow, color)} 50%, transparent);
+      0 1px 2px fn.color-a(shadow, 40, color),
+      0 12px 32px -16px fn.color-a(shadow, 50, color);
     overflow: hidden;
     isolation: isolate;
     min-height: 0;
@@ -65,11 +65,7 @@ $root-name: batch-edit;
     gap: 12px;
     padding: 10px 14px;
     border-bottom: 1px solid fn.use-var(border-color);
-    background-color: color-mix(
-      in srgb,
-      #{fn.use-var(bg-color, top)} 96%,
-      #{fn.use-var(bg-color, hover)}
-    );
+    background-color: fn.component-var(batch-edit, form-header-bg);
     flex-shrink: 0;
   }
 

package/src/components/collapse/style.scss

@@ -7,31 +7,11 @@ $root-name: collapse;
 $ease: cubic-bezier(0.4, 0, 0.2, 1);
 $transition-fast: 0.18s $ease;
 $transition-normal: 0.24s $ease;
-$item-bg: fn.component-var(
-  collapse,
-  item-bg,
-  color-mix(in srgb, #{fn.use-var(bg-color, hover)} 72%, #{fn.use-var(bg-color, top)})
-);
-$item-hover-bg: fn.component-var(
-  collapse,
-  item-hover-bg,
-  color-mix(in srgb, #{fn.use-var(color, primary)} 4%, #{$item-bg})
-);
-$item-active-bg: fn.component-var(
-  collapse,
-  item-active-bg,
-  color-mix(in srgb, #{fn.use-var(color, primary)} 5%, #{$item-bg})
-);
-$header-active-bg: fn.component-var(
-  collapse,
-  header-active-bg,
-  color-mix(in srgb, #{fn.use-var(color, primary)} 8%, #{$item-bg})
-);
-$content-bg: fn.component-var(
-  collapse,
-  content-bg,
-  color-mix(in srgb, #{$item-active-bg} 42%, #{fn.use-var(bg-color, top)})
-);
+$item-bg: fn.component-var(collapse, item-bg);
+$item-hover-bg: fn.component-var(collapse, item-hover-bg);
+$item-active-bg: fn.component-var(collapse, item-active-bg);
+$header-active-bg: fn.component-var(collapse, header-active-bg);
+$content-bg: fn.component-var(collapse, content-bg);
 $active-title-color: fn.component-var(collapse, active-title-color, fn.use-var(color, primary));
 
 @include m.b($root-name) {

package/src/components/file-viewer/style.scss

@@ -4,6 +4,7 @@
 @include m.b(file-viewer) {
   --u-file-viewer-canvas: #101114;
   --u-file-viewer-canvas-soft: #17191f;
+  --u-file-viewer-canvas-overlay: rgba(16, 17, 20, 0.74);
   --u-file-viewer-page-shadow: 0 24px 72px rgba(0, 0, 0, 0.34);
 
   position: relative;
@@ -174,7 +175,7 @@
     }
 
     @include m.is(active) {
-      background: color-mix(in srgb, #{fn.use-var(color, primary)} 8%, transparent);
+      background: fn.color-a(color, 8, primary);
 
       &::before {
         opacity: 1;
@@ -247,6 +248,8 @@
 
   @include m.e(badge) {
     --u-file-viewer-kind: #{fn.use-var(text-color, second)};
+    --u-file-viewer-kind-border: fn.color-a(text-color, 28, second);
+    --u-file-viewer-kind-bg: fn.color-a(text-color, 10, second);
 
     display: inline-flex;
     align-items: center;
@@ -254,10 +257,10 @@
     flex-shrink: 0;
     width: 40px;
     height: 26px;
-    border: 1px solid color-mix(in srgb, var(--u-file-viewer-kind) 28%, transparent);
+    border: 1px solid var(--u-file-viewer-kind-border);
     border-radius: 7px;
     color: var(--u-file-viewer-kind);
-    background: color-mix(in srgb, var(--u-file-viewer-kind) 10%, transparent);
+    background: var(--u-file-viewer-kind-bg);
     font-size: 10px;
     font-weight: 760;
     line-height: 1;
@@ -265,26 +268,38 @@
 
   @include m.em(badge, image) {
     --u-file-viewer-kind: #0891b2;
+    --u-file-viewer-kind-border: rgba(8, 145, 178, 0.28);
+    --u-file-viewer-kind-bg: rgba(8, 145, 178, 0.1);
   }
 
   @include m.em(badge, video) {
     --u-file-viewer-kind: #db2777;
+    --u-file-viewer-kind-border: rgba(219, 39, 119, 0.28);
+    --u-file-viewer-kind-bg: rgba(219, 39, 119, 0.1);
   }
 
   @include m.em(badge, pdf) {
     --u-file-viewer-kind: #dc2626;
+    --u-file-viewer-kind-border: rgba(220, 38, 38, 0.28);
+    --u-file-viewer-kind-bg: rgba(220, 38, 38, 0.1);
   }
 
   @include m.em(badge, sheet) {
     --u-file-viewer-kind: #15803d;
+    --u-file-viewer-kind-border: rgba(21, 128, 61, 0.28);
+    --u-file-viewer-kind-bg: rgba(21, 128, 61, 0.1);
   }
 
   @include m.em(badge, docx) {
     --u-file-viewer-kind: #2563eb;
+    --u-file-viewer-kind-border: rgba(37, 99, 235, 0.28);
+    --u-file-viewer-kind-bg: rgba(37, 99, 235, 0.1);
   }
 
   @include m.em(badge, text) {
     --u-file-viewer-kind: #64748b;
+    --u-file-viewer-kind-border: rgba(100, 116, 139, 0.28);
+    --u-file-viewer-kind-bg: rgba(100, 116, 139, 0.1);
   }
 
   @include m.e(stage) {
@@ -404,7 +419,7 @@
     gap: 2px;
     height: 34px;
     padding: 2px;
-    border: 1px solid color-mix(in srgb, #{fn.use-var(border, color)} 86%, transparent);
+    border: 1px solid fn.color-a(border, 86, color);
     border-radius: 8px;
     background: fn.use-var(bg-color, middle);
   }
@@ -436,7 +451,7 @@
 
     &:not(:disabled):hover {
       color: fn.use-var(color, primary);
-      background: color-mix(in srgb, #{fn.use-var(color, primary)} 10%, transparent);
+      background: fn.color-a(color, 10, primary);
     }
 
     &:not(:disabled):active {
@@ -470,7 +485,7 @@
 
     &:not(:disabled):hover {
       color: #fff;
-      background: color-mix(in srgb, #{fn.use-var(color, primary)} 88%, #fff);
+      background: fn.use-var(color, primary, light, 1);
     }
   }
 
@@ -760,8 +775,8 @@
 
     @include m.is(active) {
       color: fn.use-var(color, primary);
-      background: color-mix(in srgb, #{fn.use-var(color, primary)} 11%, transparent);
-      border-color: color-mix(in srgb, #{fn.use-var(color, primary)} 22%, transparent);
+      background: fn.color-a(color, 11, primary);
+      border-color: fn.color-a(color, 22, primary);
     }
   }
 
@@ -793,7 +808,7 @@
     align-items: center;
     justify-content: center;
     color: rgba(255, 255, 255, 0.72);
-    background: color-mix(in srgb, var(--u-file-viewer-canvas) 74%, transparent);
+    background: var(--u-file-viewer-canvas-overlay);
     font-size: 13px;
     pointer-events: none;
   }

package/src/components/kbd/style.scss

@@ -30,8 +30,7 @@
    * Multi-layer box-shadow simulates a 3D keycap appearance.
    */
   box-shadow:
-    inset 0 0.05em
-      color-mix(in srgb, #{fn.use-var(bg-color, top)} 75%, #{fn.use-var(bg-color, black)}),
-    0 0 0 0.05em color-mix(in srgb, #{fn.use-var(border, color)} 50%, transparent),
-    0 0.08em 0.17em color-mix(in srgb, #{fn.use-var(shadow, color)} 60%, transparent);
+    inset 0 0.05em fn.component-var(kbd, inset-shadow),
+    0 0 0 0.05em fn.component-var(kbd, border-shadow),
+    0 0.08em 0.17em fn.component-var(kbd, drop-shadow);
 }

package/src/components/loading/style.scss

@@ -25,7 +25,7 @@ $root-name: loading;
       width: 36px;
       aspect-ratio: 1;
       border-radius: 50%;
-      border: 3px solid color-mix(in srgb, currentColor 22%, transparent);
+      border: 3px solid fn.color-a(color, 22, primary);
       border-top-color: currentColor;
       position: relative;
       animation: loading-spin 0.8s linear infinite;
@@ -35,7 +35,7 @@ $root-name: loading;
         position: absolute;
         inset: 5px;
         border-radius: 50%;
-        border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
+        border: 2px solid fn.color-a(color, 22, primary);
         border-bottom-color: currentColor;
         animation: loading-spin 1.2s linear infinite reverse;
       }
@@ -88,7 +88,7 @@ $root-name: loading;
       width: 36px;
       aspect-ratio: 1;
       border-radius: 50%;
-      border: 3px solid color-mix(in srgb, currentColor 22%, transparent);
+      border: 3px solid fn.color-a(color, 22, primary);
       border-top-color: currentColor;
       animation: loading-spin 0.9s linear infinite;
     }

package/src/components/nav/nav-sub.vue

@@ -30,7 +30,7 @@
       @leave="(el: Element) => expandTransition.leave(el as HTMLElement)"
       @after-leave="(el: Element) => expandTransition.afterLeave(el as HTMLElement)"
     >
-      <ul :class="cls.e('sub-list')" v-show="expanded">
+      <ul :class="[cls.e('sub-list'), bem.is('has-active', branchActive)]" v-show="expanded">
         <template v-for="(child, index) of item.children!" :key="getKey(index, parentKey)">
           <UNavItem v-if="!child.children?.length" :item="child" :depth="depth + 1" />
           <NavSub v-else :item="child" :parent-key="getKey(index, parentKey)" :depth="depth + 1" />

package/src/components/nav/style.scss

@@ -148,12 +148,10 @@ $collapsed-nav: collapsed-nav;
     overflow: hidden;
     margin: 2px 0 0 12px;
     padding: 2px 0 2px 8px;
-    border-left: 1px solid color-mix(in srgb, #{fn.use-var(border, color)} 52%, transparent);
+    border-left: 1px solid fn.color-a(border, 52, color);
 
-    @supports selector(:has(*)) {
-      &:has(#{fn.bem($root-name, item)}.is-active) {
-        border-left-color: fn.use-var(color, primary);
-      }
+    @include m.is(has-active) {
+      border-left-color: fn.use-var(color, primary);
     }
   }