@koi-design/uxd-ui 14.0.3 → 14.0.4

package/lib/components/TreeSelect/index.d.ts

@@ -147,8 +147,8 @@ export declare const UTreeSelect: {
         change: (v: import("..").SelectValueType, item: import("./TreeSelect.type").SelectTreeItem | import("./TreeSelect.type").SelectTreeItem[]) => boolean;
     }, import("vue").PublicProps, {
         color: "primary" | "blue" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
-        required: boolean;
         showIcon: boolean;
+        required: boolean;
         iconType: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
         placement: "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
         disabled: boolean;
@@ -5013,8 +5013,8 @@ export declare const UTreeSelect: {
         onUpdateTreeData: (data: import("..").TreeItem[]) => void;
     }, {}, {}, {}, {
         color: "primary" | "blue" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
-        required: boolean;
         showIcon: boolean;
+        required: boolean;
         iconType: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
         placement: "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
         disabled: boolean;
@@ -5185,8 +5185,8 @@ export declare const UTreeSelect: {
     change: (v: import("..").SelectValueType, item: import("./TreeSelect.type").SelectTreeItem | import("./TreeSelect.type").SelectTreeItem[]) => boolean;
 }, string, {
     color: "primary" | "blue" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
-    required: boolean;
     showIcon: boolean;
+    required: boolean;
     iconType: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
     placement: "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
     disabled: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koi-design/uxd-ui",
-  "version": "14.0.3",
+  "version": "14.0.4",
   "description": "uxd ui component with vue3.0",
   "license": "MIT",
   "maintainers": [],

package/styles/components/badge/index.css

@@ -1 +1 @@
-:root,[data-theme-color]{--primary-color:var(--primary-9)}.uui-badge{--badge-status-dot-size:6px;--badge-count-height:20px;--badge-count-background-color:var(--error-color);--badge-count-font-size:var(--font-size-xs);--badge-count-padding-horizontal:var(--space-1);--badge-count-font-color:white;--badge-dot-size:var(--space-2);--badge-dot-background-color:var(--error-color);--badge-shadow-color:var(--white-a12);--badge-status-default-color:var(--gray-9);--badge-status-font-color:var(--default-font-color);--badge-status-font-size:var(--default-font-size);--badge-status-gutter:var(--space-1);--badge-count-type-background-color:var(--primary-color);--badge-status-primary-color:var(--primary-color)}.uui-badge [data-color=error]{--badge-count-type-background-color:var(--error-color)}.uui-badge [data-color=warning]{--badge-count-type-background-color:var(--warning-color)}.uui-badge [data-color=success]{--badge-count-type-background-color:var(--success-color)}.uui-badge [data-color=primary]{--badge-count-type-background-color:var(--primary-color)}.uui-badge [data-color=normal]{--badge-count-type-background-color:var(--gray-4);--badge-count-font-color:var(--default-font-color)}.uui-badge{position:relative;display:inline-flex}.uui-badge-count{font-family:'Monospaced Number';display:flex;justify-content:center;align-items:center;position:absolute;transform:translateX(50%);top:calc(0px - var(--badge-count-height)/ 2);right:0;height:var(--badge-count-height);border-radius:9999px;min-width:var(--badge-count-height);background:var(--badge-count-background-color);color:var(--badge-count-font-color);padding:0 var(--badge-count-padding-horizontal);font-size:var(--badge-count-font-size);white-space:nowrap;transform-origin:-10% center;z-index:auto;box-shadow:0 0 0 1px var(--badge-shadow-color)}.uui-badge-count-custom{background:0 0;color:inherit;border-color:transparent;box-shadow:none}.uui-badge-count a,.uui-badge-count a:hover{color:var(--white-a12)}.uui-badge-count-alone{top:auto;position:relative;transform:translateX(0)}.uui-badge-count-type{background:var(--badge-count-type-background-color)}.uui-badge-dot{position:absolute;transform:translateX(-50%);transform-origin:0 center;top:calc(0px - var(--badge-dot-size)/ 2);right:calc(0px - var(--badge-dot-size));height:var(--badge-dot-size);width:var(--badge-dot-size);border-radius:100%;background:var(--badge-dot-background-color);z-index:auto;box-shadow:0 0 0 1px var(--badge-shadow-color)}.uui-badge-status{align-items:center;column-gap:var(--badge-status-gutter)}.uui-badge-status-dot{width:var(--badge-status-dot-size);height:var(--badge-status-dot-size);display:inline-flex;border-radius:50%}.uui-badge-status-default{background-color:var(--badge-status-default-color)}.uui-badge-status-text{color:var(--badge-status-font-color);font-size:var(--badge-status-font-size)}.uui-badge-status-color{background-color:var(--badge-status-primary-color)}@keyframes aniStatusProcessing{0%{transform:scale(.8);opacity:.5}100%{transform:scale(2.4);opacity:0}}
+:root,[data-theme-color]{--primary-color:var(--primary-9)}.uui-badge{--badge-count-height:var(--space-4);--badge-status-color:var(--error-color);--badge-count-font-color:white;--badge-dot-size:var(--space-2);--badge-status-gutter:var(--space-1)}.uui-badge [data-color=error]{--badge-status-color:var(--error-color)}.uui-badge [data-color=warning]{--badge-status-color:var(--warning-color)}.uui-badge [data-color=success]{--badge-status-color:var(--success-color)}.uui-badge [data-color=primary]{--badge-status-color:var(--primary-color)}.uui-badge [data-color=normal]{--badge-status-color:var(--color-background-secondary);--badge-count-font-color:var(--default-font-color)}.uui-badge{position:relative;display:inline-flex}.uui-badge-count{font-family:'Monospaced Number';display:flex;justify-content:center;align-items:center;position:absolute;transform:translateX(50%);top:calc(0px - var(--badge-count-height)/ 2);right:0;height:var(--badge-count-height);border-radius:var(--radius-full);min-width:var(--badge-count-height);background:var(--badge-status-color);color:var(--badge-count-font-color);padding:0 var(--space-1);font-size:var(--font-size-xs);white-space:nowrap;transform-origin:-10% center;z-index:auto}.uui-badge-count-custom{background:0 0;color:inherit;border-color:transparent;box-shadow:none}.uui-badge-count a,.uui-badge-count a:hover{color:var(--white-a12)}.uui-badge-count-alone{top:auto;position:relative;transform:translateX(0)}.uui-badge-count-type{background:var(--badge-status-color)}.uui-badge-dot{position:absolute;transform:translateX(-50%);transform-origin:0 center;top:calc(0px - var(--badge-dot-size)/ 2);right:calc(0px - var(--badge-dot-size));height:var(--badge-dot-size);width:var(--badge-dot-size);border-radius:var(--radius-full);background:var(--badge-status-color);z-index:auto}.uui-badge-status{--badge-dot-size:var(--space-1-5);align-items:center;column-gap:var(--badge-status-gutter)}.uui-badge-status-dot{width:var(--badge-dot-size);height:var(--badge-dot-size);display:inline-flex;border-radius:var(--radius-full);background-color:var(--badge-status-color)}@keyframes aniStatusProcessing{0%{transform:scale(.8);opacity:.5}100%{transform:scale(2.4);opacity:0}}

package/styles/components/badge/index.less

@@ -18,16 +18,15 @@
     top: calc(0px - var(--badge-count-height) / 2);
     right: 0;
     height: var(--badge-count-height);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     min-width: var(--badge-count-height);
-    background: var(--badge-count-background-color);
+    background: var(--badge-status-color);
     color: var(--badge-count-font-color);
-    padding: 0 var(--badge-count-padding-horizontal);
-    font-size: var(--badge-count-font-size);
+    padding: 0 var(--space-1);
+    font-size: var(--font-size-xs);
     white-space: nowrap;
     transform-origin: -10% center;
     z-index: auto;
-    box-shadow: 0 0 0 1px var(--badge-shadow-color);
 
     &-custom {
       background: transparent;
@@ -48,7 +47,7 @@
     }
 
     &-type {
-      background: var(--badge-count-type-background-color);
+      background: var(--badge-status-color);
     }
   }
 
@@ -60,56 +59,23 @@
     right: calc(0px - var(--badge-dot-size));
     height: var(--badge-dot-size);
     width: var(--badge-dot-size);
-    border-radius: 100%;
-    background: var(--badge-dot-background-color);
+    border-radius: var(--radius-full);
+    background: var(--badge-status-color);
     z-index: auto;
-    box-shadow: 0 0 0 1px var(--badge-shadow-color);
   }
 
   &-status {
+    --badge-dot-size: var(--space-1-5);
+
     align-items: center;
     column-gap: var(--badge-status-gutter);
 
     &-dot {
-      width: var(--badge-status-dot-size);
-      height: var(--badge-status-dot-size);
+      width: var(--badge-dot-size);
+      height: var(--badge-dot-size);
       display: inline-flex;
-      border-radius: 50%;
-    }
-
-    // &-success {
-    //   background-color: var(--badge-success-color);
-    // }
-
-    // &-processing {
-    //   background-color: var(--badge-primary-color);
-    //   position: relative;
-
-    //   &::after {
-    //     position: absolute;
-    //     top: 0;
-    //     left: 0;
-    //     width: 100%;
-    //     height: 100%;
-    //     border-radius: 50%;
-    //     border: 1px solid var(--badge-primary-color);
-    //     content: '';
-    //     animation: aniStatusProcessing 1.2s infinite ease-in-out;
-    //   }
-    // }
-
-    &-default {
-      background-color: var(--badge-status-default-color);
-    }
-
-
-    &-text {
-      color: var(--badge-status-font-color);
-      font-size: var(--badge-status-font-size);
-    }
-
-    &-color {
-      background-color: var(--badge-status-primary-color);
+      border-radius: var(--radius-full);
+      background-color: var(--badge-status-color);
     }
   }
 }
@@ -124,4 +90,4 @@
     transform: scale(2.4);
     opacity: 0;
   }
-}
+}

package/styles/components/badge/var.less

@@ -1,38 +1,28 @@
 .@{css-prefix-badge} {
-  --badge-status-dot-size: 6px;
-  --badge-count-height: 20px;
-  --badge-count-background-color: var(--error-color);
-  --badge-count-font-size: var(--font-size-xs);
-  --badge-count-padding-horizontal: var(--space-1);
+  --badge-count-height: var(--space-4);
+  --badge-status-color: var(--error-color);
   --badge-count-font-color: white;
   --badge-dot-size: var(--space-2);
-  --badge-dot-background-color: var(--error-color);
-  --badge-shadow-color: var(--white-a12);
-  --badge-status-default-color: var(--gray-9);
-  --badge-status-font-color: var(--default-font-color);
-  --badge-status-font-size: var(--default-font-size);
   --badge-status-gutter: var(--space-1);
-  --badge-count-type-background-color: var(--primary-color);
-  --badge-status-primary-color: var(--primary-color);
 
   [data-color='error'] {
-    --badge-count-type-background-color: var(--error-color);
+    --badge-status-color: var(--error-color);
   }
 
   [data-color='warning'] {
-    --badge-count-type-background-color: var(--warning-color);
+    --badge-status-color: var(--warning-color);
   }
 
   [data-color='success'] {
-    --badge-count-type-background-color: var(--success-color);
+    --badge-status-color: var(--success-color);
   }
 
   [data-color='primary'] {
-    --badge-count-type-background-color: var(--primary-color);
+    --badge-status-color: var(--primary-color);
   }
 
   [data-color='normal'] {
-    --badge-count-type-background-color: var(--gray-4);
+    --badge-status-color: var(--color-background-secondary);
     --badge-count-font-color: var(--default-font-color);
   }
 }

package/styles/components/drawer/index.css

@@ -1 +1 @@
-:root,[data-theme-color]{--primary-color:var(--primary-9)}.uui-drawer{--drawer-component-background:var(--color-background);--drawer-transition-duration:var(--animation-time);--drawer-transition-timing:var(--ease-out-circ);--drawer-header-padding:var(--space-3) var(--space-6);--drawer-text-color:var(--default-font-color);--drawer-close-size:48px;--drawer-header-title-font-size:var(--font-size-base);--drawer-title-line-height:24px;--drawer-title-padding-right:24px;--drawer-close-color:var(--secondary-font-color);--drawer-padding:var(--space-4) var(--space-6);--drawer-default-size:378px;--drawer-large-size:736px;--drawer-border-split-color:var(--color-border-split);--drawer-box-shadow-color:var(--gray-a6);--drawer-shadow-1-down:0 2px 8px var(--drawer-box-shadow-color);--drawer-shadow-1-left:-2px 0 8px var(--drawer-box-shadow-color);--drawer-shadow-1-up:0 -2px 8px var(--drawer-box-shadow-color);--drawer-shadow-1-right:2px 0 8px var(--drawer-box-shadow-color);--drawer-border-radius-base:var(--control-radius)}.dark,.dark-theme{--drawer-component-background:var(--color-background);--drawer-box-shadow-color:var(--black-a6)}.uui-drawer{position:fixed;max-height:100%;overflow:hidden;background-color:var(--drawer-component-background);border-radius:var(--drawer-border-radius-base) 0 0 var(--drawer-border-radius-base);transition:transform var(--drawer-transition-duration) var(--drawer-transition-timing)}.uui-drawer-header{padding:var(--drawer-header-padding);color:var(--drawer-text-color);border-bottom:var(--border-width-base) var(--border-style-base) var(--drawer-border-split-color);position:relative;min-height:var(--drawer-close-size)}.uui-drawer-header .uui-drawer-header-title{margin:0;font-size:var(--drawer-header-title-font-size);line-height:var(--drawer-title-line-height);padding-right:var(--drawer-title-padding-right)}.uui-drawer-header .uui-drawer-close{position:absolute;top:0;right:0;z-index:10;display:block;width:var(--drawer-close-size);height:var(--drawer-close-size);line-height:var(--drawer-close-size);padding:0;border:0;outline:0;background-color:transparent;cursor:pointer;text-align:center;color:var(--drawer-close-color);transition:color var(--animation-time)}.uui-drawer-header .uui-drawer-close-icon{font-size:22px;font-weight:700;vertical-align:middle}.uui-drawer-header .uui-drawer-close:active,.uui-drawer-header .uui-drawer-close:hover{color:var(--drawer-text-color)}.uui-drawer-body{padding:var(--drawer-padding);overflow-y:auto}.uui-drawer-footer{width:100%;padding:var(--drawer-padding);position:absolute;bottom:0;left:0;border-top:var(--border-width-base) var(--border-style-base) var(--color-border-split)}.uui-drawer.uui-drawer-left,.uui-drawer.uui-drawer-right{width:var(--drawer-default-size);height:100%}.uui-drawer.uui-drawer-left.uui-drawer-large,.uui-drawer.uui-drawer-right.uui-drawer-large{width:var(--drawer-large-size)}.uui-drawer.uui-drawer-bottom,.uui-drawer.uui-drawer-top{width:100%;height:var(--drawer-default-size)}.uui-drawer.uui-drawer-bottom.uui-drawer-large,.uui-drawer.uui-drawer-top.uui-drawer-large{height:var(--drawer-large-size)}.uui-drawer-top{top:0;left:0;width:100%;box-shadow:var(--drawer-shadow-1-down);border-radius:0 0 var(--drawer-border-radius-base) var(--drawer-border-radius-base)}.uui-drawer-right{top:0;right:0;bottom:0;height:100%;box-shadow:var(--drawer-shadow-1-left)}.uui-drawer-bottom{bottom:0;left:0;width:100%;box-shadow:var(--drawer-shadow-1-up);border-radius:var(--drawer-border-radius-base) var(--drawer-border-radius-base) 0 0}.uui-drawer-left{top:0;bottom:0;left:0;height:100%;border-radius:0 var(--drawer-border-radius-base) var(--drawer-border-radius-base) 0;box-shadow:var(--drawer-shadow-1-right)}.drawer-slide-top-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:drawerSlideTop}.drawer-slide-top-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:drawerSlideTop;animation-direction:reverse}.drawer-slide-top-enter-from{opacity:0;animation-timing-function:var(--ease-in-out)}.drawer-slide-top-leave-to{animation-timing-function:var(--ease-in-out)}.drawer-slide-bottom-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:drawerSlideBottom}.drawer-slide-bottom-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:drawerSlideBottom;animation-direction:reverse}.drawer-slide-bottom-enter-from{opacity:0;animation-timing-function:var(--ease-in-out)}.drawer-slide-bottom-leave-to{animation-timing-function:var(--ease-in-out)}.drawer-slide-left-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:drawerSlideLeft}.drawer-slide-left-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:drawerSlideLeft;animation-direction:reverse}.drawer-slide-left-enter-from{opacity:0;animation-timing-function:var(--ease-in-out)}.drawer-slide-left-leave-to{animation-timing-function:var(--ease-in-out)}.drawer-slide-right-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:drawerSlideRight}.drawer-slide-right-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:drawerSlideRight;animation-direction:reverse}.drawer-slide-right-enter-from{opacity:0;animation-timing-function:var(--ease-in-out)}.drawer-slide-right-leave-to{animation-timing-function:var(--ease-in-out)}@keyframes drawerSlideTop{0%{transform:translate(0,-100%);transform-origin:0 0;opacity:0}100%{transform:translate(0,0);transform-origin:0 0;opacity:1}}@keyframes drawerSlideBottom{0%{transform:translate(0,100%);transform-origin:100% 100%;opacity:0}100%{transform:translate(0,0);transform-origin:100% 100%;opacity:1}}@keyframes drawerSlideLeft{0%{transform:translate(-100%,0);transform-origin:0 0;opacity:0}100%{transform:translate(0,0);transform-origin:0 0;opacity:1}}@keyframes drawerSlideRight{0%{transform:translate(100%,0);transform-origin:0 0;opacity:0}100%{transform:translate(0,0);transform-origin:0 0;opacity:1}}
+:root,[data-theme-color]{--primary-color:var(--primary-9)}.uui-drawer{--drawer-padding:var(--space-6);--drawer-close-size:var(--space-4);--drawer-header-title-font-size:var(--font-size-lg);--drawer-title-line-height:var(--space-7);--drawer-footer-padding:var(--space-3) var(--space-6);--drawer-default-size:24rem;--drawer-large-size:40rem}.dark,.dark-theme{--drawer-component-background:var(--color-background);--drawer-box-shadow-color:var(--black-a6)}.uui-drawer{position:fixed;max-height:100%;overflow:hidden;background-color:var(--color-background);transition:transform var(--animation-time) var(--ease-out-circ);box-shadow:var(--shadow-lg);padding:var(--drawer-padding)}.uui-drawer-close{position:absolute;top:var(--space-4);right:var(--space-4);z-index:10;display:flex;align-items:center;justify-content:center;width:var(--drawer-close-size);height:var(--drawer-close-size);padding:0;border:0;outline:0;background-color:transparent;cursor:pointer;text-align:center;color:var(--default-font-color);transition:color var(--animation-time);opacity:.7;border-radius:var(--radius-md)}.uui-drawer-close-icon{font-size:var(--space-4)}.uui-drawer-close:active,.uui-drawer-close:hover{opacity:1;background-color:var(--color-background-secondary)}.uui-drawer-header .uui-drawer-header-title{margin:0;font-size:var(--drawer-header-title-font-size);font-weight:var(--font-weight-semibold);line-height:var(--drawer-title-line-height);margin-bottom:var(--space-2)}.uui-drawer-header .uui-drawer-header-description{font-size:var(--font-size-sm);color:var(--secondary-font-color);line-height:var(--space-5)}.uui-drawer-body{overflow-y:auto}.uui-drawer-footer{width:100%;padding:var(--drawer-footer-padding);position:absolute;bottom:0;left:0}.uui-drawer.uui-drawer-left,.uui-drawer.uui-drawer-right{width:var(--drawer-default-size);height:100%}.uui-drawer.uui-drawer-left.uui-drawer-large,.uui-drawer.uui-drawer-right.uui-drawer-large{width:var(--drawer-large-size)}.uui-drawer.uui-drawer-bottom,.uui-drawer.uui-drawer-top{width:100%;height:var(--drawer-default-size)}.uui-drawer.uui-drawer-bottom.uui-drawer-large,.uui-drawer.uui-drawer-top.uui-drawer-large{height:var(--drawer-large-size)}.uui-drawer-top{top:0;left:0;width:100%}.uui-drawer-right{top:0;right:0;bottom:0;height:100%}.uui-drawer-bottom{bottom:0;left:0;width:100%}.uui-drawer-left{top:0;bottom:0;left:0;height:100%}.drawer-slide-top-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:drawerSlideTop}.drawer-slide-top-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:drawerSlideTop;animation-direction:reverse}.drawer-slide-top-enter-from{opacity:0;animation-timing-function:var(--ease-in-out)}.drawer-slide-top-leave-to{animation-timing-function:var(--ease-in-out)}.drawer-slide-bottom-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:drawerSlideBottom}.drawer-slide-bottom-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:drawerSlideBottom;animation-direction:reverse}.drawer-slide-bottom-enter-from{opacity:0;animation-timing-function:var(--ease-in-out)}.drawer-slide-bottom-leave-to{animation-timing-function:var(--ease-in-out)}.drawer-slide-left-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:drawerSlideLeft}.drawer-slide-left-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:drawerSlideLeft;animation-direction:reverse}.drawer-slide-left-enter-from{opacity:0;animation-timing-function:var(--ease-in-out)}.drawer-slide-left-leave-to{animation-timing-function:var(--ease-in-out)}.drawer-slide-right-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:drawerSlideRight}.drawer-slide-right-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:drawerSlideRight;animation-direction:reverse}.drawer-slide-right-enter-from{opacity:0;animation-timing-function:var(--ease-in-out)}.drawer-slide-right-leave-to{animation-timing-function:var(--ease-in-out)}@keyframes drawerSlideTop{0%{transform:translate(0,-100%);transform-origin:0 0;opacity:0}100%{transform:translate(0,0);transform-origin:0 0;opacity:1}}@keyframes drawerSlideBottom{0%{transform:translate(0,100%);transform-origin:100% 100%;opacity:0}100%{transform:translate(0,0);transform-origin:100% 100%;opacity:1}}@keyframes drawerSlideLeft{0%{transform:translate(-100%,0);transform-origin:0 0;opacity:0}100%{transform:translate(0,0);transform-origin:0 0;opacity:1}}@keyframes drawerSlideRight{0%{transform:translate(100%,0);transform-origin:0 0;opacity:0}100%{transform:translate(0,0);transform-origin:0 0;opacity:1}}

package/styles/components/drawer/index.less

@@ -10,67 +10,68 @@
   position: fixed;
   max-height: 100%;
   overflow: hidden;
-  background-color: var(--drawer-component-background);
-  border-radius: var(--drawer-border-radius-base) 0 0 var(--drawer-border-radius-base);
-  transition: transform var(--drawer-transition-duration) var(--drawer-transition-timing);
+  background-color: var(--color-background);
+  transition: transform var(--animation-time) var(--ease-out-circ);
+  box-shadow: var(--shadow-lg);
+  padding: var(--drawer-padding);
 
-  &-header {
-    padding: var(--drawer-header-padding);
-    color: var(--drawer-text-color);
-    border-bottom: var(--border-width-base) var(--border-style-base) var(--drawer-border-split-color);
-    position: relative;
-    min-height: var(--drawer-close-size);
+  &-close {
+    position: absolute;
+    top: var(--space-4);
+    right: var(--space-4);
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--drawer-close-size);
+    height: var(--drawer-close-size);
+    padding: 0;
+    border: 0;
+    outline: 0;
+    background-color: transparent;
+    cursor: pointer;
+    text-align: center;
+    color: var(--default-font-color);
+    transition: color var(--animation-time);
+    opacity: 0.7;
+    border-radius: var(--radius-md);
+
+    &-icon {
+      font-size: var(--space-4);
+    }
+
+    &:active,
+    &:hover {
+      opacity: 1;
+      background-color: var(--color-background-secondary);
+    }
+  }
 
+  &-header {
     .@{drawer}-header-title {
       margin: 0;
       font-size: var(--drawer-header-title-font-size);
+      font-weight: var(--font-weight-semibold);
       line-height: var(--drawer-title-line-height);
-      padding-right: var(--drawer-title-padding-right);
+      margin-bottom: var(--space-2);
     }
-
-    .@{drawer}-close {
-      position: absolute;
-      top: 0;
-      right: 0;
-      z-index: 10;
-      display: block;
-      width: var(--drawer-close-size);
-      height: var(--drawer-close-size);
-      line-height: var(--drawer-close-size);
-      padding: 0;
-      border: 0;
-      outline: 0;
-      background-color: transparent;
-      cursor: pointer;
-      text-align: center;
-      color: var(--drawer-close-color);
-      transition: color var(--animation-time);
-
-      &-icon {
-        font-size: 22px;
-        font-weight: 700;
-        vertical-align: middle;
-      }
-
-      &:active,
-      &:hover {
-        color: var(--drawer-text-color);
-      }
+    .@{drawer}-header-description {
+      font-size: var(--font-size-sm);
+      color: var(--secondary-font-color);
+      line-height: var(--space-5);
     }
   }
 
   &-body {
-    padding: var(--drawer-padding);
     overflow-y: auto;
   }
 
   &-footer {
     width: 100%;
-    padding: var(--drawer-padding);
+    padding: var(--drawer-footer-padding);
     position: absolute;
     bottom: 0;
     left: 0;
-    border-top: var(--border-width-base) var(--border-style-base) var(--color-border-split);
   }
 
   &&-right,
@@ -99,8 +100,6 @@
     top: 0;
     left: 0;
     width: 100%;
-    box-shadow: var(--drawer-shadow-1-down);
-    border-radius: 0 0 var(--drawer-border-radius-base) var(--drawer-border-radius-base);
   }
 
   &-right {
@@ -108,15 +107,12 @@
     right: 0;
     bottom: 0;
     height: 100%;
-    box-shadow: var(--drawer-shadow-1-left);
   }
 
   &-bottom {
     bottom: 0;
     left: 0;
     width: 100%;
-    box-shadow: var(--drawer-shadow-1-up);
-    border-radius: var(--drawer-border-radius-base) var(--drawer-border-radius-base) 0 0;
   }
 
   &-left {
@@ -124,8 +120,6 @@
     bottom: 0;
     left: 0;
     height: 100%;
-    border-radius: 0 var(--drawer-border-radius-base) var(--drawer-border-radius-base) 0;
-    box-shadow: var(--drawer-shadow-1-right);
   }
 }
 

package/styles/components/drawer/var.less

@@ -1,24 +1,11 @@
 .@{drawer} {
-  --drawer-component-background: var(--color-background);
-  --drawer-transition-duration: var(--animation-time);
-  --drawer-transition-timing: var(--ease-out-circ);
-  --drawer-header-padding: var(--space-3) var(--space-6);
-  --drawer-text-color: var(--default-font-color);
-  --drawer-close-size: 48px;
-  --drawer-header-title-font-size: var(--font-size-base);
-  --drawer-title-line-height: 24px;
-  --drawer-title-padding-right: 24px;
-  --drawer-close-color: var(--secondary-font-color);
-  --drawer-padding: var(--space-4) var(--space-6);
-  --drawer-default-size: 378px;
-  --drawer-large-size: 736px;
-  --drawer-border-split-color: var(--color-border-split);
-  --drawer-box-shadow-color: var(--gray-a6);
-  --drawer-shadow-1-down: 0 2px 8px var(--drawer-box-shadow-color);
-  --drawer-shadow-1-left: -2px 0 8px var(--drawer-box-shadow-color);
-  --drawer-shadow-1-up: 0 -2px 8px var(--drawer-box-shadow-color);
-  --drawer-shadow-1-right: 2px 0 8px var(--drawer-box-shadow-color);
-  --drawer-border-radius-base: var(--control-radius);
+  --drawer-padding: var(--space-6);
+  --drawer-close-size: var(--space-4);
+  --drawer-header-title-font-size: var(--font-size-lg);
+  --drawer-title-line-height: var(--space-7);
+  --drawer-footer-padding: var(--space-3) var(--space-6);
+  --drawer-default-size: 24rem;
+  --drawer-large-size: 40rem;
 }
 
 .dark,

package/styles/components/slider/index.css

@@ -1 +1 @@
-:root,[data-theme-color]{--primary-color:var(--primary-9)}.uui-slider{--slider-margin:0;--slider-height:var(--control-height-base);--slider-track-size:var(--space-2);--slider-handle-size:var(--space-4);--slider-handle-border-width:2px;--slider-handle-hover-border-width:3px;--slider-handle-hover-size:calc(var(--slider-handle-size) + 2px);--slider-dot-size:var(--space-3);--slider-dot-border-width:1px;--slider-marks-font-size:var(--default-font-size);--slider-marks-height:var(--default-font-size);--slider-marks-top:var(--slider-handle-size);--slider-marks-bottom:auto;--slider-height-small:var(--control-height-small);--slider-track-size-small:var(--space-1);--slider-handle-size-small:var(--space-3);--slider-strong-track-size:var(--space-4);--slider-strong-track-border-radius:calc(var(--slider-strong-track-size) / 2);--slider-strong-handle-size:var(--slider-strong-track-size);--slider-strong-dot-size:var(--space-2);--slider-strong-track-size-small:var(--space-3);--slider-strong-dot-size-small:var(--space-1);--slider-track-background:var(--gray-a3);--slider-track-box-shadow:0 0 0 1px var(--gray-5) inset;--slider-track-disabled-background-color:var(--gray-2);--slider-track-disabled-box-shadow:0 0 0 1px var(--gray-3);--slider-range-background:var(--primary-color);--slider-range-disabeld-background-color:var(--gray-a3);--slider-mask-background:transparent;--slider-handle-background-color:white;--slider-handle-border-color:var(--primary-color);--slider-handle-hover-border-color:var(--primary-10);--slider-handle-disabled-border-color:var(--gray-3);--slider-dot-border-color:var(--gray-5);--slider-dot-active-border-color:var(--primary-color);--slider-dot-disabled-border-color:var(--gray-3);--slider-mark-text-color:var(--secondary-font-color);--slider-mark-active-text-color:var(--default-font-color);--slider-track-radius:var(--radius-base);--slider-handle-radius:50%}.uui-slider{cursor:pointer;height:var(--slider-height);margin:var(--slider-margin);padding:0 calc(var(--slider-handle-size)/ 2);display:flex;align-items:center;position:relative;touch-action:none}.uui-slider-track{background:var(--slider-track-background);box-shadow:var(--slider-track-box-shadow);border-radius:var(--slider-track-radius);height:var(--slider-track-size);position:relative;width:calc(100% + var(--slider-handle-size));margin:0 calc(-1 * var(--slider-handle-size)/ 2)}.uui-slider-range{background:var(--slider-range-background);border-radius:var(--slider-track-radius);height:var(--slider-track-size);position:absolute;top:0}.uui-slider-mask,.uui-slider-mask-start{background:var(--slider-mask-background);border-radius:var(--slider-track-radius);height:var(--slider-track-size);position:absolute;top:0}.uui-slider-content{position:relative;width:100%}.uui-slider-handle{background-color:var(--slider-handle-background-color);box-shadow:0 0 0 var(--slider-handle-border-width) var(--slider-handle-border-color) inset;border-radius:var(--slider-handle-radius);cursor:pointer;width:var(--slider-handle-size);height:var(--slider-handle-size);top:50%;position:absolute;transform:translate(-50%,-50%)}.uui-slider-handle:focus,.uui-slider-handle:hover{box-shadow:0 0 0 var(--slider-handle-hover-border-width) var(--slider-handle-hover-border-color) inset;height:var(--slider-handle-hover-size);width:var(--slider-handle-hover-size);outline:0}.uui-slider-with-marks{height:calc(var(--slider-handle-hover-size) + var(--slider-marks-height) * 2)}.uui-slider-mark{font-size:var(--default-font-size);top:var(--slider-marks-top);bottom:var(--slider-marks-bottom);position:absolute;width:100%}.uui-slider-mark-text{position:absolute;display:inline-flex;color:var(--slider-mark-text-color);line-height:var(--slider-marks-height);height:var(--slider-marks-height);justify-content:center;word-break:keep-all;cursor:pointer}.uui-slider-mark-text-active{color:var(--slider-mark-active-text-color)}.uui-slider-step{position:absolute;width:100%;height:var(--slider-dot-size);background:0 0;top:50%;transform:translateY(-50%);display:flex;align-items:center}.uui-slider-dot{position:absolute;width:var(--slider-dot-size);height:var(--slider-dot-size);background-color:var(--color-background);border:var(--slider-dot-border-width) solid var(--slider-dot-border-color);border-radius:50%;transform:translateX(-50%);cursor:pointer}.uui-slider-dot-active{border-color:var(--slider-dot-active-border-color)}.uui-slider-disabled{cursor:not-allowed}.uui-slider-disabled .uui-slider-track{background-color:var(--slider-track-disabled-background-color);box-shadow:var(--slider-track-disabled-box-shadow)}.uui-slider-disabled .uui-slider-range{background-color:var(--slider-range-disabeld-background-color)}.uui-slider-disabled .uui-slider-handle{box-shadow:0 0 0 var(--slider-handle-border-width) var(--slider-handle-disabled-border-color) inset;cursor:not-allowed}.uui-slider-disabled .uui-slider-dot{box-shadow:0 0 0 var(--slider-dot-border-width) var(--slider-dot-disabled-border-color) inset;cursor:not-allowed}.uui-slider-disabled .uui-slider-dot,.uui-slider-disabled .uui-slider-mark-text{cursor:not-allowed!important}.uui-slider-vertical{width:var(--slider-height);height:100%;margin:var(--slider-margin);padding:calc(var(--slider-handle-size)/ 2) 0;justify-content:center}.uui-slider-vertical .uui-slider-content{height:100%;width:auto}.uui-slider-vertical .uui-slider-track{width:var(--slider-track-size);left:0;height:calc(100% + var(--slider-handle-size));margin:calc(-1 * var(--slider-handle-size)/ 2) 0}.uui-slider-vertical .uui-slider-range{top:auto;width:var(--slider-track-size)}.uui-slider-vertical .uui-slider-mask{top:auto;width:var(--slider-track-size)}.uui-slider-vertical .uui-slider-handle{left:50%;top:auto;transform:translate(-50%,50%)}.uui-slider-vertical .uui-slider-step{width:var(--slider-dot-size);height:100%;left:50%;transform:translate(-50%,-50%)}.uui-slider-vertical .uui-slider-dot{transform:translateY(50%)}.uui-slider-vertical .uui-slider-mark{top:0;bottom:0;left:var(--slider-height);height:100%}.uui-slider-vertical .uui-slider-mark-text{left:0;white-space:nowrap;transform:translateY(50%);line-height:var(--slider-marks-height);height:var(--slider-marks-height)}.uui-slider-rtl .uui-slider-handle{transform:translate(50%,-50%)}.uui-slider-rtl .uui-slider-dot{transform:translateX(50%)}.uui-slider-size-small{--slider-height:var(--slider-height-small);--slider-track-size:var(--slider-track-size-small);--slider-handle-size:var(--slider-handle-size-small);--slider-handle-hover-size:calc(var(--slider-handle-size-small) + 2px)}.uui-slider-variant-strong{padding:0 calc(var(--slider-strong-handle-size)/ 2)}.uui-slider-variant-strong .uui-slider-track{height:var(--slider-strong-track-size);border-radius:var(--slider-strong-track-border-radius);box-shadow:none}.uui-slider-variant-strong .uui-slider-range{height:var(--slider-strong-track-size);border-radius:var(--slider-strong-track-border-radius)}.uui-slider-variant-strong .uui-slider-mask{height:var(--slider-strong-track-size);border-radius:var(--slider-strong-track-border-radius);background:radial-gradient(closest-side at calc(var(--slider-strong-track-size)/ 2) 50%,transparent calc(var(--slider-strong-track-size)/ 2),var(--slider-mask-background) calc(var(--slider-strong-track-size)/ 2))}.uui-slider-variant-strong .uui-slider-mask-start{height:var(--slider-strong-track-size);border-radius:var(--slider-strong-track-border-radius);background:radial-gradient(closest-side at calc(100% - var(--slider-strong-track-size)/ 2) 50%,transparent calc(var(--slider-strong-track-size)/ 2),var(--slider-mask-background) calc(var(--slider-strong-track-size)/ 2))}.uui-slider-variant-strong .uui-slider-handle{width:var(--slider-strong-handle-size);height:var(--slider-strong-handle-size);box-shadow:0 0 0 1px var(--slider-range-background) inset}.uui-slider-variant-strong .uui-slider-dot{width:var(--slider-strong-dot-size);height:var(--slider-strong-dot-size);box-shadow:none}.uui-slider-variant-strong .uui-slider-mark{top:var(--slider-marks-top);bottom:auto}.uui-slider-variant-strong .uui-slider-mark-text{height:var(--slider-marks-height);line-height:var(--slider-marks-height)}.uui-slider-variant-strong.uui-slider-vertical{width:var(--slider-height);height:100%;margin:var(--slider-margin);padding:calc(var(--slider-strong-handle-size)/ 2) 0;justify-content:center}.uui-slider-variant-strong.uui-slider-vertical .uui-slider-track{width:var(--slider-strong-track-size);height:100%}.uui-slider-variant-strong.uui-slider-vertical .uui-slider-range{width:var(--slider-strong-track-size)}.uui-slider-variant-strong.uui-slider-vertical .uui-slider-mask{width:var(--slider-strong-track-size)}.uui-slider-variant-strong.uui-slider-vertical .uui-slider-step{width:var(--slider-dot-size);height:100%}.uui-slider-variant-strong.uui-slider-vertical .uui-slider-dot{transform:translateY(50%)}.uui-slider-variant-strong.uui-slider-vertical .uui-slider-mark{top:0;bottom:0;left:var(--slider-height);height:100%}.uui-slider-variant-strong.uui-slider-vertical .uui-slider-mark-text{left:0;white-space:nowrap;transform:translateY(50%);line-height:var(--slider-marks-height);height:var(--slider-marks-height)}.uui-slider-variant-strong.uui-slider-size-small{--slider-height:var(--slider-height-small);--slider-strong-track-size:var(--slider-strong-track-size-small);--slider-strong-track-border-radius:calc(var(--slider-strong-track-size) / 2);--slider-strong-handle-size:calc(var(--slider-strong-track-size) - 2px)}.uui-slider-variant-soft .uui-slider-track{box-shadow:none}
+:root,[data-theme-color]{--primary-color:var(--primary-9)}.uui-slider{--slider-margin:0;--slider-height:var(--control-height-base);--slider-track-size:var(--space-1-5);--slider-handle-size:var(--space-4);--slider-track-background:var(--color-background-secondary);--slider-range-background:var(--primary-color);--slider-mask-background:transparent;--slider-handle-border-color:var(--primary-color);--slider-dot-size:var(--space-3);--slider-strong-track-size:var(--space-4);--slider-strong-handle-size:var(--slider-strong-track-size);--slider-strong-dot-size:var(--space-2)}.uui-slider{cursor:pointer;height:var(--slider-height);margin:var(--slider-margin);padding:0 calc(var(--slider-handle-size)/ 2);display:flex;align-items:center;position:relative;touch-action:none}.uui-slider-track{background:var(--slider-track-background);border-radius:var(--radius-full);height:var(--slider-track-size);position:relative;width:calc(100% + var(--slider-handle-size));margin:0 calc(-1 * var(--slider-handle-size)/ 2)}.uui-slider-range{background:var(--slider-range-background);border-radius:var(--radius-full);height:var(--slider-track-size);position:absolute;top:0}.uui-slider-mask,.uui-slider-mask-start{background:var(--slider-mask-background);border-radius:var(--radius-full);height:100%;position:absolute;top:0}.uui-slider-content{position:relative;width:100%}.uui-slider-handle{background-color:#fff;border:1px solid var(--slider-handle-border-color);box-shadow:var(--shadow-base);border-radius:var(--radius-full);cursor:pointer;width:var(--slider-handle-size);height:var(--slider-handle-size);top:50%;position:absolute;transform:translate(-50%,-50%)}.uui-slider-handle:focus,.uui-slider-handle:hover{transform:translate(-50%,-50%) scale(1.1)}.uui-slider-with-marks{--slider-height:var(--space-16)}.uui-slider-mark{font-size:var(--default-font-size);top:var(--slider-handle-size);bottom:auto;position:absolute;width:100%}.uui-slider-mark-text{position:absolute;display:inline-flex;color:var(--secondary-font-color);line-height:var(--space-5);height:var(--space-5);justify-content:center;word-break:keep-all;cursor:pointer}.uui-slider-mark-text-active{color:var(--default-font-color)}.uui-slider-step{position:absolute;width:100%;height:var(--slider-dot-size);background:0 0;top:50%;transform:translateY(-50%);display:flex;align-items:center}.uui-slider-dot{position:absolute;width:var(--slider-dot-size);height:var(--slider-dot-size);background-color:var(--color-background);border:1px solid var(--color-border-base);border-radius:var(--radius-full);transform:translateX(-50%);cursor:pointer}.uui-slider-dot-active{border-color:var(--slider-handle-border-color)}.uui-slider-disabled{cursor:not-allowed;opacity:var(--disabled-opacity)}.uui-slider-disabled .uui-slider-handle{pointer-events:none}.uui-slider-disabled .uui-slider-dot,.uui-slider-disabled .uui-slider-mark-text{cursor:not-allowed!important}.uui-slider-vertical{width:var(--slider-height);height:100%;margin:var(--slider-margin);padding:calc(var(--slider-handle-size)/ 2) 0;justify-content:center}.uui-slider-vertical .uui-slider-content{height:100%;width:auto}.uui-slider-vertical .uui-slider-track{width:var(--slider-track-size);left:0;height:calc(100% + var(--slider-handle-size));margin:calc(-1 * var(--slider-handle-size)/ 2) 0}.uui-slider-vertical .uui-slider-range{top:auto;width:var(--slider-track-size)}.uui-slider-vertical .uui-slider-mask{top:auto;width:var(--slider-track-size)}.uui-slider-vertical .uui-slider-handle{left:50%;top:auto;transform:translate(-50%,50%)}.uui-slider-vertical .uui-slider-step{width:var(--slider-dot-size);height:100%;left:50%;transform:translate(-50%,-50%)}.uui-slider-vertical .uui-slider-dot{transform:translateY(50%)}.uui-slider-vertical .uui-slider-mark{top:0;bottom:0;left:var(--slider-handle-size);height:100%}.uui-slider-vertical .uui-slider-mark-text{left:0;white-space:nowrap;transform:translateY(50%)}.uui-slider-rtl .uui-slider-handle{transform:translate(50%,-50%)}.uui-slider-rtl .uui-slider-dot{transform:translateX(50%)}.uui-slider-variant-strong{--slider-track-size:var(--slider-strong-track-size);--slider-handle-size:var(--slider-strong-handle-size);--slider-dot-size:var(--slider-strong-dot-size);padding:0 calc(var(--slider-strong-handle-size)/ 2)}.uui-slider-variant-strong .uui-slider-mask{background:radial-gradient(closest-side at calc(var(--slider-strong-track-size)/ 2) 50%,transparent calc(var(--slider-strong-track-size)/ 2),var(--slider-mask-background) calc(var(--slider-strong-track-size)/ 2))}.uui-slider-variant-strong .uui-slider-mask-start{background:radial-gradient(closest-side at calc(100% - var(--slider-strong-track-size)/ 2) 50%,transparent calc(var(--slider-strong-track-size)/ 2),var(--slider-mask-background) calc(var(--slider-strong-track-size)/ 2))}.uui-slider-variant-strong.uui-slider-vertical{padding:calc(var(--slider-strong-handle-size)/ 2) 0}