@sdata/web-vue 1.3.0 → 1.4.0

package/dist/sd.css

@@ -8,7 +8,7 @@
 html {
   line-height: 1.15;
   /* 1 */
-  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
   /* 2 */
   -webkit-font-smoothing: antialiased;
   /* chrome、safari */
@@ -176,7 +176,7 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
-  -webkit-appearance: button;
+  appearance: auto;
 }
 /**
  * Remove the inner border and padding in Firefox.
@@ -260,14 +260,14 @@ textarea {
 [type='search'] {
   outline-offset: -2px;
   /* 2 */
-  -webkit-appearance: textfield;
+  appearance: textfield;
   /* 1 */
 }
 /**
  * Remove the inner padding in Chrome and Safari on macOS.
  */
 [type='search']::-webkit-search-decoration {
-  -webkit-appearance: none;
+  appearance: none;
 }
 /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
@@ -276,7 +276,7 @@ textarea {
 ::-webkit-file-upload-button {
   font: inherit;
   /* 2 */
-  -webkit-appearance: button;
+  appearance: auto;
   /* 1 */
 }
 /* Interactive
@@ -315,7 +315,7 @@ template {
   font-style: normal;
   vertical-align: -2px;
   outline: none;
-  stroke: currentColor;
+  stroke: currentcolor;
 }
 .sd-icon-loading,
 .sd-icon-spin {
@@ -1603,10 +1603,7 @@ body {
 }
 .sd-upload-list-picture-mask {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   color: var(--color-white);
   font-size: 16px;
   line-height: 80px;
@@ -2411,7 +2408,7 @@ p.sd-typography {
   font-size: 14px;
   line-height: 1.5715;
   text-align: left;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   background-color: var(--color-tooltip-bg);
   border-radius: var(--border-radius-small);
 }
@@ -2747,7 +2744,7 @@ p.sd-typography {
   font-size: 14px;
   line-height: 24px;
 }
-.sd-timepicker-cell:not(.sd-timepicker-cell-selected):not(.sd-timepicker-cell-disabled):hover .sd-timepicker-cell-inner {
+.sd-timepicker-cell:not(.sd-timepicker-cell-selected, .sd-timepicker-cell-disabled):hover .sd-timepicker-cell-inner {
   background-color: var(--color-fill-2);
 }
 .sd-timepicker-cell-selected .sd-timepicker-cell-inner {
@@ -2922,7 +2919,7 @@ p.sd-typography {
   border-radius: 0;
   outline: none;
   cursor: inherit;
-  -webkit-appearance: none;
+  appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   display: block;
   box-sizing: border-box;
@@ -3588,10 +3585,7 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
 }
 .sd-tabs-nav-type-line .sd-tabs-tab-title::before {
   position: absolute;
-  top: 0;
-  right: -8px;
-  bottom: 0;
-  left: -8px;
+  inset: 0 -8px;
   z-index: -1;
   background-color: transparent;
   border-radius: var(--border-radius-small);
@@ -3639,10 +3633,7 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
 .sd-tabs-nav-type-card .sd-tabs-tab:focus-visible::before,
 .sd-tabs-nav-type-card-gutter .sd-tabs-tab:focus-visible::before {
   position: absolute;
-  top: -1px;
-  right: 0;
-  bottom: -1px;
-  left: -1px;
+  inset: -1px 0 -1px -1px;
   border: 2px solid rgb(var(--primary-6));
   content: '';
 }
@@ -4588,8 +4579,7 @@ body[sd-theme='dark'] .sd-tabs-nav-type-capsule .sd-tabs-tab:hover {
   height: 100%;
 }
 .sd-table-container .sd-table-content-scroll-x {
-  overflow-x: auto;
-  overflow-y: hidden;
+  overflow: auto hidden;
 }
 .sd-table-container::before,
 .sd-table-container::after {
@@ -4621,8 +4611,7 @@ body[sd-theme='dark'] .sd-tabs-nav-type-capsule .sd-tabs-tab:hover {
   box-shadow: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15);
 }
 .sd-table-header {
-  overflow-x: hidden;
-  overflow-y: hidden;
+  overflow: hidden;
   background-color: var(--color-neutral-2);
   scrollbar-color: transparent transparent;
 }
@@ -5136,10 +5125,10 @@ body[sd-theme='dark'] .sd-table-tr-checked .sd-table-td {
   box-sizing: border-box;
   width: 28px;
   height: 28px;
+  font-size: 16px;
   line-height: 26px;
   text-align: center;
   border-radius: var(--border-radius-circle);
-  font-size: 16px;
 }
 .sd-steps-item-wait .sd-steps-icon {
   color: var(--color-text-2);
@@ -5616,9 +5605,9 @@ body[sd-theme='dark'] .sd-table-tr-checked .sd-table-td {
   display: none;
 }
 .sd-steps-mode-navigation .sd-steps-item {
-  padding-left: 20px;
-  padding-right: 10px;
   margin-right: 32px;
+  padding-right: 10px;
+  padding-left: 20px;
 }
 .sd-steps-mode-navigation .sd-steps-item:last-child {
   flex: 1;
@@ -5630,14 +5619,14 @@ body[sd-theme='dark'] .sd-table-tr-checked .sd-table-td {
   padding-right: 20px;
 }
 .sd-steps-mode-navigation .sd-steps-item-active::after {
-  content: '';
   position: absolute;
-  display: block;
-  height: 2px;
-  left: 0;
   right: 30px;
   bottom: 0;
+  left: 0;
+  display: block;
+  height: 2px;
   background-color: rgb(var(--primary-6));
+  content: '';
 }
 .sd-steps-mode-navigation .sd-steps-item-active:last-child::after {
   width: 100%;
@@ -5653,7 +5642,6 @@ body[sd-theme='dark'] .sd-table-tr-checked .sd-table-td {
   border: 2px solid var(--color-text-4);
   border-bottom: none;
   border-left: none;
-  -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   content: '';
 }
@@ -5664,11 +5652,11 @@ body[sd-theme='dark'] .sd-table-tr-checked .sd-table-td {
 .sd-steps-changeable .sd-steps-item-description {
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
 }
-.sd-steps-changeable .sd-steps-item:not(.sd-steps-item-active):not(.sd-steps-item-disabled) {
+.sd-steps-changeable .sd-steps-item:not(.sd-steps-item-active, .sd-steps-item-disabled) {
   cursor: pointer;
 }
-.sd-steps-changeable .sd-steps-item:not(.sd-steps-item-active):not(.sd-steps-item-disabled):hover .sd-steps-item-content .sd-steps-item-title,
-.sd-steps-changeable .sd-steps-item:not(.sd-steps-item-active):not(.sd-steps-item-disabled):hover .sd-steps-item-content .sd-steps-item-description {
+.sd-steps-changeable .sd-steps-item:not(.sd-steps-item-active, .sd-steps-item-disabled):hover .sd-steps-item-content .sd-steps-item-title,
+.sd-steps-changeable .sd-steps-item:not(.sd-steps-item-active, .sd-steps-item-disabled):hover .sd-steps-item-content .sd-steps-item-description {
   color: rgb(var(--primary-6));
 }
 .sd-steps-line-less .sd-steps-item-title::after {
@@ -5930,10 +5918,7 @@ body[sd-theme='dark'] .sd-table-tr-checked .sd-table-td {
 }
 .sd-spin-mask {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   z-index: 11;
   text-align: center;
   background-color: var(--color-spin-layer-bg);
@@ -6034,9 +6019,9 @@ body[sd-theme='dark'] .sd-table-tr-checked .sd-table-td {
   max-width: 12px;
   height: 100%;
   min-height: 200px;
+  margin-top: 6px;
   margin-right: 0;
   margin-bottom: 6px;
-  margin-top: 6px;
   transform: translateY(0);
 }
 .sd-slider-track.sd-slider-track-vertical::before {
@@ -6202,10 +6187,10 @@ body[sd-theme='dark'] .sd-table-tr-checked .sd-table-td {
   text-align: center;
 }
 .sd-slider-input-hyphens {
-  /* prettier-ignore */
-  margin: 0 6px;
   width: 8px;
   height: 2px;
+  /* prettier-ignore */
+  margin: 0 6px;
   background: rgb(var(--gray-6));
 }
 .sd-skeleton-shape {
@@ -6467,18 +6452,18 @@ body[sd-theme='dark'] .sd-table-tr-checked .sd-table-td {
 }
 .sd-result-icon-tip {
   display: flex;
-  width: 45px;
-  height: 45px;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
+  width: 45px;
+  height: 45px;
   margin: 0 auto;
+  border-radius: 50%;
 }
 .sd-result-icon-custom .sd-result-icon-tip {
-  font-size: 45px;
-  color: inherit;
   width: unset;
   height: unset;
+  color: inherit;
+  font-size: 45px;
 }
 .sd-result-icon-success .sd-result-icon-tip {
   color: rgb(var(--success-6));
@@ -6625,11 +6610,11 @@ body[sd-theme='dark'] .sd-table-tr-checked .sd-table-td {
 .sd-rate-character-disabled {
   cursor: not-allowed;
 }
-.sd-rate:not(.sd-rate-readonly):not(.sd-rate-disabled) .sd-rate-character {
+.sd-rate:not(.sd-rate-readonly, .sd-rate-disabled) .sd-rate-character {
   cursor: pointer;
 }
-.sd-rate:not(.sd-rate-readonly):not(.sd-rate-disabled) .sd-rate-character:hover,
-.sd-rate:not(.sd-rate-readonly):not(.sd-rate-disabled) .sd-rate-character:focus {
+.sd-rate:not(.sd-rate-readonly, .sd-rate-disabled) .sd-rate-character:hover,
+.sd-rate:not(.sd-rate-readonly, .sd-rate-disabled) .sd-rate-character:focus {
   transform: scale(1.2);
 }
 @keyframes sd-rate-scale {
@@ -6847,14 +6832,14 @@ body[sd-theme='dark'] .sd-radio-button::after {
 }
 .sd-progress {
   position: relative;
-  line-height: 1;
   font-size: 12px;
+  line-height: 1;
 }
 .sd-progress-type-line,
 .sd-progress-type-steps {
   display: inline-block;
-  max-width: 100%;
   width: 100%;
+  max-width: 100%;
 }
 .sd-progress-type-line.sd-progress-size-mini {
   width: auto;
@@ -6869,57 +6854,57 @@ body[sd-theme='dark'] .sd-radio-button::after {
 }
 .sd-progress-line-text,
 .sd-progress-steps-text {
-  font-size: 12px;
+  flex-grow: 1;
+  flex-shrink: 0;
+  min-width: 32px;
   margin-left: 16px;
   color: var(--color-text-2);
+  font-size: 12px;
   white-space: nowrap;
   text-align: right;
-  flex-grow: 1;
-  flex-shrink: 0;
-  min-width: 32px;
 }
 .sd-progress-line-text .sd-icon,
 .sd-progress-steps-text .sd-icon {
-  font-size: 12px;
   margin-left: 4px;
+  font-size: 12px;
 }
 .sd-progress-line {
-  background-color: var(--color-fill-3);
-  border-radius: 100px;
-  width: 100%;
   position: relative;
   display: inline-block;
+  width: 100%;
   overflow: hidden;
+  background-color: var(--color-fill-3);
+  border-radius: 100px;
 }
 .sd-progress-line-bar {
+  position: relative;
+  max-width: 100%;
   height: 100%;
-  border-radius: 100px;
   background-color: rgb(var(--primary-6));
-  position: relative;
+  border-radius: 100px;
   transition: width 0.6s cubic-bezier(0.34, 0.69, 0.1, 1), background 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
-  max-width: 100%;
 }
 .sd-progress-line-bar-buffer {
   position: absolute;
-  background-color: var(--color-primary-light-3);
-  height: 100%;
   top: 0;
   left: 0;
-  border-radius: 0 100px 100px 0;
   max-width: 100%;
+  height: 100%;
+  background-color: var(--color-primary-light-3);
+  border-radius: 0 100px 100px 0;
   transition: all 0.6s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-progress-line-bar-animate::after {
-  content: '';
-  display: block;
   position: absolute;
   top: 0;
+  display: block;
   width: 100%;
   height: 100%;
-  border-radius: inherit;
   background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.5) 50%, transparent 75%);
   background-size: 400% 100%;
+  border-radius: inherit;
   animation: sd-progress-loading 1.5s cubic-bezier(0.34, 0.69, 0.1, 1) infinite;
+  content: '';
 }
 .sd-progress-line-text .sd-icon {
   color: var(--color-text-2);
@@ -6928,8 +6913,8 @@ body[sd-theme='dark'] .sd-radio-button::after {
   width: auto;
 }
 .sd-progress-type-steps.sd-progress-size-small .sd-progress-steps-item {
-  width: 2px;
   flex: unset;
+  width: 2px;
   border-radius: 2px;
 }
 .sd-progress-type-steps.sd-progress-size-small .sd-progress-steps-item:not(:last-of-type) {
@@ -6940,18 +6925,18 @@ body[sd-theme='dark'] .sd-radio-button::after {
   width: 100%;
 }
 .sd-progress-steps-text {
-  margin-left: 8px;
   min-width: unset;
+  margin-left: 8px;
 }
 .sd-progress-steps-text .sd-icon {
   color: var(--color-text-2);
 }
 .sd-progress-steps-item {
-  height: 100%;
-  flex: 1;
-  background-color: var(--color-fill-3);
   position: relative;
   display: inline-block;
+  flex: 1;
+  height: 100%;
+  background-color: var(--color-fill-3);
 }
 .sd-progress-steps-item:not(:last-of-type) {
   margin-right: 3px;
@@ -6998,15 +6983,15 @@ body[sd-theme='dark'] .sd-radio-button::after {
   color: rgb(var(--danger-6));
 }
 .sd-progress-size-small .sd-progress-line-text {
-  font-size: 12px;
   margin-left: 16px;
+  font-size: 12px;
 }
 .sd-progress-size-small .sd-progress-line-text .sd-icon {
   font-size: 12px;
 }
 .sd-progress-size-large .sd-progress-line-text {
-  font-size: 16px;
   margin-left: 16px;
+  font-size: 16px;
 }
 .sd-progress-size-large .sd-progress-line-text .sd-icon {
   font-size: 14px;
@@ -7016,9 +7001,9 @@ body[sd-theme='dark'] .sd-radio-button::after {
 }
 .sd-progress-circle-wrapper {
   position: relative;
-  text-align: center;
-  line-height: 1;
   display: inline-block;
+  line-height: 1;
+  text-align: center;
   vertical-align: text-bottom;
 }
 .sd-progress-circle-svg {
@@ -7029,19 +7014,19 @@ body[sd-theme='dark'] .sd-radio-button::after {
   top: 50%;
   left: 50%;
   color: var(--color-text-3);
-  transform: translate(-50%, -50%);
   font-size: 14px;
+  transform: translate(-50%, -50%);
 }
 .sd-progress-circle-text .sd-icon {
-  font-size: 16px;
   color: var(--color-text-2);
+  font-size: 16px;
 }
 .sd-progress-circle-bg {
   stroke: var(--color-fill-3);
 }
 .sd-progress-circle-bar {
-  stroke: rgb(var(--primary-6));
   transition: stroke-dashoffset 0.6s cubic-bezier(0, 0, 1, 1) 0s, stroke 0.6s cubic-bezier(0, 0, 1, 1);
+  stroke: rgb(var(--primary-6));
 }
 .sd-progress-size-mini .sd-progress-circle-bg {
   stroke: var(--color-primary-light-3);
@@ -7126,7 +7111,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
 }
 .sd-popover-content {
   text-align: left;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .sd-popover-title + .sd-popover-content {
   margin-top: 4px;
@@ -7176,7 +7161,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
 }
 .sd-popconfirm-popup-content .sd-popconfirm-body .sd-popconfirm-content {
   text-align: left;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 .sd-popconfirm-popup-content .sd-popconfirm-footer {
   text-align: right;
@@ -7369,7 +7354,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
   cursor: not-allowed;
 }
 .sd-pagination-disabled .sd-pagination-item,
-.sd-pagination-disabled .sd-pagination-item:not(.sd-pagination-item-disabled):not(.sd-pagination-item-active):hover {
+.sd-pagination-disabled .sd-pagination-item:not(.sd-pagination-item-disabled, .sd-pagination-item-active):hover {
   color: var(--color-text-4);
   background-color: transparent;
   border-color: transparent;
@@ -7748,25 +7733,16 @@ body[sd-theme='dark'] .sd-radio-button::after {
 }
 .sd-modal-container {
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 }
 .sd-modal-mask {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   background-color: var(--color-mask-bg);
 }
 .sd-modal-wrapper {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   overflow: auto;
   text-align: center;
 }
@@ -7962,6 +7938,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
 }
 .sd-message-list {
   position: fixed;
+  left: 0;
   z-index: 1003;
   display: flex;
   flex-direction: column;
@@ -7972,7 +7949,6 @@ body[sd-theme='dark'] .sd-radio-button::after {
   padding: 0 10px;
   text-align: center;
   pointer-events: none;
-  left: 0;
 }
 .sd-message-list-top {
   top: 40px;
@@ -8006,8 +7982,8 @@ body[sd-theme='dark'] .sd-radio-button::after {
   animation: sd-msg-fade 0.1s cubic-bezier(0, 0, 1, 1), sd-msg-fade 0.4s cubic-bezier(0.3, 1.3, 0.3, 1);
 }
 .sd-message-content {
-  font-size: 14px;
   color: var(--color-text-1);
+  font-size: 14px;
   vertical-align: middle;
 }
 .sd-message-info {
@@ -8807,10 +8783,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
 }
 .sd-mention-measure {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   overflow: auto;
   visibility: hidden;
   pointer-events: none;
@@ -9287,7 +9260,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
   border-radius: 0;
   outline: none;
   cursor: inherit;
-  -webkit-appearance: none;
+  appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   box-sizing: border-box;
 }
@@ -9656,7 +9629,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
   border-radius: 0;
   outline: none;
   cursor: inherit;
-  -webkit-appearance: none;
+  appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .sd-input-wrapper .sd-input::placeholder {
@@ -10960,7 +10933,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
 .sd-col-xs-order-24 {
   order: 24;
 }
-@media (min-width: 576px) {
+@media (width >= 576px) {
   .sd-col-sm-1 {
     flex: 0 0 4.16666667%;
     width: 4.16666667%;
@@ -11199,7 +11172,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
     order: 24;
   }
 }
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .sd-col-md-1 {
     flex: 0 0 4.16666667%;
     width: 4.16666667%;
@@ -11438,7 +11411,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
     order: 24;
   }
 }
-@media (min-width: 992px) {
+@media (width >= 992px) {
   .sd-col-lg-1 {
     flex: 0 0 4.16666667%;
     width: 4.16666667%;
@@ -11677,7 +11650,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
     order: 24;
   }
 }
-@media (min-width: 1200px) {
+@media (width >= 1200px) {
   .sd-col-xl-1 {
     flex: 0 0 4.16666667%;
     width: 4.16666667%;
@@ -11916,7 +11889,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
     order: 24;
   }
 }
-@media (min-width: 1600px) {
+@media (width >= 1600px) {
   .sd-col-xxl-1 {
     flex: 0 0 4.16666667%;
     width: 4.16666667%;
@@ -12191,17 +12164,17 @@ body[sd-theme='dark'] .sd-radio-button::after {
   box-shadow: 0 0 0 0 var(--color-primary-light-2);
 }
 .sd-form-item-status-validating .sd-picker:not(.sd-picker-disabled) {
-  border-color: transparent;
   background-color: var(--color-fill-2);
+  border-color: transparent;
 }
 .sd-form-item-status-validating .sd-picker:not(.sd-picker-disabled):hover {
-  border-color: transparent;
   background-color: var(--color-fill-3);
+  border-color: transparent;
 }
 .sd-form-item-status-validating .sd-picker-focused:not(.sd-picker-disabled),
 .sd-form-item-status-validating .sd-picker-focused:not(.sd-picker-disabled):hover {
-  border-color: rgb(var(--primary-6));
   background-color: var(--color-bg-2);
+  border-color: rgb(var(--primary-6));
   box-shadow: 0 0 0 0 var(--color-primary-light-2);
 }
 .sd-form-item-status-validating .sd-form-item-message-help {
@@ -12243,17 +12216,17 @@ body[sd-theme='dark'] .sd-radio-button::after {
   box-shadow: 0 0 0 0 var(--color-success-light-2);
 }
 .sd-form-item-status-success .sd-picker:not(.sd-picker-disabled) {
-  border-color: transparent;
   background-color: var(--color-fill-2);
+  border-color: transparent;
 }
 .sd-form-item-status-success .sd-picker:not(.sd-picker-disabled):hover {
-  border-color: transparent;
   background-color: var(--color-fill-3);
+  border-color: transparent;
 }
 .sd-form-item-status-success .sd-picker-focused:not(.sd-picker-disabled),
 .sd-form-item-status-success .sd-picker-focused:not(.sd-picker-disabled):hover {
-  border-color: rgb(var(--success-6));
   background-color: var(--color-bg-2);
+  border-color: rgb(var(--success-6));
   box-shadow: 0 0 0 0 var(--color-success-light-2);
 }
 .sd-form-item-status-success .sd-form-item-message-help {
@@ -12295,17 +12268,17 @@ body[sd-theme='dark'] .sd-radio-button::after {
   box-shadow: 0 0 0 0 var(--color-warning-light-2);
 }
 .sd-form-item-status-warning .sd-picker:not(.sd-picker-disabled) {
-  border-color: transparent;
   background-color: var(--color-warning-light-1);
+  border-color: transparent;
 }
 .sd-form-item-status-warning .sd-picker:not(.sd-picker-disabled):hover {
-  border-color: transparent;
   background-color: var(--color-warning-light-2);
+  border-color: transparent;
 }
 .sd-form-item-status-warning .sd-picker-focused:not(.sd-picker-disabled),
 .sd-form-item-status-warning .sd-picker-focused:not(.sd-picker-disabled):hover {
-  border-color: rgb(var(--warning-6));
   background-color: var(--color-bg-2);
+  border-color: rgb(var(--warning-6));
   box-shadow: 0 0 0 0 var(--color-warning-light-2);
 }
 .sd-form-item-status-warning .sd-form-item-message-help {
@@ -12347,17 +12320,17 @@ body[sd-theme='dark'] .sd-radio-button::after {
   box-shadow: 0 0 0 0 var(--color-danger-light-2);
 }
 .sd-form-item-status-error .sd-picker:not(.sd-picker-disabled) {
-  border-color: transparent;
   background-color: var(--color-danger-light-1);
+  border-color: transparent;
 }
 .sd-form-item-status-error .sd-picker:not(.sd-picker-disabled):hover {
-  border-color: transparent;
   background-color: var(--color-danger-light-2);
+  border-color: transparent;
 }
 .sd-form-item-status-error .sd-picker-focused:not(.sd-picker-disabled),
 .sd-form-item-status-error .sd-picker-focused:not(.sd-picker-disabled):hover {
-  border-color: rgb(var(--danger-6));
   background-color: var(--color-bg-2);
+  border-color: rgb(var(--danger-6));
   box-shadow: 0 0 0 0 var(--color-danger-light-2);
 }
 .sd-form-item-status-error .sd-form-item-message-help {
@@ -12424,8 +12397,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
   /** slider display: block **/
 }
 .sd-form-layout-inline {
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
 }
 .sd-form-layout-inline .sd-form-item {
   width: auto;
@@ -12706,18 +12678,12 @@ body[sd-theme='dark'] .sd-radio-button::after {
 }
 .sd-drawer-container {
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   z-index: 1001;
 }
 .sd-drawer-mask {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   background-color: var(--color-mask-bg);
 }
 .sd-drawer {
@@ -13114,8 +13080,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
   flex-direction: column;
   box-sizing: border-box;
   padding: 5px 8px;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
 }
 .sd-picker-container-shortcuts-placement-left > .sd-picker-shortcuts > *,
 .sd-picker-range-container-shortcuts-placement-left > .sd-picker-shortcuts > *,
@@ -13194,7 +13159,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
   display: flex;
   box-sizing: border-box;
   width: 100%;
-  padding: 14px 16px 0 16px;
+  padding: 14px 16px 0;
 }
 .sd-picker-week-list-item {
   flex: 1;
@@ -13240,7 +13205,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
   background-color: rgb(var(--primary-6));
   transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
 }
-.sd-picker-cell-in-view:not(.sd-picker-cell-selected):not(.sd-picker-cell-range-start):not(.sd-picker-cell-range-end):not( .sd-picker-cell-disabled):not(.sd-picker-cell-week) .sd-picker-date-value:hover {
+.sd-picker-cell-in-view:not( .sd-picker-cell-selected, .sd-picker-cell-range-start, .sd-picker-cell-range-end, .sd-picker-cell-disabled, .sd-picker-cell-week) .sd-picker-date-value:hover {
   color: var(--color-text-1);
   background-color: var(--color-fill-3);
 }
@@ -13516,7 +13481,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
   width: 106px;
   height: 100%;
   max-height: 300px;
-  margin: 10px 0 0 0;
+  margin: 10px 0 0;
   padding: 0;
   overflow-y: auto;
   list-style: none;
@@ -13808,7 +13773,7 @@ body[sd-theme='dark'] .sd-radio-button::after {
   left: 50%;
   width: 8px;
   height: 8px;
-  background: currentColor;
+  background: currentcolor;
   border-radius: 50%;
   transform: translate(-50%, -50%);
   content: '';
@@ -14857,10 +14822,7 @@ body[sd-theme='dark'] .sd-carousel-indicator-outer .sd-carousel-indicator-item-a
 }
 .sd-card-grid::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
   content: '';
   pointer-events: none;
@@ -15211,12 +15173,12 @@ body[sd-theme='dark'] .sd-card-hoverable:hover {
   background-color: rgb(var(--primary-6));
   border-radius: 50%;
 }
-.sd-calendar-panel .sd-calendar-cell:not(.sd-calendar-cell-selected):not(.sd-calendar-cell-range-start):not(.sd-calendar-cell-range-end):not( .sd-calendar-cell-hover-range-start):not(.sd-calendar-cell-hover-range-end):not(.sd-calendar-cell-disabled):not(.sd-calendar-cell-week) .sd-calendar-date-value:hover {
+.sd-calendar-panel .sd-calendar-cell:not( .sd-calendar-cell-selected, .sd-calendar-cell-range-start, .sd-calendar-cell-range-end, .sd-calendar-cell-hover-range-start, .sd-calendar-cell-hover-range-end, .sd-calendar-cell-disabled, .sd-calendar-cell-week) .sd-calendar-date-value:hover {
   color: rgb(var(--primary-6));
   background-color: var(--color-primary-light-1);
   border-radius: 50%;
 }
-.sd-calendar-panel.sd-calendar-mode-year .sd-calendar-cell:not(.sd-calendar-cell-selected):not(.sd-calendar-cell-range-start):not(.sd-calendar-cell-range-end):not( .sd-calendar-cell-hover-range-start):not(.sd-calendar-cell-hover-range-end):not(.sd-calendar-cell-disabled) .sd-calendar-date-value:hover {
+.sd-calendar-panel.sd-calendar-mode-year .sd-calendar-cell:not( .sd-calendar-cell-selected, .sd-calendar-cell-range-start, .sd-calendar-cell-range-end, .sd-calendar-cell-hover-range-start, .sd-calendar-cell-hover-range-end, .sd-calendar-cell-disabled) .sd-calendar-date-value:hover {
   border-radius: 12px;
 }
 .sd-calendar-panel .sd-calendar-cell-today {
@@ -15325,11 +15287,11 @@ body[sd-theme='dark'] .sd-card-hoverable:hover {
   outline: none;
   cursor: pointer;
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
-  -webkit-appearance: none;
+  appearance: none;
   user-select: none;
 }
 .sd-btn > a:only-child {
-  color: currentColor;
+  color: currentcolor;
 }
 .sd-btn:active {
   transition: none;
@@ -15366,10 +15328,7 @@ body[sd-theme='dark'] .sd-card-hoverable:hover {
 }
 .sd-btn-loading::before {
   position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
+  inset: -1px;
   z-index: 1;
   display: block;
   background: #fff;
@@ -16203,8 +16162,8 @@ body[sd-theme='dark'] .sd-btn-primary.sd-btn-disabled {
   padding: 0 4px;
   color: var(--color-text-2);
   text-decoration: none;
-  border-radius: var(--border-radius-small);
   background-color: transparent;
+  border-radius: var(--border-radius-small);
 }
 .sd-breadcrumb-item a:hover {
   color: rgb(var(--link-6));
@@ -16960,7 +16919,7 @@ body[sd-theme='dark'] .sd-btn-primary.sd-btn-disabled {
   border-radius: 0;
   outline: none;
   cursor: inherit;
-  -webkit-appearance: none;
+  appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .sd-select-view-single .sd-select-view-input::placeholder {
@@ -17199,7 +17158,7 @@ body[sd-theme='dark'] .sd-btn-primary.sd-btn-disabled {
   border-radius: 0;
   outline: none;
   cursor: inherit;
-  -webkit-appearance: none;
+  appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   box-sizing: border-box;
 }
@@ -17634,7 +17593,7 @@ body[sd-theme='dark'] .sd-btn-primary.sd-btn-disabled {
   border-radius: 0;
   outline: none;
   cursor: inherit;
-  -webkit-appearance: none;
+  appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .sd-input-label .sd-input-label-input::placeholder {