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

package/theme/components/index.css

@@ -1875,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);
@@ -1905,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;
@@ -1915,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;
@@ -2269,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;
@@ -2283,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;
@@ -2308,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;
 }
@@ -2322,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);
@@ -2369,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 {
@@ -2376,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%;
@@ -2406,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;
@@ -2433,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;
@@ -2471,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;
@@ -2486,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);
@@ -2522,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);
@@ -2560,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);
@@ -2571,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;
@@ -2581,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);
@@ -2594,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;
@@ -2609,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;
@@ -2638,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;
@@ -2647,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);
@@ -2668,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);
@@ -2692,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;
 }
@@ -2729,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);
@@ -2769,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);
@@ -2776,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);
@@ -2805,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);
@@ -2851,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;
@@ -2859,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);
@@ -2961,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;
@@ -2974,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);
@@ -2997,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;
@@ -3007,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);
@@ -3014,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);
@@ -3036,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);
@@ -3168,14 +3154,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);
@@ -3184,7 +3171,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);
@@ -3241,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);
@@ -3284,6 +3269,7 @@ html body .height-full {
   --width: 1em;
   --height: 1em;
   --size: 1em;
+  margin-right: var(--icon-margin);
 }
 .to-select-content {
   flex: 1;
@@ -3306,6 +3292,7 @@ html body .height-full {
   display: none;
   cursor: pointer;
   transition: opacity 0.15s ease;
+  margin-left: var(--clear-margin);
   --width: var(--clear-height);
   --height: var(--clear-height);
 }
@@ -3313,6 +3300,7 @@ html body .height-full {
   --color: #aaa;
   --width: var(--arrow-height);
   --height: var(--arrow-height);
+  margin-left: var(--arrow-margin);
 }
 .to-select:hover .to-select-clear {
   display: inline-flex;
@@ -3511,7 +3499,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 {
@@ -3554,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;
@@ -3565,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 {
@@ -3584,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);
@@ -3622,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);
@@ -3644,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;
@@ -3665,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;
@@ -3692,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;
@@ -3700,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%;
@@ -3977,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%;
@@ -4006,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);
@@ -4037,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%;
@@ -4047,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) {
@@ -4066,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);
@@ -4118,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);
@@ -4161,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;
@@ -4173,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;
@@ -4189,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);
@@ -4235,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;
@@ -4242,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;
 }
@@ -4321,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;
@@ -4338,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;
@@ -4351,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;
 }
@@ -4383,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);
@@ -4422,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;
@@ -4434,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);
@@ -4465,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);
 }
@@ -4474,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 {
@@ -4579,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;
@@ -4612,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;
@@ -4739,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 {
@@ -4756,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);
@@ -5169,7 +5158,6 @@ html body .height-full {
 }
 .to-checkbox {
   --padding: 0 1em;
-  --gap: 0.5em;
   --height: var(--height-fe);
   --width: auto;
   --bg: none;
@@ -5189,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);
@@ -5222,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);
@@ -5235,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);
@@ -5247,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);
@@ -5418,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;
@@ -5483,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;
 }
@@ -6741,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);
@@ -6752,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);
@@ -6762,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;
@@ -6844,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);
@@ -6855,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;
@@ -6873,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;
@@ -6887,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;
@@ -6925,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;
@@ -7181,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);
@@ -7203,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;
@@ -7211,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);
@@ -7261,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;
@@ -7311,6 +7337,7 @@ html body .height-full {
 }
 .to-segment-check {
   display: none;
+  margin-right: var(--check-margin);
 }
 .to-segment-content {
   display: flex;
@@ -7319,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;
@@ -7481,7 +7510,6 @@ html body .height-full {
 }
 .to-dialog {
   --width: 50em;
-  --gap: 1em;
   --radius: 1em;
   --bg: var(--color-bg);
   --bg-size: 100% 100%;
@@ -7491,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%;
@@ -7525,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;
@@ -7548,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;
@@ -7566,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;
@@ -7694,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%;
@@ -7718,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);
@@ -7731,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;
@@ -7751,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);
@@ -7865,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;
@@ -7882,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);
@@ -7890,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);
@@ -7957,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;
@@ -7972,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%;
@@ -8005,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);
@@ -8052,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);
 }
@@ -8089,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;
 }
@@ -8142,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,
@@ -8153,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;
 }
@@ -8204,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;
@@ -8223,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);
@@ -8259,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);
@@ -8585,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;
@@ -8621,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;
@@ -8673,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;
@@ -9183,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;
@@ -9210,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,
@@ -9231,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 {
@@ -9343,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 {