@touchvue/ui 1.0.0-beta.54 → 1.0.0-beta.55

package/theme/components/index.css

@@ -784,6 +784,7 @@ html body .height-full {
 .to-grid.va-baseline {
   align-items: baseline;
 }
+.to-grid:has(.to-box.height-full),
 .to-grid.va-full {
   align-items: stretch;
 }
@@ -889,6 +890,7 @@ html body .height-full {
   src: url('../img/font-fill/iconfont.woff2?t=1756347622462') format('woff2'), url('../img/font-fill/iconfont.woff?t=1756347622462') format('woff'), url('../img/font-fill/iconfont.ttf?t=1756347622462') format('truetype');
 }
 .to-icon {
+  --weight: normal;
   --cursor: pointer;
   --color: inherit;
   --width: var(--height-fe);
@@ -921,7 +923,6 @@ html body .height-full {
   flex-shrink: 0;
   display: inline-flex;
   font-family: var(--family), 'PingFang SC', 'microsoft yahei';
-  vertical-align: top;
   white-space: nowrap;
   position: relative;
   box-sizing: border-box;
@@ -943,11 +944,11 @@ html body .height-full {
 .to-icon:before {
   font-weight: normal;
   font-size: var(--size);
-  vertical-align: top;
   content: var(--value);
 }
 .to-icon-text {
   font-size: var(--size);
+  font-weight: var(--weight);
 }
 .to-icon.value-loading span:after {
   content: '';
@@ -976,7 +977,6 @@ html body .height-full {
 }
 .to-icon.value-loading .to-icon-text {
   position: absolute;
-  vertical-align: top;
   font-size: 1em;
   width: var(--width);
   height: var(--height);
@@ -1942,7 +1942,9 @@ html body .height-full {
   --active-border: var(--border);
 }
 .to-tag {
-  display: inline-block;
+  display: inline-flex;
+  align-items: flex-start;
+  justify-content: center;
   overflow: hidden;
   vertical-align: top;
 }
@@ -2095,6 +2097,7 @@ html body .height-full {
   left: 0;
   bottom: 0;
   top: unset;
+  right: unset;
 }
 .to-tag.type-corner.position-bottom-left .to-tag-wrapper {
   border-radius: 0 var(--radius) 0 0;
@@ -3222,9 +3225,13 @@ html body .height-full {
   --content-padding: 0 1em;
   --tag-gap: 0.5em;
   --tag-height: 2em;
+  --overflow-color: var(--color-fg-fade);
   --arrow-size: 1em;
   --arrow-font-size: 0.75em;
   --arrow-color: var(--color-fg-fade);
+  --clear-size: 1em;
+  --clear-color: var(--color-fg-fade);
+  --clear-hover-color: var(--color-danger);
   --arrow-hover-color: var(--arrow-color);
   --arrow-active-color: var(--arrow-color);
   --hover-bg: rgba(0, 0, 0, 0.1);
@@ -3357,6 +3364,23 @@ html body .height-full {
   font-weight: var(--weight);
   color: var(--color);
 }
+.to-select-clear {
+  flex-shrink: 0;
+  --color: var(--clear-color);
+  --width: var(--clear-size);
+  --height: var(--clear-size);
+  --size: var(--clear-size);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.to-select-clear:hover {
+  --color: var(--clear-hover-color);
+}
+.to-select:hover .to-select-clear,
+.to-select:focus-within .to-select-clear {
+  opacity: 1;
+}
 .to-select-arrow {
   flex-shrink: 0;
   width: var(--arrow-size);
@@ -3380,6 +3404,22 @@ html body .height-full {
   margin-left: calc((var(--el-height) - var(--tag-height)) / 2);
   --height: var(--tag-height);
 }
+.to-select-tag.is-collapse {
+  flex-wrap: nowrap;
+  overflow: hidden;
+  align-items: center;
+}
+.to-select-tag.is-collapse .to-tag {
+  flex-shrink: 0;
+  margin-top: 0;
+}
+.to-select-overflow {
+  --height: var(--tag-height);
+  margin-top: calc((var(--el-height) - var(--tag-height)) / 2);
+  margin-left: calc((var(--el-height) - var(--tag-height)) / 2);
+  flex-shrink: 0;
+  color: var(--overflow-color);
+}
 .to-select-option {
   --bg-size: 100% 100%;
 }
@@ -3516,6 +3556,9 @@ html body .height-full {
 .to-select.is-multiple .to-select-tag:has(.to-tag) {
   padding-bottom: calc((var(--height) - var(--tag-height)) / 2);
 }
+.to-select.is-multiple .to-select-tag.is-collapse:has(.to-tag) {
+  padding-bottom: 0;
+}
 .to-select.is-filterable .to-select-content {
   padding-left: 0;
   padding-top: 0;
@@ -3730,7 +3773,7 @@ html body .height-full {
   --size: 1.17em;
   --weight: bold;
   --gap: 0.5em;
-  --lh: 1em;
+  --lh: 1.25em;
   --radius: 0;
   --border: 0 none;
   --hover-border: var(--border);
@@ -3742,8 +3785,8 @@ html body .height-full {
   --fn-gap: 0.5em;
   --tip-color: var(--color-fg);
   --tip-size: 1em;
-  --icon-width: 0;
-  --icon-height: 0;
+  --icon-width: auto;
+  --icon-height: auto;
   --icon-bg: none;
   --icon-radius: 0;
   --icon-bg-size: 100% 100%;
@@ -3797,6 +3840,7 @@ html body .height-full {
 .to-header-tip {
   color: var(--tip-color);
   font-size: var(--tip-size);
+  line-height: normal;
 }
 .to-header-title {
   line-height: var(--lh);
@@ -4000,6 +4044,7 @@ html body .height-full {
   --shadow: none;
   --clear-margin: 0;
   --clear-height: var(--height);
+  --clear-width: var(--clear-height);
   --content-gap: 1em;
   --content-padding: 0 1em;
   --prefix-padding: 0;
@@ -4021,6 +4066,7 @@ html body .height-full {
   --suffix-text-size: 1em;
   --suffix-text-weight: normal;
   --suffix-text-lh: var(--height);
+  --suffix-icon-height: var(--height);
   --count-color: var(--color-fg-fade);
   --count-size: 1em;
   --count-padding: 0;
@@ -4094,7 +4140,7 @@ html body .height-full {
   margin: var(--clear-margin);
   --color: var(--color-fg-fade);
   --height: var(--clear-height);
-  --width: var(--clear-height);
+  --width: var(--clear-width);
 }
 .to-input-box {
   width: 100%;
@@ -4140,6 +4186,10 @@ html body .height-full {
   gap: var(--suffix-gap);
   padding: var(--suffix-padding);
 }
+.to-input-suffix > .to-icon {
+  --width: var(--suffix-icon-height);
+  --height: var(--suffix-icon-height);
+}
 .to-input-prefix-text {
   display: flex;
   padding: var(--prefix-text-padding);
@@ -5662,7 +5712,11 @@ html body .height-full {
   --radius: 0;
   --title-color: var(--color-fg);
   --title-weight: bold;
-  --title-size: 1em;
+  --title-size: 1.25em;
+  --title-lh: var(--item-height);
+  --title-divider: 0 none;
+  --title-divider-height: 1em;
+  --title-divider-margin: 0;
   --divider: 0 none;
   --fn-radius: 0;
   --fn-bg: none;
@@ -5689,14 +5743,16 @@ html body .height-full {
   --item-valign: center;
   --item-icon-margin: 0.5em;
   --item-left-bg: none;
-  --item-left-width: none;
+  --item-left-width: auto;
+  --item-left-height: 100%;
   --item-right-bg: none;
-  --item-right-width: none;
+  --item-right-width: auto;
+  --item-right-height: 100%;
   --item-content-bg: none;
   --item-content-bg-size: 100% 100%;
-  --item-divider-width: 0;
-  --item-divider-color: var(--color-border);
+  --item-divider: 0 none;
   --item-divider-height: 1em;
+  --item-divider-width: 0;
   --item-hover-color: var(--item-color);
   --item-hover-bg: rgba(0, 0, 0, 0.1);
   --item-hover-border: var(--item-border);
@@ -5704,8 +5760,9 @@ html body .height-full {
   --item-hover-border-bottom: var(--item-hover-border);
   --item-hover-border-left: var(--item-hover-border);
   --item-hover-border-right: var(--item-hover-border);
-  --item-hover-left-bg: none;
-  --item-hover-right-bg: none;
+  --item-hover-content-bg: var(--item-content-bg);
+  --item-hover-left-bg: var(--item-left-bg);
+  --item-hover-right-bg: var(--item-right-bg);
   --item-active-color: var(--item-color);
   --item-active-bg: rgba(0, 0, 0, 0.2);
   --item-active-border: var(--item-border);
@@ -5729,12 +5786,14 @@ html body .height-full {
   --item-on-weight: var(--item-weight);
   --item-on-left-bg: var(--item-left-bg);
   --item-on-left-width: var(--item-left-width);
+  --item-on-left-height: var(--item-left-height);
   --item-on-right-bg: var(--item-right-bg);
   --item-on-right-width: var(--item-right-width);
+  --item-on-right-height: var(--item-right-height);
   --item-on-content-bg: var(--item-content-bg);
-  --item-on-divider-width: var(--item-divider-width);
-  --item-on-divider-color: var(--item-divider-color);
+  --item-on-divider: var(--item-divider);
   --item-on-divider-height: var(--item-divider-height);
+  --item-on-divider-width: var(--item-divider-width);
   --item-disabled-color: #d6d6d6;
   --item-remove-margin: 0.5em;
   --item-count-margin: 0.5em;
@@ -5804,10 +5863,23 @@ html body .height-full {
   z-index: 0;
   position: relative;
 }
+.to-tab-title {
+  line-height: var(--title-lh);
+}
 .to-tab-title-text {
   color: var(--title-color);
   font-weight: var(--title-weight);
   font-size: var(--title-size);
+  display: flex;
+  align-items: center;
+}
+.to-tab-title-text:after {
+  content: '';
+  display: block;
+  width: 0;
+  height: var(--title-divider-height);
+  border-right: var(--title-divider);
+  margin: var(--title-divider-margin);
 }
 .to-tab-tab {
   display: flex;
@@ -5919,20 +5991,20 @@ html body .height-full {
 .to-tab-item-main:after {
   content: '';
   width: var(--item-divider-width);
-  background: var(--item-divider-color);
+  border-right: var(--item-divider);
   height: var(--item-divider-height);
   align-self: center;
 }
 .to-tab-item-left {
   background: var(--item-left-bg);
   background-size: 100% 100%;
-  height: 100%;
+  height: var(--item-left-height);
   width: var(--item-left-width);
 }
 .to-tab-item-right {
   background: var(--item-right-bg);
   background-size: 100% 100%;
-  height: 100%;
+  height: var(--item-right-height);
   width: var(--item-right-width);
 }
 .to-tab-item-content {
@@ -6002,8 +6074,7 @@ html body .height-full {
   z-index: 1;
 }
 .to-tab-item.is-on .to-tab-item-main:after {
-  width: var(--item-on-divider-width);
-  background: var(--item-on-divider-color);
+  border-right: var(--item-on-divider);
   height: var(--item-on-divider-height);
 }
 .to-tab-item.is-on .to-tab-indicator {
@@ -6013,11 +6084,13 @@ html body .height-full {
   background: var(--item-on-left-bg);
   background-size: 100% 100%;
   width: var(--item-on-left-width);
+  height: var(--item-on-left-height);
 }
 .to-tab-item.is-on .to-tab-item-right {
   background: var(--item-on-right-bg);
   background-size: 100% 100%;
   width: var(--item-on-right-width);
+  height: var(--item-on-right-height);
 }
 .to-tab-item.is-on .to-tab-item-content {
   padding: var(--item-on-padding);
@@ -6030,7 +6103,7 @@ html body .height-full {
 }
 .to-tab-item:has(+.is-on) .to-tab-item-main:after {
   width: var(--item-on-divider-width);
-  background: var(--item-on-divider-color);
+  border-right: var(--item-on-divider);
   height: var(--item-on-divider-height);
 }
 .to-tab-item.is-disabled .to-tab-item-label {
@@ -6046,6 +6119,10 @@ html body .height-full {
   border-left: var(--item-hover-border-left);
   border-right: var(--item-hover-border-right);
 }
+.to-tab-item:not(.is-on):hover .to-tab-item-content {
+  background: var(--item-hover-content-bg);
+  background-size: 100% 100%;
+}
 .to-tab-item:not(.is-on):hover .to-tab-item-label {
   color: var(--item-hover-color);
 }
@@ -6213,53 +6290,83 @@ html body .height-full {
   flex-direction: row;
   align-items: stretch;
 }
-.to-tab.dir-v .to-tab-tab {
+.to-tab.dir-v > .to-tab-tab {
   flex-direction: column;
 }
-.to-tab.dir-v .to-tab-wrapper {
+.to-tab.dir-v > .to-tab-tab .to-tab-wrapper {
   flex-direction: column;
   align-items: stretch;
 }
-.to-tab.dir-v .to-tab-divider {
+.to-tab.dir-v > .to-tab-tab .to-tab-divider {
   height: auto;
 }
-.to-tab.dir-v .to-tab-page {
-  flex: 1;
-}
-.to-tab.dir-v .to-tab-page .to-tab-page-item {
-  height: 100%;
-}
-.to-tab.dir-v .to-tab-item {
+.to-tab.dir-v > .to-tab-tab .to-tab-item {
   flex-direction: row;
 }
-.to-tab.dir-v .to-tab-indicator {
+.to-tab.dir-v > .to-tab-tab .to-tab-indicator {
   top: 50%;
   transform: translateY(-50%);
 }
-.to-tab.item-dir-v .to-tab-item-content {
+.to-tab.dir-v > .to-tab-page {
+  flex: 1;
+}
+.to-tab.dir-v > .to-tab-page .to-tab-page-item {
+  height: 100%;
+}
+.to-tab.item-dir-v > .to-tab-tab .to-tab-item-content {
   flex-direction: column;
 }
-.to-tab.position-left .to-tab-divider {
+.to-tab.position-left {
+  --item-left-width: auto;
+  --item-left-height: 0;
+  --item-right-width: auto;
+  --item-right-height: 0;
+  --item-divider-height: 0;
+  --item-divider-width: 100%;
+}
+.to-tab.position-left > .to-tab-tab .to-tab-divider {
   inset: 0 0 0 auto;
   border-bottom: 0 none;
   border-right: var(--divider);
+  width: 0;
+}
+.to-tab.position-left > .to-tab-tab .to-tab-item-main {
+  min-height: 0;
+  flex-direction: column;
 }
-.to-tab.position-right .to-tab-divider {
+.to-tab.position-left > .to-tab-tab .to-tab-item-main:after {
+  border-right: 0 none;
+  border-bottom: var(--item-divider);
+}
+.to-tab.position-left > .to-tab-tab .to-tab-item-content {
+  min-height: 0;
+  justify-content: center;
+  align-items: center;
+}
+.to-tab.position-right {
+  --item-left-width: auto;
+  --item-left-height: 0;
+}
+.to-tab.position-right > .to-tab-tab .to-tab-divider {
   inset: 0 auto 0 0;
   border-bottom: 0 none;
   border-left: var(--divider);
+  width: 0;
 }
-.to-tab.position-bottom .to-tab-divider {
+.to-tab.position-bottom > .to-tab-tab .to-tab-divider {
   inset: 0 0 auto 0;
   border-bottom: 0 none;
   border-top: var(--divider);
 }
-.to-tab.position-bottom .to-tab-tab,
-.to-tab.position-right .to-tab-tab {
+.to-tab.position-bottom > .to-tab-tab .to-tab-item-main {
+  flex-direction: column;
+}
+.to-tab.position-bottom > .to-tab-tab,
+.to-tab.position-right > .to-tab-tab {
   order: 2;
 }
-.to-tab.position-bottom .to-tab-page,
-.to-tab.position-right .to-tab-page {
+.to-tab.position-bottom > .to-tab-page,
+.to-tab.position-right > .to-tab-page {
   order: 1;
 }
 .to-tab.item-width-avg .to-tab-wrapper {
@@ -6307,6 +6414,7 @@ html body .height-full {
   --body-even-color: var(--body-color);
   --body-even-bg: var(--body-bg);
   --action-gap: 1em;
+  --action-padding: 0;
   --radio-size: 1em;
   --radio-border: 1px solid var(--color-border);
   --on-radio-border: 0.35em solid var(--color-primary);
@@ -6511,7 +6619,7 @@ html body .height-full {
   content: '\e081';
 }
 .to-table-td.type-action {
-  padding: 0;
+  padding: var(--action-padding);
 }
 .to-table-action {
   display: flex;
@@ -7894,11 +8002,11 @@ html body .height-full {
   text-align: center;
   color: #4d5b65;
 }
-.to-icon.mode-tree-loading {
-  --size: 1.2em;
-  --width: 1.2em;
-  --height: 1.2em;
-  --loading: url(/pic-pro/img/loading-out.png);
+.to-tree-loading {
+  --size: 1em;
+  --width: 1em;
+  --height: 1em;
+  --loading: url(../img/loading.png);
   --loading-speed: 1s;
 }
 .to-param {
@@ -8818,14 +8926,14 @@ html body .height-full {
   vertical-align: middle;
 }
 @media screen {
-  .s_pad .to-print,
-  .s_pc .to-print {
+  .media-pad .to-print,
+  .media-pc .to-print {
     height: 100%;
     position: relative;
     background: #f7f7f7;
   }
-  .s_pad .to-print > .content,
-  .s_pc .to-print > .content {
+  .media-pad .to-print > .content,
+  .media-pc .to-print > .content {
     position: absolute;
     left: 0;
     right: 0;
@@ -8833,8 +8941,8 @@ html body .height-full {
     bottom: 4.29em;
     overflow: auto;
   }
-  .s_pad .to-print > .content .paper,
-  .s_pc .to-print > .content .paper {
+  .media-pad .to-print > .content .paper,
+  .media-pc .to-print > .content .paper {
     width: 50em;
     position: relative;
     margin: 2em auto;
@@ -8844,8 +8952,8 @@ html body .height-full {
     border: 1px solid #d9d9d9;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   }
-  .s_pad .to-print > .fn,
-  .s_pc .to-print > .fn {
+  .media-pad .to-print > .fn,
+  .media-pc .to-print > .fn {
     background: #fff;
     position: absolute;
     bottom: 0;
@@ -8856,21 +8964,21 @@ html body .height-full {
     border-top: 1px solid #cccccc;
     text-align: center;
   }
-  .s_pad .to-print > .fn button,
-  .s_pc .to-print > .fn button {
+  .media-pad .to-print > .fn button,
+  .media-pc .to-print > .fn button {
     min-width: 8.57em;
     margin: 0 0.36em;
   }
-  .s_pad .to-print-h > .content .paper,
-  .s_pc .to-print-h > .content .paper {
+  .media-pad .to-print-h > .content .paper,
+  .media-pc .to-print-h > .content .paper {
     width: 70em;
     min-height: 50em;
   }
-  .s_phone .to-print {
+  .media-phone .to-print {
     height: 100%;
     position: relative;
   }
-  .s_phone .to-print > .content {
+  .media-phone .to-print > .content {
     position: absolute;
     left: 0;
     right: 0;
@@ -8878,13 +8986,13 @@ html body .height-full {
     bottom: 3.57em;
     overflow: auto;
   }
-  .s_phone .to-print > .content .paper {
+  .media-phone .to-print > .content .paper {
     padding: 1.43em;
     background: #fff;
     margin-bottom: 1.43em;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   }
-  .s_phone .to-print > .fn {
+  .media-phone .to-print > .fn {
     background: #fff;
     position: absolute;
     bottom: 0;
@@ -8892,7 +9000,7 @@ html body .height-full {
     width: 100%;
     text-align: center;
   }
-  .s_phone .to-print > .fn button {
+  .media-phone .to-print > .fn button {
     border-radius: 0;
     flex: 1;
     height: 3.13em;
@@ -8900,8 +9008,8 @@ html body .height-full {
   }
 }
 @media print {
-  .s_pad .to-print > .content .paper,
-  .s_pc .to-print > .content .paper {
+  .media-pad .to-print > .content .paper,
+  .media-pc .to-print > .content .paper {
     font-size: 14px;
   }
   .to-print > .fn {
@@ -8913,7 +9021,7 @@ html body .height-full {
     background: transparent;
     font-size: 12px;
   }
-  .to-scroll {
+  .to-scroll-content {
     overflow: visible !important;
     position: relative !important;
     top: auto;
@@ -8921,11 +9029,12 @@ html body .height-full {
     bottom: auto;
     right: auto;
   }
-  .to-table .body {
+  .to-table-wrapper {
     overflow: visible !important;
+    height: auto;
   }
-  .s_pad .to-print > .content,
-  .s_pc .to-print > .content {
+  .media-pad .to-print > .content,
+  .media-pc .to-print > .content {
     position: relative;
     top: auto;
     left: auto;
@@ -8933,26 +9042,21 @@ html body .height-full {
     right: auto;
     overflow: visible;
   }
-  .s_pad .to-print > .content .paper,
-  .s_pc .to-print > .content .paper {
+  .media-pad .to-print > .content .paper,
+  .media-pc .to-print > .content .paper {
     page-break-after: always;
   }
 }
 @page {
   margin: 1.5cm;
 }
+.to-print .to-table-wrapper {
+  overflow: visible !important;
+  height: auto;
+}
 .to-print .to-hide-print {
   display: none;
 }
-.to-print .to-title {
-  font-weight: bold;
-}
-.to-print .to-title .text {
-  color: #191919;
-}
-.to-print .to-box {
-  border-color: #000;
-}
 .to-print .to-table {
   background: none !important;
   border: 1px solid #d9d9d9;
@@ -8996,18 +9100,13 @@ html body .height-full {
 .to-print .to-table td.action {
   display: none;
 }
-.to-print .to-table .leftTop,
-.to-print .to-table .rightTop,
-.to-print .to-table .right,
-.to-print .to-table .top {
+.to-print .to-table .to-table-top,
+.to-print .to-table .to-table-left,
+.to-print .to-table .to-table-right,
+.to-print .to-table .to-table-left-top,
+.to-print .to-table .to-table-right-top {
   display: none;
 }
-.to-print .to-table .body {
-  height: auto;
-}
-.to-print .to-table .body .wrapper {
-  display: block;
-}
 .to-print .to-table-print-s {
   font-size: 86.57%;
 }
@@ -9017,25 +9116,6 @@ html body .height-full {
 .to-print .to-table-print-xxs {
   font-size: 66.67%;
 }
-.to-print .to-list-line > ul > li:before {
-  border-color: #000 !important;
-}
-.to-print .to-list-border {
-  border-color: #000 !important;
-}
-.to-print .to-param .label {
-  color: #191919;
-}
-.to-print .to-param-border {
-  border: 1px solid #d9d9d9;
-}
-.to-print .to-article {
-  padding: 0;
-}
-html:not(.s_phone) .to-print .to-table tbody tr.on td,
-html:not(.s_phone) .to-print .to-table tbody tr.on td * {
-  color: #000 !important;
-}
 .to-export-layer {
   --padding: 1em;
 }
@@ -9127,80 +9207,75 @@ html:not(.s_phone) .to-print .to-table tbody tr.on td * {
   --radius: 50%;
 }
 .to-rate {
-  --size: 2em;
-  --gap: 0.25em;
-  --color: var(--primary);
-  --off-color: #ddd;
-  --hover-color: var(--primary-light-1);
-  --hover-off-color: var(--primary-light-5);
+  --item-gap: 0.25em;
+  --item-family: 'icon';
+  --item-on-family: 'icon-fill';
+  --item-size: 1em;
+  --item-color: #ddd;
+  --item-on-color: var(--primary);
   --score-color: var(--color-fg);
   --score-size: 1em;
+  --score-margin: 0.5em;
   --score-weight: normal;
-  --score-gap: 0.5em;
 }
 .to-rate {
   display: inline-flex;
   align-items: center;
   vertical-align: top;
-  gap: var(--gap);
 }
-.to-rate.is-readonly {
+.to-rate-group {
+  display: flex;
+  gap: var(--item-gap);
+}
+.to-rate.is-disabled {
   cursor: default;
 }
-.to-rate:not(.is-readonly) {
+.to-rate:not(.is-disabled) .to-rate-item {
   cursor: pointer;
 }
 .to-rate-item {
-  font-size: var(--size);
   line-height: 1;
-  color: var(--off-color);
-  position: relative;
-  display: inline-block;
-  transition: color 0.2s ease;
-}
-.to-rate-item-star:after {
-  content: '\2605';
-}
-.to-rate-item.is-on {
-  color: var(--color);
-}
-.to-rate-item.is-half-on {
-  color: var(--color);
-}
-.to-rate-item.is-half-on .to-rate-item-star {
   position: relative;
   display: inline-block;
-  color: var(--off-color);
+  width: var(--item-size);
+  height: var(--item-size);
 }
-.to-rate-item.is-half-on .to-rate-item-star:before {
-  content: '\2605';
+.to-rate-icon {
   position: absolute;
   left: 0;
   top: 0;
-  width: 50%;
-  overflow: hidden;
-  color: var(--color);
+  --size: var(--item-size);
+  --width: var(--item-size);
+  --height: var(--item-size);
 }
-.to-rate:hover .to-rate-item {
-  color: var(--hover-off-color);
+.to-rate-icon.is-off {
+  --family: var(--item-family);
+  color: var(--item-color);
 }
-.to-rate:hover .to-rate-item.is-hover {
-  color: var(--color);
+.to-rate-icon.is-on {
+  --family: var(--item-on-family);
+  overflow: hidden;
+  color: var(--item-on-color);
+  clip-path: inset(0 100% 0 0);
 }
-.to-rate.is-readonly:hover .to-rate-item {
-  color: var(--off-color);
+.to-rate-item.is-on .to-rate-icon.is-on {
+  clip-path: inset(0 0 0 0);
 }
-.to-rate.is-readonly:hover .to-rate-item.is-on,
-.to-rate.is-readonly:hover .to-rate-item.is-half-on {
-  color: var(--color);
+.to-rate-item.is-half-on .to-rate-icon.is-on {
+  clip-path: inset(0 50% 0 0);
+}
+.to-rate:not(.is-disabled):hover .to-rate-item.is-hover .to-rate-icon.is-on {
+  color: var(--item-on-color);
 }
 .to-rate-score {
-  font-size: var(--score-size);
-  color: var(--score-color);
   font-weight: var(--score-weight);
-  margin-left: var(--score-gap);
+  color: var(--score-color);
+  margin-left: var(--score-margin);
   line-height: 1;
 }
+.to-rate-score-text {
+  font-size: var(--score-size);
+}
 .to-dis.type-opacity {
   opacity: 0.5;
   pointer-events: inherit;