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

package/theme/index.css

@@ -1878,8 +1878,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);
@@ -1908,7 +1908,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;
@@ -1918,12 +1917,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;
@@ -2272,7 +2274,7 @@ html body .height-full {
   --height: var(--height-fe);
   --width: auto;
   --padding: 0 1.5em;
-  --gap: 0.5em;
+  --icon-margin: 0.5em;
   --border: var(--border-fe);
   --radius: var(--radius-fe);
   --size: 1em;
@@ -2286,7 +2288,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;
@@ -2311,7 +2313,6 @@ html body .height-full {
   cursor: pointer;
   border-radius: var(--radius);
   display: inline-flex;
-  gap: var(--gap);
   align-items: center;
   vertical-align: top;
 }
@@ -2325,16 +2326,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);
@@ -2372,6 +2378,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 {
@@ -2379,8 +2387,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%;
@@ -2409,16 +2428,15 @@ html body .height-full {
   --border: 0 none;
   --bg: none;
   --bg-size: 100% 100%;
-  --gap: 0;
   --date-padding: 0.5em;
   --date-radius: 0;
   --date-bg: none;
   --date-bg-size: 100% 100%;
-  --date-gap: 0;
   --date-border: 0 none;
   --header-padding: 0 0 0.5em 0;
+  --header-margin: 0;
   --header-radius: 0;
-  --header-border: 1px solid var(--color-border);
+  --header-divider: 1px solid var(--color-border);
   --header-bg: none;
   --header-bg-size: 100% 100%;
   --header-content-height: 3em;
@@ -2436,15 +2454,14 @@ html body .height-full {
   --header-content-active-border: var(--header-content-border);
   --header-content-active-bg: rgba(0, 0, 0, 0.3);
   --header-content-active-color: var(--header-content-color);
-  --picker-padding: 0.5em 0 0;
-  --picker-radius: 0;
-  --picker-border: 0 none;
-  --picker-bg: none;
-  --picker-bg-size: 100% 100%;
-  --picker-gap: 0.5em;
-  --year-width: 30%;
+  --ym-padding: 0.5em 0 0;
+  --ym-radius: 0;
+  --ym-border: 0 none;
+  --ym-bg: none;
+  --ym-bg-size: 100% 100%;
+  --year-width: 26%;
+  --year-margin: 0.5em;
   --year-gap: 0em;
-  --year-list-gap: 1px;
   --year-padding: 0em 0.5em 0 0;
   --year-radius: 0;
   --year-border: 0 none;
@@ -2474,7 +2491,6 @@ html body .height-full {
   --year-item-active-bg: rgba(0, 0, 0, 0.3);
   --year-item-active-color: var(--year-item-color);
   --month-gap: 0em;
-  --month-list-gap: 0em;
   --month-padding: 0;
   --month-radius: 0;
   --month-border: 0 none;
@@ -2489,7 +2505,6 @@ html body .height-full {
   --month-item-bg: none;
   --month-item-bg-size: 100% 100%;
   --month-item-color: var(--color-fg);
-  --month-item-gap: 0;
   --month-item-cur-border: var(--month-item-border);
   --month-item-cur-bg: var(--primary-light-9);
   --month-item-cur-color: var(--color-primary);
@@ -2525,7 +2540,6 @@ html body .height-full {
   --day-item-bg: none;
   --day-item-bg-size: 100% 100%;
   --day-item-color: inherit;
-  --day-item-gap: 0em;
   --day-item-text-size: 1em;
   --day-item-text-color: #000;
   --day-item-start-border: var(--day-item-border);
@@ -2563,9 +2577,9 @@ html body .height-full {
   --time-border: 0 none;
   --time-bg: none;
   --time-bg-size: 100% 100%;
-  --time-gap: 0;
-  --time-width: 15em;
+  --time-width: 33.3%;
   --time-divider: 1px solid var(--color-border);
+  --time-gap: 0;
   --time-info-padding: 0 0 0.5em 0;
   --time-info-radius: 0;
   --time-info-divider: 1px solid var(--color-border);
@@ -2574,6 +2588,7 @@ html body .height-full {
   --time-info-height: 3em;
   --time-info-size: 1em;
   --time-info-weight: bold;
+  --time-info-margin: 0;
   --time-content-gap: 0.5em;
   --time-content-padding: 0.5em 0 0;
   --time-item-height: 3em;
@@ -2584,7 +2599,6 @@ html body .height-full {
   --time-item-bg: none;
   --time-item-bg-size: 100% 100%;
   --time-item-color: var(--color-fg);
-  --time-item-gap: 0;
   --time-item-cur-border: var(--time-item-border);
   --time-item-cur-bg: var(--primary-light-9);
   --time-item-cur-color: var(--color-primary);
@@ -2597,12 +2611,14 @@ html body .height-full {
   --time-item-active-border: var(--time-item-border);
   --time-item-active-bg: rgba(0, 0, 0, 0.3);
   --time-item-active-color: var(--time-item-color);
+  --fn-margin: 0;
   --fn-divider: 1px solid var(--color-border);
   --fn-padding: 0.5em;
   --fn-bg: none;
   --fn-bg-size: 100% 100%;
   --fn-gap: 0.5em;
   --fn-align: flex-end;
+  --legend-margin: 0;
 }
 .to-calendar {
   position: relative;
@@ -2612,7 +2628,6 @@ html body .height-full {
   border: var(--border);
   background: var(--bg);
   background-size: var(--bg-size);
-  gap: var(--gap);
   height: var(--height);
   display: flex;
   flex-direction: column;
@@ -2641,7 +2656,6 @@ html body .height-full {
   border: var(--date-border);
   background: var(--date-bg);
   background-size: var(--date-bg-size);
-  gap: var(--date-gap);
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -2650,8 +2664,9 @@ html body .height-full {
   display: flex;
   align-items: center;
   padding: var(--header-padding);
+  margin-bottom: var(--header-margin);
   border-radius: var(--header-radius);
-  border-bottom: var(--header-border);
+  border-bottom: var(--header-divider);
   background: var(--header-bg);
   background-size: var(--header-bg-size);
   gap: var(--header-gap);
@@ -2671,10 +2686,10 @@ html body .height-full {
   align-items: center;
   cursor: pointer;
   height: var(--header-content-height);
+  gap: var(--header-content-gap);
   border-radius: var(--header-content-radius);
   border: var(--header-content-border);
   color: var(--header-content-color);
-  gap: var(--header-content-gap);
   font-weight: var(--header-content-weight);
   background: var(--header-content-bg);
   background-size: var(--header-content-bg-size);
@@ -2695,31 +2710,34 @@ html body .height-full {
 .to-calendar-header-month {
   font-size: var(--header-content-size);
 }
-.to-calendar-picker {
+.to-calendar-ym {
   z-index: 12;
   display: flex;
   min-height: 0;
   height: 100%;
   box-sizing: border-box;
   align-items: center;
-  padding: var(--picker-padding);
-  border-radius: var(--picker-radius);
-  border: var(--picker-border);
-  background: var(--picker-bg);
-  background-size: var(--picker-bg-size);
-  gap: var(--picker-gap);
+  padding: var(--ym-padding);
+  border-radius: var(--ym-radius);
+  border: var(--ym-border);
+  background: var(--ym-bg);
+  background-size: var(--ym-bg-size);
+  gap: var(--ym-gap);
 }
 .to-calendar-year {
-  --padding: var(--year-padding);
+  padding: var(--year-padding);
   width: var(--year-width);
+  margin-right: var(--year-margin);
   border-radius: var(--year-radius);
   border: var(--year-border);
   background: var(--year-bg);
   background-size: var(--year-bg-size);
-  gap: var(--year-gap);
   border-right: var(--year-divider);
 }
 .to-calendar-year .to-scroll-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--year-gap);
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
@@ -2732,6 +2750,7 @@ html body .height-full {
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  flex-shrink: 0;
   height: var(--year-item-height);
   border-radius: var(--year-item-radius);
   border: var(--year-item-border);
@@ -2772,6 +2791,7 @@ html body .height-full {
   display: flex;
   align-items: center;
   align-self: flex-start;
+  flex-wrap: wrap;
   padding: var(--month-padding);
   border-radius: var(--month-radius);
   border: var(--month-border);
@@ -2779,28 +2799,14 @@ html body .height-full {
   background-size: var(--month-bg-size);
   gap: var(--month-gap);
 }
-.to-calendar-month-list {
-  flex: 1;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--month-list-gap);
-}
 .to-calendar-month-item {
-  width: calc((100% - var(--month-list-gap) * 2) / 3);
-  box-sizing: border-box;
-}
-.to-calendar-month-item.is-checked .to-calendar-month-item-content {
-  background: #0e0;
-  color: #fff;
-}
-.to-calendar-month-item-content {
+  width: calc((100% - var(--month-gap) * 2) / 3);
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   margin: 0 auto;
   cursor: pointer;
-  width: var(--month-item-width);
   height: var(--month-item-height);
   padding: var(--month-item-padding);
   border-radius: var(--month-item-radius);
@@ -2808,24 +2814,27 @@ html body .height-full {
   background: var(--month-item-bg);
   background-size: var(--month-item-bg-size);
   color: var(--month-item-color);
-  gap: var(--month-item-gap);
 }
-.to-calendar-month-item.is-cur .to-calendar-month-item-content {
+.to-calendar-month-item.is-checked {
+  background: #0e0;
+  color: #fff;
+}
+.to-calendar-month-item.is-cur {
   border: var(--month-item-cur-border);
   background: var(--month-item-cur-bg);
   color: var(--month-item-cur-color);
 }
-.to-calendar-month-item.is-on .to-calendar-month-item-content {
+.to-calendar-month-item.is-on {
   border: var(--month-item-on-border);
   background: var(--month-item-on-bg);
   color: var(--month-item-on-color);
 }
-.to-calendar-month-item-content:hover {
+.to-calendar-month-item:not(.is-on):hover {
   border: var(--month-item-hover-border);
   background: var(--month-item-hover-bg);
   color: var(--month-item-hover-color);
 }
-.to-calendar-month-item-content:active {
+.to-calendar-month-item:not(.is-on):active {
   border: var(--month-item-active-border);
   background: var(--month-item-active-bg);
   color: var(--month-item-active-color);
@@ -2854,7 +2863,7 @@ html body .height-full {
   border: var(--day-border);
   background: var(--day-bg);
   background-size: var(--day-bg-size);
-  gap: var(--day-gap) 0;
+  gap: var(--day-gap);
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
@@ -2862,101 +2871,72 @@ html body .height-full {
 .to-calendar-day-item {
   width: calc(100% / 7);
   box-sizing: border-box;
-  position: relative;
   padding: var(--day-item-padding);
-}
-.to-calendar-day-item-content {
-  width: var(--day-item-width);
   height: var(--day-item-height);
   border-radius: var(--day-item-radius);
   border: var(--day-item-border);
   background: var(--day-item-bg);
   background-size: var(--day-item-bg-size);
   color: var(--day-item-color);
-  gap: var(--day-item-gap);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0 auto;
   position: relative;
 }
-.to-calendar-day-item.is-sat .to-calendar-day-item-content {
+.to-calendar-day-item.is-sat {
   border: var(--day-item-sat-border);
   background: var(--day-item-sat-bg);
   color: var(--day-item-sat-color);
 }
-.to-calendar-day-item.is-sun .to-calendar-day-item-content {
+.to-calendar-day-item.is-sun {
   border: var(--day-item-sun-border);
   background: var(--day-item-sun-bg);
   color: var(--day-item-sun-color);
 }
-.to-calendar-day-item.is-cur .to-calendar-day-item-content {
+.to-calendar-day-item.is-cur {
   border: var(--day-item-cur-border);
   background: var(--day-item-cur-bg);
   color: var(--day-item-cur-color);
 }
-.to-calendar-day-item.is-on .to-calendar-day-item-content {
+.to-calendar-day-item.is-on {
   border: var(--day-item-on-border);
   background: var(--day-item-on-bg);
   color: var(--day-item-on-color);
 }
-.to-calendar-day-item.is-start .to-calendar-day-item-content {
+.to-calendar-day-item.is-start {
   border: var(--day-item-start-border);
   background: var(--day-item-start-bg);
   color: var(--day-item-start-color);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
-.to-calendar-day-item.is-end .to-calendar-day-item-content {
+.to-calendar-day-item.is-end {
   border: var(--day-item-end-border);
   background: var(--day-item-end-bg);
   color: var(--day-item-end-color);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 .to-calendar-day-item.is-range {
   background: var(--day-item-range-bg);
-}
-.to-calendar-day-item.is-range .to-calendar-day-item-content {
   color: var(--day-item-range-color);
+  border-radius: 0;
 }
 .to-calendar-month-item.is-range {
   background: var(--day-item-range-bg);
-}
-.to-calendar-month-item.is-range .to-calendar-month-item-content {
   color: var(--day-item-range-color);
 }
-.to-calendar-day-item.is-start::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: calc((100% - var(--day-item-width)) / 2 - var(--day-item-padding));
-  border-radius: var(--day-item-range-radius) 0 0 var(--day-item-range-radius);
-  background: var(--day-item-range-bg);
-}
-.to-calendar-day-item.is-end::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: calc((100% - var(--day-item-width)) / 2 - var(--day-item-padding));
-  border-radius: 0 var(--day-item-range-radius) var(--day-item-range-radius) 0;
-  background: var(--day-item-range-bg);
-}
-.to-calendar-day-item:not(.is-on):not(.is-start):not(.is-end) .to-calendar-day-item-content:not(:empty):hover {
+.to-calendar-day-item:not(.is-on):not(.is-start):not(.is-end):not(:empty):hover {
   border: var(--day-item-hover-border);
   background: var(--day-item-hover-bg);
   color: var(--day-item-hover-color);
 }
-.to-calendar-day-item:not(.is-on):not(.is-start):not(.is-end) .to-calendar-day-item-content:not(:empty):active {
+.to-calendar-day-item:not(.is-on):not(.is-start):not(.is-end):not(:empty):active {
   border: var(--day-item-active-border);
   background: var(--day-item-active-bg);
   color: var(--day-item-active-color);
 }
-.to-calendar-day-item.dis span {
-  cursor: not-allowed;
-  color: #cccccc;
-}
 .to-calendar-time {
   border-left: var(--time-divider);
   width: var(--time-width);
@@ -2964,7 +2944,6 @@ html body .height-full {
   border-radius: var(--time-radius);
   background: var(--time-bg);
   background-size: var(--time-bg-size);
-  gap: var(--time-gap);
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -2977,9 +2956,9 @@ html body .height-full {
   border-bottom: var(--time-info-divider);
   background: var(--time-info-bg);
   background-size: var(--time-info-bg-size);
-  gap: var(--time-info-gap);
   height: var(--time-info-height);
   line-height: var(--time-info-height);
+  margin-bottom: var(--time-info-margin);
 }
 .to-calendar-time-info-text {
   font-size: var(--time-info-size);
@@ -3000,6 +2979,9 @@ html body .height-full {
   flex: 1;
   -ms-overflow-style: none;
   scrollbar-width: none;
+  gap: var(--time-gap);
+  display: flex;
+  flex-direction: column;
 }
 .to-calendar-time-list .to-scroll-content::-webkit-scrollbar {
   display: none;
@@ -3010,6 +2992,7 @@ html body .height-full {
   justify-content: center;
   box-sizing: border-box;
   cursor: pointer;
+  flex-shrink: 0;
   height: var(--time-item-height);
   padding: var(--time-item-padding);
   border-radius: var(--time-item-radius);
@@ -3017,7 +3000,6 @@ html body .height-full {
   background: var(--time-item-bg);
   background-size: var(--time-item-bg-size);
   color: var(--time-item-color);
-  gap: var(--time-item-gap);
 }
 .to-calendar-time-item:hover {
   background: var(--time-item-hover-bg);
@@ -3039,8 +3021,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);
@@ -3171,14 +3157,15 @@ html body .height-full {
   --size: 1em;
   --weight: normal;
   --radius: var(--radius-fe);
-  --gap: 0;
   --color: inherit;
   --placeholder-color: var(--color-placeholder);
   --padding: 0 0 0 1em;
   --tag-gap: 0.5em;
   --tag-height: 2em;
   --clear-height: var(--height);
+  --clear-margin: 0;
   --arrow-height: var(--height);
+  --arrow-margin: 0;
   --overflow-color: var(--color-fg-fade);
   --hover-bg: rgba(0, 0, 0, 0.1);
   --hover-border: var(--border);
@@ -3187,7 +3174,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);
@@ -3244,7 +3230,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);
@@ -3287,6 +3272,7 @@ html body .height-full {
   --width: 1em;
   --height: 1em;
   --size: 1em;
+  margin-right: var(--icon-margin);
 }
 .to-select-content {
   flex: 1;
@@ -3309,6 +3295,7 @@ html body .height-full {
   display: none;
   cursor: pointer;
   transition: opacity 0.15s ease;
+  margin-left: var(--clear-margin);
   --width: var(--clear-height);
   --height: var(--clear-height);
 }
@@ -3316,6 +3303,7 @@ html body .height-full {
   --color: #aaa;
   --width: var(--arrow-height);
   --height: var(--arrow-height);
+  margin-left: var(--arrow-margin);
 }
 .to-select:hover .to-select-clear {
   display: inline-flex;
@@ -3514,7 +3502,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-arrow {
   display: none;
 }
 .to-select.to-select-mode-line {
@@ -3557,7 +3545,7 @@ html body .height-full {
   --gap-x: var(--gap);
   --gap-y: var(--gap);
   --col: 1;
-  --item-gap: 0.5em;
+  --label-margin: 0.5em;
   --item-border: 0 none;
   --item-padding: 0;
   --item-bg: none;
@@ -3568,9 +3556,9 @@ html body .height-full {
   --label-size: 1em;
   --label-padding: 0.5em 0;
   --label-color: inherit;
-  --label-gap: 0.3em;
   --label-align: flex-end;
   --required-color: var(--color-danger);
+  --required-margin: 0.3em;
   --submit-gap: 0.5em;
 }
 .to-form {
@@ -3587,7 +3575,6 @@ html body .height-full {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  gap: var(--item-gap);
   padding: var(--item-padding);
   background: var(--item-bg);
   background-size: var(--item-bg-size);
@@ -3625,7 +3612,7 @@ html body .height-full {
   padding: var(--label-padding);
   line-height: var(--label-lh);
   display: inline-flex;
-  gap: var(--label-gap);
+  margin-right: var(--label-margin);
 }
 .to-form-label-text {
   font-size: var(--label-size);
@@ -3647,6 +3634,7 @@ html body .height-full {
 .to-form-item.is-required .to-form-label:before {
   content: '*';
   color: var(--required-color);
+  margin-right: var(--required-margin);
 }
 .to-form.submit-position-right .to-form-item {
   flex: 1;
@@ -3668,7 +3656,7 @@ html body .height-full {
   width: auto;
 }
 .to-form.submit-position-item .to-form-submit {
-  padding-left: var(--item-gap);
+  padding-left: var(--label-margin);
 }
 .to-form.col-1 {
   --col: 1;
@@ -3695,7 +3683,7 @@ html body .height-full {
   --gap-y: 1em;
   --label-lh: 1.5em;
   --label-padding: 0;
-  --label-gap: 0.5em;
+  --label-margin: 0.5em;
 }
 .to-form.dir-v .to-form-item {
   flex-direction: column;
@@ -3703,6 +3691,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%;
@@ -3980,16 +3972,16 @@ html body .height-full {
   --width: 100%;
   --radius: var(--radius-fe);
   --weight: normal;
-  --gap: 0;
   --shadow: none;
   --clear-margin: 0;
   --clear-height: var(--height);
   --clear-width: var(--clear-height);
-  --content-gap: 1em;
+  --icon-margin: 1em;
   --content-padding: 0 1em;
   --prefix-padding: 0;
+  --prefix-margin: 0;
   --suffix-padding: 0;
-  --suffix-gap: 0;
+  --suffix-margin: 0;
   --prefix-text-padding: 0 0 0 1em;
   --prefix-text-bg: none;
   --prefix-text-bg-size: 100% 100%;
@@ -4009,12 +4001,12 @@ html body .height-full {
   --suffix-icon-height: var(--height);
   --count-color: var(--color-fg-fade);
   --count-size: 1em;
-  --count-padding: 0;
+  --count-padding: 0 1em 0 0;
   --count-lh: var(--height);
   --count-align: center;
+  --count-margin: 1em;
   --lh: 1.5em;
   --fn-padding: 0 1em 1em;
-  --fn-gap: 1em;
   --suggestion-gap: 0;
   --focus-outline: 0 none;
   --focus-border: var(--border);
@@ -4040,6 +4032,18 @@ html body .height-full {
   height: var(--height);
   box-shadow: var(--shadow);
 }
+.to-input::before {
+  border: var(--border);
+  border-radius: var(--radius);
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+  pointer-events: none;
+}
 .to-input-wrapper {
   width: 100%;
   height: 100%;
@@ -4050,7 +4054,6 @@ html body .height-full {
   overflow: hidden;
   position: relative;
   flex-wrap: wrap;
-  gap: var(--gap);
 }
 .to-input:has(textarea:focus),
 .to-input:has(input:focus) {
@@ -4069,12 +4072,12 @@ html body .height-full {
   display: flex;
   align-items: center;
   padding: var(--content-padding);
-  gap: var(--content-gap);
   height: 100%;
 }
 .to-input-icon {
   --width: 1em;
   --height: 1em;
+  margin-right: var(--icon-margin);
 }
 .to-input-clear {
   margin: var(--clear-margin);
@@ -4121,10 +4124,11 @@ html body .height-full {
 }
 .to-input-prefix {
   padding: var(--prefix-padding);
+  margin-right: var(--prefix-margin);
 }
 .to-input-suffix {
-  gap: var(--suffix-gap);
   padding: var(--suffix-padding);
+  margin-left: var(--suffix-margin);
 }
 .to-input-suffix > .to-icon {
   --width: var(--suffix-icon-height);
@@ -4164,6 +4168,8 @@ html body .height-full {
   --suffix-text-lh: 3em;
   --count-lh: 1.25em;
   --clear-height: 3em;
+  --count-padding: 0;
+  --count-align: flex-end;
 }
 .to-input.type-textarea .to-input-wrapper {
   flex: 1;
@@ -4176,9 +4182,15 @@ html body .height-full {
   resize: none;
   height: 100%;
 }
+.to-input.type-textarea .to-input-suffix {
+  margin-left: 0;
+  margin-right: var(--suffix-margin);
+}
+.to-input.type-textarea:has(.to-input-fn) {
+  min-height: 8em;
+}
 .to-input-fn {
   padding: var(--fn-padding);
-  gap: var(--fn-gap);
   display: flex;
   width: 100%;
   box-sizing: border-box;
@@ -4192,18 +4204,6 @@ html body .height-full {
 .to-input-suggestion-item {
   --border: 0 none;
 }
-.to-input::before {
-  border: var(--border);
-  border-radius: var(--radius);
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 2;
-  pointer-events: none;
-}
 .to-input.is-disabled:not(.is-link) {
   background: var(--disabled-bg);
   color: var(--disabled-color);
@@ -4238,6 +4238,7 @@ html body .height-full {
   padding: var(--count-padding);
   line-height: var(--count-lh);
   align-self: var(--count-align);
+  margin-left: var(--count-margin);
 }
 .to-input-count:only-child {
   flex: 1;
@@ -4245,16 +4246,6 @@ html body .height-full {
 .to-input-count-text {
   font-size: var(--count-size);
 }
-.to-input.type-textarea {
-  --count-align: flex-end;
-}
-.to-input.type-textarea .to-input-count {
-  display: block;
-  text-align: right;
-}
-.to-input.type-textarea:has(.to-input-fn) {
-  min-height: 8em;
-}
 .to-input.is-link {
   cursor: pointer;
 }
@@ -4324,9 +4315,7 @@ html body .height-full {
   --padding: 2em;
   --radius: 1em;
   --align: center;
-  --gap: 0.5em;
-  --main-gap: 1em;
-  --text-gap: 0.5em;
+  --main-margin: 0.5em;
   --icon-width: 6em;
   --icon-height: 6em;
   --icon-size: 6em;
@@ -4341,11 +4330,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;
@@ -4354,6 +4344,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;
 }
@@ -4386,7 +4377,6 @@ html body .height-full {
   padding: var(--padding);
   border-radius: var(--radius);
   width: var(--width);
-  gap: var(--gap);
   white-space: normal;
   transition: 0.1s transform ease-out;
   transform: scale(0);
@@ -4425,8 +4415,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;
@@ -4437,7 +4427,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);
@@ -4468,7 +4458,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);
 }
@@ -4477,6 +4467,7 @@ html body .height-full {
   align-items: center;
   justify-content: var(--fn-align);
   gap: var(--fn-gap);
+  margin-top: var(--fn-margin);
   order: 1;
 }
 .to-msg-fn .to-button {
@@ -4582,7 +4573,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;
@@ -4615,7 +4605,6 @@ html body .height-full {
   user-select: none;
   display: flex;
   align-items: center;
-  gap: var(--pager-gap);
 }
 .to-page-pager-list {
   flex: 1;
@@ -4742,7 +4731,6 @@ html body .height-full {
   white-space: nowrap;
   background: var(--jumper-bg);
   background-size: var(--jumper-bg-size);
-  gap: var(--jumper-gap);
   border-radius: var(--pager-jumper-radius);
 }
 .to-page-jumper::before {
@@ -4759,6 +4747,7 @@ html body .height-full {
   --height: var(--jumper-height);
   --width: 6em;
   --gap: 0;
+  --content-padding: 0 0 0 1em;
 }
 .to-page-jumper .to-page-jumper-icon {
   --height: var(--jumper-height);
@@ -5172,7 +5161,6 @@ html body .height-full {
 }
 .to-checkbox {
   --padding: 0 1em;
-  --gap: 0.5em;
   --height: var(--height-fe);
   --width: auto;
   --bg: none;
@@ -5192,12 +5180,16 @@ html body .height-full {
   --box-color: #fff;
   --box-radius: var(--radius-fe);
   --box-border: var(--border-fe);
+  --box-margin: 0.5em;
   --box-hover-bg: var(--box-bg);
   --box-hover-color: var(--box-color);
   --box-hover-border: var(--box-border);
   --box-active-bg: var(--box-bg);
   --box-active-color: var(--box-color);
   --box-active-border: var(--box-border);
+  --label-color: inherit;
+  --label-size: 100%;
+  --label-weight: normal;
   --checked-bg: var(--bg);
   --checked-border: var(--border);
   --checked-color: var(--color);
@@ -5225,7 +5217,6 @@ html body .height-full {
   box-sizing: border-box;
   width: var(--width);
   align-items: center;
-  gap: var(--gap);
   height: var(--height);
   background: var(--bg);
   background-size: var(--bg-size);
@@ -5238,7 +5229,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);
@@ -5250,14 +5241,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);
@@ -5421,6 +5418,12 @@ html body .height-full {
   --suffix-padding: 0;
   --suffix-margin: 0;
   --suffix-color: var(--color-fg);
+  --hover-border: var(--border);
+  --hover-bg: rgba(0, 0, 0, 0.05);
+  --hover-color: var(--color);
+  --active-border: var(--border);
+  --active-bg: rgba(0, 0, 0, 0.1);
+  --active-color: var(--color);
 }
 .to-date-range {
   display: flex;
@@ -5486,6 +5489,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;
 }
@@ -6744,7 +6761,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);
@@ -6755,7 +6772,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);
@@ -6765,6 +6781,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;
@@ -6847,9 +6866,10 @@ html body .height-full {
   --bg: #f7f7f7;
   --bg-size: 100% 100%;
   --color: var(--color-fg);
-  --gap: 0.5em;
   --lh: 1.5em;
   --align: center;
+  --remove-margin: 0.5em;
+  --close-margin: 0.5em;
 }
 .to-tip-wrapper {
   padding: var(--padding);
@@ -6858,13 +6878,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;
@@ -6876,6 +6898,7 @@ html body .height-full {
   font-size: var(--size);
 }
 .to-tip-remove {
+  margin-left: var(--remove-margin);
   flex-shrink: 0;
   display: none;
   cursor: pointer;
@@ -6890,6 +6913,7 @@ html body .height-full {
   --height: var(--lh);
   --radius: 50%;
   --color: var(--color-fg);
+  margin-left: var(--content-margin);
 }
 .to-tip.position-top {
   position: absolute;
@@ -6928,7 +6952,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;
@@ -7184,7 +7210,6 @@ html body .height-full {
   --item-bg-size: 100% 100%;
   --item-radius: var(--radius-fe);
   --item-shadow: none;
-  --item-gap: 0.5em;
   --item-size: 1em;
   --item-hover-border: var(--item-border);
   --item-hover-color: var(--item-color);
@@ -7206,6 +7231,7 @@ html body .height-full {
   --item-on-active-color: var(--item-on-color);
   --item-on-active-bg: rgba(0, 0, 0, 0.2);
   --item-on-active-shadow: var(--item-on-shadow);
+  --icon-margin: 0.5em;
   --check-width: 1em;
   --check-height: 1em;
   --check-bg: #fff;
@@ -7214,6 +7240,7 @@ html body .height-full {
   --check-border: var(--border-fe);
   --check-shadow: none;
   --check-size: 0.5em;
+  --check-margin: 0.5em;
   --check-active-bg: var(--check-bg);
   --check-active-color: var(--check-color);
   --check-active-border: var(--check-border);
@@ -7264,7 +7291,6 @@ html body .height-full {
   border: var(--item-border);
   min-height: var(--height);
   padding: var(--item-padding);
-  gap: 0.5em;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -7314,6 +7340,7 @@ html body .height-full {
 }
 .to-segment-check {
   display: none;
+  margin-right: var(--check-margin);
 }
 .to-segment-content {
   display: flex;
@@ -7322,9 +7349,11 @@ html body .height-full {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  gap: var(--item-gap);
   font-size: var(--item-size);
 }
+.to-segment-icon {
+  margin-right: var(--icon-margin);
+}
 .to-segment-icon {
   --width: 1em;
   --height: 1em;
@@ -7484,7 +7513,6 @@ html body .height-full {
 }
 .to-dialog {
   --width: 50em;
-  --gap: 1em;
   --radius: 1em;
   --bg: var(--color-bg);
   --bg-size: 100% 100%;
@@ -7494,6 +7522,7 @@ html body .height-full {
   --border: 0 none;
   --shadow: 0 0.5em 1em 0 var(--color-fg-op-1);
   --header-offset: 3em;
+  --header-margin: 1em;
   --content-padding: 0;
   --content-bg: none;
   --content-bg-size: 100% 100%;
@@ -7528,7 +7557,6 @@ html body .height-full {
   position: relative;
   display: inline-flex;
   flex-direction: column;
-  gap: var(--gap);
   vertical-align: middle;
   width: var(--width);
   transform-origin: center;
@@ -7551,6 +7579,7 @@ html body .height-full {
 .to-dialog-header.mode-default {
   --lh: 2em;
   margin-right: var(--header-offset);
+  margin-bottom: var(--header-margin);
 }
 .to-dialog-close {
   --width: 2em;
@@ -7569,7 +7598,7 @@ html body .height-full {
 .to-dialog.is-slide {
   --radius: 0;
   --padding: 0;
-  --gap: 0;
+  --content-margin: 0;
   transition-duration: 0.3s;
   text-align: right;
   overflow: hidden;
@@ -7697,7 +7726,6 @@ html body .height-full {
   --gap: 0;
   --indent: 1.75em;
   --item-padding: 0;
-  --item-gap: 0.25em;
   --item-border: 0 none;
   --item-bg: none;
   --item-bg-size: 100% 100%;
@@ -7721,7 +7749,6 @@ html body .height-full {
   --label-border: 0 none;
   --label-bg: none;
   --label-bg-size: 100% 100%;
-  --label-gap: 0.25em;
   --label-color: inherit;
   --label-hover-border: var(--label-border);
   --label-hover-bg: rgba(0, 0, 0, 0.1);
@@ -7734,6 +7761,9 @@ html body .height-full {
   --label-on-border: var(--label-border);
   --label-on-bg: var(--label-bg);
   --label-on-color: inherit;
+  --check-margin: 0.25em;
+  --icon-margin: 0.25em;
+  --pic-margin: 0.25em;
   --text-color: inherit;
   --text-size: 1em;
   --text-weight: normal;
@@ -7754,7 +7784,6 @@ html body .height-full {
   padding: var(--item-padding);
   border-radius: var(--item-radius);
   border: var(--item-border);
-  gap: var(--item-gap);
   background: var(--item-bg);
   background-size: var(--item-bg-size);
   height: var(--item-height);
@@ -7868,16 +7897,18 @@ html body .height-full {
 }
 .to-tree-pic {
   --width: 1em;
+  margin-right: var(--pic-margin);
 }
 .to-tree-icon {
   --width: 1em;
   --height: 1em;
   --size: 1em;
+  margin-right: var(--icon-margin);
 }
 .to-tree-check {
   --height: 1.5em;
   --padding: 0 0.25em;
-  margin-right: 0.25em;
+  margin-right: var(--check-margin);
 }
 .to-tree-label {
   white-space: nowrap;
@@ -7885,7 +7916,6 @@ html body .height-full {
   align-items: center;
   flex: 1;
   flex-shrink: 0;
-  gap: var(--label-gap);
   padding: var(--label-padding);
   border-radius: var(--label-radius);
   border: var(--label-border);
@@ -7893,6 +7923,9 @@ html body .height-full {
   background-size: var(--label-bg-size);
   color: var(--label-color);
 }
+.to-tree-label {
+  margin-left: var(--label-margin);
+}
 .to-tree-label.is-link:hover {
   border: var(--label-hover-border);
   background: var(--label-hover-bg);
@@ -7960,7 +7993,7 @@ html body .height-full {
   --gap-x: 1em;
   --gap-y: 0.5em;
   --col: 1;
-  --item-gap: 0;
+  --label-margin: 0;
   --item-border: 0 none;
   --item-padding: 0;
   --item-bg: none;
@@ -7975,7 +8008,6 @@ html body .height-full {
   --label-lh: 1.8em;
   --label-padding: 0;
   --label-color: var(--color-fg-fade);
-  --label-gap: 0;
   --label-size: 1em;
   --label-bg: none;
   --label-bg-size: 100% 100%;
@@ -8008,7 +8040,6 @@ html body .height-full {
   display: flex;
   align-items: var(--item-align);
   flex-direction: row;
-  gap: var(--item-gap);
   padding: var(--item-padding);
   background: var(--item-bg);
   background-size: var(--item-bg-size);
@@ -8055,7 +8086,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);
 }
@@ -8092,17 +8123,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;
 }
@@ -8145,6 +8165,7 @@ html body .height-full {
   --gap-y: 1em;
   --label-lh: 1.5em;
   --label-padding: 0;
+  --label-margin: 0.25em;
   --item-symbol: '';
 }
 .to-param.dir-vo .to-param-item,
@@ -8156,6 +8177,14 @@ html body .height-full {
 .to-param.dir-v .to-param-label {
   justify-content: flex-start;
 }
+.to-param.dir-vo .to-param-label {
+  margin-right: 0;
+  margin-top: var(--label-margin);
+}
+.to-param.dir-v .to-param-label {
+  margin-right: 0;
+  margin-bottom: var(--label-margin);
+}
 .to-param.dir-vo .to-param-label {
   order: 2;
 }
@@ -8207,7 +8236,9 @@ html body .height-full {
   --padding: 0 1em 0 1em;
   --width: 100%;
   --radius: var(--radius-fe);
-  --gap: 1em;
+  --prefix-margin: 1em;
+  --clear-margin: 1em;
+  --arrow-margin: 1em;
   --color: inherit;
   --placeholder-color: var(--color-placeholder);
   --arrow-size: 1em;
@@ -8226,7 +8257,6 @@ html body .height-full {
   box-sizing: border-box;
   position: relative;
   display: flex;
-  gap: var(--gap);
   align-items: center;
   height: var(--height);
   padding: var(--padding);
@@ -8262,8 +8292,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);
@@ -8588,7 +8626,7 @@ html body .height-full {
   transform: rotate(90deg);
 }
 .to-range {
-  --gap: 1em;
+  --input-margin: 1em;
   --opacity: 1;
   --height: var(--height-fe);
   --bar-height: 0.5em;
@@ -8624,7 +8662,6 @@ html body .height-full {
   align-items: center;
   padding: 0 calc(var(--handle-width) / 2);
   height: var(--height);
-  gap: calc(var(--gap) + var(--handle-width) / 2);
 }
 .to-range-bar {
   position: relative;
@@ -8676,6 +8713,9 @@ html body .height-full {
 .to-range:has(.is-start) .to-range-progress {
   border-radius: 0;
 }
+.to-range-input {
+  margin-left: calc(var(--input-margin) + var(--handle-width) / 2);
+}
 .to-upload {
   position: relative;
   --tip-margin: 1em;
@@ -9186,19 +9226,18 @@ html body .height-full {
   --file-border: 0 none;
   --file-bg: none;
   --file-bg-size: 100% 100%;
-  --file-gap: 0;
   --file-hover-border: var(--file-border);
   --file-hover-bg: rgba(0, 0, 0, 0.1);
   --file-hover-color: var(--file-color);
   --file-active-border: var(--file-border);
   --file-active-bg: rgba(0, 0, 0, 0.3);
   --file-active-color: var(--file-color);
-  --name-margin: 1em;
-  --name-color: inherit;
-  --name-lh: 1.5em;
-  --name-size: 1em;
-  --name-weight: normal;
-  --fn-margin: 1.5em;
+  --file-name-margin: 0.5em;
+  --file-name-color: inherit;
+  --file-name-lh: 1.5em;
+  --file-name-size: 1em;
+  --file-name-weight: normal;
+  --file-fn-margin: 1.5em;
 }
 .to-import-file {
   cursor: pointer;
@@ -9213,7 +9252,6 @@ html body .height-full {
   background: var(--file-bg);
   background-size: var(--file-bg-size);
   color: var(--file-color);
-  gap: var(--file-gap);
   box-shadow: var(--file-shadow);
 }
 .to-import-file.is-dragover,
@@ -9234,16 +9272,16 @@ html body .height-full {
   --size: 3em;
 }
 .to-import-file-name {
-  margin-top: var(--name-margin);
-  line-height: var(--name-lh);
-  font-weight: var(--name-weight);
-  color: var(--name-color);
+  margin-top: var(--file-name-margin);
+  line-height: var(--file-name-lh);
+  font-weight: var(--file-name-weight);
+  color: var(--file-name-color);
 }
 .to-import-file-name-text {
   font-size: var(--name-size);
 }
 .to-import-file-fn {
-  margin-top: var(--fn-margin);
+  margin-top: var(--file-fn-margin);
   display: flex;
 }
 .to-import.state-success .to-import-file-icon {
@@ -9346,8 +9384,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 {