@touchvue/ui 1.0.0-beta.57 → 1.0.0-beta.59

package/theme/index.css

@@ -785,10 +785,10 @@ html body .height-full {
 .to-grid:not(.is-wrap) {
   white-space: nowrap;
 }
-.to-grid:not(.dir-v):not(.col-1) > * {
+.to-grid:not(.dir-v):not(.col-1) > *:not(.to-grid) {
   position: relative;
 }
-.to-grid:not(.dir-v):not(.col-1) > *::after {
+.to-grid:not(.dir-v):not(.col-1) > *:not(.to-grid)::after {
   content: '';
   position: absolute;
   transform: translateY(-50%);
@@ -798,15 +798,15 @@ html body .height-full {
   border-left: var(--divider);
   z-index: 2;
 }
-.to-grid:not(.dir-v):not(.col-1) > *:last-child::after {
+.to-grid:not(.dir-v):not(.col-1) > *:not(.to-grid):last-child::after {
   display: none;
 }
-.to-grid.dir-v > *,
-.to-grid.col-1 > * {
+.to-grid.dir-v > *:not(.to-grid),
+.to-grid.col-1 > *:not(.to-grid) {
   position: relative;
 }
-.to-grid.dir-v > *::after,
-.to-grid.col-1 > *::after {
+.to-grid.dir-v > *:not(.to-grid)::after,
+.to-grid.col-1 > *:not(.to-grid)::after {
   content: '';
   position: absolute;
   transform: translateX(-50%);
@@ -816,13 +816,28 @@ html body .height-full {
   border-top: var(--divider);
   z-index: 2;
 }
-.to-grid.dir-v > *:last-child::after,
-.to-grid.col-1 > *:last-child::after {
+.to-grid.dir-v > *:not(.to-grid):last-child::after,
+.to-grid.col-1 > *:not(.to-grid):last-child::after {
   display: none;
 }
 .to-grid-item {
   box-sizing: border-box;
 }
+.to-grid-item.align-top {
+  align-self: flex-start;
+}
+.to-grid-item.align-center {
+  align-self: center;
+}
+.to-grid-item.align-bottom {
+  align-self: flex-end;
+}
+.to-grid-item.align-stretch {
+  align-self: stretch;
+}
+.to-grid-item.align-baseline {
+  align-self: baseline;
+}
 .to-grid.height-full:not(.dir-v) > .to-grid-item {
   height: 100%;
 }
@@ -1878,8 +1893,8 @@ html body .height-full {
   --bg: #f7f7f7;
   --bg-size: 100% 100%;
   --size: 1em;
-  --gap: 0.25em;
-  --content-gap: 0.25em;
+  --remove-margin: 0.25em;
+  --icon-margin: 0.25em;
   --dot-width: 0.5em;
   --dot-height: 0.5em;
   --dot-color: var(--color-fg);
@@ -1891,6 +1906,13 @@ html body .height-full {
   --active-bg: #ababab;
   --active-color: var(--color);
   --active-border: var(--border);
+  --gd-border-start: transparent;
+  --gd-border-end: transparent;
+  --gd-border-deg: 90deg;
+  --hover-gd-border-start: var(--gd-border-start);
+  --hover-gd-border-end: var(--gd-border-end);
+  --active-gd-border-start: var(--gd-border-start);
+  --active-gd-border-end: var(--gd-border-end);
 }
 .to-tag {
   display: inline-flex;
@@ -1908,23 +1930,58 @@ html body .height-full {
   border-radius: var(--radius);
   background: var(--bg);
   background-size: var(--bg-size);
-  gap: var(--gap);
   display: inline-flex;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
   vertical-align: top;
+  position: relative;
+}
+.to-tag-wrapper::after {
+  border: var(--border);
+  border-radius: var(--radius);
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+  pointer-events: none;
+  padding: var(--gd-border-thick);
+  background: linear-gradient(var(--gd-border-deg), var(--gd-border-start), var(--gd-border-end));
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+.to-tag.is-gd-border .to-tag-wrapper {
+  background: transparent;
+}
+.to-tag.is-gd-border .to-tag-wrapper::after {
+  border: 0 none;
+  padding: var(--gd-border-thick);
+  background: var(--gd-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
 }
 .to-tag-content {
   display: inline-flex;
   align-items: center;
-  gap: var(--content-gap);
 }
 .to-tag-icon {
+  margin-right: var(--icon-margin);
   --width: 1em;
   --height: 1em;
 }
+.to-tag-remove {
+  margin-left: var(--remove-margin);
+}
 .to-tag-text {
+  background: var(--color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   font-size: var(--size);
   display: inline-flex;
   align-items: center;
@@ -1955,6 +2012,22 @@ html body .height-full {
   border-radius: var(--dot-radius);
   background: var(--dot-color);
 }
+.to-tag.is-gd-border-hover.is-link .to-tag-wrapper:hover::after {
+  border: 0 none;
+  padding: var(--gd-hover-border-thick, var(--gd-border-thick));
+  background: var(--gd-hover-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+.to-tag.is-gd-border-active.is-link .to-tag-wrapper:active::after {
+  border: 0 none;
+  padding: var(--gd-active-border-thick, var(--gd-border-thick));
+  background: var(--gd-active-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
 .to-tag.type-number {
   --radius: 999em;
   --padding: 0 0.25em;
@@ -2071,11 +2144,31 @@ html body .height-full {
   color: var(--hover-color);
   border: var(--hover-border);
 }
+.to-tag.is-link .to-tag-wrapper:hover .to-tag-text {
+  background: var(--hover-color);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.to-tag.is-link .to-tag-wrapper:hover::after {
+  border: var(--hover-border);
+  background: linear-gradient(var(--gd-border-deg), var(--hover-gd-border-start), var(--hover-gd-border-end));
+}
 .to-tag.is-link .to-tag-wrapper:active {
   background: var(--active-bg);
   color: var(--active-color);
   border: var(--active-border);
 }
+.to-tag.is-link .to-tag-wrapper:active .to-tag-text {
+  background: var(--active-color);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.to-tag.is-link .to-tag-wrapper:active::after {
+  border: var(--active-border);
+  background: linear-gradient(var(--gd-border-deg), var(--active-gd-border-start), var(--active-gd-border-end));
+}
 .to-box {
   --bg: var(--color-bg);
   --bg-size: 100% 100%;
@@ -2099,7 +2192,6 @@ html body .height-full {
   --gd-border-start: transparent;
   --gd-border-end: transparent;
   --gd-border-deg: 90deg;
-  --gd-border-thick: 0;
   --hover-gd-border-start: var(--gd-border-start);
   --hover-gd-border-end: var(--gd-border-end);
   --active-gd-border-start: var(--gd-border-start);
@@ -2138,6 +2230,17 @@ html body .height-full {
 .to-box.height-full {
   height: 100%;
 }
+.to-box.is-gd-border {
+  background: transparent;
+}
+.to-box.is-gd-border:before {
+  border: 0 none;
+  padding: var(--gd-border-thick);
+  background: var(--gd-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
 .to-box.is-checked {
   overflow: hidden;
   border: var(--check-border);
@@ -2211,6 +2314,22 @@ html body .height-full {
   border: var(--hover-border);
   background: linear-gradient(var(--gd-border-deg), var(--active-gd-border-start), var(--active-gd-border-end));
 }
+.to-box.is-gd-border-hover.is-link:hover:before {
+  border: 0 none;
+  padding: var(--gd-hover-border-thick, var(--gd-border-thick));
+  background: var(--gd-hover-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+.to-box.is-gd-border-active.is-link:active:before {
+  border: 0 none;
+  padding: var(--gd-active-border-thick, var(--gd-border-thick));
+  background: var(--gd-active-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
 .to-breadcrumb {
   --size: 1em;
   --height: 1;
@@ -2272,7 +2391,7 @@ html body .height-full {
   --height: var(--height-fe);
   --width: auto;
   --padding: 0 1.5em;
-  --gap: 0.5em;
+  --icon-margin: 0.5em;
   --border: var(--border-fe);
   --radius: var(--radius-fe);
   --size: 1em;
@@ -2286,11 +2405,10 @@ html body .height-full {
   --active-bg: rgba(0, 0, 0, 0.1);
   --active-color: var(--color);
   --active-border: var(--border);
-  --text-gap: 0.5em;
+  --expand-margin: 0.5em;
   --gd-border-start: transparent;
   --gd-border-end: transparent;
   --gd-border-deg: 90deg;
-  --gd-border-thick: 0;
   --hover-gd-border-start: var(--gd-border-start);
   --hover-gd-border-end: var(--gd-border-end);
   --active-gd-border-start: var(--gd-border-start);
@@ -2300,7 +2418,6 @@ html body .height-full {
   justify-content: center;
   flex-shrink: 0;
   width: var(--width);
-  color: var(--color);
   border: 0 none;
   position: relative;
   padding: var(--padding);
@@ -2310,10 +2427,17 @@ html body .height-full {
   background-size: var(--bg-size);
   cursor: pointer;
   border-radius: var(--radius);
+  vertical-align: top;
+  display: inline-flex;
+}
+.to-button-content {
   display: inline-flex;
-  gap: var(--gap);
   align-items: center;
   vertical-align: top;
+  background: var(--color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 .to-button-expand,
 .to-button-icon {
@@ -2325,16 +2449,21 @@ html body .height-full {
 .to-button-expand {
   --opacity: 0.5;
 }
+.to-button-icon + .to-button-text {
+  margin-left: var(--icon-margin);
+}
 .to-button-text {
   font-size: var(--size);
   font-weight: var(--weight);
   display: flex;
   align-items: center;
-  gap: var(--text-gap);
 }
 .to-button-text:empty {
   display: none;
 }
+.to-button-text + .to-button-expand {
+  margin-left: var(--expand-margin);
+}
 .to-button::before {
   border: var(--border);
   border-radius: var(--radius);
@@ -2352,36 +2481,93 @@ html body .height-full {
   -webkit-mask-composite: xor;
   mask-composite: exclude;
 }
+.to-button.is-gd-border {
+  background: transparent;
+}
+.to-button.is-gd-border::before {
+  border: 0 none;
+  padding: var(--gd-border-thick);
+  background: var(--gd-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
 .to-button:hover {
-  color: var(--hover-color);
   background: var(--hover-bg);
   background-size: var(--bg-size);
 }
+.to-button:hover .to-button-content {
+  background: var(--hover-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 .to-button:hover:before {
   border: var(--hover-border);
   background: linear-gradient(var(--gd-border-deg), var(--hover-gd-border-start), var(--hover-gd-border-end));
 }
 .to-button:active {
-  color: var(--active-color);
   background: var(--active-bg);
   background-size: var(--bg-size);
 }
+.to-button:active .to-button-content {
+  background: var(--active-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 .to-button:active:before {
   border: var(--active-border);
   background: linear-gradient(var(--gd-border-deg), var(--active-gd-border-start), var(--active-gd-border-end));
 }
+.to-button.is-gd-border-hover:hover::before {
+  border: 0 none;
+  padding: var(--gd-hover-border-thick, var(--gd-border-thick));
+  background: var(--gd-hover-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+.to-button.is-gd-border-active:active::before {
+  border: 0 none;
+  padding: var(--gd-active-border-thick, var(--gd-border-thick));
+  background: var(--gd-active-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
 .to-button.icon-position-right .to-button-icon {
   order: 2;
 }
+.to-button.icon-position-right .to-button-icon + .to-button-text {
+  margin-left: 0;
+  margin-right: var(--icon-margin);
+}
 .to-button.icon-position-top,
 .to-button.icon-position-bottom {
   --height: auto;
   --padding: 1em 1.5em;
+}
+.to-button.icon-position-top .to-button-content,
+.to-button.icon-position-bottom .to-button-content {
   flex-direction: column;
 }
+.to-button.icon-position-top .to-button-icon + .to-button-text {
+  margin-left: 0;
+  margin-top: var(--icon-margin);
+}
+.to-button.icon-position-top .to-button-text + .to-button-expand,
+.to-button.icon-position-bottom .to-button-text + .to-button-expand {
+  margin-top: var(--expand-margin);
+  margin-left: 0;
+}
 .to-button.icon-position-bottom .to-button-icon {
   order: 2;
 }
+.to-button.icon-position-bottom .to-button-icon + .to-button-text {
+  margin-left: 0;
+  margin-bottom: var(--icon-margin);
+}
 .to-button.width-full {
   --width: 100%;
 }
@@ -2409,16 +2595,15 @@ html body .height-full {
   --border: 0 none;
   --bg: none;
   --bg-size: 100% 100%;
-  --gap: 0;
   --date-padding: 0.5em;
   --date-radius: 0;
   --date-bg: none;
   --date-bg-size: 100% 100%;
-  --date-gap: 0;
   --date-border: 0 none;
   --header-padding: 0 0 0.5em 0;
+  --header-margin: 0;
   --header-radius: 0;
-  --header-border: 1px solid var(--color-border);
+  --header-divider: 1px solid var(--color-border);
   --header-bg: none;
   --header-bg-size: 100% 100%;
   --header-content-height: 3em;
@@ -2436,15 +2621,14 @@ html body .height-full {
   --header-content-active-border: var(--header-content-border);
   --header-content-active-bg: rgba(0, 0, 0, 0.3);
   --header-content-active-color: var(--header-content-color);
-  --picker-padding: 0.5em 0 0;
-  --picker-radius: 0;
-  --picker-border: 0 none;
-  --picker-bg: none;
-  --picker-bg-size: 100% 100%;
-  --picker-gap: 0.5em;
-  --year-width: 30%;
+  --ym-padding: 0.5em 0 0;
+  --ym-radius: 0;
+  --ym-border: 0 none;
+  --ym-bg: none;
+  --ym-bg-size: 100% 100%;
+  --year-width: 26%;
+  --year-margin: 0.5em;
   --year-gap: 0em;
-  --year-list-gap: 1px;
   --year-padding: 0em 0.5em 0 0;
   --year-radius: 0;
   --year-border: 0 none;
@@ -2474,7 +2658,6 @@ html body .height-full {
   --year-item-active-bg: rgba(0, 0, 0, 0.3);
   --year-item-active-color: var(--year-item-color);
   --month-gap: 0em;
-  --month-list-gap: 0em;
   --month-padding: 0;
   --month-radius: 0;
   --month-border: 0 none;
@@ -2489,7 +2672,6 @@ html body .height-full {
   --month-item-bg: none;
   --month-item-bg-size: 100% 100%;
   --month-item-color: var(--color-fg);
-  --month-item-gap: 0;
   --month-item-cur-border: var(--month-item-border);
   --month-item-cur-bg: var(--primary-light-9);
   --month-item-cur-color: var(--color-primary);
@@ -2525,7 +2707,6 @@ html body .height-full {
   --day-item-bg: none;
   --day-item-bg-size: 100% 100%;
   --day-item-color: inherit;
-  --day-item-gap: 0em;
   --day-item-text-size: 1em;
   --day-item-text-color: #000;
   --day-item-start-border: var(--day-item-border);
@@ -2563,9 +2744,9 @@ html body .height-full {
   --time-border: 0 none;
   --time-bg: none;
   --time-bg-size: 100% 100%;
-  --time-gap: 0;
-  --time-width: 15em;
+  --time-width: 33.3%;
   --time-divider: 1px solid var(--color-border);
+  --time-gap: 0;
   --time-info-padding: 0 0 0.5em 0;
   --time-info-radius: 0;
   --time-info-divider: 1px solid var(--color-border);
@@ -2574,6 +2755,7 @@ html body .height-full {
   --time-info-height: 3em;
   --time-info-size: 1em;
   --time-info-weight: bold;
+  --time-info-margin: 0;
   --time-content-gap: 0.5em;
   --time-content-padding: 0.5em 0 0;
   --time-item-height: 3em;
@@ -2584,7 +2766,6 @@ html body .height-full {
   --time-item-bg: none;
   --time-item-bg-size: 100% 100%;
   --time-item-color: var(--color-fg);
-  --time-item-gap: 0;
   --time-item-cur-border: var(--time-item-border);
   --time-item-cur-bg: var(--primary-light-9);
   --time-item-cur-color: var(--color-primary);
@@ -2597,12 +2778,14 @@ html body .height-full {
   --time-item-active-border: var(--time-item-border);
   --time-item-active-bg: rgba(0, 0, 0, 0.3);
   --time-item-active-color: var(--time-item-color);
+  --fn-margin: 0;
   --fn-divider: 1px solid var(--color-border);
   --fn-padding: 0.5em;
   --fn-bg: none;
   --fn-bg-size: 100% 100%;
   --fn-gap: 0.5em;
   --fn-align: flex-end;
+  --legend-margin: 0;
 }
 .to-calendar {
   position: relative;
@@ -2612,7 +2795,6 @@ html body .height-full {
   border: var(--border);
   background: var(--bg);
   background-size: var(--bg-size);
-  gap: var(--gap);
   height: var(--height);
   display: flex;
   flex-direction: column;
@@ -2641,7 +2823,6 @@ html body .height-full {
   border: var(--date-border);
   background: var(--date-bg);
   background-size: var(--date-bg-size);
-  gap: var(--date-gap);
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -2650,8 +2831,9 @@ html body .height-full {
   display: flex;
   align-items: center;
   padding: var(--header-padding);
+  margin-bottom: var(--header-margin);
   border-radius: var(--header-radius);
-  border-bottom: var(--header-border);
+  border-bottom: var(--header-divider);
   background: var(--header-bg);
   background-size: var(--header-bg-size);
   gap: var(--header-gap);
@@ -2671,10 +2853,10 @@ html body .height-full {
   align-items: center;
   cursor: pointer;
   height: var(--header-content-height);
+  gap: var(--header-content-gap);
   border-radius: var(--header-content-radius);
   border: var(--header-content-border);
   color: var(--header-content-color);
-  gap: var(--header-content-gap);
   font-weight: var(--header-content-weight);
   background: var(--header-content-bg);
   background-size: var(--header-content-bg-size);
@@ -2695,31 +2877,34 @@ html body .height-full {
 .to-calendar-header-month {
   font-size: var(--header-content-size);
 }
-.to-calendar-picker {
+.to-calendar-ym {
   z-index: 12;
   display: flex;
   min-height: 0;
   height: 100%;
   box-sizing: border-box;
   align-items: center;
-  padding: var(--picker-padding);
-  border-radius: var(--picker-radius);
-  border: var(--picker-border);
-  background: var(--picker-bg);
-  background-size: var(--picker-bg-size);
-  gap: var(--picker-gap);
+  padding: var(--ym-padding);
+  border-radius: var(--ym-radius);
+  border: var(--ym-border);
+  background: var(--ym-bg);
+  background-size: var(--ym-bg-size);
+  gap: var(--ym-gap);
 }
 .to-calendar-year {
-  --padding: var(--year-padding);
+  padding: var(--year-padding);
   width: var(--year-width);
+  margin-right: var(--year-margin);
   border-radius: var(--year-radius);
   border: var(--year-border);
   background: var(--year-bg);
   background-size: var(--year-bg-size);
-  gap: var(--year-gap);
   border-right: var(--year-divider);
 }
 .to-calendar-year .to-scroll-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--year-gap);
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
@@ -2732,6 +2917,7 @@ html body .height-full {
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  flex-shrink: 0;
   height: var(--year-item-height);
   border-radius: var(--year-item-radius);
   border: var(--year-item-border);
@@ -2772,6 +2958,7 @@ html body .height-full {
   display: flex;
   align-items: center;
   align-self: flex-start;
+  flex-wrap: wrap;
   padding: var(--month-padding);
   border-radius: var(--month-radius);
   border: var(--month-border);
@@ -2779,28 +2966,14 @@ html body .height-full {
   background-size: var(--month-bg-size);
   gap: var(--month-gap);
 }
-.to-calendar-month-list {
-  flex: 1;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--month-list-gap);
-}
 .to-calendar-month-item {
-  width: calc((100% - var(--month-list-gap) * 2) / 3);
-  box-sizing: border-box;
-}
-.to-calendar-month-item.is-checked .to-calendar-month-item-content {
-  background: #0e0;
-  color: #fff;
-}
-.to-calendar-month-item-content {
+  width: calc((100% - var(--month-gap) * 2) / 3);
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   margin: 0 auto;
   cursor: pointer;
-  width: var(--month-item-width);
   height: var(--month-item-height);
   padding: var(--month-item-padding);
   border-radius: var(--month-item-radius);
@@ -2808,24 +2981,27 @@ html body .height-full {
   background: var(--month-item-bg);
   background-size: var(--month-item-bg-size);
   color: var(--month-item-color);
-  gap: var(--month-item-gap);
 }
-.to-calendar-month-item.is-cur .to-calendar-month-item-content {
+.to-calendar-month-item.is-checked {
+  background: #0e0;
+  color: #fff;
+}
+.to-calendar-month-item.is-cur {
   border: var(--month-item-cur-border);
   background: var(--month-item-cur-bg);
   color: var(--month-item-cur-color);
 }
-.to-calendar-month-item.is-on .to-calendar-month-item-content {
+.to-calendar-month-item.is-on {
   border: var(--month-item-on-border);
   background: var(--month-item-on-bg);
   color: var(--month-item-on-color);
 }
-.to-calendar-month-item-content:hover {
+.to-calendar-month-item:not(.is-on):hover {
   border: var(--month-item-hover-border);
   background: var(--month-item-hover-bg);
   color: var(--month-item-hover-color);
 }
-.to-calendar-month-item-content:active {
+.to-calendar-month-item:not(.is-on):active {
   border: var(--month-item-active-border);
   background: var(--month-item-active-bg);
   color: var(--month-item-active-color);
@@ -2854,7 +3030,7 @@ html body .height-full {
   border: var(--day-border);
   background: var(--day-bg);
   background-size: var(--day-bg-size);
-  gap: var(--day-gap) 0;
+  gap: var(--day-gap);
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
@@ -2862,101 +3038,72 @@ html body .height-full {
 .to-calendar-day-item {
   width: calc(100% / 7);
   box-sizing: border-box;
-  position: relative;
   padding: var(--day-item-padding);
-}
-.to-calendar-day-item-content {
-  width: var(--day-item-width);
   height: var(--day-item-height);
   border-radius: var(--day-item-radius);
   border: var(--day-item-border);
   background: var(--day-item-bg);
   background-size: var(--day-item-bg-size);
   color: var(--day-item-color);
-  gap: var(--day-item-gap);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0 auto;
   position: relative;
 }
-.to-calendar-day-item.is-sat .to-calendar-day-item-content {
+.to-calendar-day-item.is-sat {
   border: var(--day-item-sat-border);
   background: var(--day-item-sat-bg);
   color: var(--day-item-sat-color);
 }
-.to-calendar-day-item.is-sun .to-calendar-day-item-content {
+.to-calendar-day-item.is-sun {
   border: var(--day-item-sun-border);
   background: var(--day-item-sun-bg);
   color: var(--day-item-sun-color);
 }
-.to-calendar-day-item.is-cur .to-calendar-day-item-content {
+.to-calendar-day-item.is-cur {
   border: var(--day-item-cur-border);
   background: var(--day-item-cur-bg);
   color: var(--day-item-cur-color);
 }
-.to-calendar-day-item.is-on .to-calendar-day-item-content {
+.to-calendar-day-item.is-on {
   border: var(--day-item-on-border);
   background: var(--day-item-on-bg);
   color: var(--day-item-on-color);
 }
-.to-calendar-day-item.is-start .to-calendar-day-item-content {
+.to-calendar-day-item.is-start {
   border: var(--day-item-start-border);
   background: var(--day-item-start-bg);
   color: var(--day-item-start-color);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
-.to-calendar-day-item.is-end .to-calendar-day-item-content {
+.to-calendar-day-item.is-end {
   border: var(--day-item-end-border);
   background: var(--day-item-end-bg);
   color: var(--day-item-end-color);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 .to-calendar-day-item.is-range {
   background: var(--day-item-range-bg);
-}
-.to-calendar-day-item.is-range .to-calendar-day-item-content {
   color: var(--day-item-range-color);
+  border-radius: 0;
 }
 .to-calendar-month-item.is-range {
   background: var(--day-item-range-bg);
-}
-.to-calendar-month-item.is-range .to-calendar-month-item-content {
   color: var(--day-item-range-color);
 }
-.to-calendar-day-item.is-start::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: calc((100% - var(--day-item-width)) / 2 - var(--day-item-padding));
-  border-radius: var(--day-item-range-radius) 0 0 var(--day-item-range-radius);
-  background: var(--day-item-range-bg);
-}
-.to-calendar-day-item.is-end::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: calc((100% - var(--day-item-width)) / 2 - var(--day-item-padding));
-  border-radius: 0 var(--day-item-range-radius) var(--day-item-range-radius) 0;
-  background: var(--day-item-range-bg);
-}
-.to-calendar-day-item:not(.is-on):not(.is-start):not(.is-end) .to-calendar-day-item-content:not(:empty):hover {
+.to-calendar-day-item:not(.is-on):not(.is-start):not(.is-end):not(:empty):hover {
   border: var(--day-item-hover-border);
   background: var(--day-item-hover-bg);
   color: var(--day-item-hover-color);
 }
-.to-calendar-day-item:not(.is-on):not(.is-start):not(.is-end) .to-calendar-day-item-content:not(:empty):active {
+.to-calendar-day-item:not(.is-on):not(.is-start):not(.is-end):not(:empty):active {
   border: var(--day-item-active-border);
   background: var(--day-item-active-bg);
   color: var(--day-item-active-color);
 }
-.to-calendar-day-item.dis span {
-  cursor: not-allowed;
-  color: #cccccc;
-}
 .to-calendar-time {
   border-left: var(--time-divider);
   width: var(--time-width);
@@ -2964,7 +3111,6 @@ html body .height-full {
   border-radius: var(--time-radius);
   background: var(--time-bg);
   background-size: var(--time-bg-size);
-  gap: var(--time-gap);
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -2977,9 +3123,9 @@ html body .height-full {
   border-bottom: var(--time-info-divider);
   background: var(--time-info-bg);
   background-size: var(--time-info-bg-size);
-  gap: var(--time-info-gap);
   height: var(--time-info-height);
   line-height: var(--time-info-height);
+  margin-bottom: var(--time-info-margin);
 }
 .to-calendar-time-info-text {
   font-size: var(--time-info-size);
@@ -3000,6 +3146,9 @@ html body .height-full {
   flex: 1;
   -ms-overflow-style: none;
   scrollbar-width: none;
+  gap: var(--time-gap);
+  display: flex;
+  flex-direction: column;
 }
 .to-calendar-time-list .to-scroll-content::-webkit-scrollbar {
   display: none;
@@ -3010,6 +3159,7 @@ html body .height-full {
   justify-content: center;
   box-sizing: border-box;
   cursor: pointer;
+  flex-shrink: 0;
   height: var(--time-item-height);
   padding: var(--time-item-padding);
   border-radius: var(--time-item-radius);
@@ -3017,7 +3167,6 @@ html body .height-full {
   background: var(--time-item-bg);
   background-size: var(--time-item-bg-size);
   color: var(--time-item-color);
-  gap: var(--time-item-gap);
 }
 .to-calendar-time-item:hover {
   background: var(--time-item-hover-bg);
@@ -3039,8 +3188,12 @@ html body .height-full {
   background: var(--year-item-on-bg);
   color: var(--year-item-on-color);
 }
+.to-calendar-legend {
+  margin-top: var(--legend-margin);
+}
 .to-calendar-fn {
   display: flex;
+  margin-top: var(--fn-margin);
   padding: var(--fn-padding);
   border-top: var(--fn-divider);
   background: var(--fn-bg);
@@ -3168,17 +3321,19 @@ html body .height-full {
   --padding: 0;
   --shadow: none;
   --width: 100%;
+  --min-width: 10em;
   --size: 1em;
   --weight: normal;
   --radius: var(--radius-fe);
-  --gap: 0;
   --color: inherit;
   --placeholder-color: var(--color-placeholder);
   --padding: 0 0 0 1em;
   --tag-gap: 0.5em;
   --tag-height: 2em;
   --clear-height: var(--height);
+  --clear-margin: 0;
   --arrow-height: var(--height);
+  --arrow-margin: 0;
   --overflow-color: var(--color-fg-fade);
   --hover-bg: rgba(0, 0, 0, 0.1);
   --hover-border: var(--border);
@@ -3187,7 +3342,6 @@ html body .height-full {
   --active-border: var(--border);
   --active-color: var(--color);
   --option-padding: 0.5em 0;
-  --option-gap: 0;
   --option-list-gap-x: 0em;
   --option-list-gap-y: 0em;
   --option-tip-color: var(--color-fg-fade);
@@ -3239,12 +3393,13 @@ html body .height-full {
 }
 .to-select {
   border-radius: var(--radius);
+  width: var(--width);
+  min-width: var(--min-width);
 }
 .to-select-el {
   box-sizing: border-box;
   position: relative;
   display: flex;
-  gap: var(--gap);
   align-items: center;
   min-height: var(--height);
   border-radius: var(--radius);
@@ -3287,6 +3442,7 @@ html body .height-full {
   --width: 1em;
   --height: 1em;
   --size: 1em;
+  margin-right: var(--icon-margin);
 }
 .to-select-content {
   flex: 1;
@@ -3309,6 +3465,7 @@ html body .height-full {
   display: none;
   cursor: pointer;
   transition: opacity 0.15s ease;
+  margin-left: var(--clear-margin);
   --width: var(--clear-height);
   --height: var(--clear-height);
 }
@@ -3316,6 +3473,7 @@ html body .height-full {
   --color: #aaa;
   --width: var(--arrow-height);
   --height: var(--arrow-height);
+  margin-left: var(--arrow-margin);
 }
 .to-select:hover .to-select-clear {
   display: inline-flex;
@@ -3514,7 +3672,7 @@ html body .height-full {
 .to-select.is-filterable .to-select-tag:has(.to-tag) {
   padding-bottom: 0;
 }
-.media-pc .to-select:hover .to-select-arrow {
+.media-pc .to-select:not(.is-placeholder):hover .to-select-clear + .to-select-arrow {
   display: none;
 }
 .to-select.to-select-mode-line {
@@ -3557,7 +3715,7 @@ html body .height-full {
   --gap-x: var(--gap);
   --gap-y: var(--gap);
   --col: 1;
-  --item-gap: 0.5em;
+  --label-margin: 0.5em;
   --item-border: 0 none;
   --item-padding: 0;
   --item-bg: none;
@@ -3568,9 +3726,9 @@ html body .height-full {
   --label-size: 1em;
   --label-padding: 0.5em 0;
   --label-color: inherit;
-  --label-gap: 0.3em;
   --label-align: flex-end;
   --required-color: var(--color-danger);
+  --required-margin: 0.3em;
   --submit-gap: 0.5em;
 }
 .to-form {
@@ -3587,7 +3745,6 @@ html body .height-full {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  gap: var(--item-gap);
   padding: var(--item-padding);
   background: var(--item-bg);
   background-size: var(--item-bg-size);
@@ -3625,7 +3782,7 @@ html body .height-full {
   padding: var(--label-padding);
   line-height: var(--label-lh);
   display: inline-flex;
-  gap: var(--label-gap);
+  margin-right: var(--label-margin);
 }
 .to-form-label-text {
   font-size: var(--label-size);
@@ -3647,6 +3804,7 @@ html body .height-full {
 .to-form-item.is-required .to-form-label:before {
   content: '*';
   color: var(--required-color);
+  margin-right: var(--required-margin);
 }
 .to-form.submit-position-right .to-form-item {
   flex: 1;
@@ -3668,7 +3826,7 @@ html body .height-full {
   width: auto;
 }
 .to-form.submit-position-item .to-form-submit {
-  padding-left: var(--item-gap);
+  padding-left: var(--label-margin);
 }
 .to-form.col-1 {
   --col: 1;
@@ -3695,7 +3853,7 @@ html body .height-full {
   --gap-y: 1em;
   --label-lh: 1.5em;
   --label-padding: 0;
-  --label-gap: 0.5em;
+  --label-margin: 0.5em;
 }
 .to-form.dir-v .to-form-item {
   flex-direction: column;
@@ -3703,6 +3861,10 @@ html body .height-full {
 .to-form.dir-v .to-form-label {
   justify-content: flex-start;
 }
+.to-form.dir-v .to-form-label {
+  margin-right: 0;
+  margin-bottom: var(--label-margin);
+}
 .to-header {
   --bg: none;
   --bg-size: 100% 100%;
@@ -3720,7 +3882,7 @@ html body .height-full {
   --hover-bg: rgba(0, 0, 0, 0.1);
   --hover-color: var(--color);
   --active-border: var(--border);
-  --active-bg: rgba(0, 0, 0, 0.1);
+  --active-bg: rgba(0, 0, 0, 0.3);
   --active-color: var(--color);
   --fn-gap: 0.5em;
   --tip-color: var(--color-fg);
@@ -3805,7 +3967,10 @@ html body .height-full {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: var(--weight);
-  color: var(--color);
+  background: var(--color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 .to-header-center {
   position: absolute;
@@ -3838,18 +4003,28 @@ html body .height-full {
   background: var(--hover-bg);
   border: var(--hover-border);
 }
-.to-header.is-link:not(:has(.to-button:hover)):hover .to-header-back,
-.to-header.is-link:not(:has(.to-button:hover)):hover .to-header-title-text {
+.to-header.is-link:not(:has(.to-button:hover)):hover .to-header-back {
   color: var(--hover-color);
 }
+.to-header.is-link:not(:has(.to-button:hover)):hover .to-header-title-text {
+  background: var(--hover-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 .to-header.is-link:not(:has(.to-button:active)):active {
   background: var(--active-bg);
   border: var(--active-border);
 }
-.to-header.is-link:not(:has(.to-button:active)):active .to-header-back,
-.to-header.is-link:not(:has(.to-button:active)):active .to-header-title-text {
+.to-header.is-link:not(:has(.to-button:active)):active .to-header-back {
   color: var(--active-color);
 }
+.to-header.is-link:not(:has(.to-button:active)):active .to-header-title-text {
+  background: var(--active-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 .to-hide:not(.to-hide-keep) {
   display: none !important;
 }
@@ -3980,16 +4155,16 @@ html body .height-full {
   --width: 100%;
   --radius: var(--radius-fe);
   --weight: normal;
-  --gap: 0;
   --shadow: none;
   --clear-margin: 0;
   --clear-height: var(--height);
   --clear-width: var(--clear-height);
-  --content-gap: 1em;
+  --icon-margin: 1em;
   --content-padding: 0 1em;
   --prefix-padding: 0;
+  --prefix-margin: 0;
   --suffix-padding: 0;
-  --suffix-gap: 0;
+  --suffix-margin: 0;
   --prefix-text-padding: 0 0 0 1em;
   --prefix-text-bg: none;
   --prefix-text-bg-size: 100% 100%;
@@ -4009,12 +4184,12 @@ html body .height-full {
   --suffix-icon-height: var(--height);
   --count-color: var(--color-fg-fade);
   --count-size: 1em;
-  --count-padding: 0;
+  --count-padding: 0 1em 0 0;
   --count-lh: var(--height);
   --count-align: center;
+  --count-margin: 1em;
   --lh: 1.5em;
   --fn-padding: 0 1em 1em;
-  --fn-gap: 1em;
   --suggestion-gap: 0;
   --focus-outline: 0 none;
   --focus-border: var(--border);
@@ -4040,6 +4215,18 @@ html body .height-full {
   height: var(--height);
   box-shadow: var(--shadow);
 }
+.to-input::before {
+  border: var(--border);
+  border-radius: var(--radius);
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+  pointer-events: none;
+}
 .to-input-wrapper {
   width: 100%;
   height: 100%;
@@ -4050,7 +4237,6 @@ html body .height-full {
   overflow: hidden;
   position: relative;
   flex-wrap: wrap;
-  gap: var(--gap);
 }
 .to-input:has(textarea:focus),
 .to-input:has(input:focus) {
@@ -4069,12 +4255,12 @@ html body .height-full {
   display: flex;
   align-items: center;
   padding: var(--content-padding);
-  gap: var(--content-gap);
   height: 100%;
 }
 .to-input-icon {
   --width: 1em;
   --height: 1em;
+  margin-right: var(--icon-margin);
 }
 .to-input-clear {
   margin: var(--clear-margin);
@@ -4121,10 +4307,11 @@ html body .height-full {
 }
 .to-input-prefix {
   padding: var(--prefix-padding);
+  margin-right: var(--prefix-margin);
 }
 .to-input-suffix {
-  gap: var(--suffix-gap);
   padding: var(--suffix-padding);
+  margin-left: var(--suffix-margin);
 }
 .to-input-suffix > .to-icon {
   --width: var(--suffix-icon-height);
@@ -4164,6 +4351,8 @@ html body .height-full {
   --suffix-text-lh: 3em;
   --count-lh: 1.25em;
   --clear-height: 3em;
+  --count-padding: 0;
+  --count-align: flex-end;
 }
 .to-input.type-textarea .to-input-wrapper {
   flex: 1;
@@ -4176,9 +4365,15 @@ html body .height-full {
   resize: none;
   height: 100%;
 }
+.to-input.type-textarea .to-input-suffix {
+  margin-left: 0;
+  margin-right: var(--suffix-margin);
+}
+.to-input.type-textarea:has(.to-input-fn) {
+  min-height: 8em;
+}
 .to-input-fn {
   padding: var(--fn-padding);
-  gap: var(--fn-gap);
   display: flex;
   width: 100%;
   box-sizing: border-box;
@@ -4192,18 +4387,6 @@ html body .height-full {
 .to-input-suggestion-item {
   --border: 0 none;
 }
-.to-input::before {
-  border: var(--border);
-  border-radius: var(--radius);
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 2;
-  pointer-events: none;
-}
 .to-input.is-disabled:not(.is-link) {
   background: var(--disabled-bg);
   color: var(--disabled-color);
@@ -4238,6 +4421,7 @@ html body .height-full {
   padding: var(--count-padding);
   line-height: var(--count-lh);
   align-self: var(--count-align);
+  margin-left: var(--count-margin);
 }
 .to-input-count:only-child {
   flex: 1;
@@ -4245,16 +4429,6 @@ html body .height-full {
 .to-input-count-text {
   font-size: var(--count-size);
 }
-.to-input.type-textarea {
-  --count-align: flex-end;
-}
-.to-input.type-textarea .to-input-count {
-  display: block;
-  text-align: right;
-}
-.to-input.type-textarea:has(.to-input-fn) {
-  min-height: 8em;
-}
 .to-input.is-link {
   cursor: pointer;
 }
@@ -4324,9 +4498,7 @@ html body .height-full {
   --padding: 2em;
   --radius: 1em;
   --align: center;
-  --gap: 0.5em;
-  --main-gap: 1em;
-  --text-gap: 0.5em;
+  --main-margin: 0.5em;
   --icon-width: 6em;
   --icon-height: 6em;
   --icon-size: 6em;
@@ -4341,11 +4513,12 @@ html body .height-full {
   --title-lh: 2.25em;
   --title-weight: bold;
   --title-color: var(--color-fg);
+  --content-margin: 0.5em;
   --content-size: 1em;
   --content-lh: 1.5em;
   --content-weight: normal;
   --content-color: var(--color-fg-fade);
-  --detail-gap: 0.5em;
+  --detail-margin: 1em;
   --detail-bg: #f7f7f7;
   --detail-bg-size: 100% 100%;
   --detail-padding: 1em;
@@ -4353,7 +4526,9 @@ html body .height-full {
   --detail-lh: 1.8em;
   --detail-size: 1em;
   --detail-color: var(--color-fg);
+  --detail-content-margin: 0.5em;
   --fn-gap: 1em;
+  --fn-margin: 1em;
   --fn-align: center;
   --fn-item-flex: none;
 }
@@ -4386,7 +4561,6 @@ html body .height-full {
   padding: var(--padding);
   border-radius: var(--radius);
   width: var(--width);
-  gap: var(--gap);
   white-space: normal;
   transition: 0.1s transform ease-out;
   transform: scale(0);
@@ -4425,19 +4599,22 @@ html body .height-full {
 .to-msg-main {
   display: flex;
   flex-direction: column;
-  gap: var(--main-gap);
   min-width: 0;
+  margin-top: var(--main-margin);
 }
 .to-msg-title {
   order: 1;
-  color: var(--title-color);
+  background: var(--title-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   font-size: var(--title-size);
   font-weight: var(--title-weight);
   line-height: calc(var(--title-lh) / var(--title-size));
 }
 .to-msg-content {
   order: 1;
-  margin-top: var(--text-gap);
+  margin-top: var(--content-margin);
   font-size: var(--content-size);
   line-height: calc(var(--content-lh) / var(--content-size));
   color: var(--content-color);
@@ -4458,6 +4635,7 @@ html body .height-full {
   padding: var(--detail-padding);
   text-align: left;
   overflow: auto;
+  margin-top: var(--detail-margin);
 }
 .to-msg-detail-button {
   --height: 1.5em;
@@ -4468,7 +4646,7 @@ html body .height-full {
 }
 .to-msg-detail-content {
   line-height: calc(var(--detail-lh) / var(--detail-size) * 1em);
-  margin-top: calc(var(--detail-gap) / var(--detail-size) * 1em);
+  margin-top: calc(var(--detail-content-margin) / var(--detail-size) * 1em);
   font-size: var(--detail-size);
   color: var(--detail-color);
 }
@@ -4477,6 +4655,7 @@ html body .height-full {
   align-items: center;
   justify-content: var(--fn-align);
   gap: var(--fn-gap);
+  margin-top: var(--fn-margin);
   order: 1;
 }
 .to-msg-fn .to-button {
@@ -4582,7 +4761,6 @@ html body .height-full {
   --size-height: var(--height);
   --jumper-order: 4;
   --jumper-color: 0.5em;
-  --jumper-gap: 0.5em;
   --jumper-padding: 0;
   --jumper-border: 0 none;
   --jumper-bg: none;
@@ -4603,6 +4781,24 @@ html body .height-full {
   align-items: center;
   gap: var(--gap);
 }
+.to-page.align-center {
+  justify-content: center;
+}
+.to-page.align-center .to-page-slot {
+  display: none;
+}
+.to-page.align-left {
+  justify-content: flex-start;
+}
+.to-page.align-left .to-page-slot {
+  display: none;
+}
+.to-page.align-right {
+  justify-content: flex-end;
+}
+.to-page.align-right .to-page-slot {
+  display: none;
+}
 .to-page-total {
   font-size: var(--total-size);
   font-weight: var(--total-weight);
@@ -4615,10 +4811,8 @@ html body .height-full {
   user-select: none;
   display: flex;
   align-items: center;
-  gap: var(--pager-gap);
 }
 .to-page-pager-list {
-  flex: 1;
   display: flex;
   gap: var(--pager-list-gap);
 }
@@ -4730,6 +4924,7 @@ html body .height-full {
 }
 .to-page-size-select {
   --height: var(--size-height);
+  --min-width: 0;
 }
 .to-page-jumper {
   order: var(--jumper-order);
@@ -4742,7 +4937,6 @@ html body .height-full {
   white-space: nowrap;
   background: var(--jumper-bg);
   background-size: var(--jumper-bg-size);
-  gap: var(--jumper-gap);
   border-radius: var(--pager-jumper-radius);
 }
 .to-page-jumper::before {
@@ -4759,6 +4953,7 @@ html body .height-full {
   --height: var(--jumper-height);
   --width: 6em;
   --gap: 0;
+  --content-padding: 0 0 0 1em;
 }
 .to-page-jumper .to-page-jumper-icon {
   --height: var(--jumper-height);
@@ -5172,7 +5367,6 @@ html body .height-full {
 }
 .to-checkbox {
   --padding: 0 1em;
-  --gap: 0.5em;
   --height: var(--height-fe);
   --width: auto;
   --bg: none;
@@ -5192,12 +5386,16 @@ html body .height-full {
   --box-color: #fff;
   --box-radius: var(--radius-fe);
   --box-border: var(--border-fe);
+  --box-margin: 0.5em;
   --box-hover-bg: var(--box-bg);
   --box-hover-color: var(--box-color);
   --box-hover-border: var(--box-border);
   --box-active-bg: var(--box-bg);
   --box-active-color: var(--box-color);
   --box-active-border: var(--box-border);
+  --label-color: inherit;
+  --label-size: 100%;
+  --label-weight: normal;
   --checked-bg: var(--bg);
   --checked-border: var(--border);
   --checked-color: var(--color);
@@ -5225,7 +5423,6 @@ html body .height-full {
   box-sizing: border-box;
   width: var(--width);
   align-items: center;
-  gap: var(--gap);
   height: var(--height);
   background: var(--bg);
   background-size: var(--bg-size);
@@ -5238,7 +5435,7 @@ html body .height-full {
   color: var(--disabled-color);
   cursor: not-allowed;
 }
-.to-checkbox .to-checkbox-box {
+.to-checkbox-box {
   position: relative;
   display: flex;
   width: var(--box-size);
@@ -5251,13 +5448,23 @@ html body .height-full {
   border-radius: var(--box-radius);
   border: var(--box-border);
 }
-.to-checkbox .to-checkbox-box:after {
+.to-checkbox-box:after {
   content: "\e6cd";
   font-family: "icon";
   font-size: 50%;
 }
-.to-checkbox .to-checkbox-label {
+.to-checkbox-label {
   flex: 1;
+  color: var(--label-color);
+  font-weight: var(--label-weight);
+  margin-left: var(--box-margin);
+}
+.to-checkbox-label-text {
+  background: var(--label-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-size: var(--label-size);
 }
 .to-checkbox.is-checked {
   color: var(--checked-color);
@@ -5421,6 +5628,12 @@ html body .height-full {
   --suffix-padding: 0;
   --suffix-margin: 0;
   --suffix-color: var(--color-fg);
+  --hover-border: var(--border);
+  --hover-bg: rgba(0, 0, 0, 0.05);
+  --hover-color: var(--color);
+  --active-border: var(--border);
+  --active-bg: rgba(0, 0, 0, 0.1);
+  --active-color: var(--color);
 }
 .to-date-range {
   display: flex;
@@ -5486,6 +5699,20 @@ html body .height-full {
   margin: var(--suffix-margin);
   color: var(--suffix-color);
 }
+.to-date-range.is-link:hover {
+  background: var(--hover-bg);
+  color: var(--hover-color);
+}
+.to-date-range.is-link:hover .to-input::before {
+  border: var(--hover-border);
+}
+.to-date-range.is-link:active {
+  background: var(--active-bg);
+  color: var(--active-color);
+}
+.to-date-range.is-link:active .to-input::before {
+  border: var(--active-border);
+}
 .media-pc .to-date-range-clear {
   visibility: hidden;
 }
@@ -6048,6 +6275,12 @@ html body .height-full {
   font-size: var(--item-on-size);
   font-weight: var(--item-on-weight);
 }
+.to-tab-item.is-on .to-tab-item-label {
+  background: var(--item-on-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 .to-tab-item:has(+.is-on) .to-tab-item-main:after {
   width: var(--item-on-divider-width);
   border-right: var(--item-on-divider);
@@ -6744,18 +6977,15 @@ html body .height-full {
   --weight: normal;
   --style: normal;
   --decoration: none;
-  --gap: 0.3em;
+  --icon-margin: 0.3em;
   --hover-color: var(--color-primary);
   --hover-border: 1px solid var(--hover-color);
   --active-color: var(--color-primary);
   --active-border: 0 none;
-  --start: var(--color-primary);
-  --end: var(--color-success);
 }
 .to-text {
   display: inline-flex;
   align-items: center;
-  gap: var(--gap);
   font-size: var(--size);
   line-height: calc(var(--lh) / var(--size));
   font-weight: var(--weight);
@@ -6765,11 +6995,32 @@ html body .height-full {
   text-shadow: var(--shadow);
   text-decoration: var(--decoration);
 }
+.to-text-icon {
+  margin-right: var(--icon-margin);
+}
 .to-text.is-gd {
   background: linear-gradient(to right, var(--start), var(--end));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+.to-text.is-gd-color {
+  background: var(--color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.to-text.is-gd-hover:hover {
+  background: var(--hover-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.to-text.is-gd-active:active {
+  background: var(--active-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 .to-text.decos-s {
   text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.3);
 }
@@ -6847,9 +7098,10 @@ html body .height-full {
   --bg: #f7f7f7;
   --bg-size: 100% 100%;
   --color: var(--color-fg);
-  --gap: 0.5em;
   --lh: 1.5em;
   --align: center;
+  --remove-margin: 0.5em;
+  --close-margin: 0.5em;
 }
 .to-tip-wrapper {
   padding: var(--padding);
@@ -6858,13 +7110,15 @@ html body .height-full {
   background: var(--bg);
   background-size: var(--bg-size);
   color: var(--color);
-  gap: var(--gap);
   line-height: var(--lh);
   display: flex;
   align-items: var(--align);
   word-wrap: break-word;
   word-break: break-all;
 }
+.to-tip-icon {
+  margin-right: var(--content-margin);
+}
 .to-tip-icon {
   --width: 1.25em;
   --height: 1.25em;
@@ -6873,9 +7127,14 @@ html body .height-full {
 }
 .to-tip-content {
   flex: 1;
+  background: var(--color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   font-size: var(--size);
 }
 .to-tip-remove {
+  margin-left: var(--remove-margin);
   flex-shrink: 0;
   display: none;
   cursor: pointer;
@@ -6890,6 +7149,7 @@ html body .height-full {
   --height: var(--lh);
   --radius: 50%;
   --color: var(--color-fg);
+  margin-left: var(--content-margin);
 }
 .to-tip.position-top {
   position: absolute;
@@ -6928,7 +7188,9 @@ html body .height-full {
   visibility: hidden;
   transition: visibility 0.3s ease-out, opacity 0.3s ease-out;
   pointer-events: none;
-  --gap: 1em;
+  --content-margin: 1em;
+  --remove-margin: 1em;
+  --close-margin: 1em;
   --padding: 1.5em;
   --bg: rgba(0, 0, 0, 0.8);
   --color: #fff;
@@ -7055,6 +7317,10 @@ html body .height-full {
   position: relative;
 }
 .to-tooltip-content-text {
+  background: var(--color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   font-size: var(--size);
 }
 .to-tooltip-arrow {
@@ -7184,7 +7450,6 @@ html body .height-full {
   --item-bg-size: 100% 100%;
   --item-radius: var(--radius-fe);
   --item-shadow: none;
-  --item-gap: 0.5em;
   --item-size: 1em;
   --item-hover-border: var(--item-border);
   --item-hover-color: var(--item-color);
@@ -7206,6 +7471,7 @@ html body .height-full {
   --item-on-active-color: var(--item-on-color);
   --item-on-active-bg: rgba(0, 0, 0, 0.2);
   --item-on-active-shadow: var(--item-on-shadow);
+  --icon-margin: 0.5em;
   --check-width: 1em;
   --check-height: 1em;
   --check-bg: #fff;
@@ -7214,6 +7480,7 @@ html body .height-full {
   --check-border: var(--border-fe);
   --check-shadow: none;
   --check-size: 0.5em;
+  --check-margin: 0.5em;
   --check-active-bg: var(--check-bg);
   --check-active-color: var(--check-color);
   --check-active-border: var(--check-border);
@@ -7264,7 +7531,6 @@ html body .height-full {
   border: var(--item-border);
   min-height: var(--height);
   padding: var(--item-padding);
-  gap: 0.5em;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -7314,6 +7580,7 @@ html body .height-full {
 }
 .to-segment-check {
   display: none;
+  margin-right: var(--check-margin);
 }
 .to-segment-content {
   display: flex;
@@ -7322,9 +7589,11 @@ html body .height-full {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  gap: var(--item-gap);
   font-size: var(--item-size);
 }
+.to-segment-icon {
+  margin-right: var(--icon-margin);
+}
 .to-segment-icon {
   --width: 1em;
   --height: 1em;
@@ -7484,7 +7753,6 @@ html body .height-full {
 }
 .to-dialog {
   --width: 50em;
-  --gap: 1em;
   --radius: 1em;
   --bg: var(--color-bg);
   --bg-size: 100% 100%;
@@ -7494,6 +7762,7 @@ html body .height-full {
   --border: 0 none;
   --shadow: 0 0.5em 1em 0 var(--color-fg-op-1);
   --header-offset: 3em;
+  --header-margin: 1em;
   --content-padding: 0;
   --content-bg: none;
   --content-bg-size: 100% 100%;
@@ -7528,7 +7797,6 @@ html body .height-full {
   position: relative;
   display: inline-flex;
   flex-direction: column;
-  gap: var(--gap);
   vertical-align: middle;
   width: var(--width);
   transform-origin: center;
@@ -7551,6 +7819,7 @@ html body .height-full {
 .to-dialog-header.mode-default {
   --lh: 2em;
   margin-right: var(--header-offset);
+  margin-bottom: var(--header-margin);
 }
 .to-dialog-close {
   --width: 2em;
@@ -7569,7 +7838,7 @@ html body .height-full {
 .to-dialog.is-slide {
   --radius: 0;
   --padding: 0;
-  --gap: 0;
+  --content-margin: 0;
   transition-duration: 0.3s;
   text-align: right;
   overflow: hidden;
@@ -7697,7 +7966,6 @@ html body .height-full {
   --gap: 0;
   --indent: 1.75em;
   --item-padding: 0;
-  --item-gap: 0.25em;
   --item-border: 0 none;
   --item-bg: none;
   --item-bg-size: 100% 100%;
@@ -7721,7 +7989,6 @@ html body .height-full {
   --label-border: 0 none;
   --label-bg: none;
   --label-bg-size: 100% 100%;
-  --label-gap: 0.25em;
   --label-color: inherit;
   --label-hover-border: var(--label-border);
   --label-hover-bg: rgba(0, 0, 0, 0.1);
@@ -7734,6 +8001,9 @@ html body .height-full {
   --label-on-border: var(--label-border);
   --label-on-bg: var(--label-bg);
   --label-on-color: inherit;
+  --check-margin: 0.25em;
+  --icon-margin: 0.25em;
+  --pic-margin: 0.25em;
   --text-color: inherit;
   --text-size: 1em;
   --text-weight: normal;
@@ -7754,7 +8024,6 @@ html body .height-full {
   padding: var(--item-padding);
   border-radius: var(--item-radius);
   border: var(--item-border);
-  gap: var(--item-gap);
   background: var(--item-bg);
   background-size: var(--item-bg-size);
   height: var(--item-height);
@@ -7868,16 +8137,18 @@ html body .height-full {
 }
 .to-tree-pic {
   --width: 1em;
+  margin-right: var(--pic-margin);
 }
 .to-tree-icon {
   --width: 1em;
   --height: 1em;
   --size: 1em;
+  margin-right: var(--icon-margin);
 }
 .to-tree-check {
   --height: 1.5em;
   --padding: 0 0.25em;
-  margin-right: 0.25em;
+  margin-right: var(--check-margin);
 }
 .to-tree-label {
   white-space: nowrap;
@@ -7885,7 +8156,6 @@ html body .height-full {
   align-items: center;
   flex: 1;
   flex-shrink: 0;
-  gap: var(--label-gap);
   padding: var(--label-padding);
   border-radius: var(--label-radius);
   border: var(--label-border);
@@ -7893,6 +8163,9 @@ html body .height-full {
   background-size: var(--label-bg-size);
   color: var(--label-color);
 }
+.to-tree-label {
+  margin-left: var(--label-margin);
+}
 .to-tree-label.is-link:hover {
   border: var(--label-hover-border);
   background: var(--label-hover-bg);
@@ -7960,7 +8233,7 @@ html body .height-full {
   --gap-x: 1em;
   --gap-y: 0.5em;
   --col: 1;
-  --item-gap: 0;
+  --label-margin: 0;
   --item-border: 0 none;
   --item-padding: 0;
   --item-bg: none;
@@ -7975,7 +8248,6 @@ html body .height-full {
   --label-lh: 1.8em;
   --label-padding: 0;
   --label-color: var(--color-fg-fade);
-  --label-gap: 0;
   --label-size: 1em;
   --label-bg: none;
   --label-bg-size: 100% 100%;
@@ -8008,7 +8280,6 @@ html body .height-full {
   display: flex;
   align-items: var(--item-align);
   flex-direction: row;
-  gap: var(--item-gap);
   padding: var(--item-padding);
   background: var(--item-bg);
   background-size: var(--item-bg-size);
@@ -8055,7 +8326,7 @@ html body .height-full {
   justify-content: var(--label-align);
   display: inline-flex;
   text-align: right;
-  gap: var(--label-gap);
+  margin-right: var(--label-margin);
   border: var(--label-border);
   border-radius: var(--label-radius);
 }
@@ -8066,7 +8337,10 @@ html body .height-full {
   color: var(--label-color);
 }
 .to-param-label-text {
-  color: var(--label-color);
+  background: var(--label-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   line-height: var(--label-lh);
   font-size: var(--label-size);
 }
@@ -8085,24 +8359,16 @@ html body .height-full {
   white-space: nowrap;
   text-overflow: ellipsis;
   font-family: var(--value-family);
-  color: var(--value-color);
+  background: var(--value-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   line-height: var(--value-lh);
   font-size: var(--value-size);
 }
 .to-param-item.is-wrap .to-param-value-text {
   white-space: normal;
 }
-.to-param-submit {
-  flex-shrink: 0;
-  white-space: nowrap;
-  display: flex;
-  text-align: right;
-  gap: var(--submit-gap);
-}
-.to-param-item.is-required .to-param-label:before {
-  content: '*';
-  color: var(--required-color);
-}
 .to-param.col-1 {
   --col: 1;
 }
@@ -8145,6 +8411,7 @@ html body .height-full {
   --gap-y: 1em;
   --label-lh: 1.5em;
   --label-padding: 0;
+  --label-margin: 0.25em;
   --item-symbol: '';
 }
 .to-param.dir-vo .to-param-item,
@@ -8156,6 +8423,14 @@ html body .height-full {
 .to-param.dir-v .to-param-label {
   justify-content: flex-start;
 }
+.to-param.dir-vo .to-param-label {
+  margin-right: 0;
+  margin-top: var(--label-margin);
+}
+.to-param.dir-v .to-param-label {
+  margin-right: 0;
+  margin-bottom: var(--label-margin);
+}
 .to-param.dir-vo .to-param-label {
   order: 2;
 }
@@ -8207,7 +8482,9 @@ html body .height-full {
   --padding: 0 1em 0 1em;
   --width: 100%;
   --radius: var(--radius-fe);
-  --gap: 1em;
+  --prefix-margin: 1em;
+  --clear-margin: 1em;
+  --arrow-margin: 1em;
   --color: inherit;
   --placeholder-color: var(--color-placeholder);
   --arrow-size: 1em;
@@ -8226,7 +8503,6 @@ html body .height-full {
   box-sizing: border-box;
   position: relative;
   display: flex;
-  gap: var(--gap);
   align-items: center;
   height: var(--height);
   padding: var(--padding);
@@ -8262,8 +8538,16 @@ html body .height-full {
   white-space: nowrap;
   color: var(--color);
 }
+.to-cascader-prefix,
+.to-cascader-prefix-text {
+  margin-right: var(--prefix-margin);
+}
+.to-cascader-clear {
+  margin-left: var(--clear-margin);
+}
 .to-cascader-arrow {
   flex-shrink: 0;
+  margin-left: var(--arrow-margin);
   width: var(--arrow-size);
   height: var(--arrow-size);
   line-height: var(--arrow-size);
@@ -8457,6 +8741,10 @@ html body .height-full {
   border-radius: var(--date-radius);
 }
 .to-timeline-date-text {
+  background: var(--date-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   font-size: var(--date-size);
 }
 .to-timeline-time {
@@ -8472,6 +8760,10 @@ html body .height-full {
   border-radius: calc(var(--time-radius));
 }
 .to-timeline-time-text {
+  background: var(--time-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   font-size: var(--time-size);
 }
 .to-timeline-content {
@@ -8588,7 +8880,7 @@ html body .height-full {
   transform: rotate(90deg);
 }
 .to-range {
-  --gap: 1em;
+  --input-margin: 1em;
   --opacity: 1;
   --height: var(--height-fe);
   --bar-height: 0.5em;
@@ -8624,7 +8916,6 @@ html body .height-full {
   align-items: center;
   padding: 0 calc(var(--handle-width) / 2);
   height: var(--height);
-  gap: calc(var(--gap) + var(--handle-width) / 2);
 }
 .to-range-bar {
   position: relative;
@@ -8676,6 +8967,9 @@ html body .height-full {
 .to-range:has(.is-start) .to-range-progress {
   border-radius: 0;
 }
+.to-range-input {
+  margin-left: calc(var(--input-margin) + var(--handle-width) / 2);
+}
 .to-upload {
   position: relative;
   --tip-margin: 1em;
@@ -9186,19 +9480,18 @@ html body .height-full {
   --file-border: 0 none;
   --file-bg: none;
   --file-bg-size: 100% 100%;
-  --file-gap: 0;
   --file-hover-border: var(--file-border);
   --file-hover-bg: rgba(0, 0, 0, 0.1);
   --file-hover-color: var(--file-color);
   --file-active-border: var(--file-border);
   --file-active-bg: rgba(0, 0, 0, 0.3);
   --file-active-color: var(--file-color);
-  --name-margin: 1em;
-  --name-color: inherit;
-  --name-lh: 1.5em;
-  --name-size: 1em;
-  --name-weight: normal;
-  --fn-margin: 1.5em;
+  --file-name-margin: 0.5em;
+  --file-name-color: inherit;
+  --file-name-lh: 1.5em;
+  --file-name-size: 1em;
+  --file-name-weight: normal;
+  --file-fn-margin: 1.5em;
 }
 .to-import-file {
   cursor: pointer;
@@ -9213,7 +9506,6 @@ html body .height-full {
   background: var(--file-bg);
   background-size: var(--file-bg-size);
   color: var(--file-color);
-  gap: var(--file-gap);
   box-shadow: var(--file-shadow);
 }
 .to-import-file.is-dragover,
@@ -9234,16 +9526,16 @@ html body .height-full {
   --size: 3em;
 }
 .to-import-file-name {
-  margin-top: var(--name-margin);
-  line-height: var(--name-lh);
-  font-weight: var(--name-weight);
-  color: var(--name-color);
+  margin-top: var(--file-name-margin);
+  line-height: var(--file-name-lh);
+  font-weight: var(--file-name-weight);
+  color: var(--file-name-color);
 }
 .to-import-file-name-text {
   font-size: var(--name-size);
 }
 .to-import-file-fn {
-  margin-top: var(--fn-margin);
+  margin-top: var(--file-fn-margin);
   display: flex;
 }
 .to-import.state-success .to-import-file-icon {
@@ -9346,8 +9638,8 @@ html body .height-full {
 .to-dis-none {
   pointer-events: none;
 }
-.to-dis .to-form > ul > li,
-.to-dis.to-form > ul > li {
+.to-dis.type-use {
+  opacity: 1;
   pointer-events: none;
 }
 .to-dis.type-select {