fix

assets/toolkit/toolkit.css

@@ -91,7 +91,9 @@
 
 
 }
-
+* {
+    box-sizing: border-box;
+}
 
 .kit-field {
     display: flex;
@@ -101,9 +103,10 @@
     position: relative;
     pointer-events: none;
     line-height: 1.5em;
-    --kit-fields-focus-label-zoom-ratio: 0.875;
+    --kit-field-focus-label-zoom-ratio: 0.875;
     --kit-field-line-padding: 3px;
     --line-height-ratio: 1.5;
+    --kit-field-check-mark-stroke-dash-ratio: 45;
 }
 
 .kit-field__input {
@@ -138,11 +141,7 @@
 
 
 .kit-field input[type="radio"]:checked ~ .kit-field__hr {
-    display: block;
+
-    border: 2px solid var(--kit-color);
-    width: 100%;
-    height: 100%;
-    border-radius: 10px;
 }
 
 .kit-field input[type='checkbox'], .kit-field input[type='radio'] {
@@ -300,7 +299,7 @@
 .kit-field .kit-field__display:focus ~.kit-field__label {
     top: 0;
     transform: translate(0, 0);
-    font-size: calc(var(--font-size) * var(--kit-fields-focus-label-zoom-ratio));
+    font-size: calc(var(--font-size) * var(--kit-field-focus-label-zoom-ratio));
     color: var(--kit-color-primary);
 }
 .kit-field textarea:focus ~.kit-field__hr:after,
@@ -423,6 +422,10 @@
     transition: border 0.15s, background 0.15s, -webkit-transform 0.15s;
     transition: border 0.15s, background 0.15s, transform 0.15s;
 }
+.kit-field__icon:before {
+    content: '';
+}
+
 .kit-field__icon > svg {
     position: absolute;
     top: 0;
@@ -433,6 +436,7 @@
     -moz-transition: -moz-transform 0.15s, opacity 0.15s, fill 0.15s;
     transition: -webkit-transform 0.15s, opacity 0.15s, fill 0.15s;
     transition: transform 0.15s, opacity 0.15s, fill 0.15s;
+    overflow: visible;
 }
 .kit-field input[type='checkbox'],
 .kit-field input[type='radio'] {
@@ -441,6 +445,7 @@
 .kit-field input[type='checkbox'] ~.kit-field__label,
 .kit-field input[type='radio'] ~.kit-field__label {
     pointer-events: auto;
+    flex-grow: 1;
 }
 .kit-field .kit-field__button {
     position: absolute;
@@ -473,7 +478,7 @@
     fill: #e24949;
 }
 .kit-field input[type='radio']:checked ~.kit-field__label .kit-field__icon {
-    border-color: #e24949;
+    border-color: var(--kit-color-text);
 }
 .kit-field input[type='radio']:checked ~.kit-field__label .kit-field__icon >svg {
     -webkit-transform: scale(1);
@@ -522,22 +527,94 @@
     padding-bottom: var( --kit-field-line-padding);
     padding-top: var( --kit-field-line-padding);
 }
-.kit-field input[type='checkbox'] ~.kit-field__label .kit-field__icon {
 
+/* kit-field--check-mark-material */
+.kit-field input[type='checkbox'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon,
+.kit-field input[type='radio'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon {
+    border: 0;
 }
-.kit-field input[type='checkbox'] ~.kit-field__label .kit-field__icon >svg path {
+.kit-field input[type='checkbox'].kit-field--check-mark-material:checked ~.kit-field__label .kit-field__icon >svg,
-    fill: #fff;
+.kit-field input[type='radio'].kit-field--check-mark-material:checked ~.kit-field__label .kit-field__icon >svg {
+    opacity: 0;
+    transition: none;
 }
+.kit-field input[type='checkbox'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon:before,
+.kit-field input[type='radio'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 1em;
+    height: 1em;
+    border: 1px solid var(--kit-color-text);
+    display: block;
+    box-sizing: border-box;
+    transition: 0.2s;
+}
+.kit-field input[type='radio'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon:before {
+    border-radius: 50%;
+}
+.kit-field input[type='checkbox'].kit-field--check-mark-material:checked ~.kit-field__label .kit-field__icon:before,
+.kit-field input[type='radio'].kit-field--check-mark-material:checked ~.kit-field__label .kit-field__icon:before {
+    border-width: 2px;
+    border-style: solid;
+    border-color: var(--kit-color-primary-b1);
+    border-left-color: transparent;
+    border-top-color: transparent;
+    width: 0.7em;
+    height: 1.2em;
+    transform: rotate(
+            45deg
+    ) translate(-3px, 0px);
+    transform-origin: 100% 100%;
+    border-radius: 0;
+}
+
+
+/* kit-field--check-mark-stroke */
+
+.kit-field input[type='checkbox'].kit-field--check-mark-stroke ~.kit-field__label .kit-field__icon >svg,
+.kit-field input[type='radio'].kit-field--check-mark-stroke ~.kit-field__label .kit-field__icon >svg {
+    opacity: 1;
+    transition: none;
+    overflow: visible;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+}
+.kit-field input[type='checkbox'].kit-field--check-mark-stroke ~.kit-field__label .kit-field__check-mark,
+.kit-field input[type='radio'].kit-field--check-mark-stroke ~.kit-field__label .kit-field__check-mark {
+    fill: none;
+    stroke: var(--kit-color-primary);
+    stroke-width: 3;
+    stroke-linecap: butt;
+    stroke-linejoin: miter;
+    stroke-opacity: 1;
+    stroke-dasharray: var(--kit-field-check-mark-stroke-dash-ratio);
+    stroke-dashoffset: var(--kit-field-check-mark-stroke-dash-ratio);
+    transition: 0.3s;
+}
+.kit-field input:checked.kit-field--check-mark-stroke ~.kit-field__label .kit-field__icon .kit-field__check-mark {
+    stroke-dashoffset: 0;
+}
+
+
+
+
 .kit-field input[type='checkbox'] ~.kit-field__message
 {
     padding-left: 28px;
 }
 .kit-field input[type='checkbox']:checked ~.kit-field__label .kit-field__icon {
-    border-color: var(--kit-color-primary);
+    /*border-color: var(--kit-color-primary);*/
-    background: var(--kit-color-primary);
+    /*background: var(--kit-color-primary);*/
 }
-.kit-field input[type='checkbox']:checked ~.kit-field__label .kit-field__icon >svg {
+.kit-field input[type='checkbox']:checked ~.kit-field__label .kit-field__icon >svg,
+.kit-field input[type='radio']:checked ~.kit-field__label .kit-field__icon >svg {
     opacity: 1;
+    fill: var(--kit-color-primary);
+    stroke: var(--kit-color-primary);
 }
 .kit-field input[type='checkbox']:checked:disabled ~.kit-field__label .kit-field__icon {
     background: #e1e1e1;
@@ -972,7 +1049,7 @@ select.kit-field__input:disabled ~.kit-field__hr {
 .kit-field.kit-select--open .kit-field__label {
     top: 0 !important;
     transform: translate(0, 0);
-    font-size: calc(var(--font-size) * var(--kit-fields-focus-label-zoom-ratio));
+    font-size: calc(var(--font-size) * var(--kit-field-focus-label-zoom-ratio));
     color: var(--kit-color-primary) !important;
 }
 .kit-field.kit-select--open [data-dirty='false'] ~ .kit-field__label {

templates/input.php

@@ -28,7 +28,7 @@ if($isHint) {
 
 ?>
 
-<label class="kit-field kit-field--text<?=($hidden?' hidden':'')?> <?=$arParams['FIELD_CLASS']?>"<?
+<label class="kit-field kit-field--text<?=($hidden?' hidden':'')?> <?=$arParams['WRAP_CLASS']?>"<?
     if(strlen($arParams['ID'])){?> for="<?=$arParams['ID']?>"<?}?>>
     <input<?
         if($isReadonly){?> readonly<?}
@@ -62,7 +62,11 @@ if($isHint) {
     <div class="kit-field__label"><div class="kit-field__label-content kit-line-clamp"><?=$label;?></div><?
         if(in_array($arParams['TYPE'], ['radio', 'checkbox'])) {?>
         <span class="kit-field__icon">
-            <svg viewBox="0 0 24 24"><path d="M9.001,16.212l-4.199-4.2l-1.4,1.4l5.6,5.6l12-12l-1.4-1.4L9.001,16.212z"></path></svg>
+            <svg viewBox="0 0 24 24">
+                <?if(0) {?><path d="M9.001,16.212l-4.199-4.2l-1.4,1.4l5.6,5.6l12-12l-1.4-1.4L9.001,16.212z"></path><?}?>
+                <path class="kit-field__check-mark" style="mix-blend-mode: normal;fill: none; stroke-width: 3px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1;" d="m 4.5010925,8.3988745 c 0,0 4.5231587,4.0536025 7.5719575,9.6668315 C 15.906315,10.552955 23.728894,0.8779021 31.09896,-3.72797"></path>
+            </svg>
+
         </span>
         <?
         }

tests/cheatsheet.php

@@ -0,0 +1,850 @@
+<?require( $_SERVER["DOCUMENT_ROOT"] . "/bitrix/header.php");?>
+
+
+<div class="kit-wrapper">
+
+    <h1 style="text-align: center;">BX.KIT FRONT-END FRAMEWORK</h1>
+    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
+    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
+    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
+    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
+    <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h5>
+    <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h6>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis eos esse excepturi explicabo fugit labore laborum quaerat quasi voluptatibus? A ab earum explicabo labore nobis nostrum optio perspiciatis provident, quam.</p>
+
+    <div class="flex-line-wrap flex-col-count" style="--flex-col-count: 5">
+        <div class="flex-list-item">
+            <?
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'Tooltip on top',
+                'CLASS' => '',
+                'ATTR' => [
+                    'data-toggle' => 'tooltip',
+                    'data-bs-placement' => 'top',
+                    'title' => 'Tooltip on top'
+                ]
+            ]);
+            ?>
+        </div>
+        <div class="flex-list-item">
+            <?
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'Tooltip on end',
+                'CLASS' => '',
+                'ATTR' => [
+                    'data-toggle' => 'tooltip',
+                    'data-bs-placement' => 'right',
+                    'title' => 'Tooltip on end'
+                ]
+            ]);
+            ?>
+        </div>
+        <div class="flex-list-item">
+            <?
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'Tooltip on bottom',
+                'CLASS' => '',
+                'ATTR' => [
+                    'data-toggle' => 'tooltip',
+                    'data-bs-placement' => 'bottom',
+                    'title' => 'Tooltip on bottom'
+                ]
+            ]);
+            ?>
+        </div>
+        <div class="flex-list-item">
+            <?
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'Tooltip on start',
+                'CLASS' => '',
+                'ATTR' => [
+                    'data-toggle' => 'tooltip',
+                    'data-bs-placement' => 'left',
+                    'title' => 'Tooltip on start'
+                ]
+            ]);
+            ?>
+        </div>
+        <div class="flex-list-item">
+            <?
+            service()->templater()->render('kit:button', [
+                'LABEL' => 'Tooltip with HTML',
+                'CLASS' => '',
+                'ATTR' => [
+                    'data-toggle' => 'tooltip',
+                    'data-bs-html' => 'true',
+                    'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
+                ]
+            ]);
+            ?>
+        </div>
+    </div>
+
+
+    <div class="d-flex justify-content-between flex-wrap">
+        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">
+            Vertically centered scrollable modal
+        </button>
+    </div>
+
+    <?
+    service()->templater()->render('kit:modal', [
+        'ID' => 'exampleModalCenteredScrollable',
+        'TITLE' => 'Modal title',
+        'BODY' => '<p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p>
+                    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+                    <p>This content should appear at the bottom after you scroll.</p>',
+        'FOOTER' => '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save changes</button>',
+    ]);
+
+    ?>
+    <div class="flex-list" style="--col-count: 3">
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'text',
+                'HINT' => 'text hint',
+                'NAME' => 'input_name',
+                'VALUE' => '10',
+                'PLACEHOLDER' => 'number',
+                'LABEL' => 'Test input',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'text',
+                'HINT' => 'text hint',
+                'NAME' => 'input_name',
+                'VALUE' => '10',
+                'PLACEHOLDER' => 'number',
+                'LABEL' => 'Test input',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:select', [
+                'HINT' => 'text hint',
+                'NAME' => 'select',
+                'LABEL' => 'select',
+                'OPTIONS' => [
+                    [
+                        'ID' => '1',
+                        'NAME' => 'Значение выпадающего списка 1',
+                    ],
+                    [
+                        'ID' => '2',
+                        'NAME' => 'Значение выпадающего списка 2',
+                    ],
+                    [
+                        'ID' => '3',
+                        'NAME' => 'Значение выпадающего списка 3',
+                    ],
+                    [
+                        'ID' => '4',
+                        'NAME' => 'Значение выпадающего списка 4',
+                    ],
+                    [
+                        'ID' => '5',
+                        'NAME' => 'Значение выпадающего списка 5',
+                    ],
+                ]
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'checkbox',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'agreement2',
+                'VALUE' => 'Y',
+                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-material',
+                'TYPE' => 'checkbox',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'agreement',
+                'VALUE' => 'Y',
+                'LABEL' => 'kit-field--check-mark-material',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-stroke',
+                'TYPE' => 'checkbox',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'agreement',
+                'VALUE' => 'Y',
+                'LABEL' => 'kit-field--check-mark-stroke',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio',
+                'VALUE' => 'radio1',
+                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio',
+                'VALUE' => 'radio2',
+                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio',
+                'VALUE' => 'radio3',
+                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+            ]); ?>
+        </div>
+
+
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-stroke',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-stroke',
+                'VALUE' => 'radio4',
+                'LABEL' => 'kit-field--check-mark-stroke',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-stroke',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-stroke',
+                'VALUE' => 'radio5',
+                'LABEL' => 'kit-field--check-mark-stroke',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-stroke',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-stroke',
+                'VALUE' => 'radio6',
+                'LABEL' => 'kit-field--check-mark-stroke',
+            ]); ?>
+        </div>
+
+
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-material',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-material',
+                'VALUE' => 'radio7',
+                'LABEL' => 'kit-field--check-mark-material',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-material',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-material',
+                'VALUE' => 'radio8',
+                'LABEL' => 'kit-field--check-mark-material',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'CLASS' => 'kit-field--check-mark-material',
+                'TYPE' => 'radio',
+                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+                'NAME' => 'radio-material',
+                'VALUE' => 'radio9',
+                'LABEL' => 'kit-field--check-mark-material',
+            ]); ?>
+        </div>
+    </div>
+
+    <div class="flex-list" style="--col-count: 7;">
+        <div class="flex-list-item"></div>
+        <div class="flex-list-item">bordered</div>
+        <div class="flex-list-item">bordered radius</div>
+        <div class="flex-list-item">bordered round</div>
+        <div class="flex-list-item">material</div>
+        <div class="flex-list-item">material radius</div>
+        <div class="flex-list-item">material round</div>
+        <?
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'test ',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--primary',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--primary kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--primary kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--primary kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--primary kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--primary kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--primary kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--primary',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--primary kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--primary kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--primary kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--primary kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--primary kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--primary kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--secondary',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--secondary kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--secondary kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--secondary kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--secondary kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--secondary',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--secondary kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--secondary kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--secondary kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--secondary kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => ' kit-button--error',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => ' kit-button--error kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => ' kit-button--error kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => ' kit-button--error kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => ' kit-button--error kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => ' kit-button--error kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => ' kit-button--error kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--error',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--error kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--error kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--error kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--error kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--error kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--error kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => ' kit-button--warning',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => ' kit-button--warning kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => ' kit-button--warning kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => ' kit-button--warning kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => ' kit-button--warning kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => ' kit-button--warning kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => ' kit-button--warning kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--warning',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--warning kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--warning kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--warning kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--warning kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--warning kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => ' kit-button--warning kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => ' kit-button--success',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => ' kit-button--success kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => ' kit-button--success kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => ' kit-button--success kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => ' kit-button--success kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => ' kit-button--success kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => ' kit-button--success kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--success',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--success kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--success kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--success kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--success kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--success kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--success kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+
+        ?>
+    </div>
+
+
+    <div class="flex-list" style="--col-count: 1;">
+        <?
+
+
+
+
+
+
+
+
+        ?>
+    </div>
+</div>
+
+<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>