@koi-design/uxd-ui 14.0.3 → 14.0.5

package/lib/components/base/ResizeObserver.js

@@ -29,7 +29,7 @@ var ResizeObserver$1 = vue.defineComponent({
       if (stateWidth !== _width || stateHeight !== _height) {
         stateWidth = _width;
         stateHeight = _height;
-        emit("resize", { widht: _width, height: _height });
+        emit("resize", { target, width: _width, height: _height });
       }
     };
     const destroyObserver = () => {

package/lib/components/base/ResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeObserver.js","sources":["../../../../src/components/base/ResizeObserver.ts"],"sourcesContent":["import 'resize-observer-polyfill';\nimport { ref, onMounted, onUpdated, onBeforeUnmount, defineComponent } from 'vue';\nimport { cloneVNode, findDOMNode } from '../../utils/slots';\n\nexport default defineComponent({\n  name: 'ResizeObserver',\n  props: {\n    disabled: {\n      type: Boolean,\n      default: false\n    }\n  },\n  emits: ['resize'],\n  setup(props, { emit, slots }) {\n    const root = ref(null);\n    let resizeObserver: ResizeObserver | null = null;\n    let currentElement: HTMLElement | null = null;\n    let stateWidth = 0;\n    let stateHeight = 0;\n\n    const handleResize = (elems: ResizeObserverEntry[]) => {\n      const [{ target }] = elems;\n      const { width, height } = target.getBoundingClientRect();\n      const _width = Math.floor(width);\n      const _height = Math.floor(height);\n      if (stateWidth !== _width || stateHeight !== _height) {\n        stateWidth = _width;\n        stateHeight = _height;\n        emit('resize', { widht: _width, height: _height });\n      }\n    };\n\n    const destroyObserver = () => {\n      if (resizeObserver) {\n        resizeObserver.disconnect();\n        resizeObserver = null;\n      }\n    };\n\n    const onCompontentUpdated = () => {\n      if (props.disabled) {\n        destroyObserver();\n        return;\n      }\n      const element = findDOMNode(root.value);\n      if (currentElement !== element) {\n        destroyObserver();\n        currentElement = element;\n      }\n      if (!resizeObserver && element && ResizeObserver) {\n        resizeObserver = new ResizeObserver(handleResize);\n        resizeObserver.observe(element);\n      }\n    };\n\n    onMounted(() => {\n      onCompontentUpdated();\n    });\n\n    onUpdated(() => {\n      onCompontentUpdated();\n    });\n\n    onBeforeUnmount(() => {\n      destroyObserver();\n    });\n\n    const getRenderChild = () => {\n      const chidlren = slots.default?.();\n      if (chidlren && chidlren?.length > 0) {\n        return cloneVNode(chidlren[0], {\n          ref: root\n        });\n      }\n      return null;\n    };\n    return () => getRenderChild();\n  }\n});\n"],"names":["defineComponent","slots","ref","findDOMNode","cloneVNode"],"mappings":";;;;;;;;AAIA,uBAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AACX;AACF,EACA,OAAO,CAAC,QAAQ;AAAA,EAChB,MAAM,OAAO,EAAE,aAAMC,WAAS;AAC5B,UAAM,OAAOC,QAAI,IAAI;AACrB,QAAI,iBAAwC;AAC5C,QAAI,iBAAqC;AACzC,QAAI,aAAa;AACjB,QAAI,cAAc;AAElB,UAAM,eAAe,CAAC,UAAiC;AACrD,YAAM,CAAC,EAAE,QAAQ,IAAI;AACrB,YAAM,EAAE,OAAO,WAAW,OAAO;AACjC,YAAM,SAAS,KAAK,MAAM,KAAK;AAC/B,YAAM,UAAU,KAAK,MAAM,MAAM;AACjC,UAAI,eAAe,UAAU,gBAAgB,SAAS;AACpD,qBAAa;AACb,sBAAc;AACd,aAAK,UAAU,EAAE,OAAO,QAAQ,QAAQ,SAAS;AAAA;AACnD;AAGF,UAAM,kBAAkB,MAAM;AAC5B,UAAI,gBAAgB;AAClB,uBAAe;AACf,yBAAiB;AAAA;AACnB;AAGF,UAAM,sBAAsB,MAAM;AAChC,UAAI,MAAM,UAAU;AAClB;AACA;AAAA;AAEF,YAAM,UAAUC,kBAAY,KAAK,KAAK;AACtC,UAAI,mBAAmB,SAAS;AAC9B;AACA,yBAAiB;AAAA;AAEnB,UAAI,CAAC,kBAAkB,WAAW,gBAAgB;AAChD,yBAAiB,IAAI,eAAe,YAAY;AAChD,uBAAe,QAAQ,OAAO;AAAA;AAChC;AAGF,kBAAU,MAAM;AACd;AAAoB,KACrB;AAED,kBAAU,MAAM;AACd;AAAoB,KACrB;AAED,wBAAgB,MAAM;AACpB;AAAgB,KACjB;AAED,UAAM,iBAAiB,MAAM;AAnEjC;AAoEM,YAAM,YAAW,aAAM,YAAN;AACjB,UAAI,aAAY,qCAAU,UAAS,GAAG;AACpC,eAAOC,eAAW,SAAS,IAAI;AAAA,UAC7B,KAAK;AAAA,SACN;AAAA;AAEH,aAAO;AAAA;AAET,WAAO,MAAM;AAAe;AAEhC,CAAC;;;;"}
+{"version":3,"file":"ResizeObserver.js","sources":["../../../../src/components/base/ResizeObserver.ts"],"sourcesContent":["import 'resize-observer-polyfill';\nimport { ref, onMounted, onUpdated, onBeforeUnmount, defineComponent } from 'vue';\nimport { cloneVNode, findDOMNode } from '../../utils/slots';\n\nexport default defineComponent({\n  name: 'ResizeObserver',\n  props: {\n    disabled: {\n      type: Boolean,\n      default: false\n    }\n  },\n  emits: ['resize'],\n  setup(props, { emit, slots }) {\n    const root = ref(null);\n    let resizeObserver: ResizeObserver | null = null;\n    let currentElement: HTMLElement | null = null;\n    let stateWidth = 0;\n    let stateHeight = 0;\n\n    const handleResize = (elems: ResizeObserverEntry[]) => {\n      const [{ target }] = elems;\n      const { width, height } = target.getBoundingClientRect();\n      const _width = Math.floor(width);\n      const _height = Math.floor(height);\n      if (stateWidth !== _width || stateHeight !== _height) {\n        stateWidth = _width;\n        stateHeight = _height;\n        emit('resize', { target, width: _width, height: _height });\n      }\n    };\n\n    const destroyObserver = () => {\n      if (resizeObserver) {\n        resizeObserver.disconnect();\n        resizeObserver = null;\n      }\n    };\n\n    const onCompontentUpdated = () => {\n      if (props.disabled) {\n        destroyObserver();\n        return;\n      }\n      const element = findDOMNode(root.value);\n      if (currentElement !== element) {\n        destroyObserver();\n        currentElement = element;\n      }\n      if (!resizeObserver && element && ResizeObserver) {\n        resizeObserver = new ResizeObserver(handleResize);\n        resizeObserver.observe(element);\n      }\n    };\n\n    onMounted(() => {\n      onCompontentUpdated();\n    });\n\n    onUpdated(() => {\n      onCompontentUpdated();\n    });\n\n    onBeforeUnmount(() => {\n      destroyObserver();\n    });\n\n    const getRenderChild = () => {\n      const chidlren = slots.default?.();\n      if (chidlren && chidlren?.length > 0) {\n        return cloneVNode(chidlren[0], {\n          ref: root\n        });\n      }\n      return null;\n    };\n    return () => getRenderChild();\n  }\n});\n"],"names":["defineComponent","slots","ref","findDOMNode","cloneVNode"],"mappings":";;;;;;;;AAIA,uBAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AACX;AACF,EACA,OAAO,CAAC,QAAQ;AAAA,EAChB,MAAM,OAAO,EAAE,aAAMC,WAAS;AAC5B,UAAM,OAAOC,QAAI,IAAI;AACrB,QAAI,iBAAwC;AAC5C,QAAI,iBAAqC;AACzC,QAAI,aAAa;AACjB,QAAI,cAAc;AAElB,UAAM,eAAe,CAAC,UAAiC;AACrD,YAAM,CAAC,EAAE,QAAQ,IAAI;AACrB,YAAM,EAAE,OAAO,WAAW,OAAO;AACjC,YAAM,SAAS,KAAK,MAAM,KAAK;AAC/B,YAAM,UAAU,KAAK,MAAM,MAAM;AACjC,UAAI,eAAe,UAAU,gBAAgB,SAAS;AACpD,qBAAa;AACb,sBAAc;AACd,aAAK,UAAU,EAAE,QAAQ,OAAO,QAAQ,QAAQ,SAAS;AAAA;AAC3D;AAGF,UAAM,kBAAkB,MAAM;AAC5B,UAAI,gBAAgB;AAClB,uBAAe;AACf,yBAAiB;AAAA;AACnB;AAGF,UAAM,sBAAsB,MAAM;AAChC,UAAI,MAAM,UAAU;AAClB;AACA;AAAA;AAEF,YAAM,UAAUC,kBAAY,KAAK,KAAK;AACtC,UAAI,mBAAmB,SAAS;AAC9B;AACA,yBAAiB;AAAA;AAEnB,UAAI,CAAC,kBAAkB,WAAW,gBAAgB;AAChD,yBAAiB,IAAI,eAAe,YAAY;AAChD,uBAAe,QAAQ,OAAO;AAAA;AAChC;AAGF,kBAAU,MAAM;AACd;AAAoB,KACrB;AAED,kBAAU,MAAM;AACd;AAAoB,KACrB;AAED,wBAAgB,MAAM;AACpB;AAAgB,KACjB;AAED,UAAM,iBAAiB,MAAM;AAnEjC;AAoEM,YAAM,YAAW,aAAM,YAAN;AACjB,UAAI,aAAY,qCAAU,UAAS,GAAG;AACpC,eAAOC,eAAW,SAAS,IAAI;AAAA,UAC7B,KAAK;AAAA,SACN;AAAA;AAEH,aAAO;AAAA;AAET,WAAO,MAAM;AAAe;AAEhC,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koi-design/uxd-ui",
-  "version": "14.0.3",
+  "version": "14.0.5",
   "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/dropdown/index.css

@@ -1 +1 @@
-:root,[data-theme-color]{--primary-color:var(--primary-9)}.uui-dropdown{--dropdown-trigger-arrow-margin-left:var(--space-1);--dropdown-menu-min-width:128px;--dropdown-menu-padding:var(--space-1);--dropdown-menu-item-padding:var(--space-1-5) var(--space-2);--dropdown-menu-item-font-size:var(--default-font-size);--dropdown-menu-item-line-height:var(--line-height-5);--dropdown-menu-item-color:var(--default-font-color);--dropdown-menu-item-icon-color:var(--default-font-color);--dropdown-menu-group-font-color:var(--secondary-font-color);--dropdown-menu-item-radius:var(--radius-sm)}.uui-dropdown{box-sizing:border-box;margin:0;padding:0;color:var(--default-font-color);font-size:var(--default-font-size);font-variant:var(--default-font-variant);line-height:var(--default-line-height);list-style:none;font-feature-settings:var(--default-font-feature-settings);position:absolute;z-index:var(--zindex-dropdown);width:auto}.uui-dropdown-user-select-none{-webkit-user-select:none;user-select:none}.uui-dropdown-menu{position:relative;margin:0;padding:var(--dropdown-menu-padding);list-style:none;min-width:var(--dropdown-menu-min-width);background:var(--color-background);background-clip:padding-box;box-shadow:var(--dropdown-shadow);border:1px solid var(--color-border-split);border-radius:var(--dropdown-border-radius)}.uui-dropdown-menu-item-group-title{padding:var(--dropdown-menu-item-padding);color:var(--dropdown-menu-group-font-color);transition:all .3s}.uui-dropdown-menu-submenu-popup{position:absolute;z-index:var(--zindex-dropdown)}.uui-dropdown-menu-submenu-popup>.uui-dropdown-menu{list-style:none;padding:var(--dropdown-menu-padding)}.uui-dropdown-menu-item,.uui-dropdown-menu-submenu-title{margin:0;padding:var(--dropdown-menu-item-padding);font-weight:400;font-size:var(--dropdown-menu-item-font-size);line-height:var(--dropdown-menu-item-line-height);display:flex;justify-content:space-between;align-items:center;white-space:nowrap;cursor:pointer;transition:all .3s;border-radius:var(--dropdown-menu-item-radius)}.uui-dropdown-menu-item .uui-icon,.uui-dropdown-menu-submenu-title .uui-icon{font-size:var(--icon-font-size)}.uui-dropdown-menu-item>a,.uui-dropdown-menu-item>span,.uui-dropdown-menu-submenu-title>a,.uui-dropdown-menu-submenu-title>span{color:var(--dropdown-menu-item-color)}.uui-dropdown-menu-item>a:hover,.uui-dropdown-menu-submenu-title>a:hover{text-decoration:none}.uui-dropdown-menu-item-selected,.uui-dropdown-menu-item-selected>a,.uui-dropdown-menu-submenu-title-selected,.uui-dropdown-menu-submenu-title-selected>a{color:var(--primary-color)}.uui-dropdown-menu-item:hover,.uui-dropdown-menu-submenu-title:hover{background-color:var(--dropdown-item-hover-background-color)}.uui-dropdown-menu-item-divider,.uui-dropdown-menu-submenu-title-divider{height:1px;margin:4px 0;overflow:hidden;line-height:0;background-color:var(--color-border-split)}.uui-dropdown-menu-item .uui-dropdown-menu-submenu-arrow,.uui-dropdown-menu-submenu-title .uui-dropdown-menu-submenu-arrow{flex:0 0 var(--icon-width-base);font-size:var(--icon-font-size);line-height:var(--dropdown-menu-item-line-height)}.uui-dropdown-menu-item .uui-dropdown-menu-submenu-arrow .uui-icon,.uui-dropdown-menu-submenu-title .uui-dropdown-menu-submenu-arrow .uui-icon{color:var(--dropdown-menu-item-icon-color);font-style:normal}.uui-dropdown-menu-item[data-color=red]:not(.uui-dropdown-menu-item-disabled),.uui-dropdown-menu-item[data-color=red]:not(.uui-dropdown-menu-submenu-title-disabled),.uui-dropdown-menu-submenu-title[data-color=red]:not(.uui-dropdown-menu-item-disabled),.uui-dropdown-menu-submenu-title[data-color=red]:not(.uui-dropdown-menu-submenu-title-disabled){--dropdown-menu-item-color:var(--error-color);color:var(--error-color)}.uui-dropdown-menu-item-disabled,.uui-dropdown-menu-submenu-title-disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.uui-dropdown-menu-item-disabled:hover,.uui-dropdown-menu-submenu-title-disabled:hover{background-color:transparent}.uui-dropdown-menu-item-group-list{margin:0;padding:0;list-style:none}.uui-dropdown-menu-submenu-vertical{position:relative}.uui-dropdown-menu-submenu-vertical>.uui-dropdown-menu{position:absolute;top:0;left:100%;min-width:100%;margin-left:4px;transform-origin:0 0}.uui-dropdown-container{margin:0;padding:var(--dropdown-menu-padding);background:var(--color-background);background-clip:padding-box;box-shadow:var(--dropdown-shadow);border-radius:var(--dropdown-border-radius);overflow:auto}a.uui-dropdown-trigger{display:inline-flex;align-items:center}.uui-dropdown-trigger-arrow{margin-left:var(--dropdown-trigger-arrow-margin-left);transition:all var(--animation-time) ease-in-out}.uui-dropdown-trigger-open .uui-dropdown-trigger-arrow{transform:rotate(180deg)}
+:root,[data-theme-color]{--primary-color:var(--primary-9)}.uui-dropdown{--dropdown-trigger-arrow-margin-left:var(--space-1);--dropdown-menu-min-width:128px;--dropdown-menu-padding:var(--space-1);--dropdown-menu-item-padding:var(--space-1-5) var(--space-2);--dropdown-menu-item-font-size:var(--default-font-size);--dropdown-menu-item-line-height:var(--line-height-5);--dropdown-menu-item-color:var(--default-font-color);--dropdown-menu-item-icon-color:var(--default-font-color);--dropdown-menu-group-font-color:var(--secondary-font-color);--dropdown-menu-item-radius:var(--radius-sm)}.uui-dropdown{box-sizing:border-box;margin:0;padding:0;color:var(--default-font-color);font-size:var(--default-font-size);font-variant:var(--default-font-variant);line-height:var(--default-line-height);list-style:none;font-feature-settings:var(--default-font-feature-settings);position:absolute;z-index:var(--zindex-dropdown);width:auto}.uui-dropdown-user-select-none{-webkit-user-select:none;user-select:none}.uui-dropdown-menu{position:relative;margin:0;padding:var(--dropdown-menu-padding);list-style:none;min-width:var(--dropdown-menu-min-width);background:var(--color-background);background-clip:padding-box;box-shadow:var(--dropdown-shadow);border:1px solid var(--color-border-split);border-radius:var(--dropdown-border-radius)}.uui-dropdown-menu-item-group-title{padding:var(--dropdown-menu-item-padding);color:var(--dropdown-menu-group-font-color);transition:all .3s}.uui-dropdown-menu-submenu-popup{position:absolute;z-index:var(--zindex-dropdown)}.uui-dropdown-menu-submenu-popup>.uui-dropdown-menu{list-style:none;padding:var(--dropdown-menu-padding)}.uui-dropdown-menu-item,.uui-dropdown-menu-submenu-title{margin:0;padding:var(--dropdown-menu-item-padding);font-weight:400;font-size:var(--dropdown-menu-item-font-size);line-height:var(--dropdown-menu-item-line-height);display:flex;justify-content:space-between;align-items:center;white-space:nowrap;cursor:pointer;transition:all .3s;border-radius:var(--dropdown-menu-item-radius)}.uui-dropdown-menu-item .uui-icon,.uui-dropdown-menu-submenu-title .uui-icon{font-size:var(--icon-font-size)}.uui-dropdown-menu-item>*,.uui-dropdown-menu-submenu-title>*{color:var(--dropdown-menu-item-color)}.uui-dropdown-menu-item>a:hover,.uui-dropdown-menu-submenu-title>a:hover{text-decoration:none}.uui-dropdown-menu-item-selected,.uui-dropdown-menu-item-selected>*,.uui-dropdown-menu-submenu-title-selected,.uui-dropdown-menu-submenu-title-selected>*{color:var(--primary-color)}.uui-dropdown-menu-item:hover,.uui-dropdown-menu-submenu-title:hover{background-color:var(--dropdown-item-hover-background-color)}.uui-dropdown-menu-item-divider,.uui-dropdown-menu-submenu-title-divider{height:1px;margin:4px 0;overflow:hidden;line-height:0;background-color:var(--color-border-split)}.uui-dropdown-menu-item .uui-dropdown-menu-submenu-arrow,.uui-dropdown-menu-submenu-title .uui-dropdown-menu-submenu-arrow{flex:0 0 var(--icon-width-base);font-size:var(--icon-font-size);line-height:var(--dropdown-menu-item-line-height)}.uui-dropdown-menu-item .uui-dropdown-menu-submenu-arrow .uui-icon,.uui-dropdown-menu-submenu-title .uui-dropdown-menu-submenu-arrow .uui-icon{color:var(--dropdown-menu-item-icon-color);font-style:normal}.uui-dropdown-menu-item[data-color=red]:not(.uui-dropdown-menu-item-disabled),.uui-dropdown-menu-item[data-color=red]:not(.uui-dropdown-menu-submenu-title-disabled),.uui-dropdown-menu-submenu-title[data-color=red]:not(.uui-dropdown-menu-item-disabled),.uui-dropdown-menu-submenu-title[data-color=red]:not(.uui-dropdown-menu-submenu-title-disabled){--dropdown-menu-item-color:var(--error-color);color:var(--error-color)}.uui-dropdown-menu-item-disabled,.uui-dropdown-menu-submenu-title-disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.uui-dropdown-menu-item-disabled:hover,.uui-dropdown-menu-submenu-title-disabled:hover{background-color:transparent}.uui-dropdown-menu-item-group-list{margin:0;padding:0;list-style:none}.uui-dropdown-menu-submenu-vertical{position:relative}.uui-dropdown-menu-submenu-vertical>.uui-dropdown-menu{position:absolute;top:0;left:100%;min-width:100%;margin-left:4px;transform-origin:0 0}.uui-dropdown-container{margin:0;padding:var(--dropdown-menu-padding);background:var(--color-background);background-clip:padding-box;box-shadow:var(--dropdown-shadow);border-radius:var(--dropdown-border-radius);overflow:auto}a.uui-dropdown-trigger{display:inline-flex;align-items:center}.uui-dropdown-trigger-arrow{margin-left:var(--dropdown-trigger-arrow-margin-left);transition:all var(--animation-time) ease-in-out}.uui-dropdown-trigger-open .uui-dropdown-trigger-arrow{transform:rotate(180deg)}

package/styles/components/dropdown/index.less

@@ -66,8 +66,7 @@
         font-size: var(--icon-font-size);
       }
 
-      > span,
-      > a {
+      > * {
         color: var(--dropdown-menu-item-color);
       }
 
@@ -76,7 +75,7 @@
       }
 
       &-selected,
-      &-selected > a {
+      &-selected > * {
         color: var(--primary-color);
       }
 

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}