@koi-design/uxd-ui 12.1.36-beta.0

package/styles/components/drawer/index.less

@@ -0,0 +1,204 @@
+/* stylelint-disable less/no-duplicate-variables */
+@import '../../mixins/reset.less';
+@import '../../mixins/animation.less';
+@import '../../var.less';
+@import './var.less';
+
+@drawer: ~'@{css-prefix}-drawer';
+
+.@{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);
+
+  &-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);
+
+    .@{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);
+    }
+
+    .@{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);
+      }
+    }
+  }
+
+  &-body {
+    padding: var(--drawer-padding);
+    overflow-y: auto;
+  }
+
+  &-footer {
+    width: 100%;
+    padding: var(--drawer-padding);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    border-top: var(--border-width-base) var(--border-style-base) var(--border-split-color);
+  }
+
+  &&-right,
+  &&-left {
+    width: var(--drawer-default-size);
+    height: 100%;
+  }
+
+  &&-right&-large,
+  &&-left&-large {
+    width: var(--drawer-large-size);
+  }
+
+  &&-top,
+  &&-bottom {
+    width: 100%;
+    height: var(--drawer-default-size);
+  }
+
+  &&-top&-large,
+  &&-bottom&-large {
+    height: var(--drawer-large-size);
+  }
+
+  &-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);
+  }
+
+  &-right {
+    top: 0;
+    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 {
+    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-motion(@className, @keyframeName) {
+  .make-motion-reverse(@className, @keyframeName);
+
+  .@{className}-enter-from {
+    opacity: 0;
+    animation-timing-function: var(--ease-in-out);
+  }
+
+  .@{className}-leave-to {
+    animation-timing-function: var(--ease-in-out);
+  }
+}
+
+.drawer-slide-motion(~'drawer-slide-top', drawerSlideTop);
+.drawer-slide-motion(~'drawer-slide-bottom', drawerSlideBottom);
+.drawer-slide-motion(~'drawer-slide-left', drawerSlideLeft);
+.drawer-slide-motion(~'drawer-slide-right', drawerSlideRight);
+
+@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/var.less

@@ -0,0 +1,32 @@
+:root {
+  --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-5);
+  --drawer-text-color: var(--default-font-color);
+  --drawer-close-size: 48px;
+  --drawer-header-title-font-size: var(--font-size-3);
+  --drawer-title-line-height: 24px;
+  --drawer-title-padding-right: 24px;
+  --drawer-close-color: var(--secondary-font-color);
+  --drawer-padding: var(--space-4) var(--space-5);
+  --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);
+}
+
+.dark,
+.dark-theme {
+  --drawer-component-background: var(--color-background);
+  --drawer-box-shadow-color: var(--black-a6);
+}
+
+:root,
+[data-radius] {
+  --drawer-border-radius-base: var(--control-radius);
+}

package/styles/components/dropdown/index.css

@@ -0,0 +1 @@
+:root,[data-theme-color]{--primary-color:var(--primary-9)}:root{--dropdown-menu-min-width:128px;--dropdown-menu-padding-vertical:var(--space-2);--dropdown-menu-padding-horization:var(--space-2);--dropdown-menu-item-height:var(--control-height-base);--dropdown-menu-max-item-count:8;--dropdown-menu-max-height:calc(var(--dropdown-menu-item-height) * var(--dropdown-menu-max-item-count) + 2 * var(--dropdown-menu-padding-vertical));--dropdown-menu-item-padding:0 var(--space-3);--dropdown-menu-item-font-size:var(--control-font-size-base);--dropdown-menu-item-line-height:var(--control-height-base);--dropdown-menu-item-color:var(--default-font-color);--dropdown-menu-item-icon-color:var(--default-font-color);--dropdown-trigger-arrow-margin-left:var(--space-1);--dropdown-menu-group-padding:var(--space-2) var(--space-3);--dropdown-menu-group-font-color:var(--gray-9)}.dark,.dark-theme,:root,[data-color],[data-theme-color]{--dropdown-menu-item-hover-background-color:var(--primary-a3)}:root,[data-radius]{--dropdown-menu-radius:var(--dropdown-border-radius);--dropdown-menu-item-radius:var(--radius-3)}[data-radius=full]{--date-picker-border-radius:var(--radius-full)}.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-vertical) var(--dropdown-menu-padding-horization);list-style:none;min-width:var(--dropdown-menu-min-width);max-height:var(--dropdown-menu-max-height);background:var(--color-background);background-clip:padding-box;box-shadow:var(--dropdown-shadow);border-radius:var(--dropdown-border-radius);overflow-y:auto}.uui-dropdown-menu-item-group-title{padding:var(--dropdown-menu-group-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-vertical) var(--dropdown-menu-padding-horization)}.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;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{flex:0 0 var(--icon-width-base);line-height:var(--dropdown-menu-item-line-height);color:var(--dropdown-menu-item-icon-color)}.uui-dropdown-menu-item>a,.uui-dropdown-menu-item>span,.uui-dropdown-menu-submenu-title>a,.uui-dropdown-menu-submenu-title>span{flex:1 1 auto;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-9)}.uui-dropdown-menu-item:hover,.uui-dropdown-menu-submenu-title:hover{background-color:var(--dropdown-menu-item-hover-background-color)}.uui-dropdown-menu-item:active,.uui-dropdown-menu-submenu-title:active{font-weight:var(--font-wight-bold)}.uui-dropdown-menu-item-divider,.uui-dropdown-menu-submenu-title-divider{height:1px;margin:4px 0;overflow:hidden;line-height:0;background-color:var(--border-split-color)}.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]:not(.uui-dropdown-menu-item-disabled),.uui-dropdown-menu-item[data-color]:not(.uui-dropdown-menu-submenu-title-disabled),.uui-dropdown-menu-submenu-title[data-color]:not(.uui-dropdown-menu-item-disabled),.uui-dropdown-menu-submenu-title[data-color]:not(.uui-dropdown-menu-submenu-title-disabled){--dropdown-menu-item-color:var(--primary-9);color:var(--primary-9)}.uui-dropdown-menu-item[data-color]:not(.uui-dropdown-menu-item-disabled):hover,.uui-dropdown-menu-item[data-color]:not(.uui-dropdown-menu-submenu-title-disabled):hover,.uui-dropdown-menu-submenu-title[data-color]:not(.uui-dropdown-menu-item-disabled):hover,.uui-dropdown-menu-submenu-title[data-color]:not(.uui-dropdown-menu-submenu-title-disabled):hover{background-color:var(--primary-3)}.uui-dropdown-menu-item-disabled,.uui-dropdown-menu-submenu-title-disabled{--dropdown-menu-item-color:var(--disabled-font-color);color:var(--disabled-font-color)!important;cursor:not-allowed}.uui-dropdown-menu-item-disabled:hover,.uui-dropdown-menu-submenu-title-disabled:hover{color:var(--disabled-font-color);background-color:transparent;cursor:not-allowed}.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-vertical) var(--dropdown-menu-padding-horization);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

@@ -0,0 +1,184 @@
+@import '../../mixins/index.less';
+@import '../../var.less';
+@import './var.less';
+
+@dropdown-prefix-cls: ~'@{css-prefix}-dropdown';
+
+.@{dropdown-prefix-cls} {
+  .reset-component;
+
+  position: absolute;
+  z-index: var(--zindex-dropdown);
+  width: auto;
+
+  &-user-select-none {
+    user-select: none;
+  }
+
+
+
+  &-menu {
+    position: relative;
+    margin: 0;
+    padding: var(--dropdown-menu-padding-vertical) var(--dropdown-menu-padding-horization);
+    list-style: none;
+    min-width: var(--dropdown-menu-min-width);
+    max-height: var(--dropdown-menu-max-height);
+    background: var(--color-background);
+    background-clip: padding-box;
+    box-shadow: var(--dropdown-shadow);
+    border-radius: var(--dropdown-border-radius);
+    overflow-y: auto;
+
+    &-item-group-title {
+      padding: var(--dropdown-menu-group-padding);
+      color: var(--dropdown-menu-group-font-color);
+      transition: all 0.3s;
+    }
+
+    &-submenu-popup {
+      position: absolute;
+      z-index: var(--zindex-dropdown);
+
+      >.@{css-prefix}-dropdown-menu {
+        // transform-origin: 0 0;
+        list-style: none;
+        // margin-right: 0.3em;
+        // margin-left: 0.3em;
+        padding: var(--dropdown-menu-padding-vertical) var(--dropdown-menu-padding-horization);
+      }
+    }
+
+    &-item,
+    &-submenu-title {
+      margin: 0;
+      padding: var(--dropdown-menu-item-padding);
+      font-weight: normal;
+      font-size: var(--dropdown-menu-item-font-size);
+      line-height: var(--dropdown-menu-item-line-height);
+      display: flex;
+      white-space: nowrap;
+      cursor: pointer;
+      transition: all 0.3s;
+      border-radius: var(--dropdown-menu-item-radius);
+
+      .@{css-prefix}-icon {
+        flex: 0 0 var(--icon-width-base);
+        line-height: var(--dropdown-menu-item-line-height);
+        color: var(--dropdown-menu-item-icon-color);
+      }
+
+      >span,
+      >a {
+        flex: 1 1 auto;
+        color: var(--dropdown-menu-item-color);
+      }
+
+      >a:hover {
+        text-decoration: none;
+      }
+
+      &-selected,
+      &-selected>a {
+        color: var(--primary-9);
+      }
+
+      &:hover {
+        background-color: var(--dropdown-menu-item-hover-background-color);
+      }
+
+      &:active {
+        font-weight: var(--font-wight-bold);
+      }
+
+
+
+      &-divider {
+        height: 1px;
+        margin: 4px 0;
+        overflow: hidden;
+        line-height: 0;
+        background-color: var(--border-split-color);
+      }
+
+      .@{dropdown-prefix-cls}-menu-submenu-arrow {
+        flex: 0 0 var(--icon-width-base);
+        font-size: var(--icon-font-size);
+        line-height: var(--dropdown-menu-item-line-height);
+
+        .@{css-prefix}-icon {
+          color: var(--dropdown-menu-item-icon-color);
+          font-style: normal;
+        }
+      }
+
+      &[data-color]:not(&-disabled) {
+        --dropdown-menu-item-color: var(--primary-9);
+
+        color: var(--primary-9);
+
+        &:hover {
+          background-color: var(--primary-3);
+        }
+      }
+
+      &-disabled {
+        --dropdown-menu-item-color: var(--disabled-font-color);
+
+        color: var(--disabled-font-color) !important;
+        cursor: not-allowed;
+
+        &:hover {
+          color: var(--disabled-font-color);
+          background-color: transparent;
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    &-item-group-list {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    &-submenu-vertical {
+      position: relative;
+    }
+
+    &-submenu-vertical>& {
+      position: absolute;
+      top: 0;
+      left: 100%;
+      min-width: 100%;
+      margin-left: 4px;
+      transform-origin: 0 0;
+    }
+  }
+
+  &-container {
+    margin: 0;
+    padding: var(--dropdown-menu-padding-vertical) var(--dropdown-menu-padding-horization);
+    background: var(--color-background);
+    background-clip: padding-box;
+    box-shadow: var(--dropdown-shadow);
+    border-radius: var(--dropdown-border-radius);
+    overflow: auto;
+  }
+
+  &-trigger {
+    a& {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    &-arrow {
+      margin-left: var(--dropdown-trigger-arrow-margin-left);
+      transition: all var(--animation-time) ease-in-out;
+    }
+
+    &-open &-arrow {
+      transform: rotate(180deg);
+    }
+  }
+}

package/styles/components/dropdown/var.less

@@ -0,0 +1,36 @@
+:root {
+  --dropdown-menu-min-width: 128px;
+  --dropdown-menu-padding-vertical: var(--space-2);
+  --dropdown-menu-padding-horization: var(--space-2);
+  --dropdown-menu-item-height: var(--control-height-base);
+  --dropdown-menu-max-item-count: 8;
+  --dropdown-menu-max-height: calc(var(--dropdown-menu-item-height) * var(--dropdown-menu-max-item-count) + 2 * var(--dropdown-menu-padding-vertical));
+  --dropdown-menu-item-padding: 0 var(--space-3);
+  --dropdown-menu-item-font-size: var(--control-font-size-base);
+  --dropdown-menu-item-line-height: var(--control-height-base);
+  --dropdown-menu-item-color: var(--default-font-color);
+  --dropdown-menu-item-icon-color: var(--default-font-color);
+  --dropdown-trigger-arrow-margin-left: var(--space-1);
+  --dropdown-menu-group-padding: var(--space-2) var(--space-3);
+  --dropdown-menu-group-font-color: var(--gray-9);
+
+}
+
+
+:root,
+[data-theme-color],
+[data-color],
+.dark,
+.dark-theme {
+  --dropdown-menu-item-hover-background-color: var(--primary-a3);
+}
+
+:root,
+[data-radius] {
+  --dropdown-menu-radius: var(--dropdown-border-radius);
+  --dropdown-menu-item-radius: var(--radius-3);
+}
+
+[data-radius='full'] {
+  --date-picker-border-radius: var(--radius-full);
+}

package/styles/components/empty/index.css

@@ -0,0 +1 @@
+:root,[data-theme-color]{--primary-color:var(--primary-9)}:root{--empty-image-size:128px;--empty-image-size-small:64px;--empty-image-size-large:172px;--empty-description-font-size:var(--default-font-size);--empty-image-padding-vertical:var(--space-2);--empty-footer-padding-vertical:var(--space-4)}.uui-empty{text-align:center}.uui-empty-image{padding:var(--empty-image-padding-vertical) 0}.uui-empty-image .uui-icon{font-size:var(--empty-image-size)}.uui-empty-image img{width:var(--empty-image-size)}.uui-empty-description{font-size:var(--empty-description-font-size)}.uui-empty-footer{padding:var(--empty-footer-padding-vertical) 0}.uui-empty-large .uui-empty-image .uui-icon{font-size:var(--empty-image-size-large)}.uui-empty-large .uui-empty-image img{width:var(--empty-image-size-large)}.uui-empty-small .uui-empty-image .uui-icon{font-size:var(--empty-image-size-small)}.uui-empty-small .uui-empty-image img{width:var(--empty-image-size-small)}

package/styles/components/empty/index.less

@@ -0,0 +1,54 @@
+@import '../../mixins/index.less';
+@import '../../var.less';
+@import './var.less';
+
+@empty-prefix-cls: ~'@{css-prefix}-empty';
+
+
+.@{empty-prefix-cls} {
+  text-align: center;
+
+  &-image {
+    padding: var(--empty-image-padding-vertical) 0;
+
+    .@{iconfont-css-prefix} {
+      font-size: var(--empty-image-size);
+    }
+
+    img {
+      width: var(--empty-image-size);
+    }
+  }
+
+  &-description {
+    font-size: var(--empty-description-font-size);
+  }
+
+  &-footer {
+    padding: var(--empty-footer-padding-vertical) 0;
+  }
+
+  &-large {
+    .@{empty-prefix-cls}-image {
+      .@{iconfont-css-prefix} {
+        font-size: var(--empty-image-size-large);
+      }
+
+      img {
+        width: var(--empty-image-size-large);
+      }
+    }
+  }
+
+  &-small {
+    .@{empty-prefix-cls}-image {
+      .@{iconfont-css-prefix} {
+        font-size: var(--empty-image-size-small);
+      }
+
+      img {
+        width: var(--empty-image-size-small);
+      }
+    }
+  }
+}

package/styles/components/empty/var.less

@@ -0,0 +1,8 @@
+:root {
+  --empty-image-size: 128px;
+  --empty-image-size-small: 64px;
+  --empty-image-size-large: 172px;
+  --empty-description-font-size: var(--default-font-size);
+  --empty-image-padding-vertical: var(--space-2);
+  --empty-footer-padding-vertical: var(--space-4);
+}

package/styles/components/form/index.css

@@ -0,0 +1 @@
+:root,[data-theme-color]{--primary-color:var(--primary-9)}:root{--form-item-label-font-size:var(--default-font-size);--form-item-margin-bottom:var(--space-5);--form-item-inline-space:var(--space-4);--form-item-line-height:var(--control-height-base);--form-item-label-color:var(--secondary-font-color);--form-item-label-wrap-line-height:1.1;--form-item-label-margin-right:var(--space-2);--form-item-label-required-margin-right:var(--space-1);--form-item-error-message-color:var(--error-9);--form-item-error-message-font-size:var(--default-font-size);--form-item-error-message-line-height:var(--form-item-margin-bottom);--form-item-error-message-margin-top:0}:root,[data-radius]{--form-item-border-radius:var(--radius-3)}.uui-form{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)}.uui-form legend{display:block;width:100%;margin-bottom:20px;padding:0;color:var(--secondary-font-color);font-size:var(--font-size-3);line-height:inherit;border:0;border-bottom:var(--border-width-base) var(--border-style-base) var(--border-color-base)}.uui-form label{font-size:var(--form-item-label-font-size)}.uui-form input[type=search]{box-sizing:border-box}.uui-form input[type=checkbox],.uui-form input[type=radio]{line-height:normal}.uui-form input[type=range]{display:block;width:100%}.uui-form select[multiple],.uui-form select[size]{height:auto}.uui-form input[type=checkbox]:focus,.uui-form input[type=file]:focus,.uui-form input[type=radio]:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.uui-form output{display:block;padding-top:15px;color:var(--default-font-color);font-size:var(--default-font-size);line-height:var(--default-line-height)}.uui-form-item{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);display:flex;margin-bottom:var(--form-item-margin-bottom);align-items:flex-start}.uui-form-item label{position:relative}.uui-form-item label>.uui-icon{font-size:var(--icon-font-size)}.uui-form-item-label{overflow:hidden;line-height:var(--form-item-line-height);white-space:nowrap;text-align:right;justify-content:flex-end}.uui-form-item-label-wrap>label{display:block;white-space:break-spaces;line-height:var(--form-item-label-wrap-line-height)}.uui-form-item-label-left{text-align:left;justify-content:flex-start}.uui-form-item-label>label{color:var(--form-item-label-color);position:relative;margin-right:var(--form-item-label-margin-right)}.uui-form-item-label>label::after{content:' '}.uui-form-item-label-colon>label::after{content:':'}.uui-form-item-label-required>label::before{display:inline-block;margin-right:var(--form-item-label-required-margin-right);color:var(--required-color);font-size:var(--form-item-label-font-size);font-family:var(--required-font-family);line-height:1;content:'*'}.uui-form-item-content{position:relative;line-height:var(--form-item-line-height);min-height:var(--form-item-line-height);display:block;align-items:center}.uui-form-item-content:has(.uui-form-item-content-inner){display:flex}.uui-form-item-content-inner{flex:1;position:relative}.uui-form-item-content-icon{font-size:16px;width:var(--space-5);text-align:center;animation:zoomIn .3s ease-in-out;pointer-events:none;align-self:flex-start}.uui-form-item-content.has-error .uui-form-item-content-icon{color:var(--error-9)}.uui-form-item-content.has-success .uui-form-item-content-icon{color:var(--success-9)}.uui-form-item-content.has-warning .uui-form-item-content-icon{color:var(--warning-9)}.uui-form-item-error-message{position:absolute;top:100%;left:0;min-height:var(--form-item-error-message-line-height);margin-top:var(--form-item-error-message-margin-top);color:var(--form-item-error-message-color);font-size:var(--form-item-error-message-font-size);line-height:var(--form-item-error-message-line-height);transition:color .3s ease-in-out}.uui-form-item-in-form-item{margin-bottom:0}.uui-form-inline{display:flex;align-items:flex-start;flex-wrap:wrap}.uui-form-inline .uui-form-item{margin-right:var(--form-item-inline-space);justify-content:flex-start}.uui-form-inline .uui-form-item,.uui-form-inline .uui-form-item-content,.uui-form-inline .uui-form-item-label{display:inline-flex;align-items:center}.uui-form-label-top .uui-form-item,.uui-form-label-top .uui-form-item-label{display:block}.uui-form-label-top .uui-form-item-label{text-align:left}.uui-form-label-top .uui-form-item-label:empty{display:none}.uui-form-label-top .uui-form-item-label>label{margin-right:0}.uui-form-size-small{--form-item-line-height:var(--control-height-small);--form-item-margin-bottom:var(--space-4);--form-item-error-message-font-size:var(--font-size-1);--form-item-error-message-line-height:var(--form-item-margin-bottom);--form-item-label-font-size:var(--font-size-1);--icon-font-size:var(--font-size-2)}.uui-form-size-large{--form-item-line-height:var(--control-height-large);--form-item-label-font-size:var(--font-size-3);--icon-font-size:var(--font-size-3)}.uui-form-rtl,[data-direction=rtl] .uui-form,[dir=rtl] .uui-form{direction:rtl}.uui-form-rtl .uui-form-item-label label,[data-direction=rtl] .uui-form .uui-form-item-label label,[dir=rtl] .uui-form .uui-form-item-label label{margin-right:auto;margin-left:var(--form-item-label-margin-right)}.show-error-enter-active{animation-duration:var(--animation-time);animation-fill-mode:both;animation-name:uuiShowErrorIn}.show-error-leave-active{animation-duration:var(--animation-time);animation-fill-mode:both;animation-name:uuiShowErrorOut}.show-error-appear,.show-error-enter{opacity:0;animation-timing-function:var(--ease-in-out)}.show-error-leave{animation-timing-function:var(--ease-in-out)}@keyframes uuiShowErrorIn{0%{transform:translateY(-5px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes uuiShowErrorOut{to{transform:translateY(-5px);opacity:0}}