@sdata/web-vue 1.18.0 → 2.1.0

package/es/date-picker/style/index.css

@@ -27,9 +27,9 @@
   box-sizing: border-box;
   padding: 4px 11px 4px 4px;
   line-height: 1.5715;
-  background-color: var(--color-fill-2);
+  background-color: var(--sd-color-fill-2);
   border: 1px solid transparent;
-  border-radius: var(--border-radius-small);
+  border-radius: var(--sd-border-radius-small);
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
 }
 .sd-picker-input {
@@ -40,7 +40,7 @@
   width: 100%;
   padding: 0;
   padding-left: 8px;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
   line-height: 1.5715;
   text-align: left;
   background-color: transparent;
@@ -49,17 +49,17 @@
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
 }
 .sd-picker input::placeholder {
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
 }
 .sd-picker input[disabled] {
-  -webkit-text-fill-color: var(--color-text-4);
+  -webkit-text-fill-color: var(--sd-color-text-4);
 }
 .sd-picker-has-prefix {
   padding-left: 12px;
 }
 .sd-picker-prefix {
   padding-right: 4px;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
   font-size: 14px;
 }
 .sd-picker-suffix {
@@ -71,30 +71,30 @@
   display: inline-flex;
 }
 .sd-picker-suffix .sd-feedback-icon-status-validating {
-  color: rgb(var(--primary-6));
+  color: rgb(var(--sd-primary-6));
 }
 .sd-picker-suffix .sd-feedback-icon-status-success {
-  color: rgb(var(--success-6));
+  color: rgb(var(--sd-success-6));
 }
 .sd-picker-suffix .sd-feedback-icon-status-warning {
-  color: rgb(var(--warning-6));
+  color: rgb(var(--sd-warning-6));
 }
 .sd-picker-suffix .sd-feedback-icon-status-error {
-  color: rgb(var(--danger-6));
+  color: rgb(var(--sd-danger-6));
 }
 .sd-picker-suffix .sd-feedback-icon {
   margin-left: 4px;
 }
 .sd-picker-suffix-icon {
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
 }
 .sd-picker .sd-picker-clear-icon {
   display: none;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
   font-size: 12px;
 }
 .sd-picker:hover {
-  background-color: var(--color-fill-3);
+  background-color: var(--sd-color-fill-3);
   border-color: transparent;
 }
 .sd-picker:not(.sd-picker-disabled):hover .sd-picker-clear-icon {
@@ -104,57 +104,57 @@
   display: none;
 }
 .sd-picker input[disabled] {
-  color: var(--color-text-4);
+  color: var(--sd-color-text-4);
   cursor: not-allowed;
 }
 .sd-picker input[disabled]::placeholder {
-  color: var(--color-text-4);
+  color: var(--sd-color-text-4);
 }
 .sd-picker-error {
-  background-color: var(--color-danger-light-1);
+  background-color: var(--sd-color-danger-light-1);
   border-color: transparent;
 }
 .sd-picker-error:hover {
-  background-color: var(--color-danger-light-2);
+  background-color: var(--sd-color-danger-light-2);
   border-color: transparent;
 }
 .sd-picker-focused {
-  box-shadow: 0 0 0 0 var(--color-primary-light-2);
+  box-shadow: 0 0 0 0 var(--sd-color-primary-light-2);
 }
 .sd-picker-focused, .sd-picker-focused:hover {
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--primary-6));
+  background-color: var(--sd-color-bg-2);
+  border-color: rgb(var(--sd-primary-6));
 }
 .sd-picker-focused.sd-picker-error {
-  border-color: rgb(var(--danger-6));
-  box-shadow: 0 0 0 0 var(--color-danger-light-2);
+  border-color: rgb(var(--sd-danger-6));
+  box-shadow: 0 0 0 0 var(--sd-color-danger-light-2);
 }
 .sd-picker-focused .sd-picker-input-active input, .sd-picker-focused:hover .sd-picker-input-active input {
-  background: var(--color-fill-2);
+  background: var(--sd-color-fill-2);
 }
 .sd-picker-disabled, .sd-picker-disabled:hover {
-  color: var(--color-text-4);
-  background-color: var(--color-fill-2);
+  color: var(--sd-color-text-4);
+  background-color: var(--sd-color-fill-2);
   border-color: transparent;
   cursor: not-allowed;
 }
 .sd-picker-disabled input[disabled], .sd-picker-disabled:hover input[disabled] {
-  color: var(--color-text-4);
+  color: var(--sd-color-text-4);
   cursor: not-allowed;
 }
 .sd-picker-disabled input[disabled]::placeholder, .sd-picker-disabled:hover input[disabled]::placeholder {
-  color: var(--color-text-4);
+  color: var(--sd-color-text-4);
 }
 .sd-picker-separator {
   min-width: 10px;
   padding: 0 8px;
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
 }
 .sd-picker-disabled .sd-picker-separator {
-  color: var(--color-text-4);
+  color: var(--sd-color-text-4);
 }
 .sd-picker-disabled .sd-picker-suffix-icon {
-  color: var(--color-text-4);
+  color: var(--sd-color-text-4);
 }
 .sd-picker-size-mini {
   height: 24px;
@@ -186,9 +186,9 @@
   box-sizing: border-box;
   min-height: 60px;
   overflow: hidden;
-  background-color: var(--color-bg-popup);
-  border: 1px solid var(--color-neutral-3);
-  border-radius: var(--border-radius-medium);
+  background-color: var(--sd-color-bg-popup);
+  border: 1px solid var(--sd-color-neutral-3);
+  border-radius: var(--sd-border-radius-medium);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 .sd-picker-container-shortcuts-placement-left, .sd-picker-container-shortcuts-placement-right,
@@ -215,13 +215,13 @@
 .sd-picker-container-shortcuts-placement-left .sd-picker-range-panel-wrapper,
 .sd-picker-range-container-shortcuts-placement-left .sd-picker-panel-wrapper,
 .sd-picker-range-container-shortcuts-placement-left .sd-picker-range-panel-wrapper {
-  border-left: 1px solid var(--color-neutral-3);
+  border-left: 1px solid var(--sd-color-neutral-3);
 }
 .sd-picker-container-shortcuts-placement-right .sd-picker-panel-wrapper,
 .sd-picker-container-shortcuts-placement-right .sd-picker-range-panel-wrapper,
 .sd-picker-range-container-shortcuts-placement-right .sd-picker-panel-wrapper,
 .sd-picker-range-container-shortcuts-placement-right .sd-picker-range-panel-wrapper {
-  border-right: 1px solid var(--color-neutral-3);
+  border-right: 1px solid var(--sd-color-neutral-3);
 }
 
 .sd-picker-container-panel-only,
@@ -241,11 +241,11 @@
 .sd-picker-header {
   display: flex;
   padding: 8px 16px;
-  border-bottom: 1px solid var(--color-neutral-3);
+  border-bottom: 1px solid var(--sd-color-neutral-3);
 }
 .sd-picker-header-title {
   flex: 1;
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-size: 14px;
   line-height: 24px;
   text-align: center;
@@ -255,11 +255,11 @@
   height: 24px;
   margin-right: 2px;
   margin-left: 2px;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
   font-size: 12px;
   line-height: 24px;
   text-align: center;
-  background-color: var(--color-bg-popup);
+  background-color: var(--sd-color-bg-popup);
   border-radius: 50%;
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
   user-select: none;
@@ -268,7 +268,7 @@
   cursor: pointer;
 }
 .sd-picker-header-icon:not(.sd-picker-header-icon-hidden):hover {
-  background-color: var(--color-fill-3);
+  background-color: var(--sd-color-fill-3);
 }
 .sd-picker-header-label {
   padding: 2px;
@@ -277,7 +277,7 @@
   transition: all 0.1s;
 }
 .sd-picker-header-label:hover {
-  background-color: var(--color-fill-3);
+  background-color: var(--sd-color-fill-3);
 }
 .sd-picker-body {
   padding: 14px 16px;
@@ -316,25 +316,25 @@
 .sd-picker-date-value {
   min-width: 24px;
   height: 24px;
-  color: var(--color-text-4);
+  color: var(--sd-color-text-4);
   font-size: 14px;
   line-height: 24px;
   text-align: center;
-  border-radius: var(--border-radius-circle);
+  border-radius: var(--sd-border-radius-circle);
   cursor: pointer;
 }
 .sd-picker-cell-in-view .sd-picker-date-value {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-weight: 500;
 }
 .sd-picker-cell-selected .sd-picker-date-value {
-  color: var(--color-white);
-  background-color: rgb(var(--primary-6));
+  color: var(--sd-color-white);
+  background-color: rgb(var(--sd-primary-6));
   transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
 }
 .sd-picker-cell-in-view:not(.sd-picker-cell-selected, .sd-picker-cell-range-start, .sd-picker-cell-range-end, .sd-picker-cell-disabled, .sd-picker-cell-week) .sd-picker-date-value:hover {
-  color: var(--color-text-1);
-  background-color: var(--color-fill-3);
+  color: var(--sd-color-text-1);
+  background-color: var(--sd-color-fill-3);
 }
 .sd-picker-cell-today {
   position: relative;
@@ -347,12 +347,12 @@
   width: 4px;
   height: 4px;
   margin-left: -2px;
-  background-color: rgb(var(--primary-6));
+  background-color: rgb(var(--sd-primary-6));
   border-radius: 50%;
   content: "";
 }
 .sd-picker-cell-in-range .sd-picker-date {
-  background-color: var(--color-primary-light-1);
+  background-color: var(--sd-color-primary-light-1);
 }
 .sd-picker-cell-range-start .sd-picker-date {
   border-top-left-radius: 24px;
@@ -366,12 +366,12 @@
   border-radius: 0;
 }
 .sd-picker-cell-range-start .sd-picker-date-value, .sd-picker-cell-range-end .sd-picker-date-value {
-  color: var(--color-white);
-  background-color: rgb(var(--primary-6));
-  border-radius: var(--border-radius-circle);
+  color: var(--sd-color-white);
+  background-color: rgb(var(--sd-primary-6));
+  border-radius: var(--sd-border-radius-circle);
 }
 .sd-picker-cell-hover-in-range .sd-picker-date {
-  background-color: var(--color-primary-light-1);
+  background-color: var(--sd-color-primary-light-1);
 }
 .sd-picker-cell-hover-range-start .sd-picker-date {
   border-radius: 24px 0 0 24px;
@@ -380,16 +380,16 @@
   border-radius: 0 24px 24px 0;
 }
 .sd-picker-cell-hover-range-start .sd-picker-date-value, .sd-picker-cell-hover-range-end .sd-picker-date-value {
-  color: var(--color-text-1);
-  background-color: var(--color-primary-light-2);
+  color: var(--sd-color-text-1);
+  background-color: var(--sd-color-primary-light-2);
   border-radius: 50%;
 }
 .sd-picker-cell-disabled .sd-picker-date {
-  background-color: var(--color-fill-1);
+  background-color: var(--sd-color-fill-1);
   cursor: not-allowed;
 }
 .sd-picker-cell-disabled .sd-picker-date-value {
-  color: var(--color-text-4);
+  color: var(--sd-color-text-4);
   background-color: transparent;
   cursor: not-allowed;
 }
@@ -403,7 +403,7 @@
   justify-content: space-between;
   box-sizing: border-box;
   padding: 3px 8px;
-  border-top: 1px solid var(--color-neutral-3);
+  border-top: 1px solid var(--sd-color-neutral-3);
 }
 .sd-picker-footer-btn-wrapper :only-child {
   margin-left: auto;
@@ -411,16 +411,16 @@
 .sd-picker-footer-extra-wrapper {
   box-sizing: border-box;
   padding: 8px 24px;
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-size: 12px;
-  border-top: 1px solid var(--color-neutral-3);
+  border-top: 1px solid var(--sd-color-neutral-3);
 }
 .sd-picker-footer-now-wrapper {
   box-sizing: border-box;
   height: 36px;
   line-height: 36px;
   text-align: center;
-  border-top: 1px solid var(--color-neutral-3);
+  border-top: 1px solid var(--sd-color-neutral-3);
 }
 .sd-picker-btn-confirm {
   margin: 5px 0;
@@ -465,18 +465,18 @@
 .sd-panel-date-timepicker {
   display: flex;
   flex-direction: column;
-  border-left: 1px solid var(--color-neutral-3);
+  border-left: 1px solid var(--sd-color-neutral-3);
 }
 
 .sd-panel-date-timepicker-title {
   width: 100%;
   height: 40px;
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-weight: 400;
   font-size: 14px;
   line-height: 40px;
   text-align: center;
-  border-bottom: 1px solid var(--color-neutral-3);
+  border-bottom: 1px solid var(--sd-color-neutral-3);
 }
 
 .sd-panel-date-timepicker .sd-timepicker {
@@ -513,7 +513,7 @@
 }
 
 .sd-panel-date-footer {
-  border-right: 1px solid var(--color-neutral-3);
+  border-right: 1px solid var(--sd-color-neutral-3);
 }
 
 .sd-panel-date-with-view-tabs {
@@ -540,17 +540,17 @@
 
 .sd-panel-date-view-tabs {
   display: flex;
-  border-top: 1px solid var(--color-neutral-3);
+  border-top: 1px solid var(--sd-color-neutral-3);
 }
 
 .sd-panel-date-view-tab-pane {
   flex: 1;
   height: 50px;
-  color: var(--color-text-4);
+  color: var(--sd-color-text-4);
   font-size: 14px;
   line-height: 50px;
   text-align: center;
-  border-right: 1px solid var(--color-neutral-3);
+  border-right: 1px solid var(--sd-color-neutral-3);
   cursor: pointer;
 }
 
@@ -563,7 +563,7 @@
 }
 
 .sd-panel-date-view-tab-pane-active {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 
 /******** borderSize *******/
@@ -700,7 +700,7 @@
 }
 
 .sd-panel-week .sd-picker-row-week:hover .sd-picker-cell:not(.sd-picker-cell-week):not(.sd-picker-cell-selected):not(.sd-picker-cell-range-start):not(.sd-picker-cell-range-end) .sd-picker-date-value {
-  background-color: var(--color-fill-3);
+  background-color: var(--sd-color-fill-3);
 }
 
 /******** borderSize *******/
@@ -782,5 +782,5 @@
 }
 
 .sd-datepicker-shortcuts-wrapper > li:hover {
-  color: rgb(var(--primary-6));
+  color: rgb(var(--sd-primary-6));
 }

package/es/descriptions/descriptions-item.js

@@ -5,6 +5,6 @@ import { renderSlot } from "vue";
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	return renderSlot(_ctx.$slots, "default");
 }
-var descriptions_item_default = /* @__PURE__ */ _plugin_vue_export_helper_default(descriptions_item_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+var descriptions_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(descriptions_item_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion
 export { descriptions_item_default as default };

package/es/descriptions/descriptions.d.ts

@@ -79,12 +79,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
     };
 }>> & Readonly<{}>, {
-    data: DescData[];
     column: number | ResponsiveValue;
     layout: "horizontal" | "vertical" | "inline-horizontal" | "inline-vertical";
+    data: DescData[];
     tableLayout: "auto" | "fixed";
     bordered: boolean;
-    align: "left" | "right" | "center" | {
+    align: "center" | "left" | "right" | {
         label?: TextAlign;
         value?: TextAlign;
     };

package/es/descriptions/descriptions.js

@@ -1,4 +1,4 @@
-import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/objectSpread2.js";
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isFunction, isObject } from "../_utils/is.js";
 import { getAllElements, isSlotsChildren } from "../_utils/vue-utils.js";

package/es/descriptions/index.d.ts

@@ -42,12 +42,12 @@ declare const Descriptions: {
             default: string;
         };
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-        data: import("./interface").DescData[];
         column: number | import("..").ResponsiveValue;
         layout: "horizontal" | "vertical" | "inline-horizontal" | "inline-vertical";
+        data: import("./interface").DescData[];
         tableLayout: "auto" | "fixed";
         bordered: boolean;
-        align: "left" | "right" | "center" | {
+        align: "center" | "left" | "right" | {
             label?: import("../_utils/constant").TextAlign;
             value?: import("../_utils/constant").TextAlign;
         };
@@ -97,12 +97,12 @@ declare const Descriptions: {
             default: string;
         };
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
-        data: import("./interface").DescData[];
         column: number | import("..").ResponsiveValue;
         layout: "horizontal" | "vertical" | "inline-horizontal" | "inline-vertical";
+        data: import("./interface").DescData[];
         tableLayout: "auto" | "fixed";
         bordered: boolean;
-        align: "left" | "right" | "center" | {
+        align: "center" | "left" | "right" | {
             label?: import("../_utils/constant").TextAlign;
             value?: import("../_utils/constant").TextAlign;
         };
@@ -149,12 +149,12 @@ declare const Descriptions: {
         default: string;
     };
 }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-    data: import("./interface").DescData[];
     column: number | import("..").ResponsiveValue;
     layout: "horizontal" | "vertical" | "inline-horizontal" | "inline-vertical";
+    data: import("./interface").DescData[];
     tableLayout: "auto" | "fixed";
     bordered: boolean;
-    align: "left" | "right" | "center" | {
+    align: "center" | "left" | "right" | {
         label?: import("../_utils/constant").TextAlign;
         value?: import("../_utils/constant").TextAlign;
     };

package/es/descriptions/style/index.css

@@ -24,7 +24,7 @@
 }
 .sd-descriptions-title {
   margin-bottom: 16px;
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-weight: 500;
   font-size: 16px;
   line-height: 1.5715;
@@ -41,13 +41,13 @@
 .sd-descriptions-item-label-block {
   width: 1px;
   padding: 0 4px 12px 0;
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
   font-weight: 500;
   white-space: nowrap;
 }
 .sd-descriptions-item-value-block {
   padding: 0 4px 12px 0;
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-weight: 400;
   white-space: pre-wrap;
   word-break: break-word;
@@ -60,11 +60,11 @@
 }
 .sd-descriptions-item-label-inline {
   margin-bottom: 2px;
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
   font-weight: 500;
 }
 .sd-descriptions-item-value-inline {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-weight: 400;
 }
 .sd-descriptions-layout-inline-horizontal .sd-descriptions-item-label-inline {
@@ -79,18 +79,18 @@
 }
 .sd-descriptions-border .sd-descriptions-body {
   overflow: hidden;
-  border: 1px solid var(--color-neutral-3);
-  border-radius: var(--border-radius-medium);
+  border: 1px solid var(--sd-color-neutral-3);
+  border-radius: var(--sd-border-radius-medium);
 }
 .sd-descriptions-border .sd-descriptions-row:not(:last-child) {
-  border-bottom: 1px solid var(--color-neutral-3);
+  border-bottom: 1px solid var(--sd-color-neutral-3);
 }
 .sd-descriptions-border .sd-descriptions-item, .sd-descriptions-border .sd-descriptions-item-label-block, .sd-descriptions-border .sd-descriptions-item-value-block {
   padding: 7px 20px;
-  border-right: 1px solid var(--color-neutral-3);
+  border-right: 1px solid var(--sd-color-neutral-3);
 }
 .sd-descriptions-border .sd-descriptions-item-label-block {
-  background-color: var(--color-fill-1);
+  background-color: var(--sd-color-fill-1);
 }
 .sd-descriptions-border .sd-descriptions-item-value-block:last-child {
   border-right: none;

package/es/divider/divider.d.ts

@@ -38,6 +38,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{}>, {
     direction: "horizontal" | "vertical";
-    orientation: "left" | "right" | "center";
+    orientation: "center" | "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/divider/index.d.ts

@@ -22,7 +22,7 @@ declare const Divider: {
         };
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
         direction: "horizontal" | "vertical";
-        orientation: "left" | "right" | "center";
+        orientation: "center" | "left" | "right";
     }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
@@ -50,7 +50,7 @@ declare const Divider: {
         };
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         direction: "horizontal" | "vertical";
-        orientation: "left" | "right" | "center";
+        orientation: "center" | "left" | "right";
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -75,7 +75,7 @@ declare const Divider: {
     };
 }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     direction: "horizontal" | "vertical";
-    orientation: "left" | "right" | "center";
+    orientation: "center" | "left" | "right";
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
     install: (app: App, options?: SDOptions) => void;
 };

package/es/divider/style/index.css

@@ -22,7 +22,7 @@
   min-width: 100%;
   max-width: 100%;
   margin: 20px 0;
-  border-bottom: 1px solid var(--color-neutral-3);
+  border-bottom: 1px solid var(--sd-color-neutral-3);
 }
 .sd-divider-horizontal.sd-divider-with-text {
   margin: 20px 0;
@@ -34,18 +34,18 @@
   min-height: 1em;
   margin: 0 12px;
   vertical-align: middle;
-  border-left: 1px solid var(--color-neutral-3);
+  border-left: 1px solid var(--sd-color-neutral-3);
 }
 .sd-divider-text {
   position: absolute;
   top: 50%;
   box-sizing: border-box;
   padding: 0 16px;
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-weight: 500;
   font-size: 14px;
   line-height: 2;
-  background: var(--color-bg-2);
+  background: var(--sd-color-bg-2);
   transform: translateY(-50%);
 }
 .sd-divider-text-center {

package/es/drawer/drawer.js

@@ -3,6 +3,7 @@ import drawer_vue_vue_type_script_lang_default from "./drawer.vue_vue_type_scrip
 import { Teleport, Transition, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveComponent, toDisplayString, vShow, withCtx, withDirectives } from "vue";
 //#region components/drawer/drawer.vue
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	const _component_Ellipsis = resolveComponent("Ellipsis");
 	const _component_icon_close = resolveComponent("icon-close");
 	const _component_icon_hover = resolveComponent("icon-hover");
 	const _component_sd_button = resolveComponent("sd-button");
@@ -44,7 +45,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 				}, [renderSlot(_ctx.$slots, "header", {}, () => [_ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					class: normalizeClass(`${_ctx.prefixCls}-title`)
-				}, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(_ctx.title), 1)])], 2)) : createCommentVNode("", true), _ctx.mergedClosable ? (openBlock(), createElementBlock("div", {
+				}, [createVNode(_component_Ellipsis, {
+					class: normalizeClass(`${_ctx.prefixCls}-title-text`),
+					tooltip: _ctx.mergedTitleEllipsisTooltip
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(_ctx.title), 1)])]),
+					_: 3
+				}, 8, ["class", "tooltip"])], 2)) : createCommentVNode("", true), _ctx.mergedClosable ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					tabindex: "-1",
 					role: "button",
@@ -82,6 +89,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		_: 3
 	});
 }
-var drawer_default = /* @__PURE__ */ _plugin_vue_export_helper_default(drawer_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+var drawer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(drawer_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion
 export { drawer_default as default };