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

package/theme/components/index.css

@@ -782,10 +782,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%);
@@ -795,15 +795,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%);
@@ -813,13 +813,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%;
 }
@@ -1875,8 +1890,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);
@@ -1888,6 +1903,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;
@@ -1905,23 +1927,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;
@@ -1952,6 +2009,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;
@@ -2068,11 +2141,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%;
@@ -2096,7 +2189,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);
@@ -2135,6 +2227,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);
@@ -2208,6 +2311,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;
@@ -2269,7 +2388,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;
@@ -2283,11 +2402,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);
@@ -2297,7 +2415,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);
@@ -2307,10 +2424,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 {
@@ -2322,16 +2446,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);
@@ -2349,36 +2478,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%;
 }
@@ -2406,16 +2592,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;
@@ -2433,15 +2618,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;
@@ -2471,7 +2655,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;
@@ -2486,7 +2669,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);
@@ -2522,7 +2704,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);
@@ -2560,9 +2741,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);
@@ -2571,6 +2752,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;
@@ -2581,7 +2763,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);
@@ -2594,12 +2775,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;
@@ -2609,7 +2792,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;
@@ -2638,7 +2820,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;
@@ -2647,8 +2828,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);
@@ -2668,10 +2850,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);
@@ -2692,31 +2874,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;
 }
@@ -2729,6 +2914,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);
@@ -2769,6 +2955,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);
@@ -2776,28 +2963,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);
@@ -2805,24 +2978,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);
@@ -2851,7 +3027,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;
@@ -2859,101 +3035,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);
@@ -2961,7 +3108,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;
@@ -2974,9 +3120,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);
@@ -2997,6 +3143,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;
@@ -3007,6 +3156,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);
@@ -3014,7 +3164,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);
@@ -3036,8 +3185,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);
@@ -3165,17 +3318,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);
@@ -3184,7 +3339,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);
@@ -3236,12 +3390,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);
@@ -3284,6 +3439,7 @@ html body .height-full {
   --width: 1em;
   --height: 1em;
   --size: 1em;
+  margin-right: var(--icon-margin);
 }
 .to-select-content {
   flex: 1;
@@ -3306,6 +3462,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);
 }
@@ -3313,6 +3470,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;
@@ -3511,7 +3669,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 {
@@ -3554,7 +3712,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;
@@ -3565,9 +3723,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 {
@@ -3584,7 +3742,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);
@@ -3622,7 +3779,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);
@@ -3644,6 +3801,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;
@@ -3665,7 +3823,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;
@@ -3692,7 +3850,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;
@@ -3700,6 +3858,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%;
@@ -3717,7 +3879,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);
@@ -3802,7 +3964,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;
@@ -3835,18 +4000,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;
 }
@@ -3977,16 +4152,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%;
@@ -4006,12 +4181,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);
@@ -4037,6 +4212,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%;
@@ -4047,7 +4234,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) {
@@ -4066,12 +4252,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);
@@ -4118,10 +4304,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);
@@ -4161,6 +4348,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;
@@ -4173,9 +4362,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;
@@ -4189,18 +4384,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);
@@ -4235,6 +4418,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;
@@ -4242,16 +4426,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;
 }
@@ -4321,9 +4495,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;
@@ -4338,11 +4510,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;
@@ -4350,7 +4523,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;
 }
@@ -4383,7 +4558,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);
@@ -4422,19 +4596,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);
@@ -4455,6 +4632,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;
@@ -4465,7 +4643,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);
 }
@@ -4474,6 +4652,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 {
@@ -4579,7 +4758,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;
@@ -4600,6 +4778,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);
@@ -4612,10 +4808,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);
 }
@@ -4727,6 +4921,7 @@ html body .height-full {
 }
 .to-page-size-select {
   --height: var(--size-height);
+  --min-width: 0;
 }
 .to-page-jumper {
   order: var(--jumper-order);
@@ -4739,7 +4934,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 {
@@ -4756,6 +4950,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);
@@ -5169,7 +5364,6 @@ html body .height-full {
 }
 .to-checkbox {
   --padding: 0 1em;
-  --gap: 0.5em;
   --height: var(--height-fe);
   --width: auto;
   --bg: none;
@@ -5189,12 +5383,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);
@@ -5222,7 +5420,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);
@@ -5235,7 +5432,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);
@@ -5248,13 +5445,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);
@@ -5418,6 +5625,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;
@@ -5483,6 +5696,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;
 }
@@ -6045,6 +6272,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);
@@ -6741,18 +6974,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);
@@ -6762,11 +6992,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);
 }
@@ -6844,9 +7095,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);
@@ -6855,13 +7107,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;
@@ -6870,9 +7124,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;
@@ -6887,6 +7146,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;
@@ -6925,7 +7185,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;
@@ -7052,6 +7314,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 {
@@ -7181,7 +7447,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);
@@ -7203,6 +7468,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;
@@ -7211,6 +7477,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);
@@ -7261,7 +7528,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;
@@ -7311,6 +7577,7 @@ html body .height-full {
 }
 .to-segment-check {
   display: none;
+  margin-right: var(--check-margin);
 }
 .to-segment-content {
   display: flex;
@@ -7319,9 +7586,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;
@@ -7481,7 +7750,6 @@ html body .height-full {
 }
 .to-dialog {
   --width: 50em;
-  --gap: 1em;
   --radius: 1em;
   --bg: var(--color-bg);
   --bg-size: 100% 100%;
@@ -7491,6 +7759,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%;
@@ -7525,7 +7794,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;
@@ -7548,6 +7816,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;
@@ -7566,7 +7835,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;
@@ -7694,7 +7963,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%;
@@ -7718,7 +7986,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);
@@ -7731,6 +7998,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;
@@ -7751,7 +8021,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);
@@ -7865,16 +8134,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;
@@ -7882,7 +8153,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);
@@ -7890,6 +8160,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);
@@ -7957,7 +8230,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;
@@ -7972,7 +8245,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%;
@@ -8005,7 +8277,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);
@@ -8052,7 +8323,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);
 }
@@ -8063,7 +8334,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);
 }
@@ -8082,24 +8356,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;
 }
@@ -8142,6 +8408,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,
@@ -8153,6 +8420,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;
 }
@@ -8204,7 +8479,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;
@@ -8223,7 +8500,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);
@@ -8259,8 +8535,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);
@@ -8454,6 +8738,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 {
@@ -8469,6 +8757,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 {
@@ -8585,7 +8877,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;
@@ -8621,7 +8913,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;
@@ -8673,6 +8964,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;
@@ -9183,19 +9477,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;
@@ -9210,7 +9503,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,
@@ -9231,16 +9523,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 {
@@ -9343,8 +9635,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 {