@kdcloudjs/kdesign 1.2.0 → 1.2.3

package/es/config-provider/compDefaultProps.js

@@ -397,7 +397,8 @@ var compDefaultProps = {
     borderType: 'bordered',
     minMark: '[',
     maxMark: ']',
-    mustInScope: false
+    mustInScope: false,
+    zeroShow: true
   },
   BaseData: {
     mode: 'single',

package/es/drawer/drawer.d.ts

@@ -34,6 +34,7 @@ export interface IDrawerProps {
     titleStyle?: CSSProperties;
     visible?: boolean;
     width?: string | number;
+    height?: string | number;
     zIndex?: string | number;
 }
 declare const Drawer: React.ForwardRefExoticComponent<IDrawerProps & React.RefAttributes<unknown>>;

package/es/drawer/drawer.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
-import _endsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/ends-with";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import React, { useContext, useEffect, useState, useCallback, createRef } from 'react';
+import React, { useContext, useEffect, useState, useCallback, createRef, useRef } from 'react';
 import { Icon } from '../index';
 import ReactDOM from 'react-dom';
 import { tuple } from '../_utils/type';
@@ -20,22 +19,23 @@ export var PlacementTypes = tuple('top', 'right', 'bottom', 'left');
 var relativePostionTypes = ['relative', 'absolute', 'fixed'];
 var horizontalPlacements = ['left', 'right'];
 var verticalPlacements = ['top', 'bottom'];
-var documentBody = document.body;
-
-function transformSize(size, placement) {
-  if (typeof size === 'string') {
-    // 只考虑px 或者 %
-    devWarning(!(_endsWithInstanceProperty(size).call(size, 'px') && _endsWithInstanceProperty(size).call(size, '%')), 'drawer', "cannot calculate drawer size: width | height for '".concat(size, "' besides px or %"));
-    if (placement === 'right' || placement === 'bottom') return size || 0;
-    return size ? '-' + size : 0;
-  }
-
-  if (placement === 'right' || placement === 'bottom') return (size || 0) + 'px';
-  return ('-' + size || 0) + 'px';
-}
+var documentBody = document.body; // function transformSize(size: string | number, placement: string) {
+//   if (typeof size === 'string') {
+//     // 只考虑px 或者 %
+//     devWarning(
+//       !(size.endsWith('px') && size.endsWith('%')),
+//       'drawer',
+//       `cannot calculate drawer size: width | height for '${size}' besides px or %`,
+//     )
+//     if (placement === 'right' || placement === 'bottom') return size || 0
+//     return size ? '-' + size : 0
+//   }
+//   if (placement === 'right' || placement === 'bottom') return (size || 0) + 'px'
+//   return ('-' + size || 0) + 'px'
+// }
 
 var InternalDrawer = function InternalDrawer(props, ref) {
-  var _classNames, _context2, _classNames2;
+  var _classNames, _context2, _context3, _classNames2;
 
   var _useContext = useContext(ConfigContext),
       getPrefixCls = _useContext.getPrefixCls,
@@ -63,6 +63,7 @@ var InternalDrawer = function InternalDrawer(props, ref) {
       footerClassName = drawerProps.footerClassName,
       visible = drawerProps.visible,
       width = drawerProps.width,
+      height = drawerProps.height,
       headerStyle = drawerProps.headerStyle,
       headerClassName = drawerProps.headerClassName,
       zindex = drawerProps.zIndex,
@@ -85,6 +86,7 @@ var InternalDrawer = function InternalDrawer(props, ref) {
 
 
   var containerRef = ref || /*#__PURE__*/createRef();
+  var contentRef = useRef(null);
   devWarning(PlacementTypes.indexOf(placement) === -1, 'drawer', "cannot found drawer type '".concat(placement, "'"));
   var drawerContainer = typeof getContainer === 'function' ? getContainer() : getContainer;
   var isAtOriginalPlace = drawerContainer === false;
@@ -167,17 +169,50 @@ var InternalDrawer = function InternalDrawer(props, ref) {
       closeDrawer();
     }
   }, [maskClosable, closeDrawer]);
+  var getHorizontalBoolAndPlacementName = useCallback(function () {
+    var isHorizontal = placement === 'left' || placement === 'right';
+    var placementName = "translate".concat(isHorizontal ? 'X' : 'Y');
+    return {
+      isHorizontal: isHorizontal,
+      placementName: placementName
+    };
+  }, [placement]);
+  var setDraerTransform = useCallback(function (_isOpen, _placementName, _value) {
+    if (!contentRef.current) return;
+    contentRef.current.style.transform = '';
+  }, [contentRef]);
+  useEffect(function () {
+    var _getHorizontalBoolAnd = getHorizontalBoolAndPlacementName(),
+        isHorizontal = _getHorizontalBoolAnd.isHorizontal,
+        placementName = _getHorizontalBoolAnd.placementName;
+
+    var contentValue = contentRef.current ? contentRef.current.getBoundingClientRect()[isHorizontal ? 'width' : 'height'] : 0;
+    var value = (isHorizontal ? width : height) || contentValue;
+
+    if (visible) {
+      setDraerTransform(visible, placementName, value);
+    }
+  }, [contentRef, getHorizontalBoolAndPlacementName, height, setDraerTransform, visible, width]);
   var drawerClasses = classNames(drawerPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(drawerPrefixCls, "-hide"), !visible), _defineProperty(_classNames, "".concat(drawerPrefixCls, "-active"), visible), _defineProperty(_classNames, "".concat(drawerPrefixCls, "-not-at-body"), !isBody), _classNames));
   var headerClass = "".concat(drawerPrefixCls, "-header");
 
+  var _getHorizontalBoolAnd2 = getHorizontalBoolAndPlacementName(),
+      placementName = _getHorizontalBoolAnd2.placementName;
+
+  var placementPos = placement === 'left' || placement === 'top' ? '-100%' : '100%';
+  var transform = visible ? '' : _concatInstanceProperty(_context2 = "".concat(placementName, "(")).call(_context2, placementPos, ")");
+
   var containerStyle = _extends(_defineProperty({}, placement, 0), _includesInstanceProperty(horizontalPlacements).call(horizontalPlacements, placement) ? {
-    width: currentWidth,
-    transform: "translateX(".concat(visible ? 0 : transformSize(currentWidth, placement), ")")
-  } : {});
+    width: width,
+    transform: transform
+  } : {
+    transform: transform
+  });
 
   var container = /*#__PURE__*/React.createElement("div", {
-    className: classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(drawerPrefixCls, "-container-box"), true), _defineProperty(_classNames2, "".concat(drawerPrefixCls, "-has-container-box"), drawerContainer), _defineProperty(_classNames2, _concatInstanceProperty(_context2 = "".concat(drawerPrefixCls, "-container-")).call(_context2, placement), true), _classNames2)),
-    style: containerStyle
+    className: classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(drawerPrefixCls, "-container-box"), true), _defineProperty(_classNames2, "".concat(drawerPrefixCls, "-has-container-box"), drawerContainer), _defineProperty(_classNames2, _concatInstanceProperty(_context3 = "".concat(drawerPrefixCls, "-container-")).call(_context3, placement), true), _classNames2)),
+    style: containerStyle,
+    ref: contentRef
   }, (title || closable) && /*#__PURE__*/React.createElement("div", {
     className: classNames(headerClass, headerClassName),
     style: headerStyle

package/es/dropdown/style/index.css

@@ -151,7 +151,7 @@
 .kd-dropdown.arrow::before {
   position: absolute;
   z-index: -2;
-  background: transparent;
+  background: var(--kd-g-color-background, #fff);
   border-style: solid;
   border-width: var(--arrowSize);
   -webkit-transform: rotate(45deg);
@@ -176,7 +176,7 @@
   top: var(--arrowSpill);
   -webkit-box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
           box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
-  border-color: var(--kd-g-color-white, #fff) transparent transparent var(--kd-g-color-white, #fff);
+  border-color: var(--kd-g-color-background, #fff) transparent transparent var(--kd-g-color-background, #fff);
 }
 .kd-dropdown.arrow.topLeft::before,
 .kd-dropdown.arrow.top::before,
@@ -185,7 +185,7 @@
   bottom: var(--arrowSpill);
   -webkit-box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
           box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
-  border-color: transparent var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff) transparent;
+  border-color: transparent var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff) transparent;
 }
 .kd-dropdown.arrow.leftTop::before,
 .kd-dropdown.arrow.left::before,
@@ -194,7 +194,7 @@
   right: var(--arrowSpill);
   -webkit-box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
           box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
-  border-color: var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff) transparent transparent;
+  border-color: var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff) transparent transparent;
 }
 .kd-dropdown.arrow.rightTop::before,
 .kd-dropdown.arrow.right::before,
@@ -203,7 +203,7 @@
   left: var(--arrowSpill);
   -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
           box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
-  border-color: transparent transparent var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff);
+  border-color: transparent transparent var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff);
 }
 .kd-dropdown-menu {
   max-height: var(--kd-c-dropdown-menu-sizing-max-height, 336px);

package/es/form/Field.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _typeof from "@babel/runtime-corejs3/helpers/typeof";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 
 var __rest = this && this.__rest || function (s, e) {
@@ -50,7 +51,7 @@ var generateEventHandler = function generateEventHandler(handler, validateTrigge
 };
 
 var Field = function Field(props) {
-  var _classnames, _context;
+  var _classnames, _context2;
 
   devwarning(! /*#__PURE__*/React.isValidElement(props.children), 'Form.Item', 'Children of Form.Item is not a valid element');
   devwarning(!props.name, 'Form.Item', 'Form.Item must have a name');
@@ -71,7 +72,8 @@ var Field = function Field(props) {
       getFieldError = fieldContext.getFieldError,
       getInternalHooks = fieldContext.getInternalHooks,
       vertical = fieldContext.vertical,
-      getDefaultValue = fieldContext.getDefaultValue;
+      getDefaultValue = fieldContext.getDefaultValue,
+      local = fieldContext.local;
 
   var _getInternalHooks = getInternalHooks(INTERNAL_HOOK_KEY),
       registerField = _getInternalHooks.registerField,
@@ -126,8 +128,11 @@ var Field = function Field(props) {
   if (Array.isArray(rules) && !rules.some(function (rule) {
     return Object.prototype.hasOwnProperty.call(rule, 'required');
   }) && required) {
+    var _context;
+
     rules.push({
-      required: true
+      required: true,
+      message: _concatInstanceProperty(_context = "".concat(local && local.requiredMessage)).call(_context, label)
     });
   }
 
@@ -243,7 +248,7 @@ var Field = function Field(props) {
   }), /*#__PURE__*/React.createElement(FieldWrapper, {
     width: wrapperWidth,
     validateMessage: validateMessage
-  }, _mapInstanceProperty(_context = toArray(children)).call(_context, function (child, index) {
+  }, _mapInstanceProperty(_context2 = toArray(children)).call(_context2, function (child, index) {
     var keys = mergeProps(_extends(_extends({
       disabled: disabled,
       value: value

package/es/form/Form.js

@@ -31,9 +31,13 @@ var Form = function Form(props, ref) {
   var _useContext = useContext(ConfigContext),
       getPrefixCls = _useContext.getPrefixCls,
       prefixCls = _useContext.prefixCls,
-      userDefaultProps = _useContext.compDefaultProps;
+      userDefaultProps = _useContext.compDefaultProps,
+      globalLocale = _useContext.locale;
 
   var formProps = getCompProps('Form', userDefaultProps, props);
+  var formLang = globalLocale.getCompLangMsg({
+    componentName: 'Form'
+  });
 
   var children = formProps.children,
       defaultValues = formProps.defaultValues,
@@ -85,9 +89,10 @@ var Form = function Form(props, ref) {
       labelAlign: labelAlign,
       labelWidth: labelWidth,
       wrapperWidth: wrapperWidth,
+      local: formLang,
       vertical: layout === 'vertical'
     });
-  }, [formInstance, labelAlign, labelWidth, wrapperWidth, layout]);
+  }, [formInstance, labelAlign, labelWidth, wrapperWidth, layout, formLang]);
 
   var handleSubmit = function handleSubmit(evt) {
     evt.preventDefault();

package/es/form/hooks/useForm.js

@@ -206,6 +206,7 @@ var FormStore = /*#__PURE__*/_createClass(function FormStore() {
     }
 
     _this.store = newStore;
+    _this.errorMessages = {};
 
     _this.notifyObservers(prevStore, null, 'reset');
   };

package/es/form/interface.d.ts

@@ -25,11 +25,16 @@ export interface FormInstance<Values = any> {
     submit: () => void;
     getInternalHooks: (secret: string) => InternalHooks | null;
 }
+export interface InnerLocale {
+    locale: string;
+    requiredMessage: string;
+}
 export interface InternalFormInstance extends FormInstance {
     labelWidth?: string | number;
     labelAlign?: LabelAlign;
     wrapperWidth?: string | number;
     vertical?: boolean;
+    local?: InnerLocale;
     getInternalHooks: (key: string) => InternalHooks | null;
 }
 export declare type Stores = {

package/es/input-number/inputNumber.d.ts

@@ -21,6 +21,7 @@ export interface InputNumberProps extends InputProps {
     mustInPrecisionScope?: boolean;
     stepOption?: StepOption;
     stepperrref?: any;
+    formatter?: (value: string | undefined) => string;
 }
 declare const InputNumber: React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<unknown>>;
 export default InputNumber;

package/es/input-number/inputNumber.js

@@ -54,7 +54,8 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
       maxMark = inputNumberProps.maxMark,
       prefix = inputNumberProps.prefix,
       suffix = inputNumberProps.suffix,
-      others = __rest(inputNumberProps, ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "prefix", "suffix"]);
+      formatter = inputNumberProps.formatter,
+      others = __rest(inputNumberProps, ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "prefix", "suffix", "formatter"]);
 
   var initVal = value === undefined ? defaultValue : value;
 
@@ -334,7 +335,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
   });
   return /*#__PURE__*/React.createElement(Input, _extends({}, others, {
     ref: inputNumberRef,
-    value: inputValue,
+    value: inputValue ? (formatter === null || formatter === void 0 ? void 0 : formatter(inputValue)) || inputValue : inputValue,
     prefix: prefix,
     suffix: suffix,
     onChange: handleChange,

package/es/locale/locale.d.ts

@@ -84,6 +84,7 @@ declare class LocaleCache {
         'Filter.and': string;
         'Filter.settings': string;
         'Filter.schemeNamePlaceholder': string;
+        'Form.requiredMessage': string;
         'DatePicker.placeholder': string;
         'DatePicker.yearPlaceholder': string;
         'DatePicker.quarterPlaceholder': string;

package/es/locale/zh-CN.d.ts

@@ -58,6 +58,7 @@ declare const locale: {
     'Filter.and': string;
     'Filter.settings': string;
     'Filter.schemeNamePlaceholder': string;
+    'Form.requiredMessage': string;
     'DatePicker.placeholder': string;
     'DatePicker.yearPlaceholder': string;
     'DatePicker.quarterPlaceholder': string;

package/es/locale/zh-CN.js

@@ -62,7 +62,8 @@ var locale = _extends(_extends({
   'Filter.query': '查询',
   'Filter.and': '并且',
   'Filter.settings': '设置',
-  'Filter.schemeNamePlaceholder': '请输入方案名称'
+  'Filter.schemeNamePlaceholder': '请输入方案名称',
+  'Form.requiredMessage': '请输入您的'
 });
 
 export default locale;

package/es/menu/subMenu.js

@@ -208,6 +208,11 @@ var SubMenu = function SubMenu(props) {
 
     // 保存路径
     info.keyPath = _concatInstanceProperty(_context = info.keyPath).call(_context, [keyValue]);
+
+    if (triggerSubMenuAction === 'click' && mode === 'vertical') {
+      closeSubMenu();
+    }
+
     restProps.handleOnClick && restProps.handleOnClick(info);
   }; // 子菜单展开收缩
 
@@ -357,8 +362,7 @@ var SubMenu = function SubMenu(props) {
   return /*#__PURE__*/React.createElement("li", _extends({
     ref: subMenuRef,
     className: classNames(prefixCls, className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-collapsed"), collapsed), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-hover"), !disabled && isVisible), _classNames2)),
-    key: keyValue,
-    title: title
+    key: keyValue
   }, mouseEvent, {
     style: style
   }), /*#__PURE__*/React.createElement("div", {

package/es/popconfirm/style/index.css

@@ -142,7 +142,7 @@
 .kd-popconfirm.arrow::before {
   position: absolute;
   z-index: -2;
-  background: transparent;
+  background: var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff));
   border-style: solid;
   border-width: var(--arrowSize);
   -webkit-transform: rotate(45deg);
@@ -167,7 +167,7 @@
   top: var(--arrowSpill);
   -webkit-box-shadow: -2px -2px calc(16px - 1px) rgba(0, 0, 0, 0.1);
           box-shadow: -2px -2px calc(16px - 1px) rgba(0, 0, 0, 0.1);
-  border-color: var(--kd-g-color-white, #fff) transparent transparent var(--kd-g-color-white, #fff);
+  border-color: var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) transparent transparent var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff));
 }
 .kd-popconfirm.arrow.topLeft::before,
 .kd-popconfirm.arrow.top::before,
@@ -176,7 +176,7 @@
   bottom: var(--arrowSpill);
   -webkit-box-shadow: 3px 3px calc(16px + 1px) rgba(0, 0, 0, 0.15);
           box-shadow: 3px 3px calc(16px + 1px) rgba(0, 0, 0, 0.15);
-  border-color: transparent var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff) transparent;
+  border-color: transparent var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) transparent;
 }
 .kd-popconfirm.arrow.leftTop::before,
 .kd-popconfirm.arrow.left::before,
@@ -185,7 +185,7 @@
   right: var(--arrowSpill);
   -webkit-box-shadow: 3px 0 16px rgba(0, 0, 0, 0.12), 0 -2px 16px rgba(204, 149, 149, 0.12);
           box-shadow: 3px 0 16px rgba(0, 0, 0, 0.12), 0 -2px 16px rgba(204, 149, 149, 0.12);
-  border-color: var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff) transparent transparent;
+  border-color: var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) transparent transparent;
 }
 .kd-popconfirm.arrow.rightTop::before,
 .kd-popconfirm.arrow.right::before,
@@ -194,7 +194,7 @@
   left: var(--arrowSpill);
   -webkit-box-shadow: 0 3px 16px rgba(0, 0, 0, 0.1), -2px 0 16px rgba(0, 0, 0, 0.1);
           box-shadow: 0 3px 16px rgba(0, 0, 0, 0.1), -2px 0 16px rgba(0, 0, 0, 0.1);
-  border-color: transparent transparent var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff);
+  border-color: transparent transparent var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff));
 }
 .kd-popconfirm-content {
   -webkit-box-sizing: border-box;

package/es/radio/radio.js

@@ -104,7 +104,9 @@ var InternalRadio = function InternalRadio(props, ref) {
     }, /*#__PURE__*/React.createElement("input", _extends({
       type: "radio",
       className: "".concat(radioPrefixCls, "-input")
-    }, radioProps)), children !== undefined ? /*#__PURE__*/React.createElement("span", null, children) : null)
+    }, radioProps)), children !== undefined ? /*#__PURE__*/React.createElement("span", {
+      className: "".concat(radioPrefixCls, "-text")
+    }, children) : null)
   );
 };
 

package/es/radio/style/index.css

@@ -115,9 +115,10 @@
           font-feature-settings: 'tnum';
   position: relative;
   display: inline-block;
-  padding-left: var(--kd-c-radio-square-sizing-width-height, 13px);
+  padding-left: var(--kd-c-radio-square-sizing-width-height, 14px);
   margin-right: var(--kd-c-radio-spacing-margin-right, 8px);
   white-space: nowrap;
+  text-overflow: ellipsis;
   cursor: pointer;
   vertical-align: middle;
   color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
@@ -127,8 +128,8 @@
   position: absolute;
   top: 50%;
   left: 0;
-  height: var(--kd-c-radio-square-sizing-width-height, 13px);
-  width: var(--kd-c-radio-square-sizing-width-height, 13px);
+  height: var(--kd-c-radio-square-sizing-width-height, 14px);
+  width: var(--kd-c-radio-square-sizing-width-height, 14px);
   content: '';
   border-radius: 50%;
   -webkit-box-sizing: border-box;
@@ -146,8 +147,8 @@
   position: absolute;
   top: 50%;
   left: 2px;
-  width: calc(var(--kd-c-radio-square-sizing-width-height, 13px) - 4px);
-  height: calc(var(--kd-c-radio-square-sizing-width-height, 13px) - 4px);
+  width: calc(var(--kd-c-radio-square-sizing-width-height, 14px) - 4px);
+  height: calc(var(--kd-c-radio-square-sizing-width-height, 14px) - 4px);
   content: '';
   border-radius: 50%;
   background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
@@ -165,7 +166,10 @@
   opacity: 0;
 }
 .kd-radio > span {
-  padding: 0 6px 0 var(--kd-c-radio-spacing-padding-left, 6px);
+  padding: 0 6px 0 var(--kd-c-radio-spacing-padding-left, 4px);
+}
+.kd-radio:hover {
+  color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-radio:hover::before {
   border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
@@ -174,15 +178,15 @@
   border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-radio-checked:focus-within::before {
-  -webkit-box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
-          box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
+  -webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
+          box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
 }
 .kd-radio-checked::after {
   position: absolute;
   top: 50%;
   left: 2px;
-  width: calc(var(--kd-c-radio-square-sizing-width-height, 13px) - 4px);
-  height: calc(var(--kd-c-radio-square-sizing-width-height, 13px) - 4px);
+  width: calc(var(--kd-c-radio-square-sizing-width-height, 14px) - 4px);
+  height: calc(var(--kd-c-radio-square-sizing-width-height, 14px) - 4px);
   content: '';
   border-radius: 50%;
   background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
@@ -213,6 +217,13 @@
   -webkit-animation: none;
           animation: none;
 }
+.kd-radio-disabled.kd-radio-checked,
+.kd-radio-disabled:hover.kd-radio-checked {
+  color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
+}
+.kd-radio-text {
+  line-height: 1.5;
+}
 .kd-radio-square {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -222,15 +233,17 @@
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
+  white-space: nowrap;
+  text-overflow: ellipsis;
   position: relative;
   display: inline-block;
   height: var(--kd-c-radio-square-sizing-height, 32px);
-  padding-top: var(--kd-c-radio-square-spacing-padding-vertical, 0px);
-  padding-right: var(--kd-c-radio-square-spacing-padding-horizontal, 20px);
-  padding-bottom: var(--kd-c-radio-square-spacing-padding-vertical, 0px);
-  padding-left: var(--kd-c-radio-square-spacing-padding-horizontal, 20px);
+  padding-top: var(--kd-c-radio-square-spacing-padding-vertical, 6px);
+  padding-right: var(--kd-c-radio-square-spacing-padding-horizontal, 12px);
+  padding-bottom: var(--kd-c-radio-square-spacing-padding-vertical, 6px);
+  padding-left: var(--kd-c-radio-square-spacing-padding-horizontal, 12px);
   margin-right: var(--kd-c-radio-spacing-margin-right, 8px);
-  line-height: calc(var(--kd-c-radio-square-sizing-height, 32px) - (var(--kd-c-radio-square-spacing-padding-vertical, 0px) * 2) - (var(--kd-c-radio-radius-border-width, 1px) * 2));
+  line-height: calc(var(--kd-c-radio-square-sizing-height, 32px) - (var(--kd-c-radio-square-spacing-padding-vertical, 6px) * 2) - (var(--kd-c-radio-radius-border-width, 1px) * 2));
   vertical-align: middle;
   color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
   font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
@@ -279,8 +292,8 @@
   border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-radio-square-checked:focus-within {
-  -webkit-box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
-          box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
+  -webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
+          box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
 }
 .kd-radio-square-checked::after {
   position: absolute;
@@ -314,6 +327,13 @@
   -webkit-animation: none;
           animation: none;
 }
+.kd-radio-square-disabled.kd-radio-square-checked,
+.kd-radio-square-disabled:hover.kd-radio-square-checked {
+  color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
+}
+.kd-radio-square-text {
+  line-height: 1.5;
+}
 .kd-radio-button {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -326,11 +346,11 @@
   position: relative;
   display: inline-block;
   height: var(--kd-c-radio-square-sizing-height, 32px);
-  padding-top: var(--kd-c-radio-square-spacing-padding-vertical, 0px);
-  padding-right: var(--kd-c-radio-square-spacing-padding-horizontal, 20px);
-  padding-bottom: var(--kd-c-radio-square-spacing-padding-vertical, 0px);
-  padding-left: var(--kd-c-radio-square-spacing-padding-horizontal, 20px);
-  line-height: calc(var(--kd-c-radio-square-sizing-height, 32px) - (var(--kd-c-radio-square-spacing-padding-vertical, 0px) * 2) - (var(--kd-c-radio-radius-border-width, 1px) * 2));
+  padding-top: var(--kd-c-radio-square-spacing-padding-vertical, 6px);
+  padding-right: var(--kd-c-radio-square-spacing-padding-horizontal, 12px);
+  padding-bottom: var(--kd-c-radio-square-spacing-padding-vertical, 6px);
+  padding-left: var(--kd-c-radio-square-spacing-padding-horizontal, 12px);
+  line-height: calc(var(--kd-c-radio-square-sizing-height, 32px) - (var(--kd-c-radio-square-spacing-padding-vertical, 6px) * 2) - (var(--kd-c-radio-radius-border-width, 1px) * 2));
   vertical-align: middle;
   color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
   font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
@@ -381,8 +401,8 @@
   background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-radio-button-checked:focus-within {
-  -webkit-box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
-          box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
+  -webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
+          box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
 }
 .kd-radio-button-checked:hover {
   color: var(--kd-c-radio-color-background, var(--kd-g-color-white, #fff));
@@ -411,3 +431,10 @@
   border-color: var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   cursor: not-allowed;
 }
+.kd-radio-button-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  line-height: 1.5;
+}