@touchvue/ui 1.0.0-beta.56 → 1.0.0-beta.58

package/theme/components/index.css

@@ -596,124 +596,56 @@ html body .height-full {
   --bg-size: 100% 100%;
   --padding: 0;
   --color: inherit;
-}
-.to-scroll.is-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-.to-scroll.is-hide::-webkit-scrollbar {
-  display: none;
+  --bar-width: 0.5em;
+  --bar-height: 0.5em;
+  --bar-border: 0 none;
+  --bar-bg: transparent;
+  --bar-radius: 0.25em;
+  --bar-hover-border: 0;
+  --bar-hover-bg: rgba(0, 0, 0, 0.3);
+  --hover-bar-border: var(--bar-border);
+  --hover-bar-bg: rgba(0, 0, 0, 0.2);
 }
 .to-scroll {
   color: var(--color);
   position: relative;
-  overflow: auto;
   box-sizing: border-box;
   height: 100%;
   background: var(--bg);
   background-size: var(--bg-size);
 }
-.to-scroll .to-scroll-content {
+.to-scroll-content {
   padding: var(--padding);
   box-sizing: border-box;
   height: 100%;
   overflow: auto;
 }
-.to-scroll .to-scroll-content.virtual-scroll {
-  overflow: auto;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.to-scroll .to-scroll-bar {
-  position: absolute;
-  right: 2px;
-  top: 2px;
-  bottom: 2px;
-  width: 6px;
-  z-index: 100;
-  transition: opacity 0.3s;
-  border-radius: 4px;
-  background-color: rgba(0, 0, 0, 0.05);
-  opacity: 0;
-  pointer-events: none;
-}
-.to-scroll .to-scroll-bar .to-scroll-thumb {
-  pointer-events: auto;
-}
-.to-scroll .to-scroll-bar.horizontal {
-  left: 2px;
-  right: 2px;
-  bottom: 2px;
-  top: auto;
-  width: auto;
-  height: 6px;
-}
-.to-scroll .to-scroll-bar.bar-always {
-  opacity: 1;
-}
-.to-scroll:hover .to-scroll-bar,
-.to-scroll .to-scroll-bar.active {
-  opacity: 1;
-}
-.to-scroll .to-scroll-thumb {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 30px;
-  /* 默认高度，会被动态计算 */
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-  cursor: pointer;
-  user-select: none;
-  transition: background-color 0.2s;
-}
-.to-scroll .to-scroll-thumb:hover,
-.to-scroll .to-scroll-thumb:active {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-.to-scroll .to-scroll-bar.horizontal .to-scroll-thumb {
-  width: 30px;
-  /* 默认宽度，会被动态计算 */
-  height: 100%;
-  right: auto;
+.to-scroll-content::-webkit-scrollbar {
+  width: var(--bar-width);
+  height: var(--bar-height);
 }
-.to-scroll::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background-color: transparent;
-  transition: background-color 0.3s;
+.to-scroll-content::-webkit-scrollbar-track {
+  background: transparent;
 }
-.to-scroll:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.2);
+.to-scroll-content::-webkit-scrollbar-thumb {
+  border: var(--bar-border);
+  border-radius: var(--bar-radius);
+  background: var(--bar-bg);
 }
-.to-scroll:hover::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, 0.3);
+.to-scroll:hover > .to-scroll-content::-webkit-scrollbar-thumb {
+  border: var(--hover-bar-border);
+  background: var(--hover-bar-bg);
 }
-.to-scroll::-webkit-scrollbar-track {
-  background-color: transparent;
+.to-scroll:hover > .to-scroll-content::-webkit-scrollbar-thumb:hover {
+  border: var(--bar-hover-border);
+  background: var(--bar-hover-bg);
 }
-.to-scroll.hide-scrollbar {
+.to-scroll.is-hide .to-scroll-content {
   -ms-overflow-style: none;
-  /* IE and Edge */
   scrollbar-width: none;
-  /* Firefox */
 }
-.to-scroll.hide-scrollbar::-webkit-scrollbar {
+.to-scroll.is-hide .to-scroll-content::-webkit-scrollbar {
   display: none;
-  /* Chrome, Safari, Opera */
-}
-.to-scroll .to-scroll-spacer {
-  display: block;
-  width: 100%;
-}
-.to-scroll.dragging-scrollbar,
-.to-scroll.dragging-scrollbar-horizontal {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
 }
 .to-scroll.type-v .to-scroll-content {
   overflow-x: hidden;
@@ -766,6 +698,12 @@ html body .height-full {
   justify-content: center;
   display: flex;
 }
+.to-grid.type-avg {
+  display: flex;
+}
+.to-grid.type-avg > * {
+  flex: 1;
+}
 .to-grid.dir-v.type-center {
   align-items: center;
 }
@@ -1937,8 +1875,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);
@@ -1967,7 +1905,6 @@ 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;
@@ -1977,12 +1914,15 @@ html body .height-full {
 .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 {
   font-size: var(--size);
   display: inline-flex;
@@ -2331,7 +2271,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;
@@ -2345,7 +2285,7 @@ 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;
@@ -2370,7 +2310,6 @@ html body .height-full {
   cursor: pointer;
   border-radius: var(--radius);
   display: inline-flex;
-  gap: var(--gap);
   align-items: center;
   vertical-align: top;
 }
@@ -2384,16 +2323,21 @@ html body .height-full {
 .to-button-expand {
   --opacity: 0.5;
 }
+.to-button-icon {
+  margin-right: 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);
@@ -2431,6 +2375,8 @@ html body .height-full {
 }
 .to-button.icon-position-right .to-button-icon {
   order: 2;
+  margin-right: 0;
+  margin-left: var(--icon-margin);
 }
 .to-button.icon-position-top,
 .to-button.icon-position-bottom {
@@ -2438,8 +2384,19 @@ html body .height-full {
   --padding: 1em 1.5em;
   flex-direction: column;
 }
+.to-button.icon-position-top .to-button-icon {
+  margin-right: 0;
+  margin-bottom: 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;
+  margin-right: 0;
+  margin-top: var(--icon-margin);
 }
 .to-button.width-full {
   --width: 100%;
@@ -2468,16 +2425,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;
@@ -2495,15 +2451,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;
@@ -2533,7 +2488,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;
@@ -2548,7 +2502,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);
@@ -2584,7 +2537,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);
@@ -2622,9 +2574,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);
@@ -2633,6 +2585,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;
@@ -2643,7 +2596,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);
@@ -2656,12 +2608,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;
@@ -2671,7 +2625,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;
@@ -2700,7 +2653,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;
@@ -2709,8 +2661,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);
@@ -2730,10 +2683,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);
@@ -2754,31 +2707,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;
 }
@@ -2791,6 +2747,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);
@@ -2831,6 +2788,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);
@@ -2838,28 +2796,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);
@@ -2867,24 +2811,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);
@@ -2913,7 +2860,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;
@@ -2921,101 +2868,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);
@@ -3023,7 +2941,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;
@@ -3036,9 +2953,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);
@@ -3059,6 +2976,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;
@@ -3069,6 +2989,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);
@@ -3076,7 +2997,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);
@@ -3098,8 +3018,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);
@@ -3230,34 +3154,31 @@ html body .height-full {
   --size: 1em;
   --weight: normal;
   --radius: var(--radius-fe);
-  --gap: 0;
   --color: inherit;
   --placeholder-color: var(--color-placeholder);
-  --content-gap: 0.5em;
-  --content-padding: 0 1em;
+  --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);
-  --arrow-size: 1em;
-  --arrow-font-size: 0.75em;
-  --arrow-color: var(--color-fg-fade);
-  --arrow-hover-color: var(--arrow-color);
-  --arrow-active-color: var(--arrow-color);
   --hover-bg: rgba(0, 0, 0, 0.1);
   --hover-border: var(--border);
   --hover-color: var(--color);
   --active-bg: rgba(0, 0, 0, 0.3);
   --active-border: var(--border);
   --active-color: var(--color);
-  --option-padding: 0.5em;
-  --option-gap: 0;
+  --option-padding: 0.5em 0;
   --option-list-gap-x: 0em;
   --option-list-gap-y: 0em;
   --option-tip-color: var(--color-fg-fade);
   --option-tip-padding: 2em;
   --option-tip-align: center;
   --option-fn-gap: 0.5em;
-  --option-fn-align: left;
+  --option-fn-margin: 0.5em;
+  --option-fn-padding: 0 0.5em;
   --option-item-height: var(--height);
   --option-item-size: 1em;
   --option-item-padding: 0 1em;
@@ -3306,7 +3227,6 @@ html body .height-full {
   box-sizing: border-box;
   position: relative;
   display: flex;
-  gap: var(--gap);
   align-items: center;
   min-height: var(--height);
   border-radius: var(--radius);
@@ -3324,9 +3244,6 @@ html body .height-full {
 .to-select-el:hover .to-select-content {
   color: var(--hover-color);
 }
-.to-select-el:hover .to-select-arrow:before {
-  color: var(--arrow-hover-color);
-}
 .to-select-el:active {
   background: var(--active-bg);
   background-size: var(--bg-size);
@@ -3335,9 +3252,6 @@ html body .height-full {
 .to-select-el:active::before {
   border: var(--active-border);
 }
-.to-select-el:active .to-select-arrow:before {
-  color: var(--arrow-active-color);
-}
 .to-select-el::before {
   border: var(--border);
   border-radius: var(--radius);
@@ -3355,11 +3269,11 @@ html body .height-full {
   --width: 1em;
   --height: 1em;
   --size: 1em;
+  margin-right: var(--icon-margin);
 }
 .to-select-content {
   flex: 1;
-  padding: var(--content-padding);
-  gap: var(--content-gap);
+  padding: var(--padding);
   display: flex;
   align-items: center;
   overflow: hidden;
@@ -3375,28 +3289,21 @@ html body .height-full {
 }
 .to-select-clear {
   flex-shrink: 0;
+  display: none;
   cursor: pointer;
-  opacity: 0;
   transition: opacity 0.15s ease;
-}
-.to-select-clear:hover {
-  --color: var(--arrow-active-color);
-}
-.to-select:hover .to-select-clear,
-.to-select:focus-within .to-select-clear {
-  opacity: 1;
+  margin-left: var(--clear-margin);
+  --width: var(--clear-height);
+  --height: var(--clear-height);
 }
 .to-select-arrow {
-  flex-shrink: 0;
-  width: var(--arrow-size);
-  height: var(--arrow-size);
-  line-height: var(--arrow-size);
+  --color: #aaa;
+  --width: var(--arrow-height);
+  --height: var(--arrow-height);
+  margin-left: var(--arrow-margin);
 }
-.to-select-arrow:before {
-  color: var(--arrow-color);
-  font-size: var(--arrow-font-size);
-  font-family: 'icon';
-  content: "\e081";
+.to-select:hover .to-select-clear {
+  display: inline-flex;
 }
 .to-select-tag {
   --el-height: var(--height);
@@ -3427,15 +3334,25 @@ html body .height-full {
 }
 .to-select-option {
   --bg-size: 100% 100%;
-}
-.to-select-option > .to-float-wrapper .to-scroll {
   --padding: var(--option-padding);
 }
+.to-select-option .to-float-content {
+  display: flex;
+  flex-direction: column;
+}
+.to-select-option-scroll {
+  flex: 1;
+  height: auto;
+  min-height: 0;
+}
 .to-select-option-fn {
   display: flex;
+  margin-top: var(--option-fn-margin);
   gap: var(--option-fn-gap);
-  margin-bottom: var(--option-gap);
-  justify-content: var(--option-fn-align);
+  padding: var(--option-fn-padding);
+}
+.to-select-option-button {
+  flex: 1;
 }
 .to-select-option-tip {
   text-align: var(--option-tip-align);
@@ -3582,6 +3499,9 @@ html body .height-full {
 .to-select.is-filterable .to-select-tag:has(.to-tag) {
   padding-bottom: 0;
 }
+.media-pc .to-select:not(.is-placeholder):hover .to-select-arrow {
+  display: none;
+}
 .to-select.to-select-mode-line {
   background: none;
 }
@@ -3622,7 +3542,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;
@@ -3633,9 +3553,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 {
@@ -3652,7 +3572,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);
@@ -3690,7 +3609,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);
@@ -3712,6 +3631,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;
@@ -3733,7 +3653,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;
@@ -3760,7 +3680,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;
@@ -3768,6 +3688,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%;
@@ -4045,16 +3969,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%;
@@ -4074,12 +3998,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);
@@ -4105,6 +4029,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%;
@@ -4115,7 +4051,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) {
@@ -4134,12 +4069,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);
@@ -4186,10 +4121,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);
@@ -4229,6 +4165,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;
@@ -4241,9 +4179,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;
@@ -4257,18 +4201,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);
@@ -4303,6 +4235,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;
@@ -4310,16 +4243,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;
 }
@@ -4389,9 +4312,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;
@@ -4406,11 +4327,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: 0.5em;
   --detail-bg: #f7f7f7;
   --detail-bg-size: 100% 100%;
   --detail-padding: 1em;
@@ -4419,6 +4341,7 @@ html body .height-full {
   --detail-size: 1em;
   --detail-color: var(--color-fg);
   --fn-gap: 1em;
+  --fn-margin: 1em;
   --fn-align: center;
   --fn-item-flex: none;
 }
@@ -4451,7 +4374,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);
@@ -4490,8 +4412,8 @@ 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;
@@ -4502,7 +4424,7 @@ html body .height-full {
 }
 .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);
@@ -4533,7 +4455,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-margin) / var(--detail-size) * 1em);
   font-size: var(--detail-size);
   color: var(--detail-color);
 }
@@ -4542,6 +4464,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 {
@@ -4569,6 +4492,11 @@ html body .height-full {
 .to-msg.type-loading .to-msg-icon {
   animation: var(--loading-speed) loading2 steps(32) infinite;
 }
+.to-msg.dir-h {
+  --icon-width: 4.5em;
+  --icon-height: 4.5em;
+  --icon-size: 4.5em;
+}
 .to-msg.dir-h .to-msg-wrapper {
   --align: left;
   flex-direction: row;
@@ -4642,7 +4570,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;
@@ -4675,7 +4602,6 @@ html body .height-full {
   user-select: none;
   display: flex;
   align-items: center;
-  gap: var(--pager-gap);
 }
 .to-page-pager-list {
   flex: 1;
@@ -4802,7 +4728,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 {
@@ -4819,6 +4744,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);
@@ -5232,7 +5158,6 @@ html body .height-full {
 }
 .to-checkbox {
   --padding: 0 1em;
-  --gap: 0.5em;
   --height: var(--height-fe);
   --width: auto;
   --bg: none;
@@ -5252,12 +5177,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);
@@ -5285,7 +5214,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);
@@ -5298,7 +5226,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);
@@ -5310,14 +5238,20 @@ html body .height-full {
   color: var(--box-color);
   border-radius: var(--box-radius);
   border: var(--box-border);
+  margin-right: var(--box-margin);
 }
-.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);
+}
+.to-checkbox-label-text {
+  font-size: var(--label-size);
 }
 .to-checkbox.is-checked {
   color: var(--checked-color);
@@ -5481,6 +5415,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;
@@ -5546,6 +5486,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;
 }
@@ -6804,7 +6758,7 @@ 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);
@@ -6815,7 +6769,6 @@ html body .height-full {
 .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);
@@ -6825,6 +6778,9 @@ 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;
@@ -6907,9 +6863,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);
@@ -6918,13 +6875,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;
@@ -6936,6 +6895,7 @@ html body .height-full {
   font-size: var(--size);
 }
 .to-tip-remove {
+  margin-left: var(--remove-margin);
   flex-shrink: 0;
   display: none;
   cursor: pointer;
@@ -6950,6 +6910,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;
@@ -6988,7 +6949,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;
@@ -7244,7 +7207,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);
@@ -7266,6 +7228,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;
@@ -7274,6 +7237,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);
@@ -7324,7 +7288,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;
@@ -7374,6 +7337,7 @@ html body .height-full {
 }
 .to-segment-check {
   display: none;
+  margin-right: var(--check-margin);
 }
 .to-segment-content {
   display: flex;
@@ -7382,9 +7346,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;
@@ -7544,7 +7510,6 @@ html body .height-full {
 }
 .to-dialog {
   --width: 50em;
-  --gap: 1em;
   --radius: 1em;
   --bg: var(--color-bg);
   --bg-size: 100% 100%;
@@ -7554,6 +7519,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%;
@@ -7588,7 +7554,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;
@@ -7611,6 +7576,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;
@@ -7629,7 +7595,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;
@@ -7757,7 +7723,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%;
@@ -7781,7 +7746,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);
@@ -7794,6 +7758,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;
@@ -7814,7 +7781,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);
@@ -7928,16 +7894,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;
@@ -7945,7 +7913,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);
@@ -7953,6 +7920,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);
@@ -8020,7 +7990,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;
@@ -8035,7 +8005,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%;
@@ -8068,7 +8037,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);
@@ -8115,7 +8083,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);
 }
@@ -8152,17 +8120,6 @@ html body .height-full {
 .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;
 }
@@ -8205,6 +8162,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,
@@ -8216,6 +8174,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;
 }
@@ -8267,7 +8233,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;
@@ -8286,7 +8254,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);
@@ -8322,8 +8289,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);
@@ -8648,7 +8623,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;
@@ -8684,7 +8659,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;
@@ -8736,6 +8710,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;
@@ -9246,19 +9223,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;
@@ -9273,7 +9249,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,
@@ -9294,16 +9269,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 {
@@ -9406,8 +9381,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 {