fix

assets/flex-kit/flex-kit.css

@@ -93,6 +93,7 @@
     align-items: stretch;
     --col-span: 1;
     --col-count: 4;
+    --gap-row: var(--gap);
 }
 .flex-list:not(.owl-loaded) {
     margin-left: calc(var(--gap) / -2) !important;
@@ -109,7 +110,6 @@
     padding-right: calc(var(--gap) / 2);
 }
 .flex-list-item {
-    --gap-row: var(--gap);
     --col-width: calc(100% / var(--col-count) * var(--col-span));
     --line-height: calc(100% / var(--line-count) * var(--line-span, 1));
     box-sizing: border-box;

assets/toolkit/toolkit.css

@@ -71,7 +71,7 @@ input[type="color"] ~ .kit-field__color {
 }
 .kit-field--select, .kit-field--text {
     padding: 1.5em 0 0 0;
-    margin: 0 0 1.5em 0;
+    margin: 0 0 var(--kit-field-gap, 1.5em) 0;
 }
 .kit-field .kit-field__hr {
     display: block;

templates/modal.php

@@ -7,7 +7,7 @@ use \Wt\Core\Templater\Tools as TemplaterTools;
     <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title"><?=$arParams['TITLE']?></h5>
+                <div class="modal-title"><?=$arParams['TITLE']?></div>
                 <button type="button" class="btn-close kit-icon" data-bs-dismiss="modal" aria-label="Close">
                     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>
                 </button>

templates/textarea.php

@@ -0,0 +1,86 @@
+<?php
+/**
+ * @var array $arParams
+ */
+
+use Wt\Core\Templater\Tools as TemplaterTools;
+use Wt\Core\Tools;
+
+//include ".con/fields.php";
+
+$arParams['TYPE'] = $arParams['TYPE']?:'hidden';
+$isReadonly = Tools::isTrue($arParams['READONLY']);
+$isRequired = Tools::isTrue($arParams['REQUIRED']);
+$isChecked = Tools::isTrue($arParams['CHECKED']);
+$isHint = (string)($arParams['HINT']) !== '';
+$isDatepicker = Tools::isTrue($arParams['DATEPICKER']) || is_array($arParams['DATEPICKER']);
+
+$label = $arParams['LABEL'];
+
+if($isDatepicker) {
+    app()->service()->assets()->setPlugin('kit:datepicker');
+    //include ".con/datepicker.php";
+    $arParams['ADD_CLASS'] .= ' datepicker-here';
+}
+if($isHint) {
+    //include ".con/hint.php";
+}
+
+?>
+
+<label class="kit-field kit-field--text<?=($hidden?' hidden':'')?> <?=$arParams['WRAP_CLASS']?>"<?
+    if(strlen($arParams['ID'])){?> for="<?=$arParams['ID']?>"<?}?>>
+    <textarea<?
+        if($isReadonly){?> readonly<?}
+        if($isRequired){?> required<?}
+        if($isChecked){?> checked<?}
+
+        if(strlen($arParams['ID'])){?> id="<?=$arParams['ID']?>"<?}
+        ?>
+        data-dirty="<?=($arParams['PLACEHOLDER'] || $arParams['VALUE'])?'true':'false'?>"
+        type="<?=$arParams['TYPE']?>"
+        name="<?=$arParams['NAME']?>"
+        class="kit-field__input kit-autoheight <?=$arParams['CLASS']?> <?=$arParams['ADD_CLASS']?><?
+        if(strlen($arParams['MESSAGE'])) {
+            if(Tools::isSuccess($arParams['MESSAGE_TYPE'])){
+                ?> kit-field--success<?
+            } else {
+                ?> kit-field--error<?
+            }
+        }
+        ?>"
+        rows="1"
+        maxlength="<?=$arParams['MAXLENGTH']?>"
+        placeholder="<?=TemplaterTools::safeHtmlAttr($arParams['PLACEHOLDER']).''?>"
+        <?
+        echo TemplaterTools::getAttrByArray($arParams['ATTR']);
+        if($isDatepicker) {
+            echo TemplaterTools::getAttrByArray([
+                'data-position' => 'bottom left'
+            ]);
+        }
+        ?>
+        autocomplete="off"><?=($arParams['VALUE'])?></textarea><?
+    if($isHint){
+        app()->service()->templater()->render('kit:field/hint', ['TITLE' => $arParams['HINT']]);
+    }
+    ?>
+    <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">
+                <?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>
+        <?
+        }
+    ?></div>
+    <div class="kit-field__color"></div>
+    <div class="kit-field__message"><?=$arParams['MESSAGE']?></div>
+    <div class="kit-field__hr"></div>
+</label>
+<?
+
+

tests/cheatsheetTest.php

@@ -432,6 +432,16 @@ $APPLICATION->ShowHead();
                 'LABEL' => 'kit-field--check-mark-material',
             ]); ?>
         </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:textarea', [
+                'CLASS' => 'kit-field--check-mark-stroke',
+                //'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' => 'textarea',
+                'VALUE' => '',
+                'MAXLENGTH' => 1000,
+                'LABEL' => 'textarea label',
+            ]); ?>
+        </div>
         <div class="flex-list-item"><?
             $inputFile = new \Wt\Core\Form\InputFile($fieldName = 'FIELD_INPUT_FILE');
             $inputFile->multiple = true;