@topvisor/ui 0.0.16 → 0.0.17

package/forms/forms.js

@@ -1,13 +1,13 @@
-import { B as o, c as r, a as e, H as i, i as n, r as c, s as p, T as x } from "../.chunks/forms-6a6b0b80.es.js";
+import { B, c, a, H, i, r, s, T } from "../.chunks/forms-245e3bc0.es.js";
 import "vue";
 export {
-  o as Button,
-  r as Checkbox,
-  e as ControlLabel,
-  i as Hint,
-  n as Input,
-  c as Radio,
-  p as Switcher,
-  x as Textarea
+  B as Button,
+  c as Checkbox,
+  a as ControlLabel,
+  H as Hint,
+  i as Input,
+  r as Radio,
+  s as Switcher,
+  T as Textarea
 };
 //# sourceMappingURL=forms.js.map

package/forms/helpers.amd.js

@@ -1,2 +1,6 @@
-define(["exports","../.chunks/forms-7119886a.amd","vue"],function(e,t,u){"use strict"; if(typeof vue === "undefined") var vue = window.Vue;e.SIZE=t.SIZE,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
+define(["exports", "../.chunks/forms-f7b7b259.amd", "vue"], function(exports, forms, vue) {
+  "use strict"; if(typeof vue === "undefined") var vue = window.Vue;
+  exports.SIZE = forms.SIZE;
+  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+});
 //# sourceMappingURL=helpers.amd.js.map

package/forms/helpers.amd.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.amd.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"helpers.amd.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/forms/helpers.js

@@ -1,6 +1,6 @@
-import { S as p } from "../.chunks/forms-6a6b0b80.es.js";
+import { S } from "../.chunks/forms-245e3bc0.es.js";
 import "vue";
 export {
-  p as SIZE
+  S as SIZE
 };
 //# sourceMappingURL=helpers.js.map

package/forms.css

@@ -1 +1,505 @@
-.top-button{cursor:pointer;box-sizing:border-box;box-shadow:var(--top-button-box-shadow);border-radius:var(--top-forms-radius);border:var(--top-forms-border-width) solid var(--top-forms-border-color);background-color:var(--top-button-background-color);height:var(--top-forms-base-height);padding:0 var(--top-forms-padding);color:var(--top-button-color);line-height:1;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s,border-color .15s,box-shadow .15s}.top-button:hover{box-shadow:var(--top-button-box-shadow-hover);background-color:var(--top-button-background-color-hover)}.top-button:active{box-shadow:var(--top-button-box-shadow-active);background-color:var(--top-button-background-color-active)}.top-button.top-active{box-shadow:var(--top-button-box-shadow-selected);background-color:var(--top-button-background-color-selected)}.top-button.top-button-progress{cursor:help;box-shadow:inset #00000080 0 0 64px;background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-size:32px 32px;animation:_progress_1hqxk_1 1s linear infinite}@keyframes _progress_1hqxk_1{0%{background-position-x:0px}to{background-position-x:32px}}a.top-button,button.top-button{min-width:100px;text-decoration:none}a.top-button,a.top-button:hover{min-width:var(--top-forms-base-height);text-decoration:none}.top-button[data-top-icon]:not(:empty),.top-button[data-top-icon2]:not(:empty){justify-content:flex-start;text-align:left}.top-button[data-top-icon]{padding-left:0}.top-button[data-top-icon2]{padding-right:var(--top-select_arrow-width)}.top-button[data-top-icon2]:after{margin-left:auto}.top-button:empty{min-width:var(--top-forms-base-height)}.top-button[data-top-icon]:empty,.top-button[data-top-icon2]:empty{padding:0}.top-button.top-color_blue{--top-button-background-color: var(--color-blue-500)}.top-button.top-color_green{--top-button-background-color: var(--color-green-500)}.top-button.top-color_orange{--top-button-background-color: var(--color-orange-500)}.top-button.top-color_red{--top-button-background-color: var(--color-red-500)}.top-button.top-color_pink{--top-button-background-color: var(--color-pink-500)}.top-button.top-color_theme{--top-button-box-shadow-hover: none;--top-button-box-shadow-active: none;--top-button-box-shadow-selected: none;--top-icon-color: var(--color-text-2);--top-icon2-color: var(--color-text-2);--top-button-color: var(--color-text-1);--top-button-background-color: transparent;--top-button-background-color-hover: var(--color-secondary-opacity);--top-button-background-color-active: var(--color-secondary-2-opacity);--top-button-background-color-selected: var(--color-secondary-2-opacity)}.top-button.top-color_theme.top-active{--top-icon-color: var(--color-text-2)}.top-button.top-style_outline{--top-button-box-shadow: none;--top-button-box-shadow-hover: none;--top-button-box-shadow-active: none;--top-button-box-shadow-selected: none;--top-forms-border-color: var(--top-style_outline-color);--top-style_outline-color: var(--color-steel-400);--top-button-color: var(--top-style_outline-color);--top-button-background-color: var(--content-background-color);--top-button-background-color-hover: var(--color-theme-100);--top-button-background-color-active: var(--color-theme-150);--top-button-background-color-selected: var(--color-theme-125);--top-forms-border-width: 1px}.top-button.top-style_outline.top-color_theme{--top-button-color: var(--color-text)}.top-button.top-style_outline.top-color_blue{--top-style_outline-color: var(--color-blue-500)}.top-button.top-style_outline.top-color_green{--top-style_outline-color: var(--color-green-500)}.top-button.top-style_outline.top-color_orange{--top-style_outline-color: var(--color-orange-500)}.top-button.top-style_outline.top-color_red{--top-style_outline-color: var(--color-red-500)}.top-button.top-style_outline.top-color_pink{--top-style_outline-color: var(--color-pink-500)}.top-button.top-style_soft{--top-shadow-darken: none;--top-shadow-darken-2: none;--top-shadow-darken-3: none;--top-button-color: var(--color-text);--top-button-background-color: var(--color-secondary-opacity);--top-button-background-color-hover: var(--color-secondary-2-opacity);--top-button-background-color-active: var(--color-secondary-3-opacity);--top-button-background-color-selected: var(--color-secondary-3-opacity)}.top-button.top-style_soft.top-color_blue{--top-button-color: var(--color-blue-500)}.top-button.top-style_soft.top-color_orange{--top-button-color: var(--color-orange-500)}.top-button.top-style_soft.top-color_green{--top-button-color: var(--color-green-500)}.top-button.top-style_soft.top-color_red{--top-button-color: var(--color-red-500)}.top-button.top-style_soft.top-color_pink{--top-button-color: var(--color-pink-500)}.top-button.top-style_transparent{--top-shadow-darken: none;--top-shadow-darken-2: none;--top-shadow-darken-3: none;--top-button-color: var(--color-text);--top-button-background-color: transparent;--top-button-background-color-hover: transparent;--top-button-background-color-active: transparent;--top-button-background-color-selected: var(--color-steel-200)}.top-button.top-style_transparent:hover{opacity:.8}.top-button.top-style_transparent.top-color_blue{--top-button-color: var(--color-blue-450)}.top-button.top-style_transparent.top-color_green{--top-button-color: var(--color-green-450)}.top-button.top-style_transparent.top-color_orange{--top-button-color: var(--color-orange-450)}.top-button.top-style_transparent.top-color_red{--top-button-color: var(--color-red-450)}.top-button.top-style_transparent.top-color_pink{--top-button-color: var(--color-pink-450)}.top-button{--top-button-color: var(--color-white);--top-button-background-color: transparent;--top-button-background-color-hover: var(--top-button-background-color);--top-button-background-color-active: var(--top-button-background-color-hover);--top-button-background-color-selected: var(--top-button-background-color-hover);--top-button-box-shadow: none;--top-button-box-shadow-hover: var(--top-shadow-darken-2);--top-button-box-shadow-active: var(--top-shadow-darken-3);--top-button-box-shadow-selected: var(--top-shadow-darken-3);--top-forms-border-width: 0px;--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding))}.top-button.top-size_l{--top-forms-padding: var(--top-forms-padding_l);--top-forms-base-height: var(--top-forms-base-height_l)}.top-button.top-size_xl{--top-forms-padding: var(--top-forms-padding_xl);--top-forms-base-height: var(--top-forms-base-height_xl)}.top-hint{--top-icon-size: 16px;--top-icon-width: var(--top-icon-size);border-radius:50%;background:var(--content-background-color);padding:1px;color:var(--color-text-4);line-height:1;z-index:1;pointer-events:all}.top-hint:hover{color:var(--color-text-3)}.top-textarea{width:180px;display:inline-flex;align-items:center;position:relative}.top-textarea_textarea{background:var(--top-forms-background-color);width:100%;padding:var(--top-forms-padding);resize:none}.top-textarea_textarea:hover{background:var(--top-forms-background-color-hover)}.top-textarea_textarea:focus{outline-color:var(--color-theme-75);outline-offset:0px}.top-textarea_textarea.top-textarea_textarea-expandable{width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0}.top-textarea_pseudoContent{box-sizing:border-box;min-height:var(--bcf6b9ae);padding:var(--top-forms-padding);font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none;opacity:0;z-index:-1}.top-textarea_hint{position:absolute;top:2px;right:2px}.top-forms-optionLabel{flex-grow:1}.top-forms-optionLabel_title{min-height:var(--top-forms-option-height);display:flex;align-items:center}.top-forms-optionLabel_title-disabled{color:var(--color-text-3)}.top-forms-optionLabel_description{color:var(--color-text-3);font-size:.85em;line-height:var(--top-forms-option-height)}.top-checkbox{cursor:pointer;display:inline-flex}.top-checkbox_input{cursor:inherit;border-radius:4px;background:var(--content-background-color);border:1px solid var(--top-forms-border-color);width:calc(var(--top-forms-option-height) - 3px * 2);height:calc(var(--top-forms-option-height) - 3px * 2)}.top-checkbox_input:before{content:" ";color:#fff;font-family:Topvisor-2;font-size:16px}.top-checkbox_input:not(:checked):not(:indeterminate):hover{border-color:var(--top-forms-option-color);background:var(--color-theme-50)}.top-checkbox_input:checked,.top-checkbox_input:indeterminate{border-color:var(--top-forms-option-color);background:var(--top-forms-option-color)}.top-checkbox_input:checked:before{content:""}.top-checkbox_input:indeterminate:before{content:""}.top-checkbox_input:checked:hover,.top-checkbox_input:indeterminate:hover{border-color:var(--top-forms-option-color-hover);background:var(--top-forms-option-color-hover)}.top-checkbox_input:checked:disabled,.top-checkbox_input:indeterminate:disabled{border-color:transparent;background:var(--color-theme-400)}.top-checkbox_input.top-error{border-color:var(--color-negative)!important}.top-checkbox_input:checked.top-error,.top-checkbox_input:indeterminate.top-error{background:var(--color-negative)}.top-input{width:180px;display:inline-flex;align-items:center;gap:var(--top-gap-1)}.top-input_input{background:var(--top-forms-background-color)}.top-input_input:hover{background:var(--top-forms-background-color-hover)}.top-input_input:focus{outline-color:var(--color-theme-75);outline-offset:0px}.top-input-withCleaner .top-input_input:not(:placeholder-shown){--top-forms_clear-width: 24px}.top-input_input{width:50%;flex-grow:1}.top-input[data-top-icon]:before{--top-icon-color: var(--color-text-secondary)}:root{--top-radio-background-color: var(--content-background-color);--top-radio-background-color-hover: var(--top-radio-background-color);--top-radio-background-color-active: var(--top-radio-background-color)}.top-radio{cursor:pointer}.top-radio_input{border-radius:50%;background:var(--content-background-color);border:1px solid var(--top-forms-border-color);width:calc(var(--top-forms-option-height) - 3px * 2);height:calc(var(--top-forms-option-height) - 3px * 2)}.top-radio_input:hover{border-color:var(--top-forms-option-color)}.top-radio_input:checked{border-color:var(--top-forms-option-color);border-width:5px}.top-radio_input:checked:hover{border-color:var(--top-forms-option-color-hover)}.top-radio_input.top-error,.top-radio_input:checked.top-error{border-color:var(--color-negative)}.top-checkboxSwitcher{cursor:pointer;display:inline-flex;gap:4px}.top-checkboxSwitcher_input{border-radius:9px;border:none;background:var(--color-theme-100);width:36px;height:18px;position:relative}.top-checkboxSwitcher_input:before{content:"";border-radius:50%;background:var(--color-white);width:12px;height:12px;margin:3px;position:absolute;top:0;left:0;transition:left .1s}.top-checkboxSwitcher_input:hover{background:var(--color-theme-150)}.top-checkboxSwitcher_input:checked{background:var(--top-forms-option-color)}.top-checkboxSwitcher_input:checked:hover{background:var(--top-forms-option-color-hover)}.top-checkboxSwitcher_input:checked:before{left:50%}.top-checkboxSwitcher_input:disabled{background:var(--color-theme-400)}.top-checkboxSwitcher_input.top-error{background:var(--color-negative)!important}
+.top-button {
+	cursor: pointer;
+	box-sizing: border-box;
+	box-shadow: var(--top-button-box-shadow);
+	border-radius: var(--top-forms-radius);
+	border: var(--top-forms-border-width) solid var(--top-forms-border-color);
+	background-color: var(--top-button-background-color);
+	height: var(--top-forms-base-height);
+	padding: 0 var(--top-forms-padding);
+	color: var(--top-button-color);
+	line-height: 1;
+	white-space: nowrap;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+	transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
+}
+.top-button:hover {
+	box-shadow: var(--top-button-box-shadow-hover);
+	background-color: var(--top-button-background-color-hover);
+}
+.top-button:active {
+	box-shadow: var(--top-button-box-shadow-active);
+	background-color: var(--top-button-background-color-active);
+}
+.top-button.top-active {
+	box-shadow: var(--top-button-box-shadow-selected);
+	background-color: var(--top-button-background-color-selected);
+}
+.top-button.top-button-progress {
+	cursor: help;
+	box-shadow: inset rgba(0, 0, 0, 0.5) 0 0 64px;
+	background-image:
+		linear-gradient(-45deg,
+			rgba(255, 255, 255, 0.2) 25%,
+			transparent 25%,
+			transparent 50%,
+			rgba(255, 255, 255, 0.2) 50%,
+			rgba(255, 255, 255, 0.2) 75%,
+			transparent 75%,
+			transparent);
+	background-size: 32px 32px;
+	animation: _progress_1hqxk_1 1s linear infinite;
+}
+@keyframes _progress_1hqxk_1 {
+0% {
+		background-position-x: 0px;
+}
+100% {
+		background-position-x: 32px;
+}
+}
+a.top-button,
+button.top-button {
+	min-width: 100px;
+	text-decoration: none;
+}
+a.top-button,
+a.top-button:hover {
+	min-width: var(--top-forms-base-height);
+	text-decoration: none;
+}
+.top-button[data-top-icon]:not(:empty),
+.top-button[data-top-icon2]:not(:empty) {
+	justify-content: flex-start;
+	text-align: left;
+}
+.top-button[data-top-icon] {
+	padding-left: 0;
+}
+.top-button[data-top-icon2] {
+	padding-right: var(--top-select_arrow-width);
+}
+.top-button[data-top-icon2]:after {
+	margin-left: auto;
+}
+.top-button:empty {
+	min-width: var(--top-forms-base-height);
+}
+.top-button[data-top-icon]:empty,
+.top-button[data-top-icon2]:empty {
+	padding: 0;
+}
+.top-button.top-color_blue {
+	--top-button-background-color: var(--color-blue-500);
+}
+.top-button.top-color_green {
+	--top-button-background-color: var(--color-green-500);
+}
+.top-button.top-color_orange {
+	--top-button-background-color: var(--color-orange-500);
+}
+.top-button.top-color_red {
+	--top-button-background-color: var(--color-red-500);
+}
+.top-button.top-color_pink {
+	--top-button-background-color: var(--color-pink-500);
+}
+.top-button.top-color_theme {
+	--top-button-box-shadow-hover: none;
+	--top-button-box-shadow-active: none;
+	--top-button-box-shadow-selected: none;
+
+	--top-icon-color: var(--color-text-2);
+	--top-icon2-color: var(--color-text-2);
+
+	--top-button-color: var(--color-text-1);
+	--top-button-background-color: transparent;
+	--top-button-background-color-hover: var(--color-secondary-opacity);
+	--top-button-background-color-active: var(--color-secondary-2-opacity);
+	--top-button-background-color-selected: var(--color-secondary-2-opacity);
+}
+.top-button.top-color_theme.top-active {
+	--top-icon-color: var(--color-text-2);
+}
+.top-button.top-style_outline {
+	--top-button-box-shadow: none;
+	--top-button-box-shadow-hover: none;
+	--top-button-box-shadow-active: none;
+	--top-button-box-shadow-selected: none;
+
+	--top-forms-border-color: var(--top-style_outline-color);
+
+	--top-style_outline-color: var(--color-steel-400);
+
+	--top-button-color: var(--top-style_outline-color);
+	--top-button-background-color: var(--content-background-color);
+	--top-button-background-color-hover: var(--color-theme-100);
+	--top-button-background-color-active: var(--color-theme-150);
+	--top-button-background-color-selected: var(--color-theme-125);
+
+	--top-forms-border-width: 1px;
+}
+.top-button.top-style_outline.top-color_theme {
+	--top-button-color: var(--color-text);
+}
+.top-button.top-style_outline.top-color_blue {
+	--top-style_outline-color: var(--color-blue-500);
+}
+.top-button.top-style_outline.top-color_green {
+	--top-style_outline-color: var(--color-green-500);
+}
+.top-button.top-style_outline.top-color_orange {
+	--top-style_outline-color: var(--color-orange-500);
+}
+.top-button.top-style_outline.top-color_red {
+	--top-style_outline-color: var(--color-red-500);
+}
+.top-button.top-style_outline.top-color_pink {
+	--top-style_outline-color: var(--color-pink-500);
+}
+.top-button.top-style_soft {
+	--top-shadow-darken: none;
+	--top-shadow-darken-2: none;
+	--top-shadow-darken-3: none;
+
+	--top-button-color: var(--color-text);
+	--top-button-background-color: var(--color-secondary-opacity);
+	--top-button-background-color-hover: var(--color-secondary-2-opacity);
+	--top-button-background-color-active: var(--color-secondary-3-opacity);
+	--top-button-background-color-selected: var(--color-secondary-3-opacity);
+}
+.top-button.top-style_soft.top-color_blue {
+	--top-button-color: var(--color-blue-500);
+}
+.top-button.top-style_soft.top-color_orange {
+	--top-button-color: var(--color-orange-500);
+}
+.top-button.top-style_soft.top-color_green {
+	--top-button-color: var(--color-green-500);
+}
+.top-button.top-style_soft.top-color_red {
+	--top-button-color: var(--color-red-500);
+}
+.top-button.top-style_soft.top-color_pink {
+	--top-button-color: var(--color-pink-500);
+}
+.top-button.top-style_transparent {
+	--top-shadow-darken: none;
+	--top-shadow-darken-2: none;
+	--top-shadow-darken-3: none;
+
+	--top-button-color: var(--color-text);
+	--top-button-background-color: transparent;
+	--top-button-background-color-hover: transparent;
+	--top-button-background-color-active: transparent;
+	--top-button-background-color-selected: var(--color-steel-200);
+}
+.top-button.top-style_transparent:hover {
+	opacity: 0.8;
+}
+.top-button.top-style_transparent.top-color_blue {
+	--top-button-color: var(--color-blue-450);
+}
+.top-button.top-style_transparent.top-color_green {
+	--top-button-color: var(--color-green-450);
+}
+.top-button.top-style_transparent.top-color_orange {
+	--top-button-color: var(--color-orange-450);
+}
+.top-button.top-style_transparent.top-color_red {
+	--top-button-color: var(--color-red-450);
+}
+.top-button.top-style_transparent.top-color_pink {
+	--top-button-color: var(--color-pink-450);
+}
+.top-button {
+	--top-button-color: var(--color-white);
+	--top-button-background-color: transparent;
+	--top-button-background-color-hover: var(--top-button-background-color);
+	--top-button-background-color-active: var(--top-button-background-color-hover);
+	--top-button-background-color-selected: var(--top-button-background-color-hover);
+	--top-button-box-shadow: none;
+	--top-button-box-shadow-hover: var(--top-shadow-darken-2);
+	--top-button-box-shadow-active: var(--top-shadow-darken-3);
+	--top-button-box-shadow-selected: var(--top-shadow-darken-3);
+	--top-forms-border-width: 0px;
+	--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));
+	--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));
+}
+.top-button.top-size_l {
+	--top-forms-padding: var(--top-forms-padding_l);
+	--top-forms-base-height: var(--top-forms-base-height_l);
+}
+.top-button.top-size_xl {
+	--top-forms-padding: var(--top-forms-padding_xl);
+	--top-forms-base-height: var(--top-forms-base-height_xl);
+}
+
+.top-hint {
+	--top-icon-size: 16px;
+	--top-icon-width: var(--top-icon-size);
+
+	border-radius: 50%;
+	background: var(--content-background-color);
+	padding: 1px;
+	color: var(--color-text-4);
+	line-height: 1;
+	z-index: 1;
+	pointer-events: all;
+}
+.top-hint:hover {
+	color: var(--color-text-3);
+}
+
+.top-textarea {
+	width: 180px;
+	display: inline-flex;
+	align-items: center;
+	position: relative;
+}
+.top-textarea_textarea {
+	background: var(--top-forms-background-color);
+	width: 100%;
+	padding: var(--top-forms-padding);
+	resize: none;
+}
+.top-textarea_textarea:hover {
+	background: var(--top-forms-background-color-hover);
+}
+.top-textarea_textarea:focus {
+	outline-color: var(--color-theme-75);
+	outline-offset: 0px;
+}
+.top-textarea_textarea.top-textarea_textarea-expandable {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+.top-textarea_pseudoContent {
+	box-sizing: border-box;
+	min-height: var(--bcf6b9ae);
+	padding: var(--top-forms-padding);
+	font-size: 14px;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	pointer-events: none;
+	opacity: 0;
+	z-index: -1;
+}
+.top-textarea_hint {
+	position: absolute;
+	top: 2px;
+	right: 2px;
+}
+
+.top-forms-optionLabel {
+	flex-grow: 1;
+}
+.top-forms-optionLabel_title {
+	min-height: var(--top-forms-option-height);
+	display: flex;
+	align-items: center;
+}
+.top-forms-optionLabel_title-disabled {
+	color: var(--color-text-3);
+}
+.top-forms-optionLabel_description {
+	color: var(--color-text-3);
+	font-size: 0.85em;
+	line-height: var(--top-forms-option-height);
+}
+
+.top-checkbox {
+	cursor: pointer;
+	display: inline-flex;
+}
+.top-checkbox_input {
+	cursor: inherit;
+	border-radius: 4px;
+	background: var(--content-background-color);
+	border: 1px solid var(--top-forms-border-color);
+	width: calc(var(--top-forms-option-height) - 3px * 2);
+	height: calc(var(--top-forms-option-height) - 3px * 2);
+}
+.top-checkbox_input:before {
+	content: ' ';
+	color: #FFF;
+	font-family: 'Topvisor-2';
+	font-size: 16px;
+}
+.top-checkbox_input:hover {
+	border-color: var(--top-forms-option-color);
+	background: var(--color-theme-50)
+}
+
+/* checked / indeterminate */
+.top-checkbox_input:checked,
+.top-checkbox_input:indeterminate {
+	border-color: var(--top-forms-option-color);
+	background: var(--top-forms-option-color);
+}
+.top-checkbox_input:checked:before {
+	content: '';
+}
+.top-checkbox_input:indeterminate:before {
+	content: '';
+}
+.top-checkbox_input:checked:hover,
+.top-checkbox_input:indeterminate:hover {
+	border-color: var(--top-forms-option-color-hover);
+	background: var(--top-forms-option-color-hover);
+}
+
+/* disabled selected */
+.top-checkbox_input:disabled {
+	border-color: var(--color-line-1-opacity);
+	background: var(--color-theme-50);
+}
+.top-checkbox_input:checked:disabled,
+.top-checkbox_input:indeterminate:disabled {
+	border-color: transparent;
+	background: var(--color-theme-400);
+}
+
+/* isError */
+.top-checkbox_input.top-error {
+	border-color: var(--color-negative);
+}
+.top-checkbox_input.top-error:hover {
+	border-color: var(--color-negative-2);
+}
+
+/* isError selected */
+.top-checkbox_input:checked.top-error,
+.top-checkbox_input:indeterminate.top-error {
+	background: var(--color-negative);
+}
+.top-checkbox_input:checked.top-error:hover,
+.top-checkbox_input:indeterminate.top-error:hover {
+	background: var(--color-negative-2);
+}
+
+.top-input {
+	width: 180px;
+	display: inline-flex;
+	align-items: center;
+	gap: var(--top-gap-1);
+}
+.top-input_input {
+	background: var(--top-forms-background-color);
+}
+.top-input_input:hover {
+	background: var(--top-forms-background-color-hover);
+}
+.top-input_input:focus {
+	outline-color: var(--color-theme-75);
+	outline-offset: 0px;
+}
+.top-input-withCleaner .top-input_input:not(:placeholder-shown) {
+	--top-forms_clear-width: 24px;
+}
+
+/* TODO: перенести в inputsRange */
+.top-input_input {
+	width: 50%;
+	flex-grow: 1;
+}
+.top-input[data-top-icon]:before {
+	--top-icon-color: var(--color-text-secondary);
+}
+
+:root {
+	--top-radio-background-color: var(--content-background-color);
+	--top-radio-background-color-hover: var(--top-radio-background-color);
+	--top-radio-background-color-active: var(--top-radio-background-color);
+}
+.top-radio {
+	cursor: pointer;
+}
+.top-radio_input {
+	border-radius: 50%;
+	background: var(--content-background-color);
+	border: 1px solid var(--top-forms-border-color);
+	width: calc(var(--top-forms-option-height) - 3px * 2);
+	height: calc(var(--top-forms-option-height) - 3px * 2);
+}
+.top-radio_input:hover {
+	border-color: var(--top-forms-option-color);
+	background: var(--color-theme-50)
+}
+.top-radio_input:checked {
+	border-color: var(--top-forms-option-color);
+	border-width: 5px;
+}
+.top-radio_input:checked:hover {
+	border-color: var(--top-forms-option-color-hover);
+}
+
+/* disabled */
+.top-radio_input:disabled {
+	border-color: var(--color-line-1-opacity);
+	background: var(--color-theme-50);
+}
+
+/* disabled selected */
+.top-radio_input:checked:disabled {
+	border-color: var(--color-theme-400);
+}
+
+/* isError */
+.top-radio_input.top-error {
+	border-color: var(--color-negative);
+}
+.top-radio_input.top-error:hover {
+	border-color: var(--color-negative-2);
+}
+
+.top-checkboxSwitcher {
+	cursor: pointer;
+	display: inline-flex;
+	gap: 4px;
+}
+.top-checkboxSwitcher_input {
+	border-radius: 9px;
+	border: none;
+	background: var(--color-theme-100);
+	width: 36px;
+	height: 18px;
+	position: relative;
+}
+.top-checkboxSwitcher_input:before {
+	content: '';
+	border-radius: 50%;
+	background: var(--color-white);
+	width: 12px;
+	height: 12px;
+	margin: 3px;
+	position: absolute;
+	top: 0;
+	left: 0;
+
+	transition: left 0.1s;
+}
+.top-checkboxSwitcher_input:hover {
+	background: var(--color-theme-150);
+}
+
+/* checked */
+.top-checkboxSwitcher_input:checked {
+	background: var(--top-forms-option-color);
+}
+.top-checkboxSwitcher_input:checked:hover {
+	background: var(--top-forms-option-color-hover);
+}
+.top-checkboxSwitcher_input:checked:before {
+	left: 50%;
+}
+
+/* disabled */
+.top-checkboxSwitcher_input:disabled {
+	background: var(--color-theme-400);
+}
+
+/* isError */
+.top-checkboxSwitcher_input.top-error {
+	background: var(--color-negative);
+}
+.top-checkboxSwitcher_input.top-error:hover {
+	background: var(--color-negative-2);
+}

package/icomoon/demo.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> Topvisor-2 <small class="fgc1">(Glyphs:&nbsp;206)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> Topvisor-2 <small class="fgc1">(Glyphs:&nbsp;207)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
@@ -237,6 +237,20 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon2-select"></span>
+                <span class="mls"> icon2-select</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e9ce" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe9ce;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
         <div class="glyph fs1">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon2-chevron_down-s"></span>

package/icomoon/fonts/Topvisor-2.svg

@@ -229,4 +229,5 @@
 <glyph unicode="&#xe9cb;" glyph-name="checklist" data-tags="checklist" d="M426.667 597.333c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667h170.667c23.565 0 42.667 19.103 42.667 42.667s-19.102 42.667-42.667 42.667h-170.667zM718.050 512c-17.57-49.715-64.986-85.333-120.717-85.333h-170.667c-55.732 0-103.145 35.619-120.716 85.333h-7.284c-23.564 0-42.667-19.103-42.667-42.667v-512c0-23.565 19.103-42.667 42.667-42.667h426.667c23.565 0 42.667 19.102 42.667 42.667v512c0 23.564-19.102 42.667-42.667 42.667h-7.283zM305.95 597.333c17.571 49.715 64.984 85.333 120.716 85.333h170.667c55.731 0 103.147-35.619 120.717-85.333h7.283c70.694 0 128-57.308 128-128v-512c0-70.694-57.306-128-128-128h-426.667c-70.692 0-128 57.306-128 128v512c0 70.692 57.308 128 128 128h7.284zM542.17 371.503c16.661-16.663 16.661-43.678 0-60.34l-128-128c-16.663-16.661-43.677-16.661-60.34 0l-42.667 42.667c-16.662 16.661-16.662 43.678 0 60.339s43.677 16.661 60.34 0l12.497-12.497 97.83 97.831c16.661 16.662 43.678 16.662 60.339 0zM554.667 256c0 23.565 19.102 42.667 42.667 42.667h85.333c23.565 0 42.667-19.102 42.667-42.667s-19.102-42.667-42.667-42.667h-85.333c-23.565 0-42.667 19.102-42.667 42.667zM725.333 128c0-23.565-19.102-42.667-42.667-42.667h-170.667c-23.565 0-42.667 19.102-42.667 42.667s19.102 42.667 42.667 42.667h170.667c23.565 0 42.667-19.102 42.667-42.667zM725.333 0c0-23.565-19.102-42.667-42.667-42.667h-341.333c-23.564 0-42.667 19.102-42.667 42.667s19.103 42.667 42.667 42.667h341.333c23.565 0 42.667-19.102 42.667-42.667z" />
 <glyph unicode="&#xe9cc;" glyph-name="share" data-tags="share" d="M539.503 679.88c16.559 6.295 35.285 1.705 47.053-11.535l341.333-384.001c14.37-16.166 14.37-40.525 0-56.691l-341.333-384c-11.767-13.239-30.494-17.83-47.053-11.537-16.559 6.298-27.503 22.17-27.503 39.885v212.885c-76.544-1.741-140.685-9.114-194.569-31.066-60.917-24.819-111.855-69.662-150.442-156.484-8.184-18.415-28.135-28.591-47.846-24.41-19.712 4.186-33.809 21.589-33.809 41.741 0 175.804 38.315 306.236 121.287 392.282 74.994 77.772 179.892 112.514 305.38 118.694v214.356c0 17.714 10.944 33.586 27.503 39.881zM597.333 527.776v-143.778c0-23.564-19.102-42.665-42.667-42.665-132.907 0-225.964-30.716-286.62-93.619-39.276-40.73-68.332-98.419-84.054-178.492 30.229 27.729 64.066 48.478 101.243 63.62 80.393 32.755 173.158 37.824 269.431 37.824 23.565 0 42.667-19.106 42.667-42.667v-143.778l241.579 271.778-241.579 271.776z" />
 <glyph unicode="&#xe9cd;" glyph-name="template" data-tags="template" d="M85.333 554.667c0 70.692 57.308 128 128 128h128c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667h-128c-23.564 0-42.667-19.103-42.667-42.667v-128c0-23.564-19.103-42.667-42.667-42.667s-42.667 19.103-42.667 42.667v128zM640 640c0 23.564 19.102 42.667 42.667 42.667h128c70.694 0 128-57.308 128-128v-128c0-23.564-19.102-42.667-42.667-42.667s-42.667 19.103-42.667 42.667v128c0 23.564-19.102 42.667-42.667 42.667h-128c-23.565 0-42.667 19.103-42.667 42.667zM128 128c23.564 0 42.667-19.102 42.667-42.667v-128c0-23.565 19.103-42.667 42.667-42.667h128c23.564 0 42.667-19.102 42.667-42.667s-19.103-42.667-42.667-42.667h-128c-70.692 0-128 57.306-128 128v128c0 23.565 19.103 42.667 42.667 42.667zM896 128c23.565 0 42.667-19.102 42.667-42.667v-128c0-70.694-57.306-128-128-128h-128c-23.565 0-42.667 19.102-42.667 42.667s19.102 42.667 42.667 42.667h128c23.565 0 42.667 19.102 42.667 42.667v128c0 23.565 19.102 42.667 42.667 42.667z" />
+<glyph unicode="&#xe9ce;" glyph-name="select" data-tags="select" d="M298 384c-11.334 0-21.333 3.996-30 11.987-8 8.657-12 18.979-12 30.965 0 11.321 4 21.309 12 29.967l214.001 212.762c8 8.657 18.001 12.986 29.999 12.986s21.999-4.329 29.999-12.986l214.003-212.762c7.996-8.657 11.998-18.646 11.998-29.967 0-11.987-4.002-22.308-11.998-30.965-8.67-7.991-19.004-11.987-31.002-11.987-11.332 0-21.333 3.996-29.999 11.987l-183.002 183.795-183-183.795c-8.667-7.991-19-11.987-31-11.987zM298 128c-11.334 0-21.333-3.994-30-11.985-8-8.657-12-18.982-12-30.967 0-11.319 4-21.308 12-29.965l214.001-212.766c8-8.657 18.001-12.983 29.999-12.983s21.999 4.326 29.999 12.983l214.003 212.766c7.996 8.657 11.998 18.645 11.998 29.965 0 11.985-4.002 22.31-11.998 30.967-8.67 7.991-19.004 11.985-31.002 11.985-11.332 0-21.333-3.994-29.999-11.985l-183.002-183.795-183 183.795c-8.667 7.991-19 11.985-31 11.985z" />
 </font></defs></svg>