create cdn-main

Update 0.3.11
Merge pull request #40 from apuc/test-webpack-build
2023-04-13 12:46:11 +03:00 · 2023-04-12 15:26:52 +03:00 · 2023-04-11 15:20:12 +03:00 · 2023-04-11 15:19:42 +03:00 · 2023-04-06 15:16:04 +03:00 · 2023-04-06 15:15:24 +03:00
65 changed files with 28549 additions and 9108 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 node_modules
 dist
 .parcel-cache
+test

--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,7 +21,62 @@ Tested in JS and React. Errors in work in React applications are revealed.
 - Fixed display of the example page on mobile devices.
 - Updated documentation!

-### 00.00.2023 - update 0.2.1
+### 20.01.2023 - update 0.2.1

 - All select rewritten to ts.
 - Fixed bugs and shortcomings.
+
+##### 24.01.2023 - fix 0.2.2 - Fixed documentation etc.
+
+### 27.01.2023 - update 0.2.3
+
+- Changed the theme selection function.
+- Fixed documentation.
+
+##### 31.01.2023 - fix 0.2.31
+
+- Adding a new method to track select actions.
+- Fixed documentation.
+
+##### 08.02.2023 - fix 0.2.32
+
+- Fixing Methods and Variables.
+- Updating how themes work.
+- Fixed documentation.
+- Fixing bugs related to the cleanup of the select.
+- Documentation navigation update.
+- Added icon for example page and documentation.
+
+### 20.02.2023 - update 0.2.4
+
+- Added ability to create custom themes.
+- Added style builder on homepage.
+- Fixed documentation.
+- Added a block describing how to create your own themes.
+
+### 27.02.2023 - update 0.2.5
+
+- Moving an example using a select to a separate repository.
+- Fixed bugs.
+- Changed structure.
+
+### 01.03.2023 - update 0.2.6
+
+- Added new theme creation mode.
+
+### 01.03.2023 - update 0.2.7
+
+- Switch to new webpack project builder.
+
+##### 04.03.2023 - fix 0.2.71
+
+- Select import fixed.
+
+### 06.03.2023 - update 0.3.0
+
+- Completely redesigned assembly to webpack and completed the transition to a new platform.
+- Assembly bugs fixed
+
+##### 04.03.2023 - fix 0.3.1
+
+- Fixed import select.
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
 # CG-SELECT

-## version ~ 0.2.1
+## version ~ 0.3.11
+
+<a href="https://github.com/apuc/cg-select/blob/main/READMERU.md">ЧИТАТЬ НА РУССКОМ</a>

 This component allows you to create a custom select. It offers more flexible customization and use of select.
 Customization, multi-selection and live search by elements are available.
@@ -13,6 +15,7 @@ Customization, multi-selection and live search by elements are available.
 - In the multiselect mode, customization of chips (selected elements) is available.
 - Label of the element (if it was specified).
 - Switch themes from dark to light.
+- The documentation also lists all the elements for catatomization using CSS.

 ## Installation

@@ -45,7 +48,7 @@ npm i cg-select
 ### An example of creating a regular select.

 ```javascript
-import { CGSelect } from 'cg-select';
+import CGSelect from 'cg-select';

 const dropdown = new CGSelect({
  selector: '.cg-dropdown_selector',
@@ -66,16 +69,13 @@ const dropdown = new CGSelect({

 ## Example of different selects

-Same working example -- https://cg-select.itguild.info/
+<a href="https://cg-select.itguild.info/">View live example</a>

-![image](https://github.com/apuc/cg-select/blob/main/src/images/DefaultSelect.png)
-![image](https://github.com/apuc/cg-select/blob/main/src/images/MultiSelect.png)
-![image](https://github.com/apuc/cg-select/blob/main/src/images/WhiteTheme.png)
-![image](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png)
+Built-in themes are also available: dark, white. To apply them, specify the theme attribute in the select settings and pass one of the values into it dark or white.

 All documentation on CG-SELECT is located in the folder of the same name. The documentation describes all methods and variables, there are also examples of passing settings to select. You can also open it on the page with an example, or follow the link below.

-**To view it, follow the link -** https://cg-select.itguild.info/up_/documentation/index.html
+<a href="https://cg-select.itguild.info/up_/documentation/index.html">Documentation</a>

 ## Contributing

@@ -90,10 +90,12 @@ All documentation on CG-SELECT is located in the folder of the same name. The do
 | Application Compatibility |                                    JS                                    |                                                                      React                                                                       |                                 Angular                                 |                                   Vue                                   |
 | ------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
 | CG-SELECT                 | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |
-| Comment                   |              Tested in Js applications and it worksуспешно.              |                                               Works only with a crutch in the form `setTimeout()`                                                |                            not yet available                            |                            not yet available                            |
+| Comment                   |                 Tested in Js applications and it works.                  |                                               Works only with a crutch in the form `setTimeout()`                                                |                            not yet available                            |                            not yet available                            |

 ## History

 16.12.2022 - release version 0.1.0!

 20.01.2023 - upgrade to version 0.2.1
+
+06.03.2023 - upgrade to version 0.3.0
--- a/READMERU.md
+++ b/READMERU.md
@@ -0,0 +1,100 @@
+# CG-SELECT
+
+## Версия ~ 0.3.11
+
+<a href="https://github.com/apuc/cg-select/blob/main/README.md">English README</a>
+
+Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select.
+Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое.
+
+### Возможность настройки основных элементов, таких как:
+
+- Кнопка самого селекта Select.
+- Список с выбранными элементами.
+- Placeholder.
+- В режиме мультиселекта доступна кастомизация chips (выбранных элементов).
+- Label элемента (если она была указана).
+- Переключить тему с темной на светлую.
+- Так же в документации указанны все элементы для катомизации с помощью CSS.
+
+## Установка
+
+```
+npm i cg-select
+```
+
+## Использование
+
+### Для создания компонента необходимо:
+
+1. Создайте обычную кнопку.
+2. Добавьте ей класс cg-dropdown.
+
+```
+<button class="cg-dropdown"></button>
+```
+
+3. Добавьте ему **уникальный класс**,
+   например: (cg-dropdown_categories)
+
+```
+<button class="cg-dropdown cg-dropdown_categories"></button>
+```
+
+4. Создайте новый экземпляр класса (new CGSelect)
+5. Передайте все нужные настройки как объект.
+
+#### Все варианты создания и управления селектом есть в документации, раздел "Конструктор класса CGSelect".
+
+### Пример создания обычного CGSelect.
+
+```javascript
+import CGSelect from 'cg-select';
+
+const dropdown = new CGSelect({
+  selector: '.cg-dropdown_selector',
+  placeholder: 'Выберите авто',
+  items: [
+    'BMW',
+    {
+      id: '213sade',
+      title: 'Opel',
+      value: 1,
+    },
+    'Mersedes',
+    'MAN',
+    'Ferari',
+  ],
+});
+```
+
+## Примеры различных вариантов выбора.
+
+<a href="https://cg-select.itguild.info/">Рабочий пример</a>
+
+Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в CGSelect. Вы также можете открыть его на странице с примером, или перейти по ссылке ниже.
+
+<a href="https://cg-select.itguild.info/up_/documentation/index.html">Документация</a>
+
+## Содействие
+
+1. Сделайте Fork!
+2. Создайте свою ветку: `git checkout -b my-new-feature`
+3. Зафиксируйте свои изменения: `git commit -am 'Add some feature'`
+4. Загрузите ветку: `git push origin my-new-feature`
+5. Отправте запрос на вытягивание изменений :D
+
+## Совместимость
+
+| Совместимость в приложениях |                                    JS                                    |                                                                      React                                                                       |                                 Angular                                 |                                   Vue                                   |
+| --------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
+| CG-SELECT                   | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |
+| Комментарий                 |                     Протестировано в Js приложениях                      |                                                 Работает только с костылем в виде `setTimeout()`                                                 |                             пока недоступно                             |                             пока недоступно                             |
+
+## История
+
+16.12.2022 - release version 0.1.0!
+
+20.01.2023 - upgrade to version 0.2.1
+
+06.03.2023 - upgrade to version 0.3.0
--- a/docs/assets/search.js
+++ b/docs/assets/search.js
--- a/docs/classes/cg_select.CGSelect.html
+++ b/docs/classes/cg_select.CGSelect.html
--- a/docs/functions/Utils.checkItemStruct.html
+++ b/docs/functions/Utils.checkItemStruct.html
@@ -1,80 +1,360 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>checkItemStruct | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/Utils.html">Utils</a></li>
-<li><a href="Utils.checkItemStruct.html">checkItemStruct</a></li></ul>
-<h1>Function checkItemStruct</h1></div>
-<section class="tsd-panel">
-<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
-<li class="tsd-signature tsd-anchor-link" id="checkItemStruct">check<wbr/>Item<wbr/>Struct<span class="tsd-signature-symbol">(</span>item<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#checkItemStruct" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></li>
-<li class="tsd-description">
-<div class="tsd-comment tsd-typography"><p>Checking if item contains the specified properties.</p>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>checkItemStruct | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li><a href="../modules/Utils.html">Utils</a></li>
+            <li><a href="Utils.checkItemStruct.html">checkItemStruct</a></li>
+          </ul>
+          <h1>Function checkItemStruct</h1>
+        </div>
+        <section class="tsd-panel">
+          <ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+            <li class="tsd-signature tsd-anchor-link" id="checkItemStruct">
+              check<wbr />Item<wbr />Struct<span class="tsd-signature-symbol">(</span>item<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><span class="tsd-signature-type">object</span
+              ><span class="tsd-signature-symbol">)</span
+              ><span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">boolean</span
+              ><a href="#checkItemStruct" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </li>
+            <li class="tsd-description">
+              <div class="tsd-comment tsd-typography">
+                <p>Checking if item contains the specified properties.</p>

-<h3>Returns</h3><p>returns true/false if item contains the specified properties.</p>
-</div>
-<div class="tsd-parameters">
-<h4 class="tsd-parameters-title">Parameters</h4>
-<ul class="tsd-parameter-list">
-<li>
-<h5>item: <span class="tsd-signature-type">object</span></h5>
-<div class="tsd-comment tsd-typography"><p>element to be checked against a certain structure.</p>
-</div></li></ul></div>
-<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/utils.ts#L60">components/utils/utils.ts:60</a></li></ul></aside></li></ul></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="current tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="current tsd-kind-function tsd-parent-kind-module"><a href="Utils.checkItemStruct.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>check<wbr/>Item<wbr/>Struct</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.clearSelect.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>clear<wbr/>Select</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.createSelected.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Selected</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStyles.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStylesFormat.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles<wbr/>Format</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.getFormatItem.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Format<wbr/>Item</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.getSelectText.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Select<wbr/>Text</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Multiple</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Ordinary</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+                <h3>Returns</h3>
+                <p>returns true/false if item contains the specified properties.</p>
+              </div>
+              <div class="tsd-parameters">
+                <h4 class="tsd-parameters-title">Parameters</h4>
+                <ul class="tsd-parameter-list">
+                  <li>
+                    <h5>item: <span class="tsd-signature-type">object</span></h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>element to be checked against a certain structure.</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <h4 class="tsd-returns-title">
+                Returns <span class="tsd-signature-type">boolean</span>
+              </h4>
+              <aside class="tsd-sources">
+                <ul>
+                  <li>
+                    Defined in
+                    <a
+                      href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/utils.ts#L60"
+                      >components/utils/utils.ts:60</a
+                    >
+                  </li>
+                </ul>
+              </aside>
+            </li>
+          </ul>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/Utils.html">Utils</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="current tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.checkItemStruct.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-function)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-64-path"
+                  ></rect>
+                  <path
+                    d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z"
+                    fill="var(--color-text)"
+                    id="icon-64-text"
+                  ></path></svg
+                >check<wbr />Item<wbr />Struct</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.clearSelect.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >clear<wbr />Select</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.createSelected.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Selected</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStyles.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStylesFormat.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles<wbr />Format</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getFormatItem.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Format<wbr />Item</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getSelectText.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Select<wbr />Text</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Multiple</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Ordinary</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/functions/Utils.clearSelect.html
+++ b/docs/functions/Utils.clearSelect.html
@@ -1,86 +1,385 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>clearSelect | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/Utils.html">Utils</a></li>
-<li><a href="Utils.clearSelect.html">clearSelect</a></li></ul>
-<h1>Function clearSelect</h1></div>
-<section class="tsd-panel">
-<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
-<li class="tsd-signature tsd-anchor-link" id="clearSelect">clear<wbr/>Select<span class="tsd-signature-symbol">(</span>select<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement</span>, element<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Element</span>, dataSelectText<span class="tsd-signature-symbol">: </span><a href="../interfaces/components_utils_urils_interface.ISelectedItems.html" class="tsd-signature-type" data-tsd-kind="Interface">ISelectedItems</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#clearSelect" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></li>
-<li class="tsd-description">
-<div class="tsd-comment tsd-typography"><p>Creating a clear select button, with a single selection.</p>
-</div>
-<div class="tsd-parameters">
-<h4 class="tsd-parameters-title">Parameters</h4>
-<ul class="tsd-parameter-list">
-<li>
-<h5>select: <span class="tsd-signature-type">HTMLElement</span></h5>
-<div class="tsd-comment tsd-typography"><p>place in the select that will be reassigned to &#39;&#39;.</p>
-</div></li>
-<li>
-<h5>element: <span class="tsd-signature-type">Element</span></h5>
-<div class="tsd-comment tsd-typography"><p>class instance CgSelect.</p>
-</div></li>
-<li>
-<h5>dataSelectText: <a href="../interfaces/components_utils_urils_interface.ISelectedItems.html" class="tsd-signature-type" data-tsd-kind="Interface">ISelectedItems</a></h5>
-<div class="tsd-comment tsd-typography"><p>the text that is rendered in the select.</p>
-</div></li></ul></div>
-<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/utils.ts#L105">components/utils/utils.ts:105</a></li></ul></aside></li></ul></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="current tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.checkItemStruct.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>check<wbr/>Item<wbr/>Struct</a></li>
-<li class="current tsd-kind-function tsd-parent-kind-module"><a href="Utils.clearSelect.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>clear<wbr/>Select</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.createSelected.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Selected</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStyles.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStylesFormat.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles<wbr/>Format</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.getFormatItem.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Format<wbr/>Item</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.getSelectText.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Select<wbr/>Text</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Multiple</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Ordinary</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>clearSelect | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li><a href="../modules/Utils.html">Utils</a></li>
+            <li><a href="Utils.clearSelect.html">clearSelect</a></li>
+          </ul>
+          <h1>Function clearSelect</h1>
+        </div>
+        <section class="tsd-panel">
+          <ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+            <li class="tsd-signature tsd-anchor-link" id="clearSelect">
+              clear<wbr />Select<span class="tsd-signature-symbol">(</span>select<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><span class="tsd-signature-type">HTMLElement</span>, element<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><span class="tsd-signature-type">Element</span>, dataSelectText<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><a
+                href="../interfaces/components_utils_urils_interface.ISelectedItems.html"
+                class="tsd-signature-type"
+                data-tsd-kind="Interface"
+                >ISelectedItems</a
+              ><span class="tsd-signature-symbol">)</span
+              ><span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">void</span
+              ><a href="#clearSelect" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </li>
+            <li class="tsd-description">
+              <div class="tsd-comment tsd-typography">
+                <p>Creating a clear select button, with a single selection.</p>
+              </div>
+              <div class="tsd-parameters">
+                <h4 class="tsd-parameters-title">Parameters</h4>
+                <ul class="tsd-parameter-list">
+                  <li>
+                    <h5>select: <span class="tsd-signature-type">HTMLElement</span></h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>place in the select that will be reassigned to &#39;&#39;.</p>
+                    </div>
+                  </li>
+                  <li>
+                    <h5>element: <span class="tsd-signature-type">Element</span></h5>
+                    <div class="tsd-comment tsd-typography"><p>class instance CgSelect.</p></div>
+                  </li>
+                  <li>
+                    <h5>
+                      dataSelectText:
+                      <a
+                        href="../interfaces/components_utils_urils_interface.ISelectedItems.html"
+                        class="tsd-signature-type"
+                        data-tsd-kind="Interface"
+                        >ISelectedItems</a
+                      >
+                    </h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>the text that is rendered in the select.</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <h4 class="tsd-returns-title">
+                Returns <span class="tsd-signature-type">void</span>
+              </h4>
+              <aside class="tsd-sources">
+                <ul>
+                  <li>
+                    Defined in
+                    <a
+                      href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/utils.ts#L106"
+                      >components/utils/utils.ts:106</a
+                    >
+                  </li>
+                </ul>
+              </aside>
+            </li>
+          </ul>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/Utils.html">Utils</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.checkItemStruct.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-function)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-64-path"
+                  ></rect>
+                  <path
+                    d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z"
+                    fill="var(--color-text)"
+                    id="icon-64-text"
+                  ></path></svg
+                >check<wbr />Item<wbr />Struct</a
+              >
+            </li>
+            <li class="current tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.clearSelect.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >clear<wbr />Select</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.createSelected.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Selected</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStyles.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStylesFormat.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles<wbr />Format</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getFormatItem.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Format<wbr />Item</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getSelectText.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Select<wbr />Text</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Multiple</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Ordinary</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/functions/Utils.createSelected.html
+++ b/docs/functions/Utils.createSelected.html
@@ -1,86 +1,391 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>createSelected | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/Utils.html">Utils</a></li>
-<li><a href="Utils.createSelected.html">createSelected</a></li></ul>
-<h1>Function createSelected</h1></div>
-<section class="tsd-panel">
-<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
-<li class="tsd-signature tsd-anchor-link" id="createSelected">create<wbr/>Selected<span class="tsd-signature-symbol">(</span>element<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Element</span>, content<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span>, styles<span class="tsd-signature-symbol">?: </span><a href="../interfaces/interfaces_cg_select_interface.IStyle.html" class="tsd-signature-type" data-tsd-kind="Interface">IStyle</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#createSelected" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></li>
-<li class="tsd-description">
-<div class="tsd-comment tsd-typography"><p>Creating an Item Selector Button.</p>
-</div>
-<div class="tsd-parameters">
-<h4 class="tsd-parameters-title">Parameters</h4>
-<ul class="tsd-parameter-list">
-<li>
-<h5>element: <span class="tsd-signature-type">Element</span></h5>
-<div class="tsd-comment tsd-typography"><p>instantiated class CgSelect.</p>
-</div></li>
-<li>
-<h5><code class="tsd-tag ts-flagOptional">Optional</code> content: <span class="tsd-signature-type">string</span></h5>
-<div class="tsd-comment tsd-typography"><p>placeholer passed from select settings.</p>
-</div></li>
-<li>
-<h5><code class="tsd-tag ts-flagOptional">Optional</code> styles: <a href="../interfaces/interfaces_cg_select_interface.IStyle.html" class="tsd-signature-type" data-tsd-kind="Interface">IStyle</a></h5>
-<div class="tsd-comment tsd-typography"><p>optional parameter. The object in which the settings for customizing parts of the select are located.</p>
-</div></li></ul></div>
-<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/utils.ts#L74">components/utils/utils.ts:74</a></li></ul></aside></li></ul></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="current tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.checkItemStruct.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>check<wbr/>Item<wbr/>Struct</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.clearSelect.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>clear<wbr/>Select</a></li>
-<li class="current tsd-kind-function tsd-parent-kind-module"><a href="Utils.createSelected.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Selected</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStyles.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStylesFormat.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles<wbr/>Format</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.getFormatItem.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Format<wbr/>Item</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.getSelectText.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Select<wbr/>Text</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Multiple</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Ordinary</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>createSelected | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li><a href="../modules/Utils.html">Utils</a></li>
+            <li><a href="Utils.createSelected.html">createSelected</a></li>
+          </ul>
+          <h1>Function createSelected</h1>
+        </div>
+        <section class="tsd-panel">
+          <ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+            <li class="tsd-signature tsd-anchor-link" id="createSelected">
+              create<wbr />Selected<span class="tsd-signature-symbol">(</span>element<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><span class="tsd-signature-type">Element</span>, content<span
+                class="tsd-signature-symbol"
+                >?: </span
+              ><span class="tsd-signature-type">string</span>, styles<span
+                class="tsd-signature-symbol"
+                >?: </span
+              ><a
+                href="../interfaces/interfaces_cg_select_interface.IStyle.html"
+                class="tsd-signature-type"
+                data-tsd-kind="Interface"
+                >IStyle</a
+              ><span class="tsd-signature-symbol">)</span
+              ><span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">void</span
+              ><a href="#createSelected" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </li>
+            <li class="tsd-description">
+              <div class="tsd-comment tsd-typography"><p>Creating an Item Selector Button.</p></div>
+              <div class="tsd-parameters">
+                <h4 class="tsd-parameters-title">Parameters</h4>
+                <ul class="tsd-parameter-list">
+                  <li>
+                    <h5>element: <span class="tsd-signature-type">Element</span></h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>instantiated class CgSelect.</p>
+                    </div>
+                  </li>
+                  <li>
+                    <h5>
+                      <code class="tsd-tag ts-flagOptional">Optional</code> content:
+                      <span class="tsd-signature-type">string</span>
+                    </h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>placeholer passed from select settings.</p>
+                    </div>
+                  </li>
+                  <li>
+                    <h5>
+                      <code class="tsd-tag ts-flagOptional">Optional</code> styles:
+                      <a
+                        href="../interfaces/interfaces_cg_select_interface.IStyle.html"
+                        class="tsd-signature-type"
+                        data-tsd-kind="Interface"
+                        >IStyle</a
+                      >
+                    </h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>
+                        optional parameter. The object in which the settings for customizing parts
+                        of the select are located.
+                      </p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <h4 class="tsd-returns-title">
+                Returns <span class="tsd-signature-type">void</span>
+              </h4>
+              <aside class="tsd-sources">
+                <ul>
+                  <li>
+                    Defined in
+                    <a
+                      href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/utils.ts#L74"
+                      >components/utils/utils.ts:74</a
+                    >
+                  </li>
+                </ul>
+              </aside>
+            </li>
+          </ul>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/Utils.html">Utils</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.checkItemStruct.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-function)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-64-path"
+                  ></rect>
+                  <path
+                    d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z"
+                    fill="var(--color-text)"
+                    id="icon-64-text"
+                  ></path></svg
+                >check<wbr />Item<wbr />Struct</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.clearSelect.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >clear<wbr />Select</a
+              >
+            </li>
+            <li class="current tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.createSelected.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Selected</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStyles.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStylesFormat.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles<wbr />Format</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getFormatItem.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Format<wbr />Item</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getSelectText.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Select<wbr />Text</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Multiple</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Ordinary</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/functions/Utils.customStyles.html
+++ b/docs/functions/Utils.customStyles.html
@@ -1,82 +1,378 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>customStyles | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/Utils.html">Utils</a></li>
-<li><a href="Utils.customStyles.html">customStyles</a></li></ul>
-<h1>Function customStyles</h1></div>
-<section class="tsd-panel">
-<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
-<li class="tsd-signature tsd-anchor-link" id="customStyles">custom<wbr/>Styles<span class="tsd-signature-symbol">(</span>element<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Element</span>, styles<span class="tsd-signature-symbol">: </span><a href="../interfaces/interfaces_cg_select_interface.IStyle.html" class="tsd-signature-type" data-tsd-kind="Interface">IStyle</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#customStyles" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></li>
-<li class="tsd-description">
-<div class="tsd-comment tsd-typography"><p>Finding and styling elements derived from the styles instance CgSelect</p>
-</div>
-<div class="tsd-parameters">
-<h4 class="tsd-parameters-title">Parameters</h4>
-<ul class="tsd-parameter-list">
-<li>
-<h5>element: <span class="tsd-signature-type">Element</span></h5>
-<div class="tsd-comment tsd-typography"><p>instantiated class CgSelect.</p>
-</div></li>
-<li>
-<h5>styles: <a href="../interfaces/interfaces_cg_select_interface.IStyle.html" class="tsd-signature-type" data-tsd-kind="Interface">IStyle</a></h5>
-<div class="tsd-comment tsd-typography"><p>object in which there are settings for customizing parts of the select.</p>
-</div></li></ul></div>
-<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/utils.ts#L211">components/utils/utils.ts:211</a></li></ul></aside></li></ul></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="current tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.checkItemStruct.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>check<wbr/>Item<wbr/>Struct</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.clearSelect.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>clear<wbr/>Select</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.createSelected.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Selected</a></li>
-<li class="current tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStyles.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStylesFormat.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles<wbr/>Format</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.getFormatItem.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Format<wbr/>Item</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.getSelectText.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Select<wbr/>Text</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Multiple</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Ordinary</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>customStyles | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li><a href="../modules/Utils.html">Utils</a></li>
+            <li><a href="Utils.customStyles.html">customStyles</a></li>
+          </ul>
+          <h1>Function customStyles</h1>
+        </div>
+        <section class="tsd-panel">
+          <ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+            <li class="tsd-signature tsd-anchor-link" id="customStyles">
+              custom<wbr />Styles<span class="tsd-signature-symbol">(</span>element<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><span class="tsd-signature-type">Element</span>, styles<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><a
+                href="../interfaces/interfaces_cg_select_interface.IStyle.html"
+                class="tsd-signature-type"
+                data-tsd-kind="Interface"
+                >IStyle</a
+              ><span class="tsd-signature-symbol">)</span
+              ><span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">void</span
+              ><a href="#customStyles" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </li>
+            <li class="tsd-description">
+              <div class="tsd-comment tsd-typography">
+                <p>Finding and styling elements derived from the styles instance CgSelect</p>
+              </div>
+              <div class="tsd-parameters">
+                <h4 class="tsd-parameters-title">Parameters</h4>
+                <ul class="tsd-parameter-list">
+                  <li>
+                    <h5>element: <span class="tsd-signature-type">Element</span></h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>instantiated class CgSelect.</p>
+                    </div>
+                  </li>
+                  <li>
+                    <h5>
+                      styles:
+                      <a
+                        href="../interfaces/interfaces_cg_select_interface.IStyle.html"
+                        class="tsd-signature-type"
+                        data-tsd-kind="Interface"
+                        >IStyle</a
+                      >
+                    </h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>object in which there are settings for customizing parts of the select.</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <h4 class="tsd-returns-title">
+                Returns <span class="tsd-signature-type">void</span>
+              </h4>
+              <aside class="tsd-sources">
+                <ul>
+                  <li>
+                    Defined in
+                    <a
+                      href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/utils.ts#L217"
+                      >components/utils/utils.ts:217</a
+                    >
+                  </li>
+                </ul>
+              </aside>
+            </li>
+          </ul>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/Utils.html">Utils</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.checkItemStruct.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-function)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-64-path"
+                  ></rect>
+                  <path
+                    d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z"
+                    fill="var(--color-text)"
+                    id="icon-64-text"
+                  ></path></svg
+                >check<wbr />Item<wbr />Struct</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.clearSelect.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >clear<wbr />Select</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.createSelected.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Selected</a
+              >
+            </li>
+            <li class="current tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStyles.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStylesFormat.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles<wbr />Format</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getFormatItem.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Format<wbr />Item</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getSelectText.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Select<wbr />Text</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Multiple</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Ordinary</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/functions/Utils.customStylesFormat.html
+++ b/docs/functions/Utils.customStylesFormat.html
@@ -1,82 +1,367 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>customStylesFormat | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/Utils.html">Utils</a></li>
-<li><a href="Utils.customStylesFormat.html">customStylesFormat</a></li></ul>
-<h1>Function customStylesFormat</h1></div>
-<section class="tsd-panel">
-<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
-<li class="tsd-signature tsd-anchor-link" id="customStylesFormat">custom<wbr/>Styles<wbr/>Format<span class="tsd-signature-symbol">(</span>elemOption<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">object</span>, selector<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#customStylesFormat" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></li>
-<li class="tsd-description">
-<div class="tsd-comment tsd-typography"><p>Generic Method for Styling a Select.</p>
-</div>
-<div class="tsd-parameters">
-<h4 class="tsd-parameters-title">Parameters</h4>
-<ul class="tsd-parameter-list">
-<li>
-<h5>elemOption: <span class="tsd-signature-type">object</span></h5>
-<div class="tsd-comment tsd-typography"><p>an object obtained from the styles object from which we get the styles key-value.</p>
-</div></li>
-<li>
-<h5>selector: <span class="tsd-signature-type">any</span></h5>
-<div class="tsd-comment tsd-typography"><p>HTMLElement subject to customization.</p>
-</div></li></ul></div>
-<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/utils.ts#L231">components/utils/utils.ts:231</a></li></ul></aside></li></ul></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="current tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.checkItemStruct.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>check<wbr/>Item<wbr/>Struct</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.clearSelect.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>clear<wbr/>Select</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.createSelected.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Selected</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStyles.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles</a></li>
-<li class="current tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStylesFormat.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles<wbr/>Format</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.getFormatItem.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Format<wbr/>Item</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.getSelectText.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Select<wbr/>Text</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Multiple</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Ordinary</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>customStylesFormat | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All mobiles</a></li>
+            <li><a href="../modules/Utils.html">Utils</a></li>
+            <li><a href="Utils.customStylesFormat.html">customStylesFormat</a></li>
+          </ul>
+          <h1>Function customStylesFormat</h1>
+        </div>
+        <section class="tsd-panel">
+          <ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+            <li class="tsd-signature tsd-anchor-link" id="customStylesFormat">
+              custom<wbr />Styles<wbr />Format<span class="tsd-signature-symbol">(</span
+              >elemOption<span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">object</span>, selector<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span
+              ><span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">void</span
+              ><a href="#customStylesFormat" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </li>
+            <li class="tsd-description">
+              <div class="tsd-comment tsd-typography">
+                <p>Generic Method for Styling a Select.</p>
+              </div>
+              <div class="tsd-parameters">
+                <h4 class="tsd-parameters-title">Parameters</h4>
+                <ul class="tsd-parameter-list">
+                  <li>
+                    <h5>elemOption: <span class="tsd-signature-type">object</span></h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>
+                        an object obtained from the styles object from which we get the styles
+                        key-value.
+                      </p>
+                    </div>
+                  </li>
+                  <li>
+                    <h5>selector: <span class="tsd-signature-type">any</span></h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>HTMLElement subject to customization.</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <h4 class="tsd-returns-title">
+                Returns <span class="tsd-signature-type">void</span>
+              </h4>
+              <aside class="tsd-sources">
+                <ul>
+                  <li>
+                    Defined in
+                    <a
+                      href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/utils.ts#L237"
+                      >components/utils/utils.ts:237</a
+                    >
+                  </li>
+                </ul>
+              </aside>
+            </li>
+          </ul>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/Utils.html">Utils</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.checkItemStruct.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-function)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-64-path"
+                  ></rect>
+                  <path
+                    d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z"
+                    fill="var(--color-text)"
+                    id="icon-64-text"
+                  ></path></svg
+                >check<wbr />Item<wbr />Struct</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.clearSelect.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >clear<wbr />Select</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.createSelected.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Selected</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStyles.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles</a
+              >
+            </li>
+            <li class="current tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStylesFormat.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles<wbr />Format</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getFormatItem.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Format<wbr />Item</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getSelectText.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Select<wbr />Text</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Multiple</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Ordinary</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/functions/Utils.getFormatItem.html
+++ b/docs/functions/Utils.getFormatItem.html
@@ -1,84 +1,376 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>getFormatItem | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/Utils.html">Utils</a></li>
-<li><a href="Utils.getFormatItem.html">getFormatItem</a></li></ul>
-<h1>Function getFormatItem</h1></div>
-<section class="tsd-panel">
-<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
-<li class="tsd-signature tsd-anchor-link" id="getFormatItem">get<wbr/>Format<wbr/>Item<span class="tsd-signature-symbol">(</span>dataItem<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span>, index<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../interfaces/interfaces_items_interface.IItems.html" class="tsd-signature-type" data-tsd-kind="Interface">IItems</a><a href="#getFormatItem" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></li>
-<li class="tsd-description">
-<div class="tsd-comment tsd-typography"><p>Converting each item obtained from the Items field;</p>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>getFormatItem | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All mobiles</a></li>
+            <li><a href="../modules/Utils.html">Utils</a></li>
+            <li><a href="Utils.getFormatItem.html">getFormatItem</a></li>
+          </ul>
+          <h1>Function getFormatItem</h1>
+        </div>
+        <section class="tsd-panel">
+          <ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+            <li class="tsd-signature tsd-anchor-link" id="getFormatItem">
+              get<wbr />Format<wbr />Item<span class="tsd-signature-symbol">(</span>dataItem<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><span class="tsd-signature-type">any</span>, index<span class="tsd-signature-symbol"
+                >: </span
+              ><span class="tsd-signature-type">number</span
+              ><span class="tsd-signature-symbol">)</span
+              ><span class="tsd-signature-symbol">: </span
+              ><a
+                href="../interfaces/interfaces_items_interface.IItems.html"
+                class="tsd-signature-type"
+                data-tsd-kind="Interface"
+                >IItems</a
+              ><a href="#getFormatItem" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </li>
+            <li class="tsd-description">
+              <div class="tsd-comment tsd-typography">
+                <p>Converting each item obtained from the Items field;</p>

-<h3>Returns</h3><p>returns the formed object</p>
-</div>
-<div class="tsd-parameters">
-<h4 class="tsd-parameters-title">Parameters</h4>
-<ul class="tsd-parameter-list">
-<li>
-<h5>dataItem: <span class="tsd-signature-type">any</span></h5>
-<div class="tsd-comment tsd-typography"><p>received element passed when creating the select.</p>
-</div></li>
-<li>
-<h5>index: <span class="tsd-signature-type">number</span></h5>
-<div class="tsd-comment tsd-typography"><p>index of this element.</p>
-</div></li></ul></div>
-<h4 class="tsd-returns-title">Returns <a href="../interfaces/interfaces_items_interface.IItems.html" class="tsd-signature-type" data-tsd-kind="Interface">IItems</a></h4><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/utils.ts#L15">components/utils/utils.ts:15</a></li></ul></aside></li></ul></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="current tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.checkItemStruct.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>check<wbr/>Item<wbr/>Struct</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.clearSelect.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>clear<wbr/>Select</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.createSelected.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Selected</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStyles.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStylesFormat.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles<wbr/>Format</a></li>
-<li class="current tsd-kind-function tsd-parent-kind-module"><a href="Utils.getFormatItem.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Format<wbr/>Item</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.getSelectText.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Select<wbr/>Text</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Multiple</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Ordinary</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+                <h3>Returns</h3>
+                <p>returns the formed object</p>
+              </div>
+              <div class="tsd-parameters">
+                <h4 class="tsd-parameters-title">Parameters</h4>
+                <ul class="tsd-parameter-list">
+                  <li>
+                    <h5>dataItem: <span class="tsd-signature-type">any</span></h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>received element passed when creating the select.</p>
+                    </div>
+                  </li>
+                  <li>
+                    <h5>index: <span class="tsd-signature-type">number</span></h5>
+                    <div class="tsd-comment tsd-typography"><p>index of this element.</p></div>
+                  </li>
+                </ul>
+              </div>
+              <h4 class="tsd-returns-title">
+                Returns
+                <a
+                  href="../interfaces/interfaces_items_interface.IItems.html"
+                  class="tsd-signature-type"
+                  data-tsd-kind="Interface"
+                  >IItems</a
+                >
+              </h4>
+              <aside class="tsd-sources">
+                <ul>
+                  <li>
+                    Defined in
+                    <a
+                      href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/utils.ts#L15"
+                      >components/utils/utils.ts:15</a
+                    >
+                  </li>
+                </ul>
+              </aside>
+            </li>
+          </ul>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/Utils.html">Utils</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.checkItemStruct.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-function)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-64-path"
+                  ></rect>
+                  <path
+                    d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z"
+                    fill="var(--color-text)"
+                    id="icon-64-text"
+                  ></path></svg
+                >check<wbr />Item<wbr />Struct</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.clearSelect.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >clear<wbr />Select</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.createSelected.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Selected</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStyles.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStylesFormat.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles<wbr />Format</a
+              >
+            </li>
+            <li class="current tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getFormatItem.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Format<wbr />Item</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getSelectText.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Select<wbr />Text</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Multiple</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Ordinary</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/functions/Utils.getSelectText.html
+++ b/docs/functions/Utils.getSelectText.html
@@ -1,84 +1,390 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>getSelectText | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/Utils.html">Utils</a></li>
-<li><a href="Utils.getSelectText.html">getSelectText</a></li></ul>
-<h1>Function getSelectText</h1></div>
-<section class="tsd-panel">
-<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
-<li class="tsd-signature tsd-anchor-link" id="getSelectText">get<wbr/>Select<wbr/>Text<span class="tsd-signature-symbol">(</span>data<span class="tsd-signature-symbol">: </span><a href="../interfaces/components_utils_urils_interface.ISelectedItems.html" class="tsd-signature-type" data-tsd-kind="Interface">ISelectedItems</a>, select<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement</span><a href="#getSelectText" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></li>
-<li class="tsd-description">
-<div class="tsd-comment tsd-typography"><p>Insert initial select text (before selection)</p>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>getSelectText | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All mobiles</a></li>
+            <li><a href="../modules/Utils.html">Utils</a></li>
+            <li><a href="Utils.getSelectText.html">getSelectText</a></li>
+          </ul>
+          <h1>Function getSelectText</h1>
+        </div>
+        <section class="tsd-panel">
+          <ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+            <li class="tsd-signature tsd-anchor-link" id="getSelectText">
+              get<wbr />Select<wbr />Text<span class="tsd-signature-symbol">(</span>data<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><a
+                href="../interfaces/components_utils_urils_interface.ISelectedItems.html"
+                class="tsd-signature-type"
+                data-tsd-kind="Interface"
+                >ISelectedItems</a
+              >, select<span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">undefined</span
+              ><span class="tsd-signature-symbol"> | </span
+              ><span class="tsd-signature-type">null</span
+              ><span class="tsd-signature-symbol"> | </span
+              ><span class="tsd-signature-type">HTMLElement</span
+              ><span class="tsd-signature-symbol">)</span
+              ><span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">HTMLElement</span
+              ><a href="#getSelectText" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </li>
+            <li class="tsd-description">
+              <div class="tsd-comment tsd-typography">
+                <p>Insert initial select text (before selection)</p>

-<h3>Returns</h3><p>returns the generated select element.</p>
-</div>
-<div class="tsd-parameters">
-<h4 class="tsd-parameters-title">Parameters</h4>
-<ul class="tsd-parameter-list">
-<li>
-<h5>data: <a href="../interfaces/components_utils_urils_interface.ISelectedItems.html" class="tsd-signature-type" data-tsd-kind="Interface">ISelectedItems</a></h5>
-<div class="tsd-comment tsd-typography"><p>the object in which the title of the select is located.</p>
-</div></li>
-<li>
-<h5>select: <span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLElement</span></h5>
-<div class="tsd-comment tsd-typography"><p>select element where title will be inserted.</p>
-</div></li></ul></div>
-<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">HTMLElement</span></h4><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/utils.ts#L38">components/utils/utils.ts:38</a></li></ul></aside></li></ul></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="current tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.checkItemStruct.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>check<wbr/>Item<wbr/>Struct</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.clearSelect.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>clear<wbr/>Select</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.createSelected.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Selected</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStyles.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStylesFormat.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles<wbr/>Format</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.getFormatItem.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Format<wbr/>Item</a></li>
-<li class="current tsd-kind-function tsd-parent-kind-module"><a href="Utils.getSelectText.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Select<wbr/>Text</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Multiple</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Ordinary</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+                <h3>Returns</h3>
+                <p>returns the generated select element.</p>
+              </div>
+              <div class="tsd-parameters">
+                <h4 class="tsd-parameters-title">Parameters</h4>
+                <ul class="tsd-parameter-list">
+                  <li>
+                    <h5>
+                      data:
+                      <a
+                        href="../interfaces/components_utils_urils_interface.ISelectedItems.html"
+                        class="tsd-signature-type"
+                        data-tsd-kind="Interface"
+                        >ISelectedItems</a
+                      >
+                    </h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>the object in which the title of the select is located.</p>
+                    </div>
+                  </li>
+                  <li>
+                    <h5>
+                      select: <span class="tsd-signature-type">undefined</span
+                      ><span class="tsd-signature-symbol"> | </span
+                      ><span class="tsd-signature-type">null</span
+                      ><span class="tsd-signature-symbol"> | </span
+                      ><span class="tsd-signature-type">HTMLElement</span>
+                    </h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>select element where title will be inserted.</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <h4 class="tsd-returns-title">
+                Returns <span class="tsd-signature-type">HTMLElement</span>
+              </h4>
+              <aside class="tsd-sources">
+                <ul>
+                  <li>
+                    Defined in
+                    <a
+                      href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/utils.ts#L38"
+                      >components/utils/utils.ts:38</a
+                    >
+                  </li>
+                </ul>
+              </aside>
+            </li>
+          </ul>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/Utils.html">Utils</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.checkItemStruct.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-function)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-64-path"
+                  ></rect>
+                  <path
+                    d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z"
+                    fill="var(--color-text)"
+                    id="icon-64-text"
+                  ></path></svg
+                >check<wbr />Item<wbr />Struct</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.clearSelect.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >clear<wbr />Select</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.createSelected.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Selected</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStyles.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStylesFormat.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles<wbr />Format</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getFormatItem.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Format<wbr />Item</a
+              >
+            </li>
+            <li class="current tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getSelectText.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Select<wbr />Text</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Multiple</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Ordinary</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/functions/Utils.nativeOptionMultiple.html
+++ b/docs/functions/Utils.nativeOptionMultiple.html
@@ -1,86 +1,384 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>nativeOptionMultiple | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/Utils.html">Utils</a></li>
-<li><a href="Utils.nativeOptionMultiple.html">nativeOptionMultiple</a></li></ul>
-<h1>Function nativeOptionMultiple</h1></div>
-<section class="tsd-panel">
-<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
-<li class="tsd-signature tsd-anchor-link" id="nativeOptionMultiple">native<wbr/>Option<wbr/>Multiple<span class="tsd-signature-symbol">(</span>element<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">NodeListOf</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol">&gt;</span>, item<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, condition<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#nativeOptionMultiple" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></li>
-<li class="tsd-description">
-<div class="tsd-comment tsd-typography"><p>The behavior of the native (Multiple) select when choosing in a custom one.</p>
-</div>
-<div class="tsd-parameters">
-<h4 class="tsd-parameters-title">Parameters</h4>
-<ul class="tsd-parameter-list">
-<li>
-<h5>element: <span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">NodeListOf</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol">&gt;</span></h5>
-<div class="tsd-comment tsd-typography"><p>NodeList of native select.</p>
-</div></li>
-<li>
-<h5>item: <span class="tsd-signature-type">string</span></h5>
-<div class="tsd-comment tsd-typography"><p>selected element in custom select.</p>
-</div></li>
-<li>
-<h5>condition: <span class="tsd-signature-type">boolean</span></h5>
-<div class="tsd-comment tsd-typography"><p>a special flag that adds / removes attributes from the native select.</p>
-</div></li></ul></div>
-<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/utils.ts#L186">components/utils/utils.ts:186</a></li></ul></aside></li></ul></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="current tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.checkItemStruct.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>check<wbr/>Item<wbr/>Struct</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.clearSelect.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>clear<wbr/>Select</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.createSelected.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Selected</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStyles.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStylesFormat.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles<wbr/>Format</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.getFormatItem.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Format<wbr/>Item</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.getSelectText.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Select<wbr/>Text</a></li>
-<li class="current tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Multiple</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Ordinary</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>nativeOptionMultiple | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All mobiles</a></li>
+            <li><a href="../modules/Utils.html">Utils</a></li>
+            <li><a href="Utils.nativeOptionMultiple.html">nativeOptionMultiple</a></li>
+          </ul>
+          <h1>Function nativeOptionMultiple</h1>
+        </div>
+        <section class="tsd-panel">
+          <ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+            <li class="tsd-signature tsd-anchor-link" id="nativeOptionMultiple">
+              native<wbr />Option<wbr />Multiple<span class="tsd-signature-symbol">(</span
+              >element<span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">undefined</span
+              ><span class="tsd-signature-symbol"> | </span
+              ><span class="tsd-signature-type">NodeListOf</span
+              ><span class="tsd-signature-symbol">&lt;</span
+              ><span class="tsd-signature-type">Element</span
+              ><span class="tsd-signature-symbol">&gt;</span>, item<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><span class="tsd-signature-type">string</span>, condition<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><span class="tsd-signature-type">boolean</span
+              ><span class="tsd-signature-symbol">)</span
+              ><span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">void</span
+              ><a href="#nativeOptionMultiple" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </li>
+            <li class="tsd-description">
+              <div class="tsd-comment tsd-typography">
+                <p>The behavior of the native (Multiple) select when choosing in a custom one.</p>
+              </div>
+              <div class="tsd-parameters">
+                <h4 class="tsd-parameters-title">Parameters</h4>
+                <ul class="tsd-parameter-list">
+                  <li>
+                    <h5>
+                      element: <span class="tsd-signature-type">undefined</span
+                      ><span class="tsd-signature-symbol"> | </span
+                      ><span class="tsd-signature-type">NodeListOf</span
+                      ><span class="tsd-signature-symbol">&lt;</span
+                      ><span class="tsd-signature-type">Element</span
+                      ><span class="tsd-signature-symbol">&gt;</span>
+                    </h5>
+                    <div class="tsd-comment tsd-typography"><p>NodeList of native select.</p></div>
+                  </li>
+                  <li>
+                    <h5>item: <span class="tsd-signature-type">string</span></h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>selected element in custom select.</p>
+                    </div>
+                  </li>
+                  <li>
+                    <h5>condition: <span class="tsd-signature-type">boolean</span></h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>a special flag that adds / removes attributes from the native select.</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <h4 class="tsd-returns-title">
+                Returns <span class="tsd-signature-type">void</span>
+              </h4>
+              <aside class="tsd-sources">
+                <ul>
+                  <li>
+                    Defined in
+                    <a
+                      href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/utils.ts#L192"
+                      >components/utils/utils.ts:192</a
+                    >
+                  </li>
+                </ul>
+              </aside>
+            </li>
+          </ul>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/Utils.html">Utils</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.checkItemStruct.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-function)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-64-path"
+                  ></rect>
+                  <path
+                    d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z"
+                    fill="var(--color-text)"
+                    id="icon-64-text"
+                  ></path></svg
+                >check<wbr />Item<wbr />Struct</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.clearSelect.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >clear<wbr />Select</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.createSelected.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Selected</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStyles.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStylesFormat.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles<wbr />Format</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getFormatItem.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Format<wbr />Item</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getSelectText.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Select<wbr />Text</a
+              >
+            </li>
+            <li class="current tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Multiple</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Ordinary</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/functions/Utils.nativeOptionOrdinary.html
+++ b/docs/functions/Utils.nativeOptionOrdinary.html
@@ -1,82 +1,375 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>nativeOptionOrdinary | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/Utils.html">Utils</a></li>
-<li><a href="Utils.nativeOptionOrdinary.html">nativeOptionOrdinary</a></li></ul>
-<h1>Function nativeOptionOrdinary</h1></div>
-<section class="tsd-panel">
-<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
-<li class="tsd-signature tsd-anchor-link" id="nativeOptionOrdinary">native<wbr/>Option<wbr/>Ordinary<span class="tsd-signature-symbol">(</span>element<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">NodeListOf</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol">&gt;</span>, item<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#nativeOptionOrdinary" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></li>
-<li class="tsd-description">
-<div class="tsd-comment tsd-typography"><p>Behavior of a native (single) select when choosing a custom one.</p>
-</div>
-<div class="tsd-parameters">
-<h4 class="tsd-parameters-title">Parameters</h4>
-<ul class="tsd-parameter-list">
-<li>
-<h5>element: <span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">NodeListOf</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol">&gt;</span></h5>
-<div class="tsd-comment tsd-typography"><p>NodeList native select.</p>
-</div></li>
-<li>
-<h5>item: <span class="tsd-signature-type">string</span></h5>
-<div class="tsd-comment tsd-typography"><p>selected element in custom select.</p>
-</div></li></ul></div>
-<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/utils.ts#L171">components/utils/utils.ts:171</a></li></ul></aside></li></ul></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="current tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.checkItemStruct.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>check<wbr/>Item<wbr/>Struct</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.clearSelect.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>clear<wbr/>Select</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.createSelected.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Selected</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStyles.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.customStylesFormat.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles<wbr/>Format</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.getFormatItem.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Format<wbr/>Item</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.getSelectText.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Select<wbr/>Text</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Multiple</a></li>
-<li class="current tsd-kind-function tsd-parent-kind-module"><a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Ordinary</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>nativeOptionOrdinary | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All mobiles</a></li>
+            <li><a href="../modules/Utils.html">Utils</a></li>
+            <li><a href="Utils.nativeOptionOrdinary.html">nativeOptionOrdinary</a></li>
+          </ul>
+          <h1>Function nativeOptionOrdinary</h1>
+        </div>
+        <section class="tsd-panel">
+          <ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+            <li class="tsd-signature tsd-anchor-link" id="nativeOptionOrdinary">
+              native<wbr />Option<wbr />Ordinary<span class="tsd-signature-symbol">(</span
+              >element<span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">undefined</span
+              ><span class="tsd-signature-symbol"> | </span
+              ><span class="tsd-signature-type">NodeListOf</span
+              ><span class="tsd-signature-symbol">&lt;</span
+              ><span class="tsd-signature-type">Element</span
+              ><span class="tsd-signature-symbol">&gt;</span>, item<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><span class="tsd-signature-type">string</span
+              ><span class="tsd-signature-symbol">)</span
+              ><span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">void</span
+              ><a href="#nativeOptionOrdinary" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </li>
+            <li class="tsd-description">
+              <div class="tsd-comment tsd-typography">
+                <p>Behavior of a native (single) select when choosing a custom one.</p>
+              </div>
+              <div class="tsd-parameters">
+                <h4 class="tsd-parameters-title">Parameters</h4>
+                <ul class="tsd-parameter-list">
+                  <li>
+                    <h5>
+                      element: <span class="tsd-signature-type">undefined</span
+                      ><span class="tsd-signature-symbol"> | </span
+                      ><span class="tsd-signature-type">NodeListOf</span
+                      ><span class="tsd-signature-symbol">&lt;</span
+                      ><span class="tsd-signature-type">Element</span
+                      ><span class="tsd-signature-symbol">&gt;</span>
+                    </h5>
+                    <div class="tsd-comment tsd-typography"><p>NodeList native select.</p></div>
+                  </li>
+                  <li>
+                    <h5>item: <span class="tsd-signature-type">string</span></h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>selected element in custom select.</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <h4 class="tsd-returns-title">
+                Returns <span class="tsd-signature-type">void</span>
+              </h4>
+              <aside class="tsd-sources">
+                <ul>
+                  <li>
+                    Defined in
+                    <a
+                      href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/utils.ts#L177"
+                      >components/utils/utils.ts:177</a
+                    >
+                  </li>
+                </ul>
+              </aside>
+            </li>
+          </ul>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/Utils.html">Utils</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.checkItemStruct.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-function)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-64-path"
+                  ></rect>
+                  <path
+                    d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z"
+                    fill="var(--color-text)"
+                    id="icon-64-text"
+                  ></path></svg
+                >check<wbr />Item<wbr />Struct</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.clearSelect.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >clear<wbr />Select</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.createSelected.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Selected</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStyles.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.customStylesFormat.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles<wbr />Format</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getFormatItem.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Format<wbr />Item</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.getSelectText.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Select<wbr />Text</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionMultiple.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Multiple</a
+              >
+            </li>
+            <li class="current tsd-kind-function tsd-parent-kind-module">
+              <a href="Utils.nativeOptionOrdinary.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Ordinary</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/functions/components_create_element_create_element.createBreadCrumb.html
+++ b/docs/functions/components_create_element_create_element.createBreadCrumb.html
@@ -1,87 +1,369 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>createBreadCrumb | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/components_create_element_create_element.html">components/create-element/create-element</a></li>
-<li><a href="components_create_element_create_element.createBreadCrumb.html">createBreadCrumb</a></li></ul>
-<h1>Function createBreadCrumb</h1></div>
-<section class="tsd-panel">
-<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
-<li class="tsd-signature tsd-anchor-link" id="createBreadCrumb">create<wbr/>Bread<wbr/>Crumb<span class="tsd-signature-symbol">(</span>data<span class="tsd-signature-symbol">: </span><a href="../interfaces/components_create_element_create_element_interface.ICreateBreadCrumb.html" class="tsd-signature-type" data-tsd-kind="Interface">ICreateBreadCrumb</a>, title<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, index<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, id<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLLIElement</span><a href="#createBreadCrumb" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></li>
-<li class="tsd-description">
-<div class="tsd-comment tsd-typography"><p>The method that creates and is responsible for the behavior of the chips.</p>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>createBreadCrumb | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li>
+              <a href="../modules/components_create_element_create_element.html">Create-element</a>
+            </li>
+            <li>
+              <a href="components_create_element_create_element.createBreadCrumb.html"
+                >createBreadCrumb</a
+              >
+            </li>
+          </ul>
+          <h1>Function createBreadCrumb</h1>
+        </div>
+        <section class="tsd-panel">
+          <ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+            <li class="tsd-signature tsd-anchor-link" id="createBreadCrumb">
+              create<wbr />Bread<wbr />Crumb<span class="tsd-signature-symbol">(</span>data<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><a
+                href="../interfaces/components_create_element_create_element_interface.ICreateBreadCrumb.html"
+                class="tsd-signature-type"
+                data-tsd-kind="Interface"
+                >ICreateBreadCrumb</a
+              >, title<span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">string</span>, index<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><span class="tsd-signature-type">number</span>, id<span class="tsd-signature-symbol"
+                >: </span
+              ><span class="tsd-signature-type">string</span
+              ><span class="tsd-signature-symbol">)</span
+              ><span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">HTMLLIElement</span
+              ><a href="#createBreadCrumb" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </li>
+            <li class="tsd-description">
+              <div class="tsd-comment tsd-typography">
+                <p>The method that creates and is responsible for the behavior of the chips.</p>

-<h3>Returns</h3><p>returns the generated HTMLElement chips item.</p>
-</div>
-<div class="tsd-parameters">
-<h4 class="tsd-parameters-title">Parameters</h4>
-<ul class="tsd-parameter-list">
-<li>
-<h5>data: <a href="../interfaces/components_create_element_create_element_interface.ICreateBreadCrumb.html" class="tsd-signature-type" data-tsd-kind="Interface">ICreateBreadCrumb</a></h5>
-<div class="tsd-comment tsd-typography"><p>an object that contains settings and select elements.</p>
-</div></li>
-<li>
-<h5>title: <span class="tsd-signature-type">string</span></h5>
-<div class="tsd-comment tsd-typography"><p>the name of the selected element to draw chips.</p>
-</div></li>
-<li>
-<h5>index: <span class="tsd-signature-type">number</span></h5>
-<div class="tsd-comment tsd-typography"><p>index of the selected item to draw chips.</p>
-</div></li>
-<li>
-<h5>id: <span class="tsd-signature-type">string</span></h5>
-<div class="tsd-comment tsd-typography"><p>unique id of the selected element.</p>
-</div></li></ul></div>
-<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">HTMLLIElement</span></h4><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/create-element/create-element.ts#L35">components/create-element/create-element.ts:35</a></li></ul></aside></li></ul></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="current tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="current tsd-kind-function tsd-parent-kind-module"><a href="components_create_element_create_element.createBreadCrumb.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>create<wbr/>Bread<wbr/>Crumb</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="components_create_element_create_element.createInputSearch.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Input<wbr/>Search</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="components_create_element_create_element.createNativeSelect.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Native<wbr/>Select</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="components_create_element_create_element.createNativeSelectOption.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Native<wbr/>Select<wbr/>Option</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+                <h3>Returns</h3>
+                <p>returns the generated HTMLElement chips item.</p>
+              </div>
+              <div class="tsd-parameters">
+                <h4 class="tsd-parameters-title">Parameters</h4>
+                <ul class="tsd-parameter-list">
+                  <li>
+                    <h5>
+                      data:
+                      <a
+                        href="../interfaces/components_create_element_create_element_interface.ICreateBreadCrumb.html"
+                        class="tsd-signature-type"
+                        data-tsd-kind="Interface"
+                        >ICreateBreadCrumb</a
+                      >
+                    </h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>an object that contains settings and select elements.</p>
+                    </div>
+                  </li>
+                  <li>
+                    <h5>title: <span class="tsd-signature-type">string</span></h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>the name of the selected element to draw chips.</p>
+                    </div>
+                  </li>
+                  <li>
+                    <h5>index: <span class="tsd-signature-type">number</span></h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>index of the selected item to draw chips.</p>
+                    </div>
+                  </li>
+                  <li>
+                    <h5>id: <span class="tsd-signature-type">string</span></h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>unique id of the selected element.</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <h4 class="tsd-returns-title">
+                Returns <span class="tsd-signature-type">HTMLLIElement</span>
+              </h4>
+              <aside class="tsd-sources">
+                <ul>
+                  <li>
+                    Defined in
+                    <a
+                      href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/create-element/create-element.ts#L35"
+                      >components/create-element/create-element.ts:35</a
+                    >
+                  </li>
+                </ul>
+              </aside>
+            </li>
+          </ul>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="current tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="components_create_element_create_element.createBreadCrumb.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-function)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-64-path"
+                  ></rect>
+                  <path
+                    d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z"
+                    fill="var(--color-text)"
+                    id="icon-64-text"
+                  ></path></svg
+                >create<wbr />Bread<wbr />Crumb</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="components_create_element_create_element.createInputSearch.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Input<wbr />Search</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="components_create_element_create_element.createNativeSelect.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Native<wbr />Select</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="components_create_element_create_element.createNativeSelectOption.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Native<wbr />Select<wbr />Option</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/functions/components_create_element_create_element.createInputSearch.html
+++ b/docs/functions/components_create_element_create_element.createInputSearch.html
@@ -1,79 +1,341 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>createInputSearch | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/components_create_element_create_element.html">components/create-element/create-element</a></li>
-<li><a href="components_create_element_create_element.createInputSearch.html">createInputSearch</a></li></ul>
-<h1>Function createInputSearch</h1></div>
-<section class="tsd-panel">
-<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
-<li class="tsd-signature tsd-anchor-link" id="createInputSearch">create<wbr/>Input<wbr/>Search<span class="tsd-signature-symbol">(</span>random<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, lenguage<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLInputElement</span><a href="#createInputSearch" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></li>
-<li class="tsd-description">
-<div class="tsd-comment tsd-typography"><p>The method that creates a search for elements in the select.</p>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>createInputSearch | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li>
+              <a href="../modules/components_create_element_create_element.html">Create-element</a>
+            </li>
+            <li>
+              <a href="components_create_element_create_element.createInputSearch.html"
+                >createInputSearch</a
+              >
+            </li>
+          </ul>
+          <h1>Function createInputSearch</h1>
+        </div>
+        <section class="tsd-panel">
+          <ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+            <li class="tsd-signature tsd-anchor-link" id="createInputSearch">
+              create<wbr />Input<wbr />Search<span class="tsd-signature-symbol">(</span>random<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><span class="tsd-signature-type">string</span>, lenguage<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><span class="tsd-signature-type">string</span
+              ><span class="tsd-signature-symbol">)</span
+              ><span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">HTMLInputElement</span
+              ><a href="#createInputSearch" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </li>
+            <li class="tsd-description">
+              <div class="tsd-comment tsd-typography">
+                <p>The method that creates a search for elements in the select.</p>

-<h3>Returns</h3><p>Returns the rendered input element.</p>
-</div>
-<div class="tsd-parameters">
-<h4 class="tsd-parameters-title">Parameters</h4>
-<ul class="tsd-parameter-list">
-<li>
-<h5>random: <span class="tsd-signature-type">string</span></h5>
-<div class="tsd-comment tsd-typography"><p>unique value for input element.</p>
-</div></li>
-<li>
-<h5>lenguage: <span class="tsd-signature-type">string</span></h5>
-<div class="tsd-comment tsd-typography"><p>text in specific language passed from language.ts file</p>
-</div></li></ul></div>
-<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">HTMLInputElement</span></h4><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/create-element/create-element.ts#L106">components/create-element/create-element.ts:106</a></li></ul></aside></li></ul></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="current tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="components_create_element_create_element.createBreadCrumb.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>create<wbr/>Bread<wbr/>Crumb</a></li>
-<li class="current tsd-kind-function tsd-parent-kind-module"><a href="components_create_element_create_element.createInputSearch.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Input<wbr/>Search</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="components_create_element_create_element.createNativeSelect.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Native<wbr/>Select</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="components_create_element_create_element.createNativeSelectOption.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Native<wbr/>Select<wbr/>Option</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+                <h3>Returns</h3>
+                <p>Returns the rendered input element.</p>
+              </div>
+              <div class="tsd-parameters">
+                <h4 class="tsd-parameters-title">Parameters</h4>
+                <ul class="tsd-parameter-list">
+                  <li>
+                    <h5>random: <span class="tsd-signature-type">string</span></h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>unique value for input element.</p>
+                    </div>
+                  </li>
+                  <li>
+                    <h5>lenguage: <span class="tsd-signature-type">string</span></h5>
+                    <div class="tsd-comment tsd-typography">
+                      <p>text in specific language passed from language.ts file</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <h4 class="tsd-returns-title">
+                Returns <span class="tsd-signature-type">HTMLInputElement</span>
+              </h4>
+              <aside class="tsd-sources">
+                <ul>
+                  <li>
+                    Defined in
+                    <a
+                      href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/create-element/create-element.ts#L106"
+                      >components/create-element/create-element.ts:106</a
+                    >
+                  </li>
+                </ul>
+              </aside>
+            </li>
+          </ul>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="components_create_element_create_element.createBreadCrumb.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-function)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-64-path"
+                  ></rect>
+                  <path
+                    d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z"
+                    fill="var(--color-text)"
+                    id="icon-64-text"
+                  ></path></svg
+                >create<wbr />Bread<wbr />Crumb</a
+              >
+            </li>
+            <li class="current tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="components_create_element_create_element.createInputSearch.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Input<wbr />Search</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="components_create_element_create_element.createNativeSelect.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Native<wbr />Select</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="components_create_element_create_element.createNativeSelectOption.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Native<wbr />Select<wbr />Option</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/functions/components_create_element_create_element.createNativeSelect.html
+++ b/docs/functions/components_create_element_create_element.createNativeSelect.html
@@ -1,68 +1,318 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>createNativeSelect | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/components_create_element_create_element.html">components/create-element/create-element</a></li>
-<li><a href="components_create_element_create_element.createNativeSelect.html">createNativeSelect</a></li></ul>
-<h1>Function createNativeSelect</h1></div>
-<section class="tsd-panel">
-<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
-<li class="tsd-signature tsd-anchor-link" id="createNativeSelect">create<wbr/>Native<wbr/>Select<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLSelectElement</span><a href="#createNativeSelect" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></li>
-<li class="tsd-description">
-<div class="tsd-comment tsd-typography"><p>The method that creates the native select.</p>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>createNativeSelect | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li>
+              <a href="../modules/components_create_element_create_element.html">Create-element</a>
+            </li>
+            <li>
+              <a href="components_create_element_create_element.createNativeSelect.html"
+                >createNativeSelect</a
+              >
+            </li>
+          </ul>
+          <h1>Function createNativeSelect</h1>
+        </div>
+        <section class="tsd-panel">
+          <ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+            <li class="tsd-signature tsd-anchor-link" id="createNativeSelect">
+              create<wbr />Native<wbr />Select<span class="tsd-signature-symbol">(</span
+              ><span class="tsd-signature-symbol">)</span
+              ><span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">HTMLSelectElement</span
+              ><a href="#createNativeSelect" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </li>
+            <li class="tsd-description">
+              <div class="tsd-comment tsd-typography">
+                <p>The method that creates the native select.</p>

-<h3>Returns</h3><p>Returns the created native select.</p>
-</div>
-<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">HTMLSelectElement</span></h4><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/create-element/create-element.ts#L8">components/create-element/create-element.ts:8</a></li></ul></aside></li></ul></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="current tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="components_create_element_create_element.createBreadCrumb.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>create<wbr/>Bread<wbr/>Crumb</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="components_create_element_create_element.createInputSearch.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Input<wbr/>Search</a></li>
-<li class="current tsd-kind-function tsd-parent-kind-module"><a href="components_create_element_create_element.createNativeSelect.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Native<wbr/>Select</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="components_create_element_create_element.createNativeSelectOption.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Native<wbr/>Select<wbr/>Option</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+                <h3>Returns</h3>
+                <p>Returns the created native select.</p>
+              </div>
+              <h4 class="tsd-returns-title">
+                Returns <span class="tsd-signature-type">HTMLSelectElement</span>
+              </h4>
+              <aside class="tsd-sources">
+                <ul>
+                  <li>
+                    Defined in
+                    <a
+                      href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/create-element/create-element.ts#L8"
+                      >components/create-element/create-element.ts:8</a
+                    >
+                  </li>
+                </ul>
+              </aside>
+            </li>
+          </ul>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="components_create_element_create_element.createBreadCrumb.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-function)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-64-path"
+                  ></rect>
+                  <path
+                    d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z"
+                    fill="var(--color-text)"
+                    id="icon-64-text"
+                  ></path></svg
+                >create<wbr />Bread<wbr />Crumb</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="components_create_element_create_element.createInputSearch.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Input<wbr />Search</a
+              >
+            </li>
+            <li class="current tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="components_create_element_create_element.createNativeSelect.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Native<wbr />Select</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="components_create_element_create_element.createNativeSelectOption.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Native<wbr />Select<wbr />Option</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/functions/components_create_element_create_element.createNativeSelectOption.html
+++ b/docs/functions/components_create_element_create_element.createNativeSelectOption.html
@@ -1,68 +1,319 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>createNativeSelectOption | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/components_create_element_create_element.html">components/create-element/create-element</a></li>
-<li><a href="components_create_element_create_element.createNativeSelectOption.html">createNativeSelectOption</a></li></ul>
-<h1>Function createNativeSelectOption</h1></div>
-<section class="tsd-panel">
-<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
-<li class="tsd-signature tsd-anchor-link" id="createNativeSelectOption">create<wbr/>Native<wbr/>Select<wbr/>Option<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLOptionElement</span><a href="#createNativeSelectOption" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></li>
-<li class="tsd-description">
-<div class="tsd-comment tsd-typography"><p>The method that creates Options for the native select.</p>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>createNativeSelectOption | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li>
+              <a href="../modules/components_create_element_create_element.html">Create-element</a>
+            </li>
+            <li>
+              <a href="components_create_element_create_element.createNativeSelectOption.html"
+                >createNativeSelectOption</a
+              >
+            </li>
+          </ul>
+          <h1>Function createNativeSelectOption</h1>
+        </div>
+        <section class="tsd-panel">
+          <ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+            <li class="tsd-signature tsd-anchor-link" id="createNativeSelectOption">
+              create<wbr />Native<wbr />Select<wbr />Option<span class="tsd-signature-symbol"
+                >(</span
+              ><span class="tsd-signature-symbol">)</span
+              ><span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">HTMLOptionElement</span
+              ><a href="#createNativeSelectOption" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </li>
+            <li class="tsd-description">
+              <div class="tsd-comment tsd-typography">
+                <p>The method that creates Options for the native select.</p>

-<h3>Returns</h3><p>Returns the generated Options of the native select.</p>
-</div>
-<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">HTMLOptionElement</span></h4><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/create-element/create-element.ts#L20">components/create-element/create-element.ts:20</a></li></ul></aside></li></ul></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="current tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="components_create_element_create_element.createBreadCrumb.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>create<wbr/>Bread<wbr/>Crumb</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="components_create_element_create_element.createInputSearch.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Input<wbr/>Search</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="components_create_element_create_element.createNativeSelect.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Native<wbr/>Select</a></li>
-<li class="current tsd-kind-function tsd-parent-kind-module"><a href="components_create_element_create_element.createNativeSelectOption.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Native<wbr/>Select<wbr/>Option</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+                <h3>Returns</h3>
+                <p>Returns the generated Options of the native select.</p>
+              </div>
+              <h4 class="tsd-returns-title">
+                Returns <span class="tsd-signature-type">HTMLOptionElement</span>
+              </h4>
+              <aside class="tsd-sources">
+                <ul>
+                  <li>
+                    Defined in
+                    <a
+                      href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/create-element/create-element.ts#L20"
+                      >components/create-element/create-element.ts:20</a
+                    >
+                  </li>
+                </ul>
+              </aside>
+            </li>
+          </ul>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="components_create_element_create_element.createBreadCrumb.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-function)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-64-path"
+                  ></rect>
+                  <path
+                    d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z"
+                    fill="var(--color-text)"
+                    id="icon-64-text"
+                  ></path></svg
+                >create<wbr />Bread<wbr />Crumb</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="components_create_element_create_element.createInputSearch.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Input<wbr />Search</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="components_create_element_create_element.createNativeSelect.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Native<wbr />Select</a
+              >
+            </li>
+            <li class="current tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="components_create_element_create_element.createNativeSelectOption.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Native<wbr />Select<wbr />Option</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/functions/components_theme_theme.changeTheme.html
+++ b/docs/functions/components_theme_theme.changeTheme.html
@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>changeTheme | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li><a href="../modules/components_theme_theme.html">Theme</a></li>
+            <li><a href="components_theme_theme.changeTheme.html">changeTheme</a></li>
+          </ul>
+          <h1>Function changeTheme</h1>
+        </div>
+        <section class="tsd-panel">
+          <ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+            <li class="tsd-signature tsd-anchor-link" id="changeTheme">
+              change<wbr />Theme<span class="tsd-signature-symbol">(</span>element<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><span class="tsd-signature-type">Element</span>, theme<span
+                class="tsd-signature-symbol"
+                >: </span
+              ><span class="tsd-signature-type">string</span
+              ><span class="tsd-signature-symbol"> | </span
+              ><a
+                href="../interfaces/theme_interface.CustomTheme.html"
+                class="tsd-signature-type"
+                data-tsd-kind="Interface"
+                >CustomTheme</a
+              ><span class="tsd-signature-symbol"> | </span
+              ><a
+                href="../interfaces/theme_interface.CustomThemeJson.html"
+                class="tsd-signature-type"
+                data-tsd-kind="Interface"
+                >CustomThemeJson</a
+              ><span class="tsd-signature-symbol">)</span
+              ><span class="tsd-signature-symbol">: </span
+              ><span class="tsd-signature-type">void</span
+              ><a href="#changeTheme" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </li>
+            <li class="tsd-description">
+              <div class="tsd-parameters">
+                <h4 class="tsd-parameters-title">Parameters</h4>
+                <ul class="tsd-parameter-list">
+                  <li>
+                    <h5>element: <span class="tsd-signature-type">Element</span></h5>
+                  </li>
+                  <li>
+                    <h5>
+                      theme: <span class="tsd-signature-type">string</span
+                      ><span class="tsd-signature-symbol"> | </span
+                      ><a
+                        href="../interfaces/theme_interface.CustomTheme.html"
+                        class="tsd-signature-type"
+                        data-tsd-kind="Interface"
+                        >CustomTheme</a
+                      ><span class="tsd-signature-symbol"> | </span
+                      ><a
+                        href="../interfaces/theme_interface.CustomThemeJson.html"
+                        class="tsd-signature-type"
+                        data-tsd-kind="Interface"
+                        >CustomThemeJson</a
+                      >
+                    </h5>
+                  </li>
+                </ul>
+              </div>
+              <h4 class="tsd-returns-title">
+                Returns <span class="tsd-signature-type">void</span>
+              </h4>
+              <aside class="tsd-sources">
+                <ul>
+                  <li>
+                    Defined in
+                    <a
+                      href="https://github.com/apuc/cg-select/blob/7a06e3a/src/components/theme/theme.ts#L4"
+                      >theme.ts:4</a
+                    >
+                  </li>
+                </ul>
+              </aside>
+            </li>
+          </ul>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="current tsd-kind-function tsd-parent-kind-module">
+              <a href="components_theme_theme.changeTheme.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-function)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-64-path"
+                  ></rect>
+                  <path
+                    d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z"
+                    fill="var(--color-text)"
+                    id="icon-64-text"
+                  ></path></svg
+                >change<wbr />Theme</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/index.html
+++ b/docs/index.html
@@ -8,6 +8,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="assets/style.css" />
    <link rel="stylesheet" href="assets/highlight.css" />
+    <link rel="shortcut icon" href="../src/images/logoCG2.ico" type="image/x-icon" />
    <script async src="assets/search.js" id="search-script"></script>
  </head>
  <body>
@@ -60,8 +61,8 @@
            <h1>CG-SELECT</h1>
          </a>

-          <a href="#version--021" id="version--021" style="color: inherit; text-decoration: none">
-            <h2>version ~ 0.2.1</h2>
+          <a href="#version--0231" id="version--0231" style="color: inherit; text-decoration: none">
+            <h2>version ~ 0.3.1</h2>
          </a>
          <p>
            This component allows you to create a custom select. It offers more flexible
@@ -138,7 +139,7 @@
          >
            <h3>An example of creating a regular select.</h3>
          </a>
-          <pre><code class="language-javascript"><span class="hl-4">import</span><span class="hl-1"> { </span><span class="hl-0">CGSelect</span><span class="hl-1"> } </span><span class="hl-4">from</span><span class="hl-1"> </span><span class="hl-2">&#39;cg-select&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">dropdown</span><span class="hl-1"> = </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-7">CGSelect</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-0">selector:</span><span class="hl-1"> </span><span class="hl-2">&#39;.cg-dropdown_selector&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-0">placeholder:</span><span class="hl-1"> </span><span class="hl-2">&#39;Выберите авто&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-0">items:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-2">&#39;BMW&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">    {</span><br/><span class="hl-1">      </span><span class="hl-0">id:</span><span class="hl-1"> </span><span class="hl-2">&#39;213sade&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">      </span><span class="hl-0">title:</span><span class="hl-1"> </span><span class="hl-2">&#39;Opel&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">      </span><span class="hl-0">value:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">,</span><br/><span class="hl-1">    },</span><br/><span class="hl-1">    </span><span class="hl-2">&#39;Mersedes&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-2">&#39;MAN&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-2">&#39;Ferari&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">});</span>
+          <pre><code class="language-javascript"><span class="hl-4">import</span><span class="hl-1"> </span><span class="hl-0">CGSelect</span><span class="hl-1"> </span><span class="hl-4">from</span><span class="hl-1"> </span><span class="hl-2">&#39;cg-select&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">dropdown</span><span class="hl-1"> = </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-7">CGSelect</span><span class="hl-1">({</span><br/><span class="hl-1">  </span><span class="hl-0">selector:</span><span class="hl-1"> </span><span class="hl-2">&#39;.cg-dropdown_selector&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-0">placeholder:</span><span class="hl-1"> </span><span class="hl-2">&#39;Выберите авто&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">  </span><span class="hl-0">items:</span><span class="hl-1"> [</span><br/><span class="hl-1">    </span><span class="hl-2">&#39;BMW&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">    {</span><br/><span class="hl-1">      </span><span class="hl-0">id:</span><span class="hl-1"> </span><span class="hl-2">&#39;213sade&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">      </span><span class="hl-0">title:</span><span class="hl-1"> </span><span class="hl-2">&#39;Opel&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">      </span><span class="hl-0">value:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">,</span><br/><span class="hl-1">    },</span><br/><span class="hl-1">    </span><span class="hl-2">&#39;Mersedes&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-2">&#39;MAN&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-2">&#39;Ferari&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">  ],</span><br/><span class="hl-1">});</span>
 </code></pre>

          <a
@@ -149,14 +150,12 @@
            <h2>Example of different selects</h2>
          </a>
          <p>
-            Same working example --
+            View live example
            <a href="https://cg-select.itguild.info/">https://cg-select.itguild.info/</a>
          </p>
          <p>
-            <img src="../src/images/DefaultSelect.png" alt="image" />
-            <img src="../src/images/MultiSelect.png" alt="image" />
-            <img src="../src/images/WhiteTheme.png" alt="image" />
-            <img src="../src/images/Categories.png" alt="image" />
+            Built-in themes are also available: dark, white. To apply them, specify the theme
+            attribute in the select settings and pass one of the values into it dark or white.
          </p>
          <p>
            All documentation on CG-SELECT is located in the folder of the same name. The
@@ -221,10 +220,8 @@
          <a href="#history" id="history" style="color: inherit; text-decoration: none">
            <h2>History</h2>
          </a>
-          <p>
-            16.12.2022 - release version 0.1.0! <br />
-            00.00.2023 - upgrade to version 0.2.1
-          </p>
+          <p>16.12.2022 - release version 0.1.0!</p>
+          <p>20.01.2023 - upgrade to version 0.2.1</p>
        </div>
      </div>
      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
@@ -246,34 +243,6 @@
                <h4 class="uppercase">Member Visibility</h4>
                <form>
                  <ul id="tsd-filter-options">
-                    <li class="tsd-filter-item">
-                      <label class="tsd-filter-input"
-                        ><input type="checkbox" id="tsd-filter-protected" name="protected" /><svg
-                          width="32"
-                          height="32"
-                          viewBox="0 0 32 32"
-                          aria-hidden="true"
-                        >
-                          <rect
-                            class="tsd-checkbox-background"
-                            width="30"
-                            height="30"
-                            x="1"
-                            y="1"
-                            rx="6"
-                            fill="none"
-                          ></rect>
-                          <path
-                            class="tsd-checkbox-checkmark"
-                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
-                            stroke="none"
-                            stroke-width="3.5"
-                            stroke-linejoin="round"
-                            fill="none"
-                          ></path></svg
-                        ><span>Protected</span></label
-                      >
-                    </li>
                    <li class="tsd-filter-item">
                      <label class="tsd-filter-input"
                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
@@ -302,62 +271,6 @@
                        ><span>Private</span></label
                      >
                    </li>
-                    <li class="tsd-filter-item">
-                      <label class="tsd-filter-input"
-                        ><input
-                          type="checkbox"
-                          id="tsd-filter-inherited"
-                          name="inherited"
-                          checked
-                        /><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
-                          <rect
-                            class="tsd-checkbox-background"
-                            width="30"
-                            height="30"
-                            x="1"
-                            y="1"
-                            rx="6"
-                            fill="none"
-                          ></rect>
-                          <path
-                            class="tsd-checkbox-checkmark"
-                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
-                            stroke="none"
-                            stroke-width="3.5"
-                            stroke-linejoin="round"
-                            fill="none"
-                          ></path></svg
-                        ><span>Inherited</span></label
-                      >
-                    </li>
-                    <li class="tsd-filter-item">
-                      <label class="tsd-filter-input"
-                        ><input type="checkbox" id="tsd-filter-external" name="external" /><svg
-                          width="32"
-                          height="32"
-                          viewBox="0 0 32 32"
-                          aria-hidden="true"
-                        >
-                          <rect
-                            class="tsd-checkbox-background"
-                            width="30"
-                            height="30"
-                            x="1"
-                            y="1"
-                            rx="6"
-                            fill="none"
-                          ></rect>
-                          <path
-                            class="tsd-checkbox-checkmark"
-                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
-                            stroke="none"
-                            stroke-width="3.5"
-                            stroke-linejoin="round"
-                            fill="none"
-                          ></path></svg
-                        ><span>External</span></label
-                      >
-                    </li>
                  </ul>
                </form>
              </div>
@@ -388,44 +301,53 @@
            <div class="tsd-accordion-details">
              <ul>
                <li class="current selected">
-                  <a href="modules.html">cg-<wbr />select</a>
+                  <a href="modules.html">All modules</a>
                  <ul>
-                    <li class="tsd-kind-module"><a href="modules/Utils.html">Utils</a></li>
                    <li class="selected tsd-kind-module">
-                      <a href="modules/cg_select.html">cg-<wbr />select</a>
+                      <a href="modules/cg_select.html">Cg-<wbr />select</a>
                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
                    <li class="tsd-kind-module">
                      <a href="modules/components_create_element_create_element.html"
-                        >components/create-<wbr />element/create-<wbr />element</a
+                        >Create-<wbr />element</a
                      >
                    </li>
                    <li class="tsd-kind-module">
                      <a href="modules/components_create_element_create_element_interface.html"
-                        >components/create-<wbr />element/create-<wbr />element.interface</a
+                        >Create-<wbr />element.interface</a
                      >
                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
                    <li class="tsd-kind-module">
-                      <a href="modules/components_utils_urils_interface.html"
-                        >components/utils/urils.interface</a
-                      >
+                      <a href="modules/components_theme_theme.html">Theme</a>
+                    </li>
+
+                    <li class="tsd-kind-module">
+                      <a href="modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="modules/language_language.html">language</a>
                    </li>
                    <li class="tsd-kind-module">
-                      <a href="modules/interfaces_cg_select_interface.html"
-                        >interfaces/cg-<wbr />select.interface</a
-                      >
-                    </li>
-                    <li class="tsd-kind-module">
-                      <a href="modules/interfaces_items_interface.html"
-                        >interfaces/items.interface</a
-                      >
-                    </li>
-                    <li class="tsd-kind-module">
-                      <a href="modules/interfaces_language_interface.html"
-                        >interfaces/language.interface</a
-                      >
-                    </li>
-                    <li class="tsd-kind-module">
-                      <a href="modules/language_language.html">language/language</a>
+                      <a href="modules/interfaces_language_interface.html">Language.interface</a>
                    </li>
                  </ul>
                </li>
--- a/docs/interfaces/components_create_element_create_element_interface.ICreateBreadCrumb.html
+++ b/docs/interfaces/components_create_element_create_element_interface.ICreateBreadCrumb.html
@@ -1,111 +1,542 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>ICreateBreadCrumb | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/components_create_element_create_element_interface.html">components/create-element/create-element.interface</a></li>
-<li><a href="components_create_element_create_element_interface.ICreateBreadCrumb.html">ICreateBreadCrumb</a></li></ul>
-<h1>Interface ICreateBreadCrumb</h1></div>
-<section class="tsd-panel tsd-comment">
-<div class="tsd-comment tsd-typography">
-<h3>Description</h3><p>cSettings for creating chips.</p>
-</div></section>
-<section class="tsd-panel tsd-hierarchy">
-<h4>Hierarchy</h4>
-<ul class="tsd-hierarchy">
-<li><span class="target">ICreateBreadCrumb</span></li></ul></section><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/create-element/create-element.interface.ts#L6">components/create-element/create-element.interface.ts:6</a></li></ul></aside>
-<section class="tsd-panel-group tsd-index-group">
-<section class="tsd-panel tsd-index-panel">
-<details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
-<h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex=0><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M1.5 5.50969L8 11.6609L14.5 5.50969L12.5466 3.66086L8 7.96494L3.45341 3.66086L1.5 5.50969Z" fill="var(--color-text)"></path></svg> Index</h5></summary>
-<div class="tsd-accordion-details">
-<section class="tsd-index-section">
-<h3 class="tsd-index-heading">Properties</h3>
-<div class="tsd-index-list"><a href="components_create_element_create_element_interface.ICreateBreadCrumb.html#element" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="#FF984D" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="12" id="icon-1024-path"></rect><path d="M9.354 16V7.24H12.174C12.99 7.24 13.638 7.476 14.118 7.948C14.606 8.412 14.85 9.036 14.85 9.82C14.85 10.604 14.606 11.232 14.118 11.704C13.638 12.168 12.99 12.4 12.174 12.4H10.434V16H9.354ZM10.434 11.428H12.174C12.646 11.428 13.022 11.284 13.302 10.996C13.59 10.7 13.734 10.308 13.734 9.82C13.734 9.324 13.59 8.932 13.302 8.644C13.022 8.356 12.646 8.212 12.174 8.212H10.434V11.428Z" fill="var(--color-text)" id="icon-1024-text"></path></svg><span>element</span></a>
-<a href="components_create_element_create_element_interface.ICreateBreadCrumb.html#indexes" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>indexes</span></a>
-<a href="components_create_element_create_element_interface.ICreateBreadCrumb.html#option" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>option</span></a>
-<a href="components_create_element_create_element_interface.ICreateBreadCrumb.html#selectedItems" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>selected<wbr/>Items</span></a>
-</div></section></div></details></section></section>
-<section class="tsd-panel-group tsd-member-group">
-<h2>Properties</h2>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="element" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><span>element</span><a href="#element" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></h3>
-<div class="tsd-signature">element<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Element</span></div>
-<div class="tsd-comment tsd-typography"><p>A specific instance of a class.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/create-element/create-element.interface.ts#L11">components/create-element/create-element.interface.ts:11</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="indexes" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><span>indexes</span><a href="#indexes" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">indexes<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">[]</span></div>
-<div class="tsd-comment tsd-typography"><p>Array of indexes of selected elements.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/create-element/create-element.interface.ts#L21">components/create-element/create-element.interface.ts:21</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="option" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><span>option</span><a href="#option" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">option<span class="tsd-signature-symbol">:</span> <a href="interfaces_cg_select_interface.ICgSelect.html" class="tsd-signature-type" data-tsd-kind="Interface">ICgSelect</a></div>
-<div class="tsd-comment tsd-typography"><p>Select settings.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/create-element/create-element.interface.ts#L16">components/create-element/create-element.interface.ts:16</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="selectedItems" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><span>selected<wbr/>Items</span><a href="#selectedItems" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">selected<wbr/>Items<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></div>
-<div class="tsd-comment tsd-typography"><p>Array with selected elements.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/create-element/create-element.interface.ts#L26">components/create-element/create-element.interface.ts:26</a></li></ul></aside></section></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="current tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="current tsd-kind-interface tsd-parent-kind-module"><a href="components_create_element_create_element_interface.ICreateBreadCrumb.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg><span>ICreate<wbr/>Bread<wbr/>Crumb</span></a>
-<ul>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="components_create_element_create_element_interface.ICreateBreadCrumb.html#element" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>element</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="components_create_element_create_element_interface.ICreateBreadCrumb.html#indexes" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>indexes</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="components_create_element_create_element_interface.ICreateBreadCrumb.html#option" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>option</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="components_create_element_create_element_interface.ICreateBreadCrumb.html#selectedItems" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>selected<wbr/>Items</a></li></ul></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>ICreateBreadCrumb | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li>
+              <a href="../modules/components_create_element_create_element_interface.html"
+                >Create-element.interface</a
+              >
+            </li>
+            <li>
+              <a href="components_create_element_create_element_interface.ICreateBreadCrumb.html"
+                >ICreateBreadCrumb</a
+              >
+            </li>
+          </ul>
+          <h1>Interface ICreateBreadCrumb</h1>
+        </div>
+        <section class="tsd-panel tsd-comment">
+          <div class="tsd-comment tsd-typography">
+            <h3>Description</h3>
+            <p>cSettings for creating chips.</p>
+          </div>
+        </section>
+        <section class="tsd-panel tsd-hierarchy">
+          <h4>Hierarchy</h4>
+          <ul class="tsd-hierarchy">
+            <li><span class="target">ICreateBreadCrumb</span></li>
+          </ul>
+        </section>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a
+                href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/create-element/create-element.interface.ts#L6"
+                >components/create-element/create-element.interface.ts:6</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <details class="tsd-index-content tsd-index-accordion" open>
+              <summary class="tsd-accordion-summary tsd-index-summary">
+                <h5
+                  class="tsd-index-heading uppercase"
+                  role="button"
+                  aria-expanded="false"
+                  tabindex="0"
+                >
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                    <path
+                      d="M1.5 5.50969L8 11.6609L14.5 5.50969L12.5466 3.66086L8 7.96494L3.45341 3.66086L1.5 5.50969Z"
+                      fill="var(--color-text)"
+                    ></path>
+                  </svg>
+                  Index
+                </h5>
+              </summary>
+              <div class="tsd-accordion-details">
+                <section class="tsd-index-section">
+                  <h3 class="tsd-index-heading">Properties</h3>
+                  <div class="tsd-index-list">
+                    <a
+                      href="components_create_element_create_element_interface.ICreateBreadCrumb.html#element"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <rect
+                          fill="var(--color-icon-background)"
+                          stroke="#FF984D"
+                          stroke-width="1.5"
+                          x="1"
+                          y="1"
+                          width="22"
+                          height="22"
+                          rx="12"
+                          id="icon-1024-path"
+                        ></rect>
+                        <path
+                          d="M9.354 16V7.24H12.174C12.99 7.24 13.638 7.476 14.118 7.948C14.606 8.412 14.85 9.036 14.85 9.82C14.85 10.604 14.606 11.232 14.118 11.704C13.638 12.168 12.99 12.4 12.174 12.4H10.434V16H9.354ZM10.434 11.428H12.174C12.646 11.428 13.022 11.284 13.302 10.996C13.59 10.7 13.734 10.308 13.734 9.82C13.734 9.324 13.59 8.932 13.302 8.644C13.022 8.356 12.646 8.212 12.174 8.212H10.434V11.428Z"
+                          fill="var(--color-text)"
+                          id="icon-1024-text"
+                        ></path></svg
+                      ><span>element</span></a
+                    >
+                    <a
+                      href="components_create_element_create_element_interface.ICreateBreadCrumb.html#indexes"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>indexes</span></a
+                    >
+                    <a
+                      href="components_create_element_create_element_interface.ICreateBreadCrumb.html#option"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>option</span></a
+                    >
+                    <a
+                      href="components_create_element_create_element_interface.ICreateBreadCrumb.html#selectedItems"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>selected<wbr />Items</span></a
+                    >
+                  </div>
+                </section>
+              </div>
+            </details>
+          </section>
+        </section>
+        <section class="tsd-panel-group tsd-member-group">
+          <h2>Properties</h2>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="element" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <span>element</span
+              ><a href="#element" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              element<span class="tsd-signature-symbol">:</span>
+              <span class="tsd-signature-type">null</span
+              ><span class="tsd-signature-symbol"> | </span
+              ><span class="tsd-signature-type">Element</span>
+            </div>
+            <div class="tsd-comment tsd-typography"><p>A specific instance of a class.</p></div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/create-element/create-element.interface.ts#L11"
+                    >components/create-element/create-element.interface.ts:11</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="indexes" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <span>indexes</span
+              ><a href="#indexes" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              indexes<span class="tsd-signature-symbol">:</span>
+              <span class="tsd-signature-type">number</span
+              ><span class="tsd-signature-symbol">[]</span>
+            </div>
+            <div class="tsd-comment tsd-typography">
+              <p>Array of indexes of selected elements.</p>
+            </div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/create-element/create-element.interface.ts#L21"
+                    >components/create-element/create-element.interface.ts:21</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="option" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <span>option</span
+              ><a href="#option" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              option<span class="tsd-signature-symbol">:</span>
+              <a
+                href="interfaces_cg_select_interface.ICgSelect.html"
+                class="tsd-signature-type"
+                data-tsd-kind="Interface"
+                >ICgSelect</a
+              >
+            </div>
+            <div class="tsd-comment tsd-typography"><p>Select settings.</p></div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/create-element/create-element.interface.ts#L16"
+                    >components/create-element/create-element.interface.ts:16</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="selectedItems" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <span>selected<wbr />Items</span
+              ><a href="#selectedItems" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              selected<wbr />Items<span class="tsd-signature-symbol">:</span>
+              <span class="tsd-signature-type">string</span
+              ><span class="tsd-signature-symbol">[]</span>
+            </div>
+            <div class="tsd-comment tsd-typography"><p>Array with selected elements.</p></div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/create-element/create-element.interface.ts#L26"
+                    >components/create-element/create-element.interface.ts:26</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="current tsd-kind-interface tsd-parent-kind-module">
+              <a
+                href="components_create_element_create_element_interface.ICreateBreadCrumb.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-interface)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-256-path"
+                  ></rect>
+                  <path
+                    d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z"
+                    fill="var(--color-text)"
+                    id="icon-256-text"
+                  ></path></svg
+                ><span>ICreate<wbr />Bread<wbr />Crumb</span></a
+              >
+              <ul>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a
+                    href="components_create_element_create_element_interface.ICreateBreadCrumb.html#element"
+                    class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >element</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a
+                    href="components_create_element_create_element_interface.ICreateBreadCrumb.html#indexes"
+                    class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >indexes</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a
+                    href="components_create_element_create_element_interface.ICreateBreadCrumb.html#option"
+                    class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >option</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a
+                    href="components_create_element_create_element_interface.ICreateBreadCrumb.html#selectedItems"
+                    class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >selected<wbr />Items</a
+                  >
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/interfaces/components_utils_urils_interface.IDataItem.html
+++ b/docs/interfaces/components_utils_urils_interface.IDataItem.html
@@ -1,102 +1,490 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>IDataItem | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li><a href="components_utils_urils_interface.IDataItem.html">IDataItem</a></li></ul>
-<h1>Interface IDataItem</h1></div>
-<section class="tsd-panel tsd-comment">
-<div class="tsd-comment tsd-typography">
-<h3>Description</h3><p>Receive Item Settings.</p>
-</div></section>
-<section class="tsd-panel tsd-hierarchy">
-<h4>Hierarchy</h4>
-<ul class="tsd-hierarchy">
-<li><span class="target">IDataItem</span></li></ul></section><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/urils.interface.ts#L6">components/utils/urils.interface.ts:6</a></li></ul></aside>
-<section class="tsd-panel-group tsd-index-group">
-<section class="tsd-panel tsd-index-panel">
-<details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
-<h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex=0><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M1.5 5.50969L8 11.6609L14.5 5.50969L12.5466 3.66086L8 7.96494L3.45341 3.66086L1.5 5.50969Z" fill="var(--color-text)"></path></svg> Index</h5></summary>
-<div class="tsd-accordion-details">
-<section class="tsd-index-section">
-<h3 class="tsd-index-heading">Properties</h3>
-<div class="tsd-index-list"><a href="components_utils_urils_interface.IDataItem.html#ItemValue" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="#FF984D" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="12" id="icon-1024-path"></rect><path d="M9.354 16V7.24H12.174C12.99 7.24 13.638 7.476 14.118 7.948C14.606 8.412 14.85 9.036 14.85 9.82C14.85 10.604 14.606 11.232 14.118 11.704C13.638 12.168 12.99 12.4 12.174 12.4H10.434V16H9.354ZM10.434 11.428H12.174C12.646 11.428 13.022 11.284 13.302 10.996C13.59 10.7 13.734 10.308 13.734 9.82C13.734 9.324 13.59 8.932 13.302 8.644C13.022 8.356 12.646 8.212 12.174 8.212H10.434V11.428Z" fill="var(--color-text)" id="icon-1024-text"></path></svg><span>Item<wbr/>Value</span></a>
-<a href="components_utils_urils_interface.IDataItem.html#category" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>category?</span></a>
-<a href="components_utils_urils_interface.IDataItem.html#categoryItems" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>category<wbr/>Items?</span></a>
-</div></section></div></details></section></section>
-<section class="tsd-panel-group tsd-member-group">
-<h2>Properties</h2>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="ItemValue" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><span>Item<wbr/>Value</span><a href="#ItemValue" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></h3>
-<div class="tsd-signature">Item<wbr/>Value<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> | </span><a href="interfaces_items_interface.IItems.html" class="tsd-signature-type" data-tsd-kind="Interface">IItems</a></div>
-<div class="tsd-comment tsd-typography"><p>The value of the passed element.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/urils.interface.ts#L21">components/utils/urils.interface.ts:21</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="category" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>category</span><a href="#category" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">category<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div>
-<div class="tsd-comment tsd-typography"><p>Optional parameter. Item group category.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/urils.interface.ts#L11">components/utils/urils.interface.ts:11</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="categoryItems" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>category<wbr/>Items</span><a href="#categoryItems" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">category<wbr/>Items<span class="tsd-signature-symbol">?:</span> <a href="interfaces_items_interface.IItems.html" class="tsd-signature-type" data-tsd-kind="Interface">IItems</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></div>
-<div class="tsd-comment tsd-typography"><p>Optional parameter. Array with elements.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/urils.interface.ts#L16">components/utils/urils.interface.ts:16</a></li></ul></aside></section></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="current tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="current tsd-kind-interface tsd-parent-kind-module"><a href="components_utils_urils_interface.IDataItem.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg><span>IData<wbr/>Item</span></a>
-<ul>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="components_utils_urils_interface.IDataItem.html#ItemValue" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>Item<wbr/>Value</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="components_utils_urils_interface.IDataItem.html#category" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>category?</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="components_utils_urils_interface.IDataItem.html#categoryItems" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>category<wbr/>Items?</a></li></ul></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>IDataItem | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li>
+              <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+            </li>
+            <li><a href="components_utils_urils_interface.IDataItem.html">IDataItem</a></li>
+          </ul>
+          <h1>Interface IDataItem</h1>
+        </div>
+        <section class="tsd-panel tsd-comment">
+          <div class="tsd-comment tsd-typography">
+            <h3>Description</h3>
+            <p>Receive Item Settings.</p>
+          </div>
+        </section>
+        <section class="tsd-panel tsd-hierarchy">
+          <h4>Hierarchy</h4>
+          <ul class="tsd-hierarchy">
+            <li><span class="target">IDataItem</span></li>
+          </ul>
+        </section>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a
+                href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/urils.interface.ts#L6"
+                >components/utils/urils.interface.ts:6</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <details class="tsd-index-content tsd-index-accordion" open>
+              <summary class="tsd-accordion-summary tsd-index-summary">
+                <h5
+                  class="tsd-index-heading uppercase"
+                  role="button"
+                  aria-expanded="false"
+                  tabindex="0"
+                >
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                    <path
+                      d="M1.5 5.50969L8 11.6609L14.5 5.50969L12.5466 3.66086L8 7.96494L3.45341 3.66086L1.5 5.50969Z"
+                      fill="var(--color-text)"
+                    ></path>
+                  </svg>
+                  Index
+                </h5>
+              </summary>
+              <div class="tsd-accordion-details">
+                <section class="tsd-index-section">
+                  <h3 class="tsd-index-heading">Properties</h3>
+                  <div class="tsd-index-list">
+                    <a
+                      href="components_utils_urils_interface.IDataItem.html#ItemValue"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <rect
+                          fill="var(--color-icon-background)"
+                          stroke="#FF984D"
+                          stroke-width="1.5"
+                          x="1"
+                          y="1"
+                          width="22"
+                          height="22"
+                          rx="12"
+                          id="icon-1024-path"
+                        ></rect>
+                        <path
+                          d="M9.354 16V7.24H12.174C12.99 7.24 13.638 7.476 14.118 7.948C14.606 8.412 14.85 9.036 14.85 9.82C14.85 10.604 14.606 11.232 14.118 11.704C13.638 12.168 12.99 12.4 12.174 12.4H10.434V16H9.354ZM10.434 11.428H12.174C12.646 11.428 13.022 11.284 13.302 10.996C13.59 10.7 13.734 10.308 13.734 9.82C13.734 9.324 13.59 8.932 13.302 8.644C13.022 8.356 12.646 8.212 12.174 8.212H10.434V11.428Z"
+                          fill="var(--color-text)"
+                          id="icon-1024-text"
+                        ></path></svg
+                      ><span>Item<wbr />Value</span></a
+                    >
+                    <a
+                      href="components_utils_urils_interface.IDataItem.html#category"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>category?</span></a
+                    >
+                    <a
+                      href="components_utils_urils_interface.IDataItem.html#categoryItems"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>category<wbr />Items?</span></a
+                    >
+                  </div>
+                </section>
+              </div>
+            </details>
+          </section>
+        </section>
+        <section class="tsd-panel-group tsd-member-group">
+          <h2>Properties</h2>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="ItemValue" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <span>Item<wbr />Value</span
+              ><a href="#ItemValue" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              Item<wbr />Value<span class="tsd-signature-symbol">:</span>
+              <span class="tsd-signature-type">string</span
+              ><span class="tsd-signature-symbol"> | </span
+              ><span class="tsd-signature-type">number</span
+              ><span class="tsd-signature-symbol"> | </span
+              ><a
+                href="interfaces_items_interface.IItems.html"
+                class="tsd-signature-type"
+                data-tsd-kind="Interface"
+                >IItems</a
+              >
+            </div>
+            <div class="tsd-comment tsd-typography"><p>The value of the passed element.</p></div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/urils.interface.ts#L21"
+                    >components/utils/urils.interface.ts:21</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="category" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <code class="tsd-tag ts-flagOptional">Optional</code> <span>category</span
+              ><a href="#category" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              category<span class="tsd-signature-symbol">?:</span>
+              <span class="tsd-signature-type">string</span>
+            </div>
+            <div class="tsd-comment tsd-typography">
+              <p>Optional parameter. Item group category.</p>
+            </div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/urils.interface.ts#L11"
+                    >components/utils/urils.interface.ts:11</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="categoryItems" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <code class="tsd-tag ts-flagOptional">Optional</code> <span>category<wbr />Items</span
+              ><a href="#categoryItems" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              category<wbr />Items<span class="tsd-signature-symbol">?:</span>
+              <a
+                href="interfaces_items_interface.IItems.html"
+                class="tsd-signature-type"
+                data-tsd-kind="Interface"
+                >IItems</a
+              ><span class="tsd-signature-symbol">[]</span
+              ><span class="tsd-signature-symbol"> | </span
+              ><span class="tsd-signature-type">string</span
+              ><span class="tsd-signature-symbol">[]</span>
+            </div>
+            <div class="tsd-comment tsd-typography">
+              <p>Optional parameter. Array with elements.</p>
+            </div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/urils.interface.ts#L16"
+                    >components/utils/urils.interface.ts:16</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="current tsd-kind-interface tsd-parent-kind-module">
+              <a href="components_utils_urils_interface.IDataItem.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-interface)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-256-path"
+                  ></rect>
+                  <path
+                    d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z"
+                    fill="var(--color-text)"
+                    id="icon-256-text"
+                  ></path></svg
+                ><span>IData<wbr />Item</span></a
+              >
+              <ul>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a
+                    href="components_utils_urils_interface.IDataItem.html#ItemValue"
+                    class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >Item<wbr />Value</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a
+                    href="components_utils_urils_interface.IDataItem.html#category"
+                    class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >category?</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a
+                    href="components_utils_urils_interface.IDataItem.html#categoryItems"
+                    class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >category<wbr />Items?</a
+                  >
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/interfaces/components_utils_urils_interface.ISelectedItems.html
+++ b/docs/interfaces/components_utils_urils_interface.ISelectedItems.html
@@ -1,130 +1,660 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>ISelectedItems | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li><a href="components_utils_urils_interface.ISelectedItems.html">ISelectedItems</a></li></ul>
-<h1>Interface ISelectedItems</h1></div>
-<section class="tsd-panel tsd-comment">
-<div class="tsd-comment tsd-typography">
-<h3>Description</h3><p>Settings for select text, etc.</p>
-</div></section>
-<section class="tsd-panel tsd-hierarchy">
-<h4>Hierarchy</h4>
-<ul class="tsd-hierarchy">
-<li><span class="target">ISelectedItems</span></li></ul></section><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/urils.interface.ts#L27">components/utils/urils.interface.ts:27</a></li></ul></aside>
-<section class="tsd-panel-group tsd-index-group">
-<section class="tsd-panel tsd-index-panel">
-<details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
-<h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex=0><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M1.5 5.50969L8 11.6609L14.5 5.50969L12.5466 3.66086L8 7.96494L3.45341 3.66086L1.5 5.50969Z" fill="var(--color-text)"></path></svg> Index</h5></summary>
-<div class="tsd-accordion-details">
-<section class="tsd-index-section">
-<h3 class="tsd-index-heading">Properties</h3>
-<div class="tsd-index-list"><a href="components_utils_urils_interface.ISelectedItems.html#darkTheme" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="#FF984D" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="12" id="icon-1024-path"></rect><path d="M9.354 16V7.24H12.174C12.99 7.24 13.638 7.476 14.118 7.948C14.606 8.412 14.85 9.036 14.85 9.82C14.85 10.604 14.606 11.232 14.118 11.704C13.638 12.168 12.99 12.4 12.174 12.4H10.434V16H9.354ZM10.434 11.428H12.174C12.646 11.428 13.022 11.284 13.302 10.996C13.59 10.7 13.734 10.308 13.734 9.82C13.734 9.324 13.59 8.932 13.302 8.644C13.022 8.356 12.646 8.212 12.174 8.212H10.434V11.428Z" fill="var(--color-text)" id="icon-1024-text"></path></svg><span>dark<wbr/>Theme?</span></a>
-<a href="components_utils_urils_interface.ISelectedItems.html#indexes" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>indexes?</span></a>
-<a href="components_utils_urils_interface.ISelectedItems.html#multiselectTag" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>multiselect<wbr/>Tag?</span></a>
-<a href="components_utils_urils_interface.ISelectedItems.html#placeholder" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>placeholder?</span></a>
-<a href="components_utils_urils_interface.ISelectedItems.html#selected" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>selected?</span></a>
-<a href="components_utils_urils_interface.ISelectedItems.html#selectedItems" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>selected<wbr/>Items?</span></a>
-</div></section></div></details></section></section>
-<section class="tsd-panel-group tsd-member-group">
-<h2>Properties</h2>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="darkTheme" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>dark<wbr/>Theme</span><a href="#darkTheme" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></h3>
-<div class="tsd-signature">dark<wbr/>Theme<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span></div>
-<div class="tsd-comment tsd-typography"><p>An optional parameter that is responsible for enabling a light/dark theme by default, the dark theme is set.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/urils.interface.ts#L58">components/utils/urils.interface.ts:58</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="indexes" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>indexes</span><a href="#indexes" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">indexes<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">[]</span></div>
-<div class="tsd-comment tsd-typography"><p>Array of indexes of selected elements.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/urils.interface.ts#L47">components/utils/urils.interface.ts:47</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="multiselectTag" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>multiselect<wbr/>Tag</span><a href="#multiselectTag" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">multiselect<wbr/>Tag<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span></div>
-<div class="tsd-comment tsd-typography"><p>An optional parameter that is responsible for the behavior of the select,
-for him, *** works only in a place with a multiselect connection.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/urils.interface.ts#L53">components/utils/urils.interface.ts:53</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="placeholder" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>placeholder</span><a href="#placeholder" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">placeholder<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div>
-<div class="tsd-comment tsd-typography"><p>Placeholder  optional parameter to which the text of the select placeholder is passed.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/urils.interface.ts#L32">components/utils/urils.interface.ts:32</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="selected" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>selected</span><a href="#selected" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">selected<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div>
-<div class="tsd-comment tsd-typography"><p>An optional parameter, which is passed the element that will be selected initially in the select.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/urils.interface.ts#L37">components/utils/urils.interface.ts:37</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="selectedItems" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>selected<wbr/>Items</span><a href="#selectedItems" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">selected<wbr/>Items<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></div>
-<div class="tsd-comment tsd-typography"><p>Array of selected items from the list.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/urils.interface.ts#L42">components/utils/urils.interface.ts:42</a></li></ul></aside></section></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="current tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="current tsd-kind-interface tsd-parent-kind-module"><a href="components_utils_urils_interface.ISelectedItems.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg><span>ISelected<wbr/>Items</span></a>
-<ul>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="components_utils_urils_interface.ISelectedItems.html#darkTheme" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>dark<wbr/>Theme?</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="components_utils_urils_interface.ISelectedItems.html#indexes" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>indexes?</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="components_utils_urils_interface.ISelectedItems.html#multiselectTag" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>multiselect<wbr/>Tag?</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="components_utils_urils_interface.ISelectedItems.html#placeholder" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>placeholder?</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="components_utils_urils_interface.ISelectedItems.html#selected" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>selected?</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="components_utils_urils_interface.ISelectedItems.html#selectedItems" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>selected<wbr/>Items?</a></li></ul></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>ISelectedItems | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All moduels</a></li>
+            <li>
+              <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+            </li>
+            <li>
+              <a href="components_utils_urils_interface.ISelectedItems.html">ISelectedItems</a>
+            </li>
+          </ul>
+          <h1>Interface ISelectedItems</h1>
+        </div>
+        <section class="tsd-panel tsd-comment">
+          <div class="tsd-comment tsd-typography">
+            <h3>Description</h3>
+            <p>Settings for select text, etc.</p>
+          </div>
+        </section>
+        <section class="tsd-panel tsd-hierarchy">
+          <h4>Hierarchy</h4>
+          <ul class="tsd-hierarchy">
+            <li><span class="target">ISelectedItems</span></li>
+          </ul>
+        </section>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a
+                href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/urils.interface.ts#L27"
+                >components/utils/urils.interface.ts:27</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <details class="tsd-index-content tsd-index-accordion" open>
+              <summary class="tsd-accordion-summary tsd-index-summary">
+                <h5
+                  class="tsd-index-heading uppercase"
+                  role="button"
+                  aria-expanded="false"
+                  tabindex="0"
+                >
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                    <path
+                      d="M1.5 5.50969L8 11.6609L14.5 5.50969L12.5466 3.66086L8 7.96494L3.45341 3.66086L1.5 5.50969Z"
+                      fill="var(--color-text)"
+                    ></path>
+                  </svg>
+                  Index
+                </h5>
+              </summary>
+              <div class="tsd-accordion-details">
+                <section class="tsd-index-section">
+                  <h3 class="tsd-index-heading">Properties</h3>
+                  <div class="tsd-index-list">
+                    <a
+                      href="components_utils_urils_interface.ISelectedItems.html#indexes"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <rect
+                          fill="var(--color-icon-background)"
+                          stroke="#FF984D"
+                          stroke-width="1.5"
+                          x="1"
+                          y="1"
+                          width="22"
+                          height="22"
+                          rx="12"
+                          id="icon-1024-path"
+                        ></rect>
+                        <path
+                          d="M9.354 16V7.24H12.174C12.99 7.24 13.638 7.476 14.118 7.948C14.606 8.412 14.85 9.036 14.85 9.82C14.85 10.604 14.606 11.232 14.118 11.704C13.638 12.168 12.99 12.4 12.174 12.4H10.434V16H9.354ZM10.434 11.428H12.174C12.646 11.428 13.022 11.284 13.302 10.996C13.59 10.7 13.734 10.308 13.734 9.82C13.734 9.324 13.59 8.932 13.302 8.644C13.022 8.356 12.646 8.212 12.174 8.212H10.434V11.428Z"
+                          fill="var(--color-text)"
+                          id="icon-1024-text"
+                        ></path></svg
+                      ><span>indexes?</span></a
+                    >
+                    <a
+                      href="components_utils_urils_interface.ISelectedItems.html#multiselectTag"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>multiselect<wbr />Tag?</span></a
+                    >
+                    <a
+                      href="components_utils_urils_interface.ISelectedItems.html#placeholder"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>placeholder?</span></a
+                    >
+                    <a
+                      href="components_utils_urils_interface.ISelectedItems.html#selected"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>selected?</span></a
+                    >
+                    <a
+                      href="components_utils_urils_interface.ISelectedItems.html#selectedItems"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>selected<wbr />Items?</span></a
+                    >
+                    <a
+                      href="components_utils_urils_interface.ISelectedItems.html#theme"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>theme?</span></a
+                    >
+                  </div>
+                </section>
+              </div>
+            </details>
+          </section>
+        </section>
+        <section class="tsd-panel-group tsd-member-group">
+          <h2>Properties</h2>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="indexes" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <code class="tsd-tag ts-flagOptional">Optional</code> <span>indexes</span
+              ><a href="#indexes" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              indexes<span class="tsd-signature-symbol">?:</span>
+              <span class="tsd-signature-type">number</span
+              ><span class="tsd-signature-symbol">[]</span>
+            </div>
+            <div class="tsd-comment tsd-typography">
+              <p>Array of indexes of selected elements.</p>
+            </div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/urils.interface.ts#L47"
+                    >components/utils/urils.interface.ts:47</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="multiselectTag" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <code class="tsd-tag ts-flagOptional">Optional</code>
+              <span>multiselect<wbr />Tag</span
+              ><a href="#multiselectTag" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              multiselect<wbr />Tag<span class="tsd-signature-symbol">?:</span>
+              <span class="tsd-signature-type">boolean</span>
+            </div>
+            <div class="tsd-comment tsd-typography">
+              <p>
+                An optional parameter that is responsible for the behavior of the select, for him,
+                *** works only in a place with a multiselect connection.
+              </p>
+            </div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/urils.interface.ts#L53"
+                    >components/utils/urils.interface.ts:53</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="placeholder" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <code class="tsd-tag ts-flagOptional">Optional</code> <span>placeholder</span
+              ><a href="#placeholder" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              placeholder<span class="tsd-signature-symbol">?:</span>
+              <span class="tsd-signature-type">string</span>
+            </div>
+            <div class="tsd-comment tsd-typography">
+              <p>
+                Placeholder optional parameter to which the text of the select placeholder is
+                passed.
+              </p>
+            </div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/urils.interface.ts#L32"
+                    >components/utils/urils.interface.ts:32</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="selected" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <code class="tsd-tag ts-flagOptional">Optional</code> <span>selected</span
+              ><a href="#selected" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              selected<span class="tsd-signature-symbol">?:</span>
+              <span class="tsd-signature-type">string</span>
+            </div>
+            <div class="tsd-comment tsd-typography">
+              <p>
+                An optional parameter, which is passed the element that will be selected initially
+                in the select.
+              </p>
+            </div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/urils.interface.ts#L37"
+                    >components/utils/urils.interface.ts:37</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="selectedItems" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <code class="tsd-tag ts-flagOptional">Optional</code> <span>selected<wbr />Items</span
+              ><a href="#selectedItems" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              selected<wbr />Items<span class="tsd-signature-symbol">?:</span>
+              <span class="tsd-signature-type">string</span
+              ><span class="tsd-signature-symbol">[]</span>
+            </div>
+            <div class="tsd-comment tsd-typography">
+              <p>Array of selected items from the list.</p>
+            </div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/urils.interface.ts#L42"
+                    >components/utils/urils.interface.ts:42</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="theme" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <code class="tsd-tag ts-flagOptional">Optional</code> <span>theme</span
+              ><a href="#theme" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              theme<span class="tsd-signature-symbol">?:</span>
+              <span class="tsd-signature-type">string</span>
+            </div>
+            <div class="tsd-comment tsd-typography">
+              <p>
+                An optional parameter that is responsible for enabling a light/dark theme by
+                default, the dark theme is set.
+              </p>
+            </div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/urils.interface.ts#L58"
+                    >components/utils/urils.interface.ts:58</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="current tsd-kind-interface tsd-parent-kind-module">
+              <a href="components_utils_urils_interface.ISelectedItems.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-interface)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-256-path"
+                  ></rect>
+                  <path
+                    d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z"
+                    fill="var(--color-text)"
+                    id="icon-256-text"
+                  ></path></svg
+                ><span>ISelected<wbr />Items</span></a
+              >
+              <ul>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a
+                    href="components_utils_urils_interface.ISelectedItems.html#indexes"
+                    class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >indexes?</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a
+                    href="components_utils_urils_interface.ISelectedItems.html#multiselectTag"
+                    class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >multiselect<wbr />Tag?</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a
+                    href="components_utils_urils_interface.ISelectedItems.html#placeholder"
+                    class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >placeholder?</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a
+                    href="components_utils_urils_interface.ISelectedItems.html#selected"
+                    class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >selected?</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a
+                    href="components_utils_urils_interface.ISelectedItems.html#selectedItems"
+                    class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >selected<wbr />Items?</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a
+                    href="components_utils_urils_interface.ISelectedItems.html#theme"
+                    class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >theme?</a
+                  >
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/interfaces/interfaces_cg_select_interface.ICgSelect.html
+++ b/docs/interfaces/interfaces_cg_select_interface.ICgSelect.html
--- a/docs/interfaces/interfaces_cg_select_interface.IStyle.html
+++ b/docs/interfaces/interfaces_cg_select_interface.IStyle.html
@@ -1,138 +1,677 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>IStyle | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-select.interface</a></li>
-<li><a href="interfaces_cg_select_interface.IStyle.html">IStyle</a></li></ul>
-<h1>Interface IStyle</h1></div>
-<section class="tsd-panel tsd-comment">
-<div class="tsd-comment tsd-typography">
-<h3>Description</h3><p>Style Settings.</p>
-</div></section>
-<section class="tsd-panel tsd-hierarchy">
-<h4>Hierarchy</h4>
-<ul class="tsd-hierarchy">
-<li><span class="target">IStyle</span></li></ul></section><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/cg-select.interface.ts#L100">interfaces/cg-select.interface.ts:100</a></li></ul></aside>
-<section class="tsd-panel-group tsd-index-group">
-<section class="tsd-panel tsd-index-panel">
-<details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
-<h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex=0><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M1.5 5.50969L8 11.6609L14.5 5.50969L12.5466 3.66086L8 7.96494L3.45341 3.66086L1.5 5.50969Z" fill="var(--color-text)"></path></svg> Index</h5></summary>
-<div class="tsd-accordion-details">
-<section class="tsd-index-section">
-<h3 class="tsd-index-heading">Properties</h3>
-<div class="tsd-index-list"><a href="interfaces_cg_select_interface.IStyle.html#caret" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="#FF984D" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="12" id="icon-1024-path"></rect><path d="M9.354 16V7.24H12.174C12.99 7.24 13.638 7.476 14.118 7.948C14.606 8.412 14.85 9.036 14.85 9.82C14.85 10.604 14.606 11.232 14.118 11.704C13.638 12.168 12.99 12.4 12.174 12.4H10.434V16H9.354ZM10.434 11.428H12.174C12.646 11.428 13.022 11.284 13.302 10.996C13.59 10.7 13.734 10.308 13.734 9.82C13.734 9.324 13.59 8.932 13.302 8.644C13.022 8.356 12.646 8.212 12.174 8.212H10.434V11.428Z" fill="var(--color-text)" id="icon-1024-text"></path></svg><span>caret?</span></a>
-<a href="interfaces_cg_select_interface.IStyle.html#chips" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>chips?</span></a>
-<a href="interfaces_cg_select_interface.IStyle.html#head" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>head?</span></a>
-<a href="interfaces_cg_select_interface.IStyle.html#lable" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>lable?</span></a>
-<a href="interfaces_cg_select_interface.IStyle.html#list" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>list?</span></a>
-<a href="interfaces_cg_select_interface.IStyle.html#placeholder" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>placeholder?</span></a>
-<a href="interfaces_cg_select_interface.IStyle.html#search" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>search?</span></a>
-</div></section></div></details></section></section>
-<section class="tsd-panel-group tsd-member-group">
-<h2>Properties</h2>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="caret" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>caret</span><a href="#caret" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></h3>
-<div class="tsd-signature">caret<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">object</span></div>
-<div class="tsd-comment tsd-typography"><p>Carriage customization.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/cg-select.interface.ts#L110">interfaces/cg-select.interface.ts:110</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="chips" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>chips</span><a href="#chips" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">chips<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">object</span></div>
-<div class="tsd-comment tsd-typography"><p>Chips customization with selected elements.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/cg-select.interface.ts#L135">interfaces/cg-select.interface.ts:135</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="head" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>head</span><a href="#head" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">head<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">object</span></div>
-<div class="tsd-comment tsd-typography"><p>Select button customization.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/cg-select.interface.ts#L105">interfaces/cg-select.interface.ts:105</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="lable" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>lable</span><a href="#lable" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">lable<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">object</span></div>
-<div class="tsd-comment tsd-typography"><p>Lable select customization.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/cg-select.interface.ts#L120">interfaces/cg-select.interface.ts:120</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="list" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>list</span><a href="#list" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">list<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">object</span></div>
-<div class="tsd-comment tsd-typography"><p>Sheet customization with a selection of elements.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/cg-select.interface.ts#L125">interfaces/cg-select.interface.ts:125</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="placeholder" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>placeholder</span><a href="#placeholder" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">placeholder<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">object</span></div>
-<div class="tsd-comment tsd-typography"><p>Customization placeholder.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/cg-select.interface.ts#L115">interfaces/cg-select.interface.ts:115</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="search" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>search</span><a href="#search" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">search<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">object</span></div>
-<div class="tsd-comment tsd-typography"><p>Search customization.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/cg-select.interface.ts#L130">interfaces/cg-select.interface.ts:130</a></li></ul></aside></section></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="current tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="current tsd-kind-interface tsd-parent-kind-module"><a href="interfaces_cg_select_interface.IStyle.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg><span>IStyle</span></a>
-<ul>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="interfaces_cg_select_interface.IStyle.html#caret" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>caret?</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="interfaces_cg_select_interface.IStyle.html#chips" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>chips?</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="interfaces_cg_select_interface.IStyle.html#head" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>head?</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="interfaces_cg_select_interface.IStyle.html#lable" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>lable?</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="interfaces_cg_select_interface.IStyle.html#list" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>list?</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="interfaces_cg_select_interface.IStyle.html#placeholder" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>placeholder?</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="interfaces_cg_select_interface.IStyle.html#search" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>search?</a></li></ul></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>IStyle | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li>
+              <a href="../modules/interfaces_cg_select_interface.html">Cg-select.interface</a>
+            </li>
+            <li><a href="interfaces_cg_select_interface.IStyle.html">IStyle</a></li>
+          </ul>
+          <h1>Interface IStyle</h1>
+        </div>
+        <section class="tsd-panel tsd-comment">
+          <div class="tsd-comment tsd-typography">
+            <h3>Description</h3>
+            <p>Style Settings.</p>
+          </div>
+        </section>
+        <section class="tsd-panel tsd-hierarchy">
+          <h4>Hierarchy</h4>
+          <ul class="tsd-hierarchy">
+            <li><span class="target">IStyle</span></li>
+          </ul>
+        </section>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a
+                href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/cg-select.interface.ts#L100"
+                >interfaces/cg-select.interface.ts:100</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <details class="tsd-index-content tsd-index-accordion" open>
+              <summary class="tsd-accordion-summary tsd-index-summary">
+                <h5
+                  class="tsd-index-heading uppercase"
+                  role="button"
+                  aria-expanded="false"
+                  tabindex="0"
+                >
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                    <path
+                      d="M1.5 5.50969L8 11.6609L14.5 5.50969L12.5466 3.66086L8 7.96494L3.45341 3.66086L1.5 5.50969Z"
+                      fill="var(--color-text)"
+                    ></path>
+                  </svg>
+                  Index
+                </h5>
+              </summary>
+              <div class="tsd-accordion-details">
+                <section class="tsd-index-section">
+                  <h3 class="tsd-index-heading">Properties</h3>
+                  <div class="tsd-index-list">
+                    <a
+                      href="interfaces_cg_select_interface.IStyle.html#caret"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <rect
+                          fill="var(--color-icon-background)"
+                          stroke="#FF984D"
+                          stroke-width="1.5"
+                          x="1"
+                          y="1"
+                          width="22"
+                          height="22"
+                          rx="12"
+                          id="icon-1024-path"
+                        ></rect>
+                        <path
+                          d="M9.354 16V7.24H12.174C12.99 7.24 13.638 7.476 14.118 7.948C14.606 8.412 14.85 9.036 14.85 9.82C14.85 10.604 14.606 11.232 14.118 11.704C13.638 12.168 12.99 12.4 12.174 12.4H10.434V16H9.354ZM10.434 11.428H12.174C12.646 11.428 13.022 11.284 13.302 10.996C13.59 10.7 13.734 10.308 13.734 9.82C13.734 9.324 13.59 8.932 13.302 8.644C13.022 8.356 12.646 8.212 12.174 8.212H10.434V11.428Z"
+                          fill="var(--color-text)"
+                          id="icon-1024-text"
+                        ></path></svg
+                      ><span>caret?</span></a
+                    >
+                    <a
+                      href="interfaces_cg_select_interface.IStyle.html#chips"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>chips?</span></a
+                    >
+                    <a
+                      href="interfaces_cg_select_interface.IStyle.html#head"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>head?</span></a
+                    >
+                    <a
+                      href="interfaces_cg_select_interface.IStyle.html#lable"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>lable?</span></a
+                    >
+                    <a
+                      href="interfaces_cg_select_interface.IStyle.html#list"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>list?</span></a
+                    >
+                    <a
+                      href="interfaces_cg_select_interface.IStyle.html#placeholder"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>placeholder?</span></a
+                    >
+                    <a
+                      href="interfaces_cg_select_interface.IStyle.html#search"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>search?</span></a
+                    >
+                  </div>
+                </section>
+              </div>
+            </details>
+          </section>
+        </section>
+        <section class="tsd-panel-group tsd-member-group">
+          <h2>Properties</h2>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="caret" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <code class="tsd-tag ts-flagOptional">Optional</code> <span>caret</span
+              ><a href="#caret" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              caret<span class="tsd-signature-symbol">?:</span>
+              <span class="tsd-signature-type">object</span>
+            </div>
+            <div class="tsd-comment tsd-typography"><p>Carriage customization.</p></div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/cg-select.interface.ts#L110"
+                    >interfaces/cg-select.interface.ts:110</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="chips" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <code class="tsd-tag ts-flagOptional">Optional</code> <span>chips</span
+              ><a href="#chips" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              chips<span class="tsd-signature-symbol">?:</span>
+              <span class="tsd-signature-type">object</span>
+            </div>
+            <div class="tsd-comment tsd-typography">
+              <p>Chips customization with selected elements.</p>
+            </div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/cg-select.interface.ts#L135"
+                    >interfaces/cg-select.interface.ts:135</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="head" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <code class="tsd-tag ts-flagOptional">Optional</code> <span>head</span
+              ><a href="#head" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              head<span class="tsd-signature-symbol">?:</span>
+              <span class="tsd-signature-type">object</span>
+            </div>
+            <div class="tsd-comment tsd-typography"><p>Select button customization.</p></div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/cg-select.interface.ts#L105"
+                    >interfaces/cg-select.interface.ts:105</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="lable" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <code class="tsd-tag ts-flagOptional">Optional</code> <span>lable</span
+              ><a href="#lable" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              lable<span class="tsd-signature-symbol">?:</span>
+              <span class="tsd-signature-type">object</span>
+            </div>
+            <div class="tsd-comment tsd-typography"><p>Lable select customization.</p></div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/cg-select.interface.ts#L120"
+                    >interfaces/cg-select.interface.ts:120</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="list" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <code class="tsd-tag ts-flagOptional">Optional</code> <span>list</span
+              ><a href="#list" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              list<span class="tsd-signature-symbol">?:</span>
+              <span class="tsd-signature-type">object</span>
+            </div>
+            <div class="tsd-comment tsd-typography">
+              <p>Sheet customization with a selection of elements.</p>
+            </div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/cg-select.interface.ts#L125"
+                    >interfaces/cg-select.interface.ts:125</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="placeholder" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <code class="tsd-tag ts-flagOptional">Optional</code> <span>placeholder</span
+              ><a href="#placeholder" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              placeholder<span class="tsd-signature-symbol">?:</span>
+              <span class="tsd-signature-type">object</span>
+            </div>
+            <div class="tsd-comment tsd-typography"><p>Customization placeholder.</p></div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/cg-select.interface.ts#L115"
+                    >interfaces/cg-select.interface.ts:115</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="search" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <code class="tsd-tag ts-flagOptional">Optional</code> <span>search</span
+              ><a href="#search" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              search<span class="tsd-signature-symbol">?:</span>
+              <span class="tsd-signature-type">object</span>
+            </div>
+            <div class="tsd-comment tsd-typography"><p>Search customization.</p></div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/cg-select.interface.ts#L130"
+                    >interfaces/cg-select.interface.ts:130</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="current tsd-kind-interface tsd-parent-kind-module">
+              <a href="interfaces_cg_select_interface.IStyle.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-interface)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-256-path"
+                  ></rect>
+                  <path
+                    d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z"
+                    fill="var(--color-text)"
+                    id="icon-256-text"
+                  ></path></svg
+                ><span>IStyle</span></a
+              >
+              <ul>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a href="interfaces_cg_select_interface.IStyle.html#caret" class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >caret?</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a href="interfaces_cg_select_interface.IStyle.html#chips" class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >chips?</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a href="interfaces_cg_select_interface.IStyle.html#head" class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >head?</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a href="interfaces_cg_select_interface.IStyle.html#lable" class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >lable?</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a href="interfaces_cg_select_interface.IStyle.html#list" class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >list?</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a
+                    href="interfaces_cg_select_interface.IStyle.html#placeholder"
+                    class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >placeholder?</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a href="interfaces_cg_select_interface.IStyle.html#search" class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >search?</a
+                  >
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/interfaces/interfaces_items_interface.IItems.html
+++ b/docs/interfaces/interfaces_items_interface.IItems.html
@@ -1,102 +1,467 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>IItems | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li><a href="interfaces_items_interface.IItems.html">IItems</a></li></ul>
-<h1>Interface IItems</h1></div>
-<section class="tsd-panel tsd-comment">
-<div class="tsd-comment tsd-typography">
-<h3>Description</h3><p>Element structure.</p>
-</div></section>
-<section class="tsd-panel tsd-hierarchy">
-<h4>Hierarchy</h4>
-<ul class="tsd-hierarchy">
-<li><span class="target">IItems</span></li></ul></section><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/items.interface.ts#L4">interfaces/items.interface.ts:4</a></li></ul></aside>
-<section class="tsd-panel-group tsd-index-group">
-<section class="tsd-panel tsd-index-panel">
-<details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
-<h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex=0><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M1.5 5.50969L8 11.6609L14.5 5.50969L12.5466 3.66086L8 7.96494L3.45341 3.66086L1.5 5.50969Z" fill="var(--color-text)"></path></svg> Index</h5></summary>
-<div class="tsd-accordion-details">
-<section class="tsd-index-section">
-<h3 class="tsd-index-heading">Properties</h3>
-<div class="tsd-index-list"><a href="interfaces_items_interface.IItems.html#id" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="#FF984D" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="12" id="icon-1024-path"></rect><path d="M9.354 16V7.24H12.174C12.99 7.24 13.638 7.476 14.118 7.948C14.606 8.412 14.85 9.036 14.85 9.82C14.85 10.604 14.606 11.232 14.118 11.704C13.638 12.168 12.99 12.4 12.174 12.4H10.434V16H9.354ZM10.434 11.428H12.174C12.646 11.428 13.022 11.284 13.302 10.996C13.59 10.7 13.734 10.308 13.734 9.82C13.734 9.324 13.59 8.932 13.302 8.644C13.022 8.356 12.646 8.212 12.174 8.212H10.434V11.428Z" fill="var(--color-text)" id="icon-1024-text"></path></svg><span>id</span></a>
-<a href="interfaces_items_interface.IItems.html#title" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>title</span></a>
-<a href="interfaces_items_interface.IItems.html#value" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>value</span></a>
-</div></section></div></details></section></section>
-<section class="tsd-panel-group tsd-member-group">
-<h2>Properties</h2>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="id" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><span>id</span><a href="#id" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></h3>
-<div class="tsd-signature">id<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
-<div class="tsd-comment tsd-typography"><p>Unique item ID.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/items.interface.ts#L9">interfaces/items.interface.ts:9</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="title" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><span>title</span><a href="#title" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">title<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
-<div class="tsd-comment tsd-typography"><p>Element text value.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/items.interface.ts#L14">interfaces/items.interface.ts:14</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="value" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><span>value</span><a href="#value" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">value<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span></div>
-<div class="tsd-comment tsd-typography"><p>Sequence number, or other information.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/items.interface.ts#L19">interfaces/items.interface.ts:19</a></li></ul></aside></section></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="current tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="current tsd-kind-interface tsd-parent-kind-module"><a href="interfaces_items_interface.IItems.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg><span>IItems</span></a>
-<ul>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="interfaces_items_interface.IItems.html#id" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>id</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="interfaces_items_interface.IItems.html#title" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>title</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="interfaces_items_interface.IItems.html#value" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>value</a></li></ul></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>IItems | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li>
+              <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+            </li>
+            <li><a href="interfaces_items_interface.IItems.html">IItems</a></li>
+          </ul>
+          <h1>Interface IItems</h1>
+        </div>
+        <section class="tsd-panel tsd-comment">
+          <div class="tsd-comment tsd-typography">
+            <h3>Description</h3>
+            <p>Element structure.</p>
+          </div>
+        </section>
+        <section class="tsd-panel tsd-hierarchy">
+          <h4>Hierarchy</h4>
+          <ul class="tsd-hierarchy">
+            <li><span class="target">IItems</span></li>
+          </ul>
+        </section>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a
+                href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/items.interface.ts#L4"
+                >interfaces/items.interface.ts:4</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <details class="tsd-index-content tsd-index-accordion" open>
+              <summary class="tsd-accordion-summary tsd-index-summary">
+                <h5
+                  class="tsd-index-heading uppercase"
+                  role="button"
+                  aria-expanded="false"
+                  tabindex="0"
+                >
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                    <path
+                      d="M1.5 5.50969L8 11.6609L14.5 5.50969L12.5466 3.66086L8 7.96494L3.45341 3.66086L1.5 5.50969Z"
+                      fill="var(--color-text)"
+                    ></path>
+                  </svg>
+                  Index
+                </h5>
+              </summary>
+              <div class="tsd-accordion-details">
+                <section class="tsd-index-section">
+                  <h3 class="tsd-index-heading">Properties</h3>
+                  <div class="tsd-index-list">
+                    <a
+                      href="interfaces_items_interface.IItems.html#id"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <rect
+                          fill="var(--color-icon-background)"
+                          stroke="#FF984D"
+                          stroke-width="1.5"
+                          x="1"
+                          y="1"
+                          width="22"
+                          height="22"
+                          rx="12"
+                          id="icon-1024-path"
+                        ></rect>
+                        <path
+                          d="M9.354 16V7.24H12.174C12.99 7.24 13.638 7.476 14.118 7.948C14.606 8.412 14.85 9.036 14.85 9.82C14.85 10.604 14.606 11.232 14.118 11.704C13.638 12.168 12.99 12.4 12.174 12.4H10.434V16H9.354ZM10.434 11.428H12.174C12.646 11.428 13.022 11.284 13.302 10.996C13.59 10.7 13.734 10.308 13.734 9.82C13.734 9.324 13.59 8.932 13.302 8.644C13.022 8.356 12.646 8.212 12.174 8.212H10.434V11.428Z"
+                          fill="var(--color-text)"
+                          id="icon-1024-text"
+                        ></path></svg
+                      ><span>id</span></a
+                    >
+                    <a
+                      href="interfaces_items_interface.IItems.html#title"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>title</span></a
+                    >
+                    <a
+                      href="interfaces_items_interface.IItems.html#value"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>value</span></a
+                    >
+                  </div>
+                </section>
+              </div>
+            </details>
+          </section>
+        </section>
+        <section class="tsd-panel-group tsd-member-group">
+          <h2>Properties</h2>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="id" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <span>id</span
+              ><a href="#id" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              id<span class="tsd-signature-symbol">:</span>
+              <span class="tsd-signature-type">string</span>
+            </div>
+            <div class="tsd-comment tsd-typography"><p>Unique item ID.</p></div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/items.interface.ts#L9"
+                    >interfaces/items.interface.ts:9</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="title" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <span>title</span
+              ><a href="#title" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              title<span class="tsd-signature-symbol">:</span>
+              <span class="tsd-signature-type">string</span>
+            </div>
+            <div class="tsd-comment tsd-typography"><p>Element text value.</p></div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/items.interface.ts#L14"
+                    >interfaces/items.interface.ts:14</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="value" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <span>value</span
+              ><a href="#value" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              value<span class="tsd-signature-symbol">:</span>
+              <span class="tsd-signature-type">string</span
+              ><span class="tsd-signature-symbol"> | </span
+              ><span class="tsd-signature-type">number</span>
+            </div>
+            <div class="tsd-comment tsd-typography">
+              <p>Sequence number, or other information.</p>
+            </div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/items.interface.ts#L19"
+                    >interfaces/items.interface.ts:19</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="current tsd-kind-interface tsd-parent-kind-module">
+              <a href="interfaces_items_interface.IItems.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-interface)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-256-path"
+                  ></rect>
+                  <path
+                    d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z"
+                    fill="var(--color-text)"
+                    id="icon-256-text"
+                  ></path></svg
+                ><span>IItems</span></a
+              >
+              <ul>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a href="interfaces_items_interface.IItems.html#id" class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >id</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a href="interfaces_items_interface.IItems.html#title" class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >title</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a href="interfaces_items_interface.IItems.html#value" class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >value</a
+                  >
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/interfaces/interfaces_language_interface.ILanguage.html
+++ b/docs/interfaces/interfaces_language_interface.ILanguage.html
@@ -1,102 +1,471 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>ILanguage | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li><a href="interfaces_language_interface.ILanguage.html">ILanguage</a></li></ul>
-<h1>Interface ILanguage</h1></div>
-<section class="tsd-panel tsd-comment">
-<div class="tsd-comment tsd-typography">
-<h3>Description</h3><p>Settings for adding languages.</p>
-</div></section>
-<section class="tsd-panel tsd-hierarchy">
-<h4>Hierarchy</h4>
-<ul class="tsd-hierarchy">
-<li><span class="target">ILanguage</span></li></ul></section><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/language.interface.ts#L4">interfaces/language.interface.ts:4</a></li></ul></aside>
-<section class="tsd-panel-group tsd-index-group">
-<section class="tsd-panel tsd-index-panel">
-<details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
-<h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex=0><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M1.5 5.50969L8 11.6609L14.5 5.50969L12.5466 3.66086L8 7.96494L3.45341 3.66086L1.5 5.50969Z" fill="var(--color-text)"></path></svg> Index</h5></summary>
-<div class="tsd-accordion-details">
-<section class="tsd-index-section">
-<h3 class="tsd-index-heading">Properties</h3>
-<div class="tsd-index-list"><a href="interfaces_language_interface.ILanguage.html#placeholder" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="#FF984D" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="12" id="icon-1024-path"></rect><path d="M9.354 16V7.24H12.174C12.99 7.24 13.638 7.476 14.118 7.948C14.606 8.412 14.85 9.036 14.85 9.82C14.85 10.604 14.606 11.232 14.118 11.704C13.638 12.168 12.99 12.4 12.174 12.4H10.434V16H9.354ZM10.434 11.428H12.174C12.646 11.428 13.022 11.284 13.302 10.996C13.59 10.7 13.734 10.308 13.734 9.82C13.734 9.324 13.59 8.932 13.302 8.644C13.022 8.356 12.646 8.212 12.174 8.212H10.434V11.428Z" fill="var(--color-text)" id="icon-1024-text"></path></svg><span>placeholder</span></a>
-<a href="interfaces_language_interface.ILanguage.html#selectPlaceholder" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>select<wbr/>Placeholder</span></a>
-<a href="interfaces_language_interface.ILanguage.html#textInListSearch" class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg><span>text<wbr/>In<wbr/>List<wbr/>Search</span></a>
-</div></section></div></details></section></section>
-<section class="tsd-panel-group tsd-member-group">
-<h2>Properties</h2>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="placeholder" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><span>placeholder</span><a href="#placeholder" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></h3>
-<div class="tsd-signature">placeholder<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
-<div class="tsd-comment tsd-typography"><p>Search text.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/language.interface.ts#L9">interfaces/language.interface.ts:9</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="selectPlaceholder" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><span>select<wbr/>Placeholder</span><a href="#selectPlaceholder" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">select<wbr/>Placeholder<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
-<div class="tsd-comment tsd-typography"><p>Default Select Text if no placeholder or selected element is specified.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/language.interface.ts#L14">interfaces/language.interface.ts:14</a></li></ul></aside></section>
-<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="textInListSearch" class="tsd-anchor"></a>
-<h3 class="tsd-anchor-link"><span>text<wbr/>In<wbr/>List<wbr/>Search</span><a href="#textInListSearch" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
-<div class="tsd-signature">text<wbr/>In<wbr/>List<wbr/>Search<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
-<div class="tsd-comment tsd-typography"><p>Text if no match.</p>
-</div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/language.interface.ts#L19">interfaces/language.interface.ts:19</a></li></ul></aside></section></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="current tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="current tsd-kind-interface tsd-parent-kind-module"><a href="interfaces_language_interface.ILanguage.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg><span>ILanguage</span></a>
-<ul>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="interfaces_language_interface.ILanguage.html#placeholder" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>placeholder</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="interfaces_language_interface.ILanguage.html#selectPlaceholder" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>select<wbr/>Placeholder</a></li>
-<li class="tsd-kind-property tsd-parent-kind-interface"><a href="interfaces_language_interface.ILanguage.html#textInListSearch" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-1024-path"></use><use href="#icon-1024-text"></use></svg>text<wbr/>In<wbr/>List<wbr/>Search</a></li></ul></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>ILanguage | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li>
+              <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+            </li>
+            <li><a href="interfaces_language_interface.ILanguage.html">ILanguage</a></li>
+          </ul>
+          <h1>Interface ILanguage</h1>
+        </div>
+        <section class="tsd-panel tsd-comment">
+          <div class="tsd-comment tsd-typography">
+            <h3>Description</h3>
+            <p>Settings for adding languages.</p>
+          </div>
+        </section>
+        <section class="tsd-panel tsd-hierarchy">
+          <h4>Hierarchy</h4>
+          <ul class="tsd-hierarchy">
+            <li><span class="target">ILanguage</span></li>
+          </ul>
+        </section>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a
+                href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/language.interface.ts#L4"
+                >interfaces/language.interface.ts:4</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <details class="tsd-index-content tsd-index-accordion" open>
+              <summary class="tsd-accordion-summary tsd-index-summary">
+                <h5
+                  class="tsd-index-heading uppercase"
+                  role="button"
+                  aria-expanded="false"
+                  tabindex="0"
+                >
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                    <path
+                      d="M1.5 5.50969L8 11.6609L14.5 5.50969L12.5466 3.66086L8 7.96494L3.45341 3.66086L1.5 5.50969Z"
+                      fill="var(--color-text)"
+                    ></path>
+                  </svg>
+                  Index
+                </h5>
+              </summary>
+              <div class="tsd-accordion-details">
+                <section class="tsd-index-section">
+                  <h3 class="tsd-index-heading">Properties</h3>
+                  <div class="tsd-index-list">
+                    <a
+                      href="interfaces_language_interface.ILanguage.html#placeholder"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <rect
+                          fill="var(--color-icon-background)"
+                          stroke="#FF984D"
+                          stroke-width="1.5"
+                          x="1"
+                          y="1"
+                          width="22"
+                          height="22"
+                          rx="12"
+                          id="icon-1024-path"
+                        ></rect>
+                        <path
+                          d="M9.354 16V7.24H12.174C12.99 7.24 13.638 7.476 14.118 7.948C14.606 8.412 14.85 9.036 14.85 9.82C14.85 10.604 14.606 11.232 14.118 11.704C13.638 12.168 12.99 12.4 12.174 12.4H10.434V16H9.354ZM10.434 11.428H12.174C12.646 11.428 13.022 11.284 13.302 10.996C13.59 10.7 13.734 10.308 13.734 9.82C13.734 9.324 13.59 8.932 13.302 8.644C13.022 8.356 12.646 8.212 12.174 8.212H10.434V11.428Z"
+                          fill="var(--color-text)"
+                          id="icon-1024-text"
+                        ></path></svg
+                      ><span>placeholder</span></a
+                    >
+                    <a
+                      href="interfaces_language_interface.ILanguage.html#selectPlaceholder"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>select<wbr />Placeholder</span></a
+                    >
+                    <a
+                      href="interfaces_language_interface.ILanguage.html#textInListSearch"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>text<wbr />In<wbr />List<wbr />Search</span></a
+                    >
+                  </div>
+                </section>
+              </div>
+            </details>
+          </section>
+        </section>
+        <section class="tsd-panel-group tsd-member-group">
+          <h2>Properties</h2>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="placeholder" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <span>placeholder</span
+              ><a href="#placeholder" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              placeholder<span class="tsd-signature-symbol">:</span>
+              <span class="tsd-signature-type">string</span>
+            </div>
+            <div class="tsd-comment tsd-typography"><p>Search text.</p></div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/language.interface.ts#L9"
+                    >interfaces/language.interface.ts:9</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="selectPlaceholder" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <span>select<wbr />Placeholder</span
+              ><a href="#selectPlaceholder" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              select<wbr />Placeholder<span class="tsd-signature-symbol">:</span>
+              <span class="tsd-signature-type">string</span>
+            </div>
+            <div class="tsd-comment tsd-typography">
+              <p>Default Select Text if no placeholder or selected element is specified.</p>
+            </div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/language.interface.ts#L14"
+                    >interfaces/language.interface.ts:14</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="textInListSearch" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <span>text<wbr />In<wbr />List<wbr />Search</span
+              ><a href="#textInListSearch" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              text<wbr />In<wbr />List<wbr />Search<span class="tsd-signature-symbol">:</span>
+              <span class="tsd-signature-type">string</span>
+            </div>
+            <div class="tsd-comment tsd-typography"><p>Text if no match.</p></div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/language.interface.ts#L19"
+                    >interfaces/language.interface.ts:19</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="current tsd-kind-interface tsd-parent-kind-module">
+              <a href="interfaces_language_interface.ILanguage.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-interface)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-256-path"
+                  ></rect>
+                  <path
+                    d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z"
+                    fill="var(--color-text)"
+                    id="icon-256-text"
+                  ></path></svg
+                ><span>ILanguage</span></a
+              >
+              <ul>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a
+                    href="interfaces_language_interface.ILanguage.html#placeholder"
+                    class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >placeholder</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a
+                    href="interfaces_language_interface.ILanguage.html#selectPlaceholder"
+                    class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >select<wbr />Placeholder</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a
+                    href="interfaces_language_interface.ILanguage.html#textInListSearch"
+                    class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >text<wbr />In<wbr />List<wbr />Search</a
+                  >
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/interfaces/theme_interface.CustomTheme.html
+++ b/docs/interfaces/theme_interface.CustomTheme.html
@@ -0,0 +1,493 @@
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>CustomTheme | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li><a href="../modules/theme_interface.html">theme.interface</a></li>
+            <li><a href="theme_interface.CustomTheme.html">CustomTheme</a></li>
+          </ul>
+          <h1>Interface CustomTheme</h1>
+        </div>
+        <section class="tsd-panel tsd-hierarchy">
+          <h4>Hierarchy</h4>
+          <ul class="tsd-hierarchy">
+            <li><span class="target">CustomTheme</span></li>
+          </ul>
+        </section>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a
+                href="https://github.com/apuc/cg-select/blob/7a06e3a/src/components/theme/theme.interface.ts#L1"
+                >theme.interface.ts:1</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <details class="tsd-index-content tsd-index-accordion" open>
+              <summary class="tsd-accordion-summary tsd-index-summary">
+                <h5
+                  class="tsd-index-heading uppercase"
+                  role="button"
+                  aria-expanded="false"
+                  tabindex="0"
+                >
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                    <path
+                      d="M1.5 5.50969L8 11.6609L14.5 5.50969L12.5466 3.66086L8 7.96494L3.45341 3.66086L1.5 5.50969Z"
+                      fill="var(--color-text)"
+                    ></path>
+                  </svg>
+                  Index
+                </h5>
+              </summary>
+              <div class="tsd-accordion-details">
+                <section class="tsd-index-section">
+                  <h3 class="tsd-index-heading">Properties</h3>
+                  <div class="tsd-index-list">
+                    <a
+                      href="theme_interface.CustomTheme.html#name"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <rect
+                          fill="var(--color-icon-background)"
+                          stroke="#FF984D"
+                          stroke-width="1.5"
+                          x="1"
+                          y="1"
+                          width="22"
+                          height="22"
+                          rx="12"
+                          id="icon-1024-path"
+                        ></rect>
+                        <path
+                          d="M9.354 16V7.24H12.174C12.99 7.24 13.638 7.476 14.118 7.948C14.606 8.412 14.85 9.036 14.85 9.82C14.85 10.604 14.606 11.232 14.118 11.704C13.638 12.168 12.99 12.4 12.174 12.4H10.434V16H9.354ZM10.434 11.428H12.174C12.646 11.428 13.022 11.284 13.302 10.996C13.59 10.7 13.734 10.308 13.734 9.82C13.734 9.324 13.59 8.932 13.302 8.644C13.022 8.356 12.646 8.212 12.174 8.212H10.434V11.428Z"
+                          fill="var(--color-text)"
+                          id="icon-1024-text"
+                        ></path></svg
+                      ><span>name</span></a
+                    >
+                    <a
+                      href="theme_interface.CustomTheme.html#styles"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>styles</span></a
+                    >
+                  </div>
+                </section>
+              </div>
+            </details>
+          </section>
+        </section>
+        <section class="tsd-panel-group tsd-member-group">
+          <h2>Properties</h2>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="name" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <span>name</span
+              ><a href="#name" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              name<span class="tsd-signature-symbol">:</span>
+              <span class="tsd-signature-type">string</span>
+            </div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/7a06e3a/src/components/theme/theme.interface.ts#L2"
+                    >theme.interface.ts:2</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="styles" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <span>styles</span
+              ><a href="#styles" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              styles<span class="tsd-signature-symbol">:</span>
+              <span class="tsd-signature-symbol">{ </span><br /><span>    </span>caret<span
+                class="tsd-signature-symbol"
+                >?: </span
+              ><span class="tsd-signature-type">string</span
+              ><span class="tsd-signature-symbol">; </span><br /><span>    </span>chips<span
+                class="tsd-signature-symbol"
+                >?: </span
+              ><span class="tsd-signature-type">string</span
+              ><span class="tsd-signature-symbol">; </span><br /><span>    </span>head<span
+                class="tsd-signature-symbol"
+                >?: </span
+              ><span class="tsd-signature-type">string</span
+              ><span class="tsd-signature-symbol">; </span><br /><span>    </span>lable<span
+                class="tsd-signature-symbol"
+                >?: </span
+              ><span class="tsd-signature-type">string</span
+              ><span class="tsd-signature-symbol">; </span><br /><span>    </span>list<span
+                class="tsd-signature-symbol"
+                >?: </span
+              ><span class="tsd-signature-type">string</span
+              ><span class="tsd-signature-symbol">; </span><br /><span>    </span>placeholder<span
+                class="tsd-signature-symbol"
+                >?: </span
+              ><span class="tsd-signature-type">string</span
+              ><span class="tsd-signature-symbol">; </span><br /><span>    </span>search<span
+                class="tsd-signature-symbol"
+                >?: </span
+              ><span class="tsd-signature-type">string</span
+              ><span class="tsd-signature-symbol">; </span><br /><span class="tsd-signature-symbol"
+                >}</span
+              >
+            </div>
+            <div class="tsd-type-declaration">
+              <h4>Type declaration</h4>
+              <ul class="tsd-parameters">
+                <li class="tsd-parameter">
+                  <h5>
+                    <code class="tsd-tag ts-flagOptional">Optional</code> caret<span
+                      class="tsd-signature-symbol"
+                      >?: </span
+                    ><span class="tsd-signature-type">string</span>
+                  </h5>
+                </li>
+                <li class="tsd-parameter">
+                  <h5>
+                    <code class="tsd-tag ts-flagOptional">Optional</code> chips<span
+                      class="tsd-signature-symbol"
+                      >?: </span
+                    ><span class="tsd-signature-type">string</span>
+                  </h5>
+                </li>
+                <li class="tsd-parameter">
+                  <h5>
+                    <code class="tsd-tag ts-flagOptional">Optional</code> head<span
+                      class="tsd-signature-symbol"
+                      >?: </span
+                    ><span class="tsd-signature-type">string</span>
+                  </h5>
+                </li>
+                <li class="tsd-parameter">
+                  <h5>
+                    <code class="tsd-tag ts-flagOptional">Optional</code> lable<span
+                      class="tsd-signature-symbol"
+                      >?: </span
+                    ><span class="tsd-signature-type">string</span>
+                  </h5>
+                </li>
+                <li class="tsd-parameter">
+                  <h5>
+                    <code class="tsd-tag ts-flagOptional">Optional</code> list<span
+                      class="tsd-signature-symbol"
+                      >?: </span
+                    ><span class="tsd-signature-type">string</span>
+                  </h5>
+                </li>
+                <li class="tsd-parameter">
+                  <h5>
+                    <code class="tsd-tag ts-flagOptional">Optional</code> placeholder<span
+                      class="tsd-signature-symbol"
+                      >?: </span
+                    ><span class="tsd-signature-type">string</span>
+                  </h5>
+                </li>
+                <li class="tsd-parameter">
+                  <h5>
+                    <code class="tsd-tag ts-flagOptional">Optional</code> search<span
+                      class="tsd-signature-symbol"
+                      >?: </span
+                    ><span class="tsd-signature-type">string</span>
+                  </h5>
+                </li>
+              </ul>
+            </div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/7a06e3a/src/components/theme/theme.interface.ts#L3"
+                    >theme.interface.ts:3</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current selected">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+
+                    <li class="tsd-kind-module selected">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="current tsd-kind-interface tsd-parent-kind-module">
+              <a href="theme_interface.CustomTheme.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-interface)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-256-path"
+                  ></rect>
+                  <path
+                    d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z"
+                    fill="var(--color-text)"
+                    id="icon-256-text"
+                  ></path></svg
+                ><span>Custom<wbr />Theme</span></a
+              >
+              <ul>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a href="theme_interface.CustomTheme.html#name" class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >name</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a href="theme_interface.CustomTheme.html#styles" class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >styles</a
+                  >
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/interfaces/theme_interface.CustomThemeJson.html
+++ b/docs/interfaces/theme_interface.CustomThemeJson.html
@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>CustomThemeJson | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li><a href="../modules/theme_interface.html">theme.interface</a></li>
+            <li><a href="theme_interface.CustomThemeJson.html">CustomThemeJson</a></li>
+          </ul>
+          <h1>Interface CustomThemeJson</h1>
+        </div>
+        <section class="tsd-panel tsd-hierarchy">
+          <h4>Hierarchy</h4>
+          <ul class="tsd-hierarchy">
+            <li><span class="target">CustomThemeJson</span></li>
+          </ul>
+        </section>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a
+                href="https://github.com/apuc/cg-select/blob/7a06e3a/src/components/theme/theme.interface.ts#L14"
+                >theme.interface.ts:14</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <details class="tsd-index-content tsd-index-accordion" open>
+              <summary class="tsd-accordion-summary tsd-index-summary">
+                <h5
+                  class="tsd-index-heading uppercase"
+                  role="button"
+                  aria-expanded="false"
+                  tabindex="0"
+                >
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                    <path
+                      d="M1.5 5.50969L8 11.6609L14.5 5.50969L12.5466 3.66086L8 7.96494L3.45341 3.66086L1.5 5.50969Z"
+                      fill="var(--color-text)"
+                    ></path>
+                  </svg>
+                  Index
+                </h5>
+              </summary>
+              <div class="tsd-accordion-details">
+                <section class="tsd-index-section">
+                  <h3 class="tsd-index-heading">Properties</h3>
+                  <div class="tsd-index-list">
+                    <a
+                      href="theme_interface.CustomThemeJson.html#name"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <rect
+                          fill="var(--color-icon-background)"
+                          stroke="#FF984D"
+                          stroke-width="1.5"
+                          x="1"
+                          y="1"
+                          width="22"
+                          height="22"
+                          rx="12"
+                          id="icon-1024-path"
+                        ></rect>
+                        <path
+                          d="M9.354 16V7.24H12.174C12.99 7.24 13.638 7.476 14.118 7.948C14.606 8.412 14.85 9.036 14.85 9.82C14.85 10.604 14.606 11.232 14.118 11.704C13.638 12.168 12.99 12.4 12.174 12.4H10.434V16H9.354ZM10.434 11.428H12.174C12.646 11.428 13.022 11.284 13.302 10.996C13.59 10.7 13.734 10.308 13.734 9.82C13.734 9.324 13.59 8.932 13.302 8.644C13.022 8.356 12.646 8.212 12.174 8.212H10.434V11.428Z"
+                          fill="var(--color-text)"
+                          id="icon-1024-text"
+                        ></path></svg
+                      ><span>name</span></a
+                    >
+                    <a
+                      href="theme_interface.CustomThemeJson.html#styles"
+                      class="tsd-index-link tsd-kind-property tsd-parent-kind-interface"
+                      ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                        <use href="#icon-1024-path"></use>
+                        <use href="#icon-1024-text"></use></svg
+                      ><span>styles</span></a
+                    >
+                  </div>
+                </section>
+              </div>
+            </details>
+          </section>
+        </section>
+        <section class="tsd-panel-group tsd-member-group">
+          <h2>Properties</h2>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="name" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <span>name</span
+              ><a href="#name" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path>
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"
+                    id="icon-anchor-b"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"
+                    id="icon-anchor-c"
+                  ></path></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              name<span class="tsd-signature-symbol">:</span>
+              <span class="tsd-signature-type">string</span>
+            </div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/7a06e3a/src/components/theme/theme.interface.ts#L15"
+                    >theme.interface.ts:15</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+          <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+            <a id="styles" class="tsd-anchor"></a>
+            <h3 class="tsd-anchor-link">
+              <span>styles</span
+              ><a href="#styles" aria-label="Permalink" class="tsd-anchor-icon"
+                ><svg
+                  class="icon icon-tabler icon-tabler-link"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <use href="#icon-anchor-a"></use>
+                  <use href="#icon-anchor-b"></use>
+                  <use href="#icon-anchor-c"></use></svg
+              ></a>
+            </h3>
+            <div class="tsd-signature">
+              styles<span class="tsd-signature-symbol">:</span>
+              <span class="tsd-signature-symbol">{ </span><br /><span>    </span>caret<span
+                class="tsd-signature-symbol"
+                >?: </span
+              ><span class="tsd-signature-type">object</span
+              ><span class="tsd-signature-symbol">; </span><br /><span>    </span>head<span
+                class="tsd-signature-symbol"
+                >?: </span
+              ><span class="tsd-signature-type">object</span
+              ><span class="tsd-signature-symbol">; </span><br /><span>    </span>lable<span
+                class="tsd-signature-symbol"
+                >?: </span
+              ><span class="tsd-signature-type">object</span
+              ><span class="tsd-signature-symbol">; </span><br /><span>    </span>list<span
+                class="tsd-signature-symbol"
+                >?: </span
+              ><span class="tsd-signature-type">object</span
+              ><span class="tsd-signature-symbol">; </span><br /><span>    </span>placeholder<span
+                class="tsd-signature-symbol"
+                >?: </span
+              ><span class="tsd-signature-type">object</span
+              ><span class="tsd-signature-symbol">; </span><br /><span>    </span>search<span
+                class="tsd-signature-symbol"
+                >?: </span
+              ><span class="tsd-signature-type">object</span
+              ><span class="tsd-signature-symbol">; </span><br /><span class="tsd-signature-symbol"
+                >}</span
+              >
+            </div>
+            <div class="tsd-type-declaration">
+              <h4>Type declaration</h4>
+              <ul class="tsd-parameters">
+                <li class="tsd-parameter">
+                  <h5>
+                    <code class="tsd-tag ts-flagOptional">Optional</code> caret<span
+                      class="tsd-signature-symbol"
+                      >?: </span
+                    ><span class="tsd-signature-type">object</span>
+                  </h5>
+                </li>
+                <li class="tsd-parameter">
+                  <h5>
+                    <code class="tsd-tag ts-flagOptional">Optional</code> head<span
+                      class="tsd-signature-symbol"
+                      >?: </span
+                    ><span class="tsd-signature-type">object</span>
+                  </h5>
+                </li>
+                <li class="tsd-parameter">
+                  <h5>
+                    <code class="tsd-tag ts-flagOptional">Optional</code> lable<span
+                      class="tsd-signature-symbol"
+                      >?: </span
+                    ><span class="tsd-signature-type">object</span>
+                  </h5>
+                </li>
+                <li class="tsd-parameter">
+                  <h5>
+                    <code class="tsd-tag ts-flagOptional">Optional</code> list<span
+                      class="tsd-signature-symbol"
+                      >?: </span
+                    ><span class="tsd-signature-type">object</span>
+                  </h5>
+                </li>
+                <li class="tsd-parameter">
+                  <h5>
+                    <code class="tsd-tag ts-flagOptional">Optional</code> placeholder<span
+                      class="tsd-signature-symbol"
+                      >?: </span
+                    ><span class="tsd-signature-type">object</span>
+                  </h5>
+                </li>
+                <li class="tsd-parameter">
+                  <h5>
+                    <code class="tsd-tag ts-flagOptional">Optional</code> search<span
+                      class="tsd-signature-symbol"
+                      >?: </span
+                    ><span class="tsd-signature-type">object</span>
+                  </h5>
+                </li>
+              </ul>
+            </div>
+            <aside class="tsd-sources">
+              <ul>
+                <li>
+                  Defined in
+                  <a
+                    href="https://github.com/apuc/cg-select/blob/7a06e3a/src/components/theme/theme.interface.ts#L16"
+                    >theme.interface.ts:16</a
+                  >
+                </li>
+              </ul>
+            </aside>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current selected">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+
+                    <li class="tsd-kind-module selected">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="current tsd-kind-interface tsd-parent-kind-module">
+              <a href="theme_interface.CustomThemeJson.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-interface)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-256-path"
+                  ></rect>
+                  <path
+                    d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z"
+                    fill="var(--color-text)"
+                    id="icon-256-text"
+                  ></path></svg
+                ><span>Custom<wbr />Theme<wbr />Json</span></a
+              >
+              <ul>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a href="theme_interface.CustomThemeJson.html#name" class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >name</a
+                  >
+                </li>
+                <li class="tsd-kind-property tsd-parent-kind-interface">
+                  <a href="theme_interface.CustomThemeJson.html#styles" class="tsd-index-link"
+                    ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                      <use href="#icon-1024-path"></use>
+                      <use href="#icon-1024-text"></use></svg
+                    >styles</a
+                  >
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/modules.html
+++ b/docs/modules.html
@@ -1,62 +1,308 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script async src="assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base=".">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<h2>cg-select</h2></div>
-<section class="tsd-panel-group tsd-index-group">
-<section class="tsd-panel tsd-index-panel">
-<h3 class="tsd-index-heading uppercase">Index</h3>
-<section class="tsd-index-section">
-<h3 class="tsd-index-heading">Modules</h3>
-<div class="tsd-index-list"><a href="modules/Utils.html" class="tsd-index-link tsd-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-namespace)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-4-path"></rect><path d="M9.33 16V7.24H10.77L13.446 14.74C13.43 14.54 13.41 14.296 13.386 14.008C13.37 13.712 13.354 13.404 13.338 13.084C13.33 12.756 13.326 12.448 13.326 12.16V7.24H14.37V16H12.93L10.266 8.5C10.282 8.692 10.298 8.936 10.314 9.232C10.33 9.52 10.342 9.828 10.35 10.156C10.366 10.476 10.374 10.784 10.374 11.08V16H9.33Z" fill="var(--color-text)" id="icon-4-text"></path></svg><span>Utils</span></a>
-<a href="modules/cg_select.html" class="tsd-index-link tsd-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4-path"></use><use href="#icon-4-text"></use></svg><span>cg-<wbr/>select</span></a>
-<a href="modules/components_create_element_create_element.html" class="tsd-index-link tsd-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4-path"></use><use href="#icon-4-text"></use></svg><span>components/create-<wbr/>element/create-<wbr/>element</span></a>
-<a href="modules/components_create_element_create_element_interface.html" class="tsd-index-link tsd-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4-path"></use><use href="#icon-4-text"></use></svg><span>components/create-<wbr/>element/create-<wbr/>element.interface</span></a>
-<a href="modules/components_utils_urils_interface.html" class="tsd-index-link tsd-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4-path"></use><use href="#icon-4-text"></use></svg><span>components/utils/urils.interface</span></a>
-<a href="modules/interfaces_cg_select_interface.html" class="tsd-index-link tsd-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4-path"></use><use href="#icon-4-text"></use></svg><span>interfaces/cg-<wbr/>select.interface</span></a>
-<a href="modules/interfaces_items_interface.html" class="tsd-index-link tsd-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4-path"></use><use href="#icon-4-text"></use></svg><span>interfaces/items.interface</span></a>
-<a href="modules/interfaces_language_interface.html" class="tsd-index-link tsd-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4-path"></use><use href="#icon-4-text"></use></svg><span>interfaces/language.interface</span></a>
-<a href="modules/language_language.html" class="tsd-index-link tsd-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4-path"></use><use href="#icon-4-text"></use></svg><span>language/language</span></a>
-</div></section></section></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current selected"><a href="modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="modules/Utils.html">Utils</a></li>
-<li class="selected tsd-kind-module"><a href="modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="assets/style.css" />
+    <link rel="stylesheet" href="assets/highlight.css" />
+    <script async src="assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base=".">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <h2>Modules in CG-Select</h2>
+        </div>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <section class="tsd-index-section">
+              <h3 class="tsd-index-heading">Main</h3>
+              <div class="tsd-index-list">
+                <a href="modules/cg_select.html" class="tsd-index-link tsd-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-4-path"></use>
+                    <use href="#icon-4-text"></use></svg
+                  ><span>CG-<wbr />Select</span></a
+                >
+
+                <a
+                  href="modules/interfaces_cg_select_interface.html"
+                  class="tsd-index-link tsd-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-4-path"></use>
+                    <use href="#icon-4-text"></use></svg
+                  ><span>cg-<wbr />select.interface</span></a
+                >
+                <a
+                  href="modules/interfaces_items_interface.html"
+                  class="tsd-index-link tsd-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-4-path"></use>
+                    <use href="#icon-4-text"></use></svg
+                  ><span>items.interface</span></a
+                >
+              </div>
+              <h4 class="tsd-index-heading">Utils</h4>
+              <div class="tsd-index-list">
+                <a href="modules/Utils.html" class="tsd-index-link tsd-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <rect
+                      fill="var(--color-icon-background)"
+                      stroke="var(--color-ts-namespace)"
+                      stroke-width="1.5"
+                      x="1"
+                      y="1"
+                      width="22"
+                      height="22"
+                      rx="6"
+                      id="icon-4-path"
+                    ></rect>
+                    <path
+                      d="M9.33 16V7.24H10.77L13.446 14.74C13.43 14.54 13.41 14.296 13.386 14.008C13.37 13.712 13.354 13.404 13.338 13.084C13.33 12.756 13.326 12.448 13.326 12.16V7.24H14.37V16H12.93L10.266 8.5C10.282 8.692 10.298 8.936 10.314 9.232C10.33 9.52 10.342 9.828 10.35 10.156C10.366 10.476 10.374 10.784 10.374 11.08V16H9.33Z"
+                      fill="var(--color-text)"
+                      id="icon-4-text"
+                    ></path></svg
+                  ><span>Utils</span></a
+                >
+                <a
+                  href="modules/components_utils_urils_interface.html"
+                  class="tsd-index-link tsd-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-4-path"></use>
+                    <use href="#icon-4-text"></use></svg
+                  ><span>utils.interface</span></a
+                >
+              </div>
+
+              <h4 class="tsd-index-heading">Create-element</h4>
+              <div class="tsd-index-list">
+                <a
+                  href="modules/components_create_element_create_element.html"
+                  class="tsd-index-link tsd-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-4-path"></use>
+                    <use href="#icon-4-text"></use></svg
+                  ><span>create-<wbr />element</span></a
+                >
+                <a
+                  href="modules/components_create_element_create_element_interface.html"
+                  class="tsd-index-link tsd-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-4-path"></use>
+                    <use href="#icon-4-text"></use></svg
+                  ><span>create-<wbr />element.interface</span></a
+                >
+              </div>
+
+              <h4 class="tsd-index-heading">Language</h4>
+              <div class="tsd-index-list">
+                <a href="modules/language_language.html" class="tsd-index-link tsd-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-4-path"></use>
+                    <use href="#icon-4-text"></use></svg
+                  ><span>language</span></a
+                >
+                <a
+                  href="modules/interfaces_language_interface.html"
+                  class="tsd-index-link tsd-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-4-path"></use>
+                    <use href="#icon-4-text"></use></svg
+                  ><span>language.interface</span></a
+                >
+              </div>
+
+              <h4 class="tsd-index-heading">Change-Theme</h4>
+              <div class="tsd-index-list">
+                <a href="modules/components_theme_theme.html" class="tsd-index-link tsd-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-4-path"></use>
+                    <use href="#icon-4-text"></use></svg
+                  ><span>theme</span></a
+                >
+              </div>
+            </section>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current selected">
+                  <a href="modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="assets/main.js"></script>
+  </body>
+</html>
--- a/docs/modules/Utils.html
+++ b/docs/modules/Utils.html
@@ -1,83 +1,393 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Utils | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="Utils.html">Utils</a></li></ul>
-<h1>Module Utils</h1></div>
-<section class="tsd-panel tsd-comment">
-<div class="tsd-comment tsd-typography"><p>Utils module</p>
-</div></section><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/utils.ts#L5">components/utils/utils.ts:5</a></li></ul></aside>
-<section class="tsd-panel-group">
-<section class="tsd-panel tsd-typography"></section></section>
-<section class="tsd-panel-group tsd-index-group">
-<section class="tsd-panel tsd-index-panel">
-<h3 class="tsd-index-heading uppercase">Index</h3>
-<section class="tsd-index-section">
-<h3 class="tsd-index-heading">Functions</h3>
-<div class="tsd-index-list"><a href="../functions/Utils.checkItemStruct.html" class="tsd-index-link tsd-kind-function tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg><span>check<wbr/>Item<wbr/>Struct</span></a>
-<a href="../functions/Utils.clearSelect.html" class="tsd-index-link tsd-kind-function tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>clear<wbr/>Select</span></a>
-<a href="../functions/Utils.createSelected.html" class="tsd-index-link tsd-kind-function tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>create<wbr/>Selected</span></a>
-<a href="../functions/Utils.customStyles.html" class="tsd-index-link tsd-kind-function tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>custom<wbr/>Styles</span></a>
-<a href="../functions/Utils.customStylesFormat.html" class="tsd-index-link tsd-kind-function tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>custom<wbr/>Styles<wbr/>Format</span></a>
-<a href="../functions/Utils.getFormatItem.html" class="tsd-index-link tsd-kind-function tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>get<wbr/>Format<wbr/>Item</span></a>
-<a href="../functions/Utils.getSelectText.html" class="tsd-index-link tsd-kind-function tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>get<wbr/>Select<wbr/>Text</span></a>
-<a href="../functions/Utils.nativeOptionMultiple.html" class="tsd-index-link tsd-kind-function tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>native<wbr/>Option<wbr/>Multiple</span></a>
-<a href="../functions/Utils.nativeOptionOrdinary.html" class="tsd-index-link tsd-kind-function tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>native<wbr/>Option<wbr/>Ordinary</span></a>
-</div></section></section></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="current selected tsd-kind-module"><a href="Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="../functions/Utils.checkItemStruct.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>check<wbr/>Item<wbr/>Struct</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="../functions/Utils.clearSelect.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>clear<wbr/>Select</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="../functions/Utils.createSelected.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Selected</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="../functions/Utils.customStyles.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="../functions/Utils.customStylesFormat.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>custom<wbr/>Styles<wbr/>Format</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="../functions/Utils.getFormatItem.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Format<wbr/>Item</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="../functions/Utils.getSelectText.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>get<wbr/>Select<wbr/>Text</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="../functions/Utils.nativeOptionMultiple.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Multiple</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="../functions/Utils.nativeOptionOrdinary.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>native<wbr/>Option<wbr/>Ordinary</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>Utils | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li><a href="Utils.html">Utils</a></li>
+          </ul>
+          <h1>Module Utils</h1>
+        </div>
+        <section class="tsd-panel tsd-comment">
+          <div class="tsd-comment tsd-typography"><p>Utils module</p></div>
+        </section>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a
+                href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/utils.ts#L5"
+                >components/utils/utils.ts:5</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group">
+          <section class="tsd-panel tsd-typography"></section>
+        </section>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <h3 class="tsd-index-heading uppercase">Index</h3>
+            <section class="tsd-index-section">
+              <h3 class="tsd-index-heading">Functions</h3>
+              <div class="tsd-index-list">
+                <a
+                  href="../functions/Utils.checkItemStruct.html"
+                  class="tsd-index-link tsd-kind-function tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <rect
+                      fill="var(--color-icon-background)"
+                      stroke="var(--color-ts-function)"
+                      stroke-width="1.5"
+                      x="1"
+                      y="1"
+                      width="22"
+                      height="22"
+                      rx="6"
+                      id="icon-64-path"
+                    ></rect>
+                    <path
+                      d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z"
+                      fill="var(--color-text)"
+                      id="icon-64-text"
+                    ></path></svg
+                  ><span>check<wbr />Item<wbr />Struct</span></a
+                >
+                <a
+                  href="../functions/Utils.clearSelect.html"
+                  class="tsd-index-link tsd-kind-function tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-64-path"></use>
+                    <use href="#icon-64-text"></use></svg
+                  ><span>clear<wbr />Select</span></a
+                >
+                <a
+                  href="../functions/Utils.createSelected.html"
+                  class="tsd-index-link tsd-kind-function tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-64-path"></use>
+                    <use href="#icon-64-text"></use></svg
+                  ><span>create<wbr />Selected</span></a
+                >
+                <a
+                  href="../functions/Utils.customStyles.html"
+                  class="tsd-index-link tsd-kind-function tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-64-path"></use>
+                    <use href="#icon-64-text"></use></svg
+                  ><span>custom<wbr />Styles</span></a
+                >
+                <a
+                  href="../functions/Utils.customStylesFormat.html"
+                  class="tsd-index-link tsd-kind-function tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-64-path"></use>
+                    <use href="#icon-64-text"></use></svg
+                  ><span>custom<wbr />Styles<wbr />Format</span></a
+                >
+                <a
+                  href="../functions/Utils.getFormatItem.html"
+                  class="tsd-index-link tsd-kind-function tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-64-path"></use>
+                    <use href="#icon-64-text"></use></svg
+                  ><span>get<wbr />Format<wbr />Item</span></a
+                >
+                <a
+                  href="../functions/Utils.getSelectText.html"
+                  class="tsd-index-link tsd-kind-function tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-64-path"></use>
+                    <use href="#icon-64-text"></use></svg
+                  ><span>get<wbr />Select<wbr />Text</span></a
+                >
+                <a
+                  href="../functions/Utils.nativeOptionMultiple.html"
+                  class="tsd-index-link tsd-kind-function tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-64-path"></use>
+                    <use href="#icon-64-text"></use></svg
+                  ><span>native<wbr />Option<wbr />Multiple</span></a
+                >
+                <a
+                  href="../functions/Utils.nativeOptionOrdinary.html"
+                  class="tsd-index-link tsd-kind-function tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-64-path"></use>
+                    <use href="#icon-64-text"></use></svg
+                  ><span>native<wbr />Option<wbr />Ordinary</span></a
+                >
+              </div>
+            </section>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/Utils.html">Utils</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">Language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="../functions/Utils.checkItemStruct.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >check<wbr />Item<wbr />Struct</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="../functions/Utils.clearSelect.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >clear<wbr />Select</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="../functions/Utils.createSelected.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Selected</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="../functions/Utils.customStyles.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="../functions/Utils.customStylesFormat.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >custom<wbr />Styles<wbr />Format</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="../functions/Utils.getFormatItem.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Format<wbr />Item</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="../functions/Utils.getSelectText.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >get<wbr />Select<wbr />Text</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="../functions/Utils.nativeOptionMultiple.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Multiple</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="../functions/Utils.nativeOptionOrdinary.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >native<wbr />Option<wbr />Ordinary</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/modules/cg_select.html
+++ b/docs/modules/cg_select.html
@@ -1,64 +1,258 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="cg_select.html">cg-select</a></li></ul>
-<h1>Module cg-select</h1></div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/cg-select.ts#L1">cg-select.ts:1</a></li></ul></aside>
-<section class="tsd-panel-group">
-<section class="tsd-panel tsd-typography"></section></section>
-<section class="tsd-panel-group tsd-index-group">
-<section class="tsd-panel tsd-index-panel">
-<h3 class="tsd-index-heading uppercase">Index</h3>
-<section class="tsd-index-section">
-<h3 class="tsd-index-heading">Classes</h3>
-<div class="tsd-index-list"><a href="../classes/cg_select.CGSelect.html" class="tsd-index-link tsd-kind-class tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg><span>CGSelect</span></a>
-</div></section></section></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="Utils.html">Utils</a></li>
-<li class="current selected tsd-kind-module"><a href="cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/cg_select.CGSelect.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>CGSelect</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li><a href="cg_select.html">Cg-select</a></li>
+          </ul>
+          <h1>Module cg-select</h1>
+        </div>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a href="https://github.com/apuc/cg-select/blob/31b10e2/src/cg-select.ts#L1"
+                >cg-select.ts:1</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group">
+          <section class="tsd-panel tsd-typography"></section>
+        </section>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <h3 class="tsd-index-heading uppercase">Index</h3>
+            <section class="tsd-index-section">
+              <h3 class="tsd-index-heading">Classes</h3>
+              <div class="tsd-index-list">
+                <a
+                  href="../classes/cg_select.CGSelect.html"
+                  class="tsd-index-link tsd-kind-class tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <rect
+                      fill="var(--color-icon-background)"
+                      stroke="var(--color-ts-class)"
+                      stroke-width="1.5"
+                      x="1"
+                      y="1"
+                      width="22"
+                      height="22"
+                      rx="6"
+                      id="icon-128-path"
+                    ></rect>
+                    <path
+                      d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z"
+                      fill="var(--color-text)"
+                      id="icon-128-text"
+                    ></path></svg
+                  ><span>CGSelect</span></a
+                >
+              </div>
+            </section>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-class tsd-parent-kind-module">
+              <a href="../classes/cg_select.CGSelect.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-128-path"></use>
+                  <use href="#icon-128-text"></use></svg
+                >CGSelect</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/modules/components_create_element_create_element.html
+++ b/docs/modules/components_create_element_create_element.html
@@ -1,70 +1,317 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>components/create-element/create-element | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="components_create_element_create_element.html">components/create-element/create-element</a></li></ul>
-<h1>Module components/create-element/create-element</h1></div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/create-element/create-element.ts#L1">components/create-element/create-element.ts:1</a></li></ul></aside>
-<section class="tsd-panel-group">
-<section class="tsd-panel tsd-typography"></section></section>
-<section class="tsd-panel-group tsd-index-group">
-<section class="tsd-panel tsd-index-panel">
-<h3 class="tsd-index-heading uppercase">Index</h3>
-<section class="tsd-index-section">
-<h3 class="tsd-index-heading">Functions</h3>
-<div class="tsd-index-list"><a href="../functions/components_create_element_create_element.createBreadCrumb.html" class="tsd-index-link tsd-kind-function tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg><span>create<wbr/>Bread<wbr/>Crumb</span></a>
-<a href="../functions/components_create_element_create_element.createInputSearch.html" class="tsd-index-link tsd-kind-function tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>create<wbr/>Input<wbr/>Search</span></a>
-<a href="../functions/components_create_element_create_element.createNativeSelect.html" class="tsd-index-link tsd-kind-function tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>create<wbr/>Native<wbr/>Select</span></a>
-<a href="../functions/components_create_element_create_element.createNativeSelectOption.html" class="tsd-index-link tsd-kind-function tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>create<wbr/>Native<wbr/>Select<wbr/>Option</span></a>
-</div></section></section></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="cg_select.html">cg-<wbr/>select</a></li>
-<li class="current selected tsd-kind-module"><a href="components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="../functions/components_create_element_create_element.createBreadCrumb.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Bread<wbr/>Crumb</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="../functions/components_create_element_create_element.createInputSearch.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Input<wbr/>Search</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="../functions/components_create_element_create_element.createNativeSelect.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Native<wbr/>Select</a></li>
-<li class="tsd-kind-function tsd-parent-kind-module"><a href="../functions/components_create_element_create_element.createNativeSelectOption.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Native<wbr/>Select<wbr/>Option</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>components/create-element/create-element | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li>
+              <a href="components_create_element_create_element.html">Create-element</a>
+            </li>
+          </ul>
+          <h1>Module components/create-element</h1>
+        </div>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a
+                href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/create-element/create-element.ts#L1"
+                >components/create-element/create-element.ts:1</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group">
+          <section class="tsd-panel tsd-typography"></section>
+        </section>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <h3 class="tsd-index-heading uppercase">Index</h3>
+            <section class="tsd-index-section">
+              <h3 class="tsd-index-heading">Functions</h3>
+              <div class="tsd-index-list">
+                <a
+                  href="../functions/components_create_element_create_element.createBreadCrumb.html"
+                  class="tsd-index-link tsd-kind-function tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <rect
+                      fill="var(--color-icon-background)"
+                      stroke="var(--color-ts-function)"
+                      stroke-width="1.5"
+                      x="1"
+                      y="1"
+                      width="22"
+                      height="22"
+                      rx="6"
+                      id="icon-64-path"
+                    ></rect>
+                    <path
+                      d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z"
+                      fill="var(--color-text)"
+                      id="icon-64-text"
+                    ></path></svg
+                  ><span>create<wbr />Bread<wbr />Crumb</span></a
+                >
+                <a
+                  href="../functions/components_create_element_create_element.createInputSearch.html"
+                  class="tsd-index-link tsd-kind-function tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-64-path"></use>
+                    <use href="#icon-64-text"></use></svg
+                  ><span>create<wbr />Input<wbr />Search</span></a
+                >
+                <a
+                  href="../functions/components_create_element_create_element.createNativeSelect.html"
+                  class="tsd-index-link tsd-kind-function tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-64-path"></use>
+                    <use href="#icon-64-text"></use></svg
+                  ><span>create<wbr />Native<wbr />Select</span></a
+                >
+                <a
+                  href="../functions/components_create_element_create_element.createNativeSelectOption.html"
+                  class="tsd-index-link tsd-kind-function tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-64-path"></use>
+                    <use href="#icon-64-text"></use></svg
+                  ><span>create<wbr />Native<wbr />Select<wbr />Option</span></a
+                >
+              </div>
+            </section>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="../functions/components_create_element_create_element.createBreadCrumb.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Bread<wbr />Crumb</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="../functions/components_create_element_create_element.createInputSearch.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Input<wbr />Search</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="../functions/components_create_element_create_element.createNativeSelect.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Native<wbr />Select</a
+              >
+            </li>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a
+                href="../functions/components_create_element_create_element.createNativeSelectOption.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >create<wbr />Native<wbr />Select<wbr />Option</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/modules/components_create_element_create_element_interface.html
+++ b/docs/modules/components_create_element_create_element_interface.html
@@ -1,64 +1,265 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>components/create-element/create-element.interface | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="components_create_element_create_element_interface.html">components/create-element/create-element.interface</a></li></ul>
-<h1>Module components/create-element/create-element.interface</h1></div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/create-element/create-element.interface.ts#L1">components/create-element/create-element.interface.ts:1</a></li></ul></aside>
-<section class="tsd-panel-group">
-<section class="tsd-panel tsd-typography"></section></section>
-<section class="tsd-panel-group tsd-index-group">
-<section class="tsd-panel tsd-index-panel">
-<h3 class="tsd-index-heading uppercase">Index</h3>
-<section class="tsd-index-section">
-<h3 class="tsd-index-heading">Interfaces</h3>
-<div class="tsd-index-list"><a href="../interfaces/components_create_element_create_element_interface.ICreateBreadCrumb.html" class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg><span>ICreate<wbr/>Bread<wbr/>Crumb</span></a>
-</div></section></section></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="current selected tsd-kind-module"><a href="components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/components_create_element_create_element_interface.ICreateBreadCrumb.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>ICreate<wbr/>Bread<wbr/>Crumb</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>components/create-element/create-element.interface | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li>
+              <a href="components_create_element_create_element_interface.html"
+                >Create-element.interface</a
+              >
+            </li>
+          </ul>
+          <h1>Module components/create-element.interface</h1>
+        </div>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a
+                href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/create-element/create-element.interface.ts#L1"
+                >components/create-element/create-element.interface.ts:1</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group">
+          <section class="tsd-panel tsd-typography"></section>
+        </section>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <h3 class="tsd-index-heading uppercase">Index</h3>
+            <section class="tsd-index-section">
+              <h3 class="tsd-index-heading">Interfaces</h3>
+              <div class="tsd-index-list">
+                <a
+                  href="../interfaces/components_create_element_create_element_interface.ICreateBreadCrumb.html"
+                  class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <rect
+                      fill="var(--color-icon-background)"
+                      stroke="var(--color-ts-interface)"
+                      stroke-width="1.5"
+                      x="1"
+                      y="1"
+                      width="22"
+                      height="22"
+                      rx="6"
+                      id="icon-256-path"
+                    ></rect>
+                    <path
+                      d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z"
+                      fill="var(--color-text)"
+                      id="icon-256-text"
+                    ></path></svg
+                  ><span>ICreate<wbr />Bread<wbr />Crumb</span></a
+                >
+              </div>
+            </section>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-interface tsd-parent-kind-module">
+              <a
+                href="../interfaces/components_create_element_create_element_interface.ICreateBreadCrumb.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-256-path"></use>
+                  <use href="#icon-256-text"></use></svg
+                >ICreate<wbr />Bread<wbr />Crumb</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/modules/components_theme_theme.html
+++ b/docs/modules/components_theme_theme.html
@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>components/theme/theme | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li><a href="components_theme_theme.html">Theme</a></li>
+          </ul>
+          <h1>Module components/Theme</h1>
+        </div>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a
+                href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/theme/theme.ts#L1"
+                >components/theme/theme.ts:1</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group">
+          <section class="tsd-panel tsd-typography"></section>
+        </section>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <h3 class="tsd-index-heading uppercase">Index</h3>
+            <section class="tsd-index-section">
+              <h3 class="tsd-index-heading">Functions</h3>
+              <div class="tsd-index-list">
+                <a
+                  href="../functions/components_theme_theme.changeTheme.html"
+                  class="tsd-index-link tsd-kind-function tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <rect
+                      fill="var(--color-icon-background)"
+                      stroke="var(--color-ts-function)"
+                      stroke-width="1.5"
+                      x="1"
+                      y="1"
+                      width="22"
+                      height="22"
+                      rx="6"
+                      id="icon-64-path"
+                    ></rect>
+                    <path
+                      d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z"
+                      fill="var(--color-text)"
+                      id="icon-64-text"
+                    ></path></svg
+                  ><span>change<wbr />Theme</span></a
+                >
+              </div>
+            </section>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-function tsd-parent-kind-module">
+              <a href="../functions/components_theme_theme.changeTheme.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-64-path"></use>
+                  <use href="#icon-64-text"></use></svg
+                >change<wbr />Theme</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/modules/components_utils_urils_interface.html
+++ b/docs/modules/components_utils_urils_interface.html
@@ -1,66 +1,284 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>components/utils/urils.interface | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="components_utils_urils_interface.html">components/utils/urils.interface</a></li></ul>
-<h1>Module components/utils/urils.interface</h1></div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/components/utils/urils.interface.ts#L1">components/utils/urils.interface.ts:1</a></li></ul></aside>
-<section class="tsd-panel-group">
-<section class="tsd-panel tsd-typography"></section></section>
-<section class="tsd-panel-group tsd-index-group">
-<section class="tsd-panel tsd-index-panel">
-<h3 class="tsd-index-heading uppercase">Index</h3>
-<section class="tsd-index-section">
-<h3 class="tsd-index-heading">Interfaces</h3>
-<div class="tsd-index-list"><a href="../interfaces/components_utils_urils_interface.IDataItem.html" class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg><span>IData<wbr/>Item</span></a>
-<a href="../interfaces/components_utils_urils_interface.ISelectedItems.html" class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg><span>ISelected<wbr/>Items</span></a>
-</div></section></section></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="current selected tsd-kind-module"><a href="components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/components_utils_urils_interface.IDataItem.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>IData<wbr/>Item</a></li>
-<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/components_utils_urils_interface.ISelectedItems.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>ISelected<wbr/>Items</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>components/utils/urils.interface | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All module</a></li>
+            <li>
+              <a href="components_utils_urils_interface.html">utils.interface</a>
+            </li>
+          </ul>
+          <h1>Module components/urils.interface</h1>
+        </div>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a
+                href="https://github.com/apuc/cg-select/blob/31b10e2/src/components/utils/urils.interface.ts#L1"
+                >components/utils/urils.interface.ts:1</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group">
+          <section class="tsd-panel tsd-typography"></section>
+        </section>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <h3 class="tsd-index-heading uppercase">Index</h3>
+            <section class="tsd-index-section">
+              <h3 class="tsd-index-heading">Interfaces</h3>
+              <div class="tsd-index-list">
+                <a
+                  href="../interfaces/components_utils_urils_interface.IDataItem.html"
+                  class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <rect
+                      fill="var(--color-icon-background)"
+                      stroke="var(--color-ts-interface)"
+                      stroke-width="1.5"
+                      x="1"
+                      y="1"
+                      width="22"
+                      height="22"
+                      rx="6"
+                      id="icon-256-path"
+                    ></rect>
+                    <path
+                      d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z"
+                      fill="var(--color-text)"
+                      id="icon-256-text"
+                    ></path></svg
+                  ><span>IData<wbr />Item</span></a
+                >
+                <a
+                  href="../interfaces/components_utils_urils_interface.ISelectedItems.html"
+                  class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-256-path"></use>
+                    <use href="#icon-256-text"></use></svg
+                  ><span>ISelected<wbr />Items</span></a
+                >
+              </div>
+            </section>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/Utils.html">Utils</a>
+                    </li>
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-interface tsd-parent-kind-module">
+              <a
+                href="../interfaces/components_utils_urils_interface.IDataItem.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-256-path"></use>
+                  <use href="#icon-256-text"></use></svg
+                >IData<wbr />Item</a
+              >
+            </li>
+            <li class="tsd-kind-interface tsd-parent-kind-module">
+              <a
+                href="../interfaces/components_utils_urils_interface.ISelectedItems.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-256-path"></use>
+                  <use href="#icon-256-text"></use></svg
+                >ISelected<wbr />Items</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/modules/interfaces_cg_select_interface.html
+++ b/docs/modules/interfaces_cg_select_interface.html
@@ -1,66 +1,284 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>interfaces/cg-select.interface | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="interfaces_cg_select_interface.html">interfaces/cg-select.interface</a></li></ul>
-<h1>Module interfaces/cg-select.interface</h1></div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/cg-select.interface.ts#L1">interfaces/cg-select.interface.ts:1</a></li></ul></aside>
-<section class="tsd-panel-group">
-<section class="tsd-panel tsd-typography"></section></section>
-<section class="tsd-panel-group tsd-index-group">
-<section class="tsd-panel tsd-index-panel">
-<h3 class="tsd-index-heading uppercase">Index</h3>
-<section class="tsd-index-section">
-<h3 class="tsd-index-heading">Interfaces</h3>
-<div class="tsd-index-list"><a href="../interfaces/interfaces_cg_select_interface.ICgSelect.html" class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg><span>ICg<wbr/>Select</span></a>
-<a href="../interfaces/interfaces_cg_select_interface.IStyle.html" class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg><span>IStyle</span></a>
-</div></section></section></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="current selected tsd-kind-module"><a href="interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/interfaces_cg_select_interface.ICgSelect.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>ICg<wbr/>Select</a></li>
-<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/interfaces_cg_select_interface.IStyle.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>IStyle</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>interfaces/cg-select.interface | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li>
+              <a href="interfaces_cg_select_interface.html">Cg-select.interface</a>
+            </li>
+          </ul>
+          <h1>Module interfaces/Cg-select.interface</h1>
+        </div>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a
+                href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/cg-select.interface.ts#L1"
+                >interfaces/cg-select.interface.ts:1</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group">
+          <section class="tsd-panel tsd-typography"></section>
+        </section>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <h3 class="tsd-index-heading uppercase">Index</h3>
+            <section class="tsd-index-section">
+              <h3 class="tsd-index-heading">Interfaces</h3>
+              <div class="tsd-index-list">
+                <a
+                  href="../interfaces/interfaces_cg_select_interface.ICgSelect.html"
+                  class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <rect
+                      fill="var(--color-icon-background)"
+                      stroke="var(--color-ts-interface)"
+                      stroke-width="1.5"
+                      x="1"
+                      y="1"
+                      width="22"
+                      height="22"
+                      rx="6"
+                      id="icon-256-path"
+                    ></rect>
+                    <path
+                      d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z"
+                      fill="var(--color-text)"
+                      id="icon-256-text"
+                    ></path></svg
+                  ><span>ICg<wbr />Select</span></a
+                >
+                <a
+                  href="../interfaces/interfaces_cg_select_interface.IStyle.html"
+                  class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-256-path"></use>
+                    <use href="#icon-256-text"></use></svg
+                  ><span>IStyle</span></a
+                >
+              </div>
+            </section>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/Utils.html">Utils</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-interface tsd-parent-kind-module">
+              <a
+                href="../interfaces/interfaces_cg_select_interface.ICgSelect.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-256-path"></use>
+                  <use href="#icon-256-text"></use></svg
+                >ICg<wbr />Select</a
+              >
+            </li>
+            <li class="tsd-kind-interface tsd-parent-kind-module">
+              <a
+                href="../interfaces/interfaces_cg_select_interface.IStyle.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-256-path"></use>
+                  <use href="#icon-256-text"></use></svg
+                >IStyle</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/modules/interfaces_items_interface.html
+++ b/docs/modules/interfaces_items_interface.html
@@ -1,64 +1,260 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>interfaces/items.interface | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="interfaces_items_interface.html">interfaces/items.interface</a></li></ul>
-<h1>Module interfaces/items.interface</h1></div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/items.interface.ts#L4">interfaces/items.interface.ts:4</a></li></ul></aside>
-<section class="tsd-panel-group">
-<section class="tsd-panel tsd-typography"></section></section>
-<section class="tsd-panel-group tsd-index-group">
-<section class="tsd-panel tsd-index-panel">
-<h3 class="tsd-index-heading uppercase">Index</h3>
-<section class="tsd-index-section">
-<h3 class="tsd-index-heading">Interfaces</h3>
-<div class="tsd-index-list"><a href="../interfaces/interfaces_items_interface.IItems.html" class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg><span>IItems</span></a>
-</div></section></section></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="current selected tsd-kind-module"><a href="interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/interfaces_items_interface.IItems.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>IItems</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>interfaces/items.interface | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li><a href="interfaces_items_interface.html">Items.interface</a></li>
+          </ul>
+          <h1>Module interfaces/Items.interface</h1>
+        </div>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a
+                href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/items.interface.ts#L4"
+                >interfaces/items.interface.ts:4</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group">
+          <section class="tsd-panel tsd-typography"></section>
+        </section>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <h3 class="tsd-index-heading uppercase">Index</h3>
+            <section class="tsd-index-section">
+              <h3 class="tsd-index-heading">Interfaces</h3>
+              <div class="tsd-index-list">
+                <a
+                  href="../interfaces/interfaces_items_interface.IItems.html"
+                  class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <rect
+                      fill="var(--color-icon-background)"
+                      stroke="var(--color-ts-interface)"
+                      stroke-width="1.5"
+                      x="1"
+                      y="1"
+                      width="22"
+                      height="22"
+                      rx="6"
+                      id="icon-256-path"
+                    ></rect>
+                    <path
+                      d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z"
+                      fill="var(--color-text)"
+                      id="icon-256-text"
+                    ></path></svg
+                  ><span>IItems</span></a
+                >
+              </div>
+            </section>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">Language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-interface tsd-parent-kind-module">
+              <a href="../interfaces/interfaces_items_interface.IItems.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-256-path"></use>
+                  <use href="#icon-256-text"></use></svg
+                >IItems</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/modules/interfaces_language_interface.html
+++ b/docs/modules/interfaces_language_interface.html
@@ -1,64 +1,262 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>interfaces/language.interface | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="interfaces_language_interface.html">interfaces/language.interface</a></li></ul>
-<h1>Module interfaces/language.interface</h1></div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/interfaces/language.interface.ts#L4">interfaces/language.interface.ts:4</a></li></ul></aside>
-<section class="tsd-panel-group">
-<section class="tsd-panel tsd-typography"></section></section>
-<section class="tsd-panel-group tsd-index-group">
-<section class="tsd-panel tsd-index-panel">
-<h3 class="tsd-index-heading uppercase">Index</h3>
-<section class="tsd-index-section">
-<h3 class="tsd-index-heading">Interfaces</h3>
-<div class="tsd-index-list"><a href="../interfaces/interfaces_language_interface.ILanguage.html" class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg><span>ILanguage</span></a>
-</div></section></section></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="current selected tsd-kind-module"><a href="interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="tsd-kind-module"><a href="language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/interfaces_language_interface.ILanguage.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>ILanguage</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>interfaces/language.interface | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li><a href="interfaces_language_interface.html">Language.interface</a></li>
+          </ul>
+          <h1>Module interfaces/Language.interface</h1>
+        </div>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a
+                href="https://github.com/apuc/cg-select/blob/31b10e2/src/interfaces/language.interface.ts#L4"
+                >interfaces/language.interface.ts:4</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group">
+          <section class="tsd-panel tsd-typography"></section>
+        </section>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <h3 class="tsd-index-heading uppercase">Index</h3>
+            <section class="tsd-index-section">
+              <h3 class="tsd-index-heading">Interfaces</h3>
+              <div class="tsd-index-list">
+                <a
+                  href="../interfaces/interfaces_language_interface.ILanguage.html"
+                  class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <rect
+                      fill="var(--color-icon-background)"
+                      stroke="var(--color-ts-interface)"
+                      stroke-width="1.5"
+                      x="1"
+                      y="1"
+                      width="22"
+                      height="22"
+                      rx="6"
+                      id="icon-256-path"
+                    ></rect>
+                    <path
+                      d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z"
+                      fill="var(--color-text)"
+                      id="icon-256-text"
+                    ></path></svg
+                  ><span>ILanguage</span></a
+                >
+              </div>
+            </section>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">Language</a>
+                    </li>
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-interface tsd-parent-kind-module">
+              <a
+                href="../interfaces/interfaces_language_interface.ILanguage.html"
+                class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-256-path"></use>
+                  <use href="#icon-256-text"></use></svg
+                >ILanguage</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/modules/language_language.html
+++ b/docs/modules/language_language.html
@@ -1,66 +1,274 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>language/language | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="language_language.html">language/language</a></li></ul>
-<h1>Module language/language</h1></div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/language/language.ts#L1">language/language.ts:1</a></li></ul></aside>
-<section class="tsd-panel-group">
-<section class="tsd-panel tsd-typography"></section></section>
-<section class="tsd-panel-group tsd-index-group">
-<section class="tsd-panel tsd-index-panel">
-<h3 class="tsd-index-heading uppercase">Index</h3>
-<section class="tsd-index-section">
-<h3 class="tsd-index-heading">Variables</h3>
-<div class="tsd-index-list"><a href="../variables/language_language.en.html" class="tsd-index-link tsd-kind-variable tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-variable)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-32-path"></rect><path d="M11.106 16L8.85 7.24H9.966L11.454 13.192C11.558 13.608 11.646 13.996 11.718 14.356C11.79 14.708 11.842 14.976 11.874 15.16C11.906 14.976 11.954 14.708 12.018 14.356C12.09 13.996 12.178 13.608 12.282 13.192L13.758 7.24H14.85L12.582 16H11.106Z" fill="var(--color-text)" id="icon-32-text"></path></svg><span>en</span></a>
-<a href="../variables/language_language.ru.html" class="tsd-index-link tsd-kind-variable tsd-parent-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg><span>ru</span></a>
-</div></section></section></section></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="current selected tsd-kind-module"><a href="language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-variable tsd-parent-kind-module"><a href="../variables/language_language.en.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>en</a></li>
-<li class="tsd-kind-variable tsd-parent-kind-module"><a href="../variables/language_language.ru.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>ru</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>language/language | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li><a href="language_language.html">Language</a></li>
+          </ul>
+          <h1>Module language/Language</h1>
+        </div>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a href="https://github.com/apuc/cg-select/blob/31b10e2/src/language/language.ts#L1"
+                >language/language.ts:1</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group">
+          <section class="tsd-panel tsd-typography"></section>
+        </section>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <h3 class="tsd-index-heading uppercase">Index</h3>
+            <section class="tsd-index-section">
+              <h3 class="tsd-index-heading">Variables</h3>
+              <div class="tsd-index-list">
+                <a
+                  href="../variables/language_language.en.html"
+                  class="tsd-index-link tsd-kind-variable tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <rect
+                      fill="var(--color-icon-background)"
+                      stroke="var(--color-ts-variable)"
+                      stroke-width="1.5"
+                      x="1"
+                      y="1"
+                      width="22"
+                      height="22"
+                      rx="6"
+                      id="icon-32-path"
+                    ></rect>
+                    <path
+                      d="M11.106 16L8.85 7.24H9.966L11.454 13.192C11.558 13.608 11.646 13.996 11.718 14.356C11.79 14.708 11.842 14.976 11.874 15.16C11.906 14.976 11.954 14.708 12.018 14.356C12.09 13.996 12.178 13.608 12.282 13.192L13.758 7.24H14.85L12.582 16H11.106Z"
+                      fill="var(--color-text)"
+                      id="icon-32-text"
+                    ></path></svg
+                  ><span>en</span></a
+                >
+                <a
+                  href="../variables/language_language.ru.html"
+                  class="tsd-index-link tsd-kind-variable tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-32-path"></use>
+                    <use href="#icon-32-text"></use></svg
+                  ><span>ru</span></a
+                >
+              </div>
+            </section>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/language_language.html">Language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-variable tsd-parent-kind-module">
+              <a href="../variables/language_language.en.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-32-path"></use>
+                  <use href="#icon-32-text"></use></svg
+                >en</a
+              >
+            </li>
+            <li class="tsd-kind-variable tsd-parent-kind-module">
+              <a href="../variables/language_language.ru.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-32-path"></use>
+                  <use href="#icon-32-text"></use></svg
+                >ru</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/modules/theme_interface.html
+++ b/docs/modules/theme_interface.html
@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>theme.interface | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li><a href="theme_interface.html">theme.interface</a></li>
+          </ul>
+          <h1>Module theme.interface</h1>
+        </div>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a
+                href="https://github.com/apuc/cg-select/blob/7a06e3a/src/components/theme/theme.interface.ts#L1"
+                >theme.interface.ts:1</a
+              >
+            </li>
+          </ul>
+        </aside>
+        <section class="tsd-panel-group">
+          <section class="tsd-panel tsd-typography"></section>
+        </section>
+        <section class="tsd-panel-group tsd-index-group">
+          <section class="tsd-panel tsd-index-panel">
+            <h3 class="tsd-index-heading uppercase">Index</h3>
+            <section class="tsd-index-section">
+              <h3 class="tsd-index-heading">Interfaces</h3>
+              <div class="tsd-index-list">
+                <a
+                  href="../interfaces/theme_interface.CustomTheme.html"
+                  class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <rect
+                      fill="var(--color-icon-background)"
+                      stroke="var(--color-ts-interface)"
+                      stroke-width="1.5"
+                      x="1"
+                      y="1"
+                      width="22"
+                      height="22"
+                      rx="6"
+                      id="icon-256-path"
+                    ></rect>
+                    <path
+                      d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z"
+                      fill="var(--color-text)"
+                      id="icon-256-text"
+                    ></path></svg
+                  ><span>Custom<wbr />Theme</span></a
+                >
+                <a
+                  href="../interfaces/theme_interface.CustomThemeJson.html"
+                  class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"
+                  ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <use href="#icon-256-path"></use>
+                    <use href="#icon-256-text"></use></svg
+                  ><span>Custom<wbr />Theme<wbr />Json</span></a
+                >
+              </div>
+            </section>
+          </section>
+        </section>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current selected">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../components_theme_theme.html">Theme</a>
+                    </li>
+
+                    <li class="tsd-kind-module selected">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-interface tsd-parent-kind-module">
+              <a href="../interfaces/theme_interface.CustomTheme.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-256-path"></use>
+                  <use href="#icon-256-text"></use></svg
+                >Custom<wbr />Theme</a
+              >
+            </li>
+            <li class="tsd-kind-interface tsd-parent-kind-module">
+              <a href="../interfaces/theme_interface.CustomThemeJson.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-256-path"></use>
+                  <use href="#icon-256-text"></use></svg
+                >Custom<wbr />Theme<wbr />Json</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/variables/language_language.en.html
+++ b/docs/variables/language_language.en.html
@@ -1,58 +1,255 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>en | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/language_language.html">language/language</a></li>
-<li><a href="language_language.en.html">en</a></li></ul>
-<h1>Variable en<code class="tsd-tag ts-flagConst">Const</code> </h1></div>
-<div class="tsd-signature">en<span class="tsd-signature-symbol">:</span> <a href="../interfaces/interfaces_language_interface.ILanguage.html" class="tsd-signature-type" data-tsd-kind="Interface">ILanguage</a><span class="tsd-signature-symbol"> = ...</span></div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/language/language.ts#L9">language/language.ts:9</a></li></ul></aside></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="current tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="current tsd-kind-variable tsd-parent-kind-module"><a href="language_language.en.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-variable)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-32-path"></rect><path d="M11.106 16L8.85 7.24H9.966L11.454 13.192C11.558 13.608 11.646 13.996 11.718 14.356C11.79 14.708 11.842 14.976 11.874 15.16C11.906 14.976 11.954 14.708 12.018 14.356C12.09 13.996 12.178 13.608 12.282 13.192L13.758 7.24H14.85L12.582 16H11.106Z" fill="var(--color-text)" id="icon-32-text"></path></svg>en</a></li>
-<li class="tsd-kind-variable tsd-parent-kind-module"><a href="language_language.ru.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>ru</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>en | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li><a href="../modules/language_language.html">Language</a></li>
+            <li><a href="language_language.en.html">en</a></li>
+          </ul>
+          <h1>Variable en<code class="tsd-tag ts-flagConst">Const</code></h1>
+        </div>
+        <div class="tsd-signature">
+          en<span class="tsd-signature-symbol">:</span>
+          <a
+            href="../interfaces/interfaces_language_interface.ILanguage.html"
+            class="tsd-signature-type"
+            data-tsd-kind="Interface"
+            >ILanguage</a
+          ><span class="tsd-signature-symbol"> = ...</span>
+        </div>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a href="https://github.com/apuc/cg-select/blob/31b10e2/src/language/language.ts#L9"
+                >language/language.ts:9</a
+              >
+            </li>
+          </ul>
+        </aside>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="current tsd-kind-variable tsd-parent-kind-module">
+              <a href="language_language.en.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-variable)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-32-path"
+                  ></rect>
+                  <path
+                    d="M11.106 16L8.85 7.24H9.966L11.454 13.192C11.558 13.608 11.646 13.996 11.718 14.356C11.79 14.708 11.842 14.976 11.874 15.16C11.906 14.976 11.954 14.708 12.018 14.356C12.09 13.996 12.178 13.608 12.282 13.192L13.758 7.24H14.85L12.582 16H11.106Z"
+                    fill="var(--color-text)"
+                    id="icon-32-text"
+                  ></path></svg
+                >en</a
+              >
+            </li>
+            <li class="tsd-kind-variable tsd-parent-kind-module">
+              <a href="language_language.ru.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-32-path"></use>
+                  <use href="#icon-32-text"></use></svg
+                >ru</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/docs/variables/language_language.ru.html
+++ b/docs/variables/language_language.ru.html
@@ -1,58 +1,255 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>ru | cg-select</title><meta name="description" content="Documentation for cg-select"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base="..">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">cg-select</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<ul class="tsd-breadcrumb">
-<li><a href="../modules.html">cg-select</a></li>
-<li><a href="../modules/language_language.html">language/language</a></li>
-<li><a href="language_language.ru.html">ru</a></li></ul>
-<h1>Variable ru<code class="tsd-tag ts-flagConst">Const</code> </h1></div>
-<div class="tsd-signature">ru<span class="tsd-signature-symbol">:</span> <a href="../interfaces/interfaces_language_interface.ILanguage.html" class="tsd-signature-type" data-tsd-kind="Interface">ILanguage</a><span class="tsd-signature-symbol"> = ...</span></div><aside class="tsd-sources">
-<ul>
-<li>Defined in <a href="https://github.com/apuc/cg-select/blob/15f73b1/src/language/language.ts#L3">language/language.ts:3</a></li></ul></aside></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current"><a href="../modules.html">cg-<wbr/>select</a>
-<ul>
-<li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
-<li class="tsd-kind-module"><a href="../modules/cg_select.html">cg-<wbr/>select</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element.html">components/create-<wbr/>element/create-<wbr/>element</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_create_element_create_element_interface.html">components/create-<wbr/>element/create-<wbr/>element.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/components_utils_urils_interface.html">components/utils/urils.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_cg_select_interface.html">interfaces/cg-<wbr/>select.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_items_interface.html">interfaces/items.interface</a></li>
-<li class="tsd-kind-module"><a href="../modules/interfaces_language_interface.html">interfaces/language.interface</a></li>
-<li class="current tsd-kind-module"><a href="../modules/language_language.html">language/language</a></li></ul></li></ul></div></details></nav>
-<nav class="tsd-navigation secondary menu-sticky">
-<ul>
-<li class="tsd-kind-variable tsd-parent-kind-module"><a href="language_language.en.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-variable)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-32-path"></rect><path d="M11.106 16L8.85 7.24H9.966L11.454 13.192C11.558 13.608 11.646 13.996 11.718 14.356C11.79 14.708 11.842 14.976 11.874 15.16C11.906 14.976 11.954 14.708 12.018 14.356C12.09 13.996 12.178 13.608 12.282 13.192L13.758 7.24H14.85L12.582 16H11.106Z" fill="var(--color-text)" id="icon-32-text"></path></svg>en</a></li>
-<li class="current tsd-kind-variable tsd-parent-kind-module"><a href="language_language.ru.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-32-path"></use><use href="#icon-32-text"></use></svg>ru</a></li></ul></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="../assets/main.js"></script></body></html>
+<!DOCTYPE html>
+<html class="default" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <title>ru | cg-select</title>
+    <meta name="description" content="Documentation for cg-select" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../assets/style.css" />
+    <link rel="stylesheet" href="../assets/highlight.css" />
+    <script async src="../assets/search.js" id="search-script"></script>
+  </head>
+  <body>
+    <script>
+      document.documentElement.dataset.theme = localStorage.getItem('tsd-theme') || 'os';
+    </script>
+    <header class="tsd-page-toolbar">
+      <div class="tsd-toolbar-contents container">
+        <div class="table-cell" id="tsd-search" data-base="..">
+          <div class="field">
+            <label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"
+              ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z"
+                  fill="var(--color-text)"
+                ></path></svg></label
+            ><input type="text" id="tsd-search-field" aria-label="Search" />
+          </div>
+          <div class="field">
+            <div id="tsd-toolbar-links"></div>
+          </div>
+          <ul class="results">
+            <li class="state loading">Preparing search index...</li>
+            <li class="state failure">The search index is not available</li>
+          </ul>
+          <a href="../index.html" class="title">Home</a>
+          <a href="/example/index.html" class="title" style="margin-left: 15px">Go to CGSelect</a>
+        </div>
+        <div class="table-cell" id="tsd-widgets">
+          <a
+            href="#"
+            class="tsd-widget tsd-toolbar-icon menu no-caption"
+            data-toggle="menu"
+            aria-label="Menu"
+            ><svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect>
+              <rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg
+          ></a>
+        </div>
+      </div>
+    </header>
+    <div class="container container-main">
+      <div class="col-8 col-content">
+        <div class="tsd-page-title">
+          <ul class="tsd-breadcrumb">
+            <li><a href="../modules.html">All modules</a></li>
+            <li><a href="../modules/language_language.html">Language</a></li>
+            <li><a href="language_language.ru.html">ru</a></li>
+          </ul>
+          <h1>Variable ru<code class="tsd-tag ts-flagConst">Const</code></h1>
+        </div>
+        <div class="tsd-signature">
+          ru<span class="tsd-signature-symbol">:</span>
+          <a
+            href="../interfaces/interfaces_language_interface.ILanguage.html"
+            class="tsd-signature-type"
+            data-tsd-kind="Interface"
+            >ILanguage</a
+          ><span class="tsd-signature-symbol"> = ...</span>
+        </div>
+        <aside class="tsd-sources">
+          <ul>
+            <li>
+              Defined in
+              <a href="https://github.com/apuc/cg-select/blob/31b10e2/src/language/language.ts#L3"
+                >language/language.ts:3</a
+              >
+            </li>
+          </ul>
+        </aside>
+      </div>
+      <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+        <div class="tsd-navigation settings">
+          <details class="tsd-index-accordion">
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Settings
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <div class="tsd-filter-visibility">
+                <h4 class="uppercase">Member Visibility</h4>
+                <form>
+                  <ul id="tsd-filter-options">
+                    <li class="tsd-filter-item">
+                      <label class="tsd-filter-input"
+                        ><input type="checkbox" id="tsd-filter-private" name="private" /><svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 32 32"
+                          aria-hidden="true"
+                        >
+                          <rect
+                            class="tsd-checkbox-background"
+                            width="30"
+                            height="30"
+                            x="1"
+                            y="1"
+                            rx="6"
+                            fill="none"
+                          ></rect>
+                          <path
+                            class="tsd-checkbox-checkmark"
+                            d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25"
+                            stroke="none"
+                            stroke-width="3.5"
+                            stroke-linejoin="round"
+                            fill="none"
+                          ></path></svg
+                        ><span>Private</span></label
+                      >
+                    </li>
+                  </ul>
+                </form>
+              </div>
+              <div class="tsd-theme-toggle">
+                <h4 class="uppercase">Theme</h4>
+                <select id="theme">
+                  <option value="os">OS</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+          </details>
+        </div>
+        <nav class="tsd-navigation primary">
+          <details class="tsd-index-accordion" open>
+            <summary class="tsd-accordion-summary">
+              <h3>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z"
+                    fill="var(--color-text)"
+                  ></path>
+                </svg>
+                Modules
+              </h3>
+            </summary>
+            <div class="tsd-accordion-details">
+              <ul>
+                <li class="current">
+                  <a href="../modules.html">All modules</a>
+                  <ul>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/cg_select.html">Cg-<wbr />select</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_cg_select_interface.html"
+                        >Cg-<wbr />select.interface</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/interfaces_items_interface.html">Items.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module"><a href="../modules/Utils.html">Utils</a></li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_utils_urils_interface.html">Utils.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element.html"
+                        >Create-<wbr />element</a
+                      >
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_create_element_create_element_interface.html"
+                        >Create-<wbr />element.interface</a
+                      >
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/components_theme_theme.html">Theme</a>
+                    </li>
+                    <li class="tsd-kind-module">
+                      <a href="../modules/theme_interface.html">Theme.interface</a>
+                    </li>
+                    <li style="border-bottom: 1px solid white; width: 80%; margin-left: 25px"></li>
+
+                    <li class="tsd-kind-module">
+                      <a href="../modules/language_language.html">language</a>
+                    </li>
+                    <li class="selected tsd-kind-module">
+                      <a href="../modules/interfaces_language_interface.html">Language.interface</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </details>
+        </nav>
+        <nav class="tsd-navigation secondary menu-sticky">
+          <ul>
+            <li class="tsd-kind-variable tsd-parent-kind-module">
+              <a href="language_language.en.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <rect
+                    fill="var(--color-icon-background)"
+                    stroke="var(--color-ts-variable)"
+                    stroke-width="1.5"
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="6"
+                    id="icon-32-path"
+                  ></rect>
+                  <path
+                    d="M11.106 16L8.85 7.24H9.966L11.454 13.192C11.558 13.608 11.646 13.996 11.718 14.356C11.79 14.708 11.842 14.976 11.874 15.16C11.906 14.976 11.954 14.708 12.018 14.356C12.09 13.996 12.178 13.608 12.282 13.192L13.758 7.24H14.85L12.582 16H11.106Z"
+                    fill="var(--color-text)"
+                    id="icon-32-text"
+                  ></path></svg
+                >en</a
+              >
+            </li>
+            <li class="current tsd-kind-variable tsd-parent-kind-module">
+              <a href="language_language.ru.html" class="tsd-index-link"
+                ><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24">
+                  <use href="#icon-32-path"></use>
+                  <use href="#icon-32-text"></use></svg
+                >ru</a
+              >
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="container tsd-generator">
+      <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+    <div class="overlay"></div>
+    <script src="../assets/main.js"></script>
+  </body>
+</html>
--- a/example/example.js
+++ b/example/example.js
@@ -1,50 +0,0 @@
-const firstBtn = document.getElementById('first');
-const codeFirst = document.getElementById('codeFirst');
-
-const secondBtn = document.getElementById('second');
-const codeSecond = document.getElementById('codeSecond');
-
-const thirdBtn = document.getElementById('third');
-const codeThird = document.getElementById('codeThird');
-
-const fourthBtn = document.getElementById('fourth');
-const codeFourth = document.getElementById('codeFourth');
-
-const fifthBtn = document.getElementById('fifth');
-const codeFifth = document.getElementById('codeFifth');
-
-const six = document.getElementById('six')
-const codeSix = document.getElementById('codeSix');
-
-
-const Native = document.getElementById('Native')
-const codeNative = document.getElementById('codeNative')
-
-
-firstBtn.addEventListener('click', () => {
-    codeFirst.classList.toggle("active")
-})
-
-secondBtn.addEventListener('click', () => {
-    codeSecond.classList.toggle("active")
-})
-
-thirdBtn.addEventListener('click', () => {
-    codeThird.classList.toggle("active")
-})
-
-fourthBtn.addEventListener('click', () => {
-    codeFourth.classList.toggle("active")
-})
-
-fifthBtn.addEventListener('click', () => {
-    codeFifth.classList.toggle("active")
-})
-
-six.addEventListener('click', () => {
-    codeSix.classList.toggle("active")
-})
-
-Native.addEventListener('click', () => {
-    codeNative.classList.toggle("active")
-})
--- a/example/example.scss
+++ b/example/example.scss
@@ -1,212 +0,0 @@
-@import '/src/main.scss';
-
-* {
-  font-size: 14px;
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-.body-example {
-  background: #000000c4;
-}
-
-.container {
-  margin: 0 auto;
-  width: 900px;
-
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.header {
-  width: 100%;
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  background-color: #2a2f3b;
-  margin-bottom: 8px;
-
-  h1 {
-    font-size: 57px;
-    color: white;
-    font-family: 'Times New Roman', Times, serif;
-    margin: 40px 0 12px 0;
-  }
-
-  &__logoBox {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__logo {
-    width: 13%;
-    height: 16%;
-    border: 1px solid #525252;
-    border-radius: 50%;
-
-    margin: 22px 0 0 29px;
-  }
-
-  .navlist {
-    display: flex;
-    justify-content: space-around;
-    margin: 15px 0 30px 0;
-    padding: 0;
-    width: 230px;
-
-    li {
-      display: inline;
-      list-style: none;
-      text-decoration: none;
-
-      a {
-        color: white;
-        text-decoration: none;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-}
-
-.content {
-  margin-top: 15px;
-  border-radius: 5px;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  -ms-border-radius: 5px;
-  -o-border-radius: 5px;
-}
-
-.example-select {
-  width: 100%;
-  background-color: #5c5c5c;
-  border-radius: 5px;
-  margin: 15px 0 0 0;
-
-  &_title {
-    height: 45px;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    color: white;
-    padding: 20px 0 0 40px;
-    margin: 0 0 30px 0;
-    background-color: #2a2f3b;
-    font-size: 20px;
-  }
-
-  &_submit {
-    width: 200px;
-    height: 35px;
-    border-radius: 10px;
-    border: none;
-    margin-top: 20px;
-    margin: 20px 15px;
-    cursor: pointer;
-    transition: 1s;
-    -webkit-transition: 1s;
-    -moz-transition: 1s;
-    -ms-transition: 1s;
-    -o-transition: 1s;
-
-    &:hover {
-      background-color: #d7d7d7;
-      transition: 1s;
-      -webkit-transition: 1s;
-      -moz-transition: 1s;
-      -ms-transition: 1s;
-      -o-transition: 1s;
-    }
-  }
-
-  .layout-select {
-    margin: 15px;
-  }
-}
-
-code {
-  display: none;
-}
-
-pre {
-  background: #1e1e1e;
-  margin: 15px;
-  padding: 15px;
-  color: #88d0f7;
-  border-radius: 15px;
-  font-size: 16px;
-  line-height: 20px;
-}
-
-.code {
-  &__class,
-  &__var,
-  &__string,
-  &__keyword {
-    font-size: 16px;
-    line-height: 20px;
-  }
-  &__class {
-    color: #4ec9b0;
-  }
-
-  &__var {
-    color: #34a7ff;
-  }
-
-  &__string {
-    color: #ce9178;
-  }
-
-  &__keyword {
-    color: #5090ca;
-  }
-}
-
-.check-code {
-  width: 200px;
-  height: 35px;
-  cursor: pointer;
-  border: none;
-  border-radius: 10px;
-  margin: 20px 15px;
-  transition: all 1s;
-}
-
-.active {
-  display: block;
-}
-
-@media (max-width: 576px) {
-  .container {
-    width: 95%;
-  }
-
-  .header {
-    margin-top: 15px;
-    h1 {
-      font-size: 32px;
-    }
-  }
-
-  .example-select_title {
-    font-size: 14px;
-    height: 40px;
-  }
-}
--- a/example/index.html
+++ b/example/index.html
@@ -1,359 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta
-      property="og:description"
-      content="Feature rich Select control for React/JS with multiselect, autocomplete and styling"
-    />
-    <meta property="og:type" content="website" />
-    <meta property="og:site_name" content="cg-select" />
-    <meta property="og:url" content="https://cg-select.itguild.info" />
-    <meta property="og:image" content="/src/images/logoCG.jpg" />
-
-    <title>Cg-Select</title>
-    <link href="example.scss" rel="stylesheet" />
-  </head>
-  <body class="body-example">
-    <div class="container">
-      <header class="header">
-        <div class="header__logoBox">
-          <h1>CG-SELECT</h1>
-          <img src="/src/images/logoCG.jpg" alt="#" class="header__logo" />
-        </div>
-        <hr style="width: 55%" />
-        <nav>
-          <ul class="navlist">
-            <li><a href="">Home</a></li>
-            <li><a href="/docs/index.html">Documentation</a></li>
-          </ul>
-        </nav>
-      </header>
-    </div>
-
-    <div class="container content">
-      <div class="example-select">
-        <h2 class="example-select_title">Дефолтный селект</h2>
-        <form method="get" class="form">
-          <div class="layout-select">
-            <button class="cg-dropdown cg-dropdown_one"></button>
-          </div>
-
-          <input type="submit" value="Отправить!" class="example-select_submit" />
-
-          <button type="button" class="check-code" id="first">Посмотреть код</button>
-          <code id="codeFirst">
-            <pre>
-              <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
-                selector: <span class="code__string">'.cg-dropdown_one',</span> 
-                placeholder: <span class="code__string">'Выберите авто',</span> 
-                lable: <span class="code__string">'EXAMPLE',</span> 
-                items: [
-                  <span class="code__string">'BMW',</span>
-                  {
-                    id: <span class="code__string">'213sade',</span>
-                    title: <span class="code__string">'Opel',</span>
-                    value: 1,
-                  },
-                  <span class="code__string">'Mersedes',</span> 
-                  <span class="code__string">'MAN',</span>  
-                  <span class="code__string">'Ferari',</span> 
-                ],
-                styles: {
-                  head: {
-                    width: <span class="code__string">'830px',</span> 
-                  },
-                  list: {
-                    width: <span class="code__string">'824px',</span> 
-                  },
-                },
-              });
-            </pre>
-          </code>
-        </form>
-      </div>
-
-      <div class="example-select">
-        <h2 class="example-select_title">Дефолтный селект с функцией nativeSelectMode</h2>
-
-        <form method="get" class="form">
-          <p style="margin-left: 12px; color: white">
-            *При мобильном разрешении появляеться нативный селект.
-          </p>
-          <div class="layout-select">
-            <button class="cg-dropdown cg-dropdown_selectNative"></button>
-          </div>
-
-          <button type="button" class="check-code" id="Native">Посмотреть код</button>
-          <code id="codeNative">
-            <pre>
-              <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
-                selector: <span class="code__string">'.cg-dropdown_one',</span> 
-                placeholder: <span class="code__string">'Выберите авто',</span> 
-                nativeSelectMode: <span class="code__keyword">true,</span>
-                items: [
-                  <span class="code__string">'BMW',</span>
-                  {
-                    id: <span class="code__string">'213sade',</span>
-                    title: <span class="code__string">'Opel',</span>
-                    value: 1,
-                  },
-                  <span class="code__string">'Mersedes',</span> 
-                  <span class="code__string">'MAN',</span>  
-                  <span class="code__string">'Ferari',</span> 
-                ],
-                styles: {
-                  head: {
-                    width: <span class="code__string">'830px',</span> 
-                  },
-                  list: {
-                    width: <span class="code__string">'824px',</span> 
-                  },
-                },
-              });
-            </pre>
-          </code>
-        </form>
-      </div>
-
-      <div class="example-select">
-        <h2 class="example-select_title">Дефолтный селект с функцией listDisplayMode</h2>
-
-        <form method="get" class="form">
-          <p style="margin-left: 12px; color: white">
-            *При использовании данного метода лист с выбором появляеться как модальное окно.
-          </p>
-          <div class="layout-select">
-            <button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
-          </div>
-
-          <button type="button" class="check-code" id="six">Посмотреть код</button>
-
-          <code id="codeSix">
-            <pre>
-              <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
-                selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span> 
-                placeholder: <span class="code__string">'Выберите авто',</span> 
-                listDisplayMode: <span class="code__keyword">true,</span>
-                items: [
-                  <span class="code__string">'BMW',</span>
-                  {
-                    id: <span class="code__string">'213sade',</span>
-                    title: <span class="code__string">'Opel',</span>
-                    value: 1,
-                  },
-                  <span class="code__string">'Mersedes',</span> 
-                  <span class="code__string">'MAN',</span>  
-                  <span class="code__string">'Ferari',</span> 
-                ],
-                styles: {
-                  head: {
-                    width: <span class="code__string">'830px',</span> 
-                  },
-                  list: {
-                    width: <span class="code__string">'824px',</span> 
-                  },
-                },
-              });
-            </pre>
-          </code>
-        </form>
-      </div>
-
-      <div class="example-select">
-        <h1 class="example-select_title">Селект с данными с URL</h1>
-        <div class="layout-select">
-          <button class="cg-dropdown cg-dropdown_three"></button>
-        </div>
-        <button type="button" class="check-code" id="second">Посмотреть код</button>
-
-        <code id="codeSecond">
-          <pre>
-            <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
-              selector: <span class="code__string">'.cg-dropdown_three',</span> 
-              placeholder: <span class="code__string">'URL',</span> 
-              url: <span class="code__string">'https://jsonplaceholder.typicode.com/users',</span>            
-              searchMode: <span class="code__keyword">true,</span>
-              darkTheme: <span class="code__keyword">false,</span>
-              language: <span class="code__string">'ru',</span>
-              styles: {
-                head: {
-                  width: <span class="code__string">'830px',</span> 
-                },
-                list: {
-                  width: <span class="code__string">'824px',</span> 
-                },
-              },
-            });
-          </pre>
-        </code>
-      </div>
-
-      <div class="example-select">
-        <h1 class="example-select_title">Категории</h1>
-
-        <div class="layout-select">
-          <button class="cg-dropdown cg-dropdown_categories"></button>
-        </div>
-        <button type="button" class="check-code" id="third">Посмотреть код</button>
-
-        <code id="codeThird">
-          <pre>
-            <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
-              selector: <span class="code__string">'.cg-dropdown_categories',</span> 
-              placeholder: <span class="code__string">'Выберите регион',</span> 
-              searchMode: <span class="code__keyword">true,</span>
-              items: [
-                {
-                  category: <span class="code__string">'Russia',</span>
-                  categoryItems: [
-                    {
-                      id: <span class="code__string">'28qwds',</span>
-                      title: <span class="code__string">'Москва',</span>
-                      value: 0,
-                    },
-                    <span class="code__string">'Ростов-на-дону',</span>
-                    <span class="code__string">'Саратов',</span>
-                    <span class="code__string">'Волгоград',</span>
-                    <span class="code__string">'Донецк',</span>
-                  ],
-                },
-                {
-                  category: <span class="code__string">'USA',</span>
-                  categoryItems: <span class="code__string">[
-                    'Alabama', 
-                    'Texas', 
-                    'Colorado', 
-                    'Klirens', 
-                    'Los-Angeles'],</span>
-                },
-                {
-                  category: <span class="code__string">'France',</span>
-                  categoryItems: <span class="code__string">['Paris'],</span>
-                },
-              ],
-              styles: {
-                head: {
-                  width: <span class="code__string">'830px',</span> 
-                },
-                list: {
-                  width: <span class="code__string">'824px',</span> 
-                },
-                placeholder: {
-                  maxWidth: <span class="code__string">'500px ',</span>
-                },
-              },
-              multiselect: <span class="code__keyword">true,</span>
-              multiselectTag: <span class="code__keyword">true,</span>
-            });
-          </pre>
-        </code>
-      </div>
-
-      <div class="example-select">
-        <h1 class="example-select_title">Управление с помошью кнопок</h1>
-        <div style="margin-bottom: 15px">
-          <button class="button__open example-select_submit">Open</button>
-          <button class="button__close example-select_submit">Close</button>
-        </div>
-
-        <div class="layout-select">
-          <button class="cg-dropdown cg-dropdown_usedBtn"></button>
-        </div>
-
-        <button type="button" class="check-code" id="fourth">Посмотреть код</button>
-
-        <code id="codeFourth">
-          <pre>
-            <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
-              selector: <span class="code__string">'.cg-dropdown_usedBtn',</span> 
-              placeholder: <span class="code__string">'Выберите авто',</span> 
-              searchMode: <span class="code__keyword">true,</span>
-              items: [
-                  <span class="code__string">'BMW',</span>
-                  {
-                    id: <span class="code__string">'213sade',</span>
-                    title: <span class="code__string">'Opel',</span>
-                    value: 1,
-                  },
-                  <span class="code__string">'Mersedes',</span> 
-                  <span class="code__string">'MAN',</span>  
-                  <span class="code__string">'max',</span> 
-              ],
-              styles: {
-                head: {
-                  width:  <span class="code__string">'830px',</span>
-                  color:  <span class="code__string">'black',</span>
-                  backgroundColor:  <span class="code__string">'rgb(176 223 167)',</span>
-                },
-                list: {
-                  width:  <span class="code__string">'824px',</span>
-                  color:  <span class="code__string">'black',</span>
-                  backgroundColor:  <span class="code__string">'rgb(176 223 167)',</span>
-                },
-                caret: {
-                  borderTop:  <span class="code__string">'6px solid black',</span>
-                },
-                search: {
-                  backgroundColor:  <span class="code__string">'#d7ffff',</span>
-                  borderRadius:  <span class="code__string">'5px',</span>
-                  borderBottom:  <span class="code__string">'none',</span>
-                  width:  <span class="code__string">'95%',</span>
-                  color:  <span class="code__string">'black',</span>
-                },
-              },
-              multiselect: <span class="code__keyword">true,</span>
-            });
-          </pre>
-        </code>
-      </div>
-
-      <div class="example-select">
-        <h1 class="example-select_title">Функция disabled</h1>
-
-        <input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
-        <label for="checkboxDisable" style="color: white">Вы согласны на обработку данных</label>
-
-        <div class="layout-select">
-          <button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
-        </div>
-
-        <button type="button" class="check-code" id="fifth">Посмотреть код</button>
-        <code id="codeFifth">
-          <pre>
-            <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
-              selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span> 
-              placeholder: <span class="code__string">'Выберите авто',</span> 
-              searchMode: <span class="code__keyword">true,</span>
-              items: [
-                <span class="code__string">'BMW',</span>
-                {
-                  id: <span class="code__string">'213sade',</span>
-                  title: <span class="code__string">'Opel',</span>
-                  value: 1,
-                },
-                <span class="code__string">'Mersedes',</span> 
-                <span class="code__string">'MAN',</span>  
-                <span class="code__string">'Ferari',</span> 
-              ],
-              styles: {
-                head: {
-                  width: <span class="code__string">'830px',</span> 
-                },
-                list: {
-                  width: <span class="code__string">'824px',</span> 
-                },
-                placeholder: {
-                  maxWidth: <span class="code__string">'500px ',</span>
-                },
-              },
-            });
-          </pre>
-        </code>
-      </div>
-    </div>
-  </body>
-  <script type="module" src="index.js"></script>
-</html>
--- a/example/index.js
+++ b/example/index.js
@@ -1,233 +0,0 @@
-import { CGSelect } from '../src/cg-select';
-import './example';
-
-// ------------------------------Обычный селект--------------------
-const dropdown = new CGSelect({
-  selector: '.cg-dropdown_one',
-  placeholder: 'Выберите авто',
-  lable: 'EXAMPLE',
-  items: [
-    'BMW',
-    {
-      id: '213sade',
-      title: 'Opel',
-      value: 1,
-    },
-    'Mersedes',
-    'MAN',
-    'Ferari',
-  ],
-  styles: {
-    head: {
-      width: '830px',
-    },
-    list: {
-      width: '824px',
-    },
-  },
-});
-
-// ------------------------------NativeSelect-----------------------
-const dropdownNativeSelect = new CGSelect({
-  selector: '.cg-dropdown_selectNative',
-  placeholder: 'Выберите авто',
-  nativeSelectMode: true,
-  items: [
-    'BMW',
-    {
-      id: '213sade',
-      title: 'Opel',
-      value: 1,
-    },
-    'Mersedes',
-    'MAN',
-    'Ferari',
-    'Kamaz',
-    'Ural',
-  ],
-  styles: {
-    head: {
-      width: '830px',
-    },
-    list: {
-      width: '824px',
-    },
-  },
-});
-
-// ------------------------------listDisplayMode--------------------
-const dropdownlistDisplayMode = new CGSelect({
-  selector: '.cg-dropdown_listDisplayMode',
-  placeholder: 'Выберите авто',
-  listDisplayMode: true,
-  items: [
-    'BMW',
-    {
-      id: '213sade',
-      title: 'Opel',
-      value: 1,
-    },
-    'Mersedes',
-    'MAN',
-    'Ferari',
-  ],
-  styles: {
-    head: {
-      width: '830px',
-    },
-    list: {
-      width: '824px',
-    },
-  },
-});
-
-// --------------------------------Категории--------------------------
-const dropdown4 = new CGSelect({
-  selector: '.cg-dropdown_categories',
-  placeholder: 'Выберите регион',
-  searchMode: true,
-  items: [
-    {
-      category: 'Russia',
-      categoryItems: [
-        {
-          id: '28qwds',
-          title: 'Москва',
-          value: 0,
-        },
-        ,
-        'Ростов-на-дону',
-        'Саратов',
-        'Волгоград',
-        'Донецк',
-      ],
-    },
-    {
-      category: 'USA',
-      categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
-    },
-    {
-      category: 'France',
-      categoryItems: ['Paris'],
-    },
-  ],
-  styles: {
-    head: {
-      width: '830px',
-    },
-    list: {
-      width: '824px',
-    },
-    placeholder: {
-      maxWidth: '500px ',
-    },
-  },
-  multiselect: true,
-  multiselectTag: true,
-});
-
-//----------------управление с помощью кнопок----------------------------------
-const dropdownBtn = new CGSelect({
-  selector: '.cg-dropdown_usedBtn',
-  placeholder: 'Выберите авто',
-  searchMode: true,
-  items: [
-    'BMW',
-    {
-      id: '213sade',
-      title: 'Opel',
-      value: 1,
-    },
-    'Mersedes',
-    'MAN',
-    'max',
-  ],
-  styles: {
-    head: {
-      width: '830px',
-      color: 'black',
-      backgroundColor: 'rgb(176 223 167)',
-    },
-    list: {
-      width: '824px',
-      color: 'black',
-      backgroundColor: 'rgb(176 223 167)',
-    },
-    caret: {
-      borderTop: '6px solid black',
-    },
-    search: {
-      backgroundColor: '#d7ffff',
-      borderRadius: '5px',
-      borderBottom: 'none',
-      width: '95%',
-      color: 'black',
-    },
-  },
-  multiselect: true,
-});
-
-const buttonOpen = document.querySelector('.button__open');
-const buttonClose = document.querySelector('.button__close');
-
-dropdownBtn.buttonControl(buttonOpen, 'open');
-dropdownBtn.buttonControl(buttonClose, 'close');
-
-//-------------------------Функция Disabled----------------------------------
-const dropdownDisabled = new CGSelect({
-  selector: '.cg-dropdown_checkboxDisable',
-  placeholder: 'Выберите авто',
-  searchMode: true,
-  items: [
-    'BMW',
-    {
-      id: '213sade',
-      title: 'Opel',
-      value: 1,
-    },
-    'Mersedes',
-    'MAN',
-    'max',
-  ],
-  styles: {
-    head: {
-      width: '830px',
-    },
-    list: {
-      width: '824px',
-    },
-    placeholder: {
-      maxWidth: '500px ',
-    },
-  },
-  multiselect: true,
-});
-dropdownDisabled.disabled(true);
-let chbox = document.getElementById('checkboxDisable');
-
-chbox.addEventListener('click', () => {
-  if (chbox.checked == true) {
-    dropdownDisabled.disabled(false);
-  } else {
-    dropdownDisabled.disabled(true);
-  }
-});
-
-// ------------------------------URL--------------------
-const dropdown3 = new CGSelect({
-  selector: '.cg-dropdown_three',
-  placeholder: 'URL',
-  url: 'https://jsonplaceholder.typicode.com/todos',
-  searchMode: true,
-  darkTheme: false,
-  language: 'ru',
-  styles: {
-    head: {
-      width: '830px',
-    },
-    list: {
-      width: '824px',
-    },
-  },
-  multiselect: true,
-});
--- a/index.js
+++ b/index.js
@@ -1,3 +1,3 @@
-import { CGSelect } from './src/cg-select';
+import CGSelect from './src/cg-select';

 export default CGSelect;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,8 @@
 {
  "name": "cg-select",
-  "version": "0.2.1",
+  "version": "0.3.11",
+  "source": "index.js",
+  "main": "dist/main.js",
  "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
  "author": {
    "name": "CraftGroup",
@@ -8,10 +10,9 @@
  },
  "homepage": "https://cg-select.itguild.info",
  "scripts": {
-    "start": "parcel example/index.html -p 4500 --open ",
-    "build": "parcel build example/index.js --no-cache",
-    "deploy": "gh-pages -d dist",
-    "predeploy": "npm run build"
+    "start": "npx webpack-dev-server --mode development",
+    "dev": "npx webpack --mode development",
+    "build": "npx webpack --mode production"
  },
  "repository": {
    "type": "git",
@@ -22,17 +23,25 @@
    "url": "https://github.com/apuc/cg-select/issues"
  },
  "devDependencies": {
-    "@parcel/transformer-sass": "^2.7.0",
-    "jsdoc": "^4.0.0",
-    "parcel": "^2.7.0",
-    "prettier": "^2.7.1"
-  },
-  "dependencies": {
-    "@parcel/optimizer-css": "^2.8.0",
+    "@babel/core": "^7.21.4",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-typescript": "^7.21.4",
    "@types/prettier": "^2.7.2",
-    "gh-pages": "^4.0.0",
-    "typedoc": "^0.23.24",
-    "typescript": "^4.9.4"
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.7.3",
+    "html-webpack-plugin": "^5.5.0",
+    "jsdoc": "^4.0.0",
+    "prettier": "^2.7.1",
+    "sass": "^1.60.0",
+    "sass-loader": "^13.2.2",
+    "style-loader": "^3.3.2",
+    "ts-loader": "^9.4.2",
+    "typedoc": "^0.23.28",
+    "typescript": "^5.0.2",
+    "webpack": "^5.77.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.2"
  },
  "keywords": [
    "select",
--- a/src/cg-select.ts
+++ b/src/cg-select.ts
@@ -16,7 +16,7 @@ import {
  nativeOptionMultiple,
  nativeOptionOrdinary,
 } from './components/utils/utils';
-import { IDataItem, ISelectedItems } from './components/utils/urils.interface';
+import { IDataItem, ISelectedItems } from './components/utils/utils.interface';

 import { ICgSelect, IStyle } from './interfaces/cg-select.interface';
 import { IItems } from './interfaces/items.interface';
@@ -24,25 +24,26 @@ import { ru, en } from './language/language';
 import { ILanguage } from './interfaces/language.interface';

 import './main.scss';
+import { changeTheme } from './components/theme/theme';
+import { CustomTheme, CustomThemeJson } from 'components/theme/theme.interface';

 /**
 * @class Class Description ICgSelect
 * @description This class implements the functionality of a custom select, with customization capabilities.
 * @author Ovsyanikov Maxim
 */
-export class CGSelect implements ICgSelect {
-  // Select settings
+export default class CGSelect implements ICgSelect {
  selector?: string;
  selected?: string;
  placeholder?: string;
  items?: IItems[] | string[] | any;
-  darkTheme?: boolean;
+  theme?: string | CustomTheme | CustomThemeJson;
  searchMode?: boolean;
  closeOnSelect?: boolean;
  nativeSelectMode?: boolean;
  listDisplayMode?: boolean;
  language?: string;
-  lable?: string;
+  label?: string;
  styles?: IStyle;
  event?: string;
  url?: string;
@@ -73,7 +74,7 @@ export class CGSelect implements ICgSelect {
   * Variable for carriage control.
   * @type {Element | null | undefined}
   */
-  private caret: Element | null | undefined;
+  private carriage: Element | null | undefined;
  /**
   * Transferred categories.
   * @type {string}
@@ -93,7 +94,7 @@ export class CGSelect implements ICgSelect {
   * Button, to control the select.
   * @type {Element | null}
   */
-  private btnCntr?: Element | null;
+  private buttonAction?: Element | null;

  /**
   * @param {ICgSelect} setting Object accepting select settings.
@@ -104,9 +105,9 @@ export class CGSelect implements ICgSelect {
   *  selector: 'Unique selector',
      selected: 'Selected item',
      placeholder: '...',
-      lable: '...'
+      label: '...'
      items: [string|number|object],
-      darkTheme: true/false,
+      theme: string,
      searchMode: true/false,
      closeOnSelect:  true/false,
      nativeSelectMode: true/false,
@@ -118,9 +119,9 @@ export class CGSelect implements ICgSelect {
        },
        list: {...},
        chips: {...},
-        caret: {...},
+        carriage: {...},
        placeholder: {...},
-        lable: {..},
+        label: {..},
      },
      event: '...',
      url: 'http/...',
@@ -129,10 +130,14 @@ export class CGSelect implements ICgSelect {
   * } 
   */
  constructor(setting: ICgSelect) {
-    this.init(setting);
-    this.render();
-    this.closeSelectClick();
-    this.initEvent();
+    if (setting) {
+      this.init(setting);
+      this.render();
+      this.closeSelectClick();
+      this.initEvent();
+    } else {
+      throw new Error('Specify settings!');
+    }
  }

  //Getters
@@ -174,7 +179,6 @@ export class CGSelect implements ICgSelect {
          'MAN',
          'max',
        ],
-        darkTheme: true,
        multiselect: true,
        multiselectTag: true,
      }
@@ -189,13 +193,13 @@ export class CGSelect implements ICgSelect {
      listDisplayMode,
      nativeSelectMode,
      searchMode,
-      darkTheme,
      language,
      styles,
-      lable,
+      label,
      event,
      selected,
      placeholder,
+      theme,
    } = setting;

    this.options = setting;
@@ -206,15 +210,15 @@ export class CGSelect implements ICgSelect {
    this.selector = selector;
    this.items = items;
    this.searchMode = searchMode;
-    this.darkTheme = darkTheme;
    this.language = language;
    this.nativeSelectMode = nativeSelectMode;
    this.listDisplayMode = listDisplayMode;
    this.styles = styles;
-    this.lable = lable;
+    this.label = label;
    this.event = event;
    this.selected = selected;
    this.placeholder = placeholder;
+    this.theme = theme;

    const elem = document.querySelector(this.selector!);
    this.element = elem;
@@ -231,14 +235,14 @@ export class CGSelect implements ICgSelect {
      return;
    }

-    if (this.lable) {
-      const lableItem = document.createElement('h1');
-      const textLable = document.createTextNode(this.lable);
+    if (this.label) {
+      const labelItem = document.createElement('h1');
+      const textLabel = document.createTextNode(this.label);

-      lableItem.appendChild(textLable);
-      lableItem.classList.add('label');
+      labelItem.appendChild(textLabel);
+      labelItem.classList.add('label');

-      this.element!.insertAdjacentElement('beforebegin', lableItem);
+      this.element!.insertAdjacentElement('beforebegin', labelItem);
    }

    items.forEach((dataItem: any, index: number) => {
@@ -287,6 +291,7 @@ export class CGSelect implements ICgSelect {
    this.randomId = random;

    ulList.classList.add('list');
+    ulList!.classList.add('classicList');

    if (this.styles) {
      customStylesFormat(this.styles.list!, ulList);
@@ -353,10 +358,10 @@ export class CGSelect implements ICgSelect {
    });

    this.list = this.element!.querySelector('.list');
-    this.caret = this.element!.querySelector('.caret');
+    this.carriage = this.element!.querySelector('.caret');

-    if (this.darkTheme == false) {
-      this.checkTheme();
+    if (this.theme) {
+      changeTheme(this.element!, this.theme);
    }

    if (this.nativeSelectMode === true) {
@@ -378,7 +383,6 @@ export class CGSelect implements ICgSelect {
  private async renderUrl() {
    const response = await fetch(this.url!);
    const dataUrl = await response.json();
-    console.log(dataUrl);

    const nativeSelect = createNativeSelect();

@@ -466,10 +470,6 @@ export class CGSelect implements ICgSelect {
   * @method initEvent
   */
  private initEvent() {
-    if (!this.event) {
-      return;
-    }
-
    if (this.event) {
      if (this.event === 'mouseenter') {
        this.element!.addEventListener(this.event, () => {
@@ -491,10 +491,10 @@ export class CGSelect implements ICgSelect {
  private open(oneClick?: boolean): void {
    if (oneClick === true) {
      this.list!.classList.add('open');
-      this.caret!.classList.add('caret_rotate');
+      this.carriage!.classList.add('caret_rotate');
    } else {
      this.list!.classList.toggle('open');
-      this.caret!.classList.toggle('caret_rotate');
+      this.carriage!.classList.toggle('caret_rotate');
    }
  }

@@ -505,7 +505,7 @@ export class CGSelect implements ICgSelect {
   */
  private close(): void {
    this.list?.classList.remove('open');
-    this.caret?.classList.remove('caret_rotate');
+    this.carriage?.classList.remove('caret_rotate');
  }

  /**
@@ -519,7 +519,7 @@ export class CGSelect implements ICgSelect {
    document.addEventListener('click', (e) => {
      const withinBoundaries = e.composedPath().includes(dropdown!);
      if (!withinBoundaries) {
-        if (this.btnCntr) {
+        if (this.buttonAction) {
          return;
        } else {
          this.close();
@@ -541,6 +541,7 @@ export class CGSelect implements ICgSelect {
    let selectedItemsClear: ISelectedItems = {
      placeholder: this.placeholder!,
      selected: this.selected!,
+      theme: this.theme,
    };

    const ulMultipul = document.createElement('ul');
@@ -563,7 +564,6 @@ export class CGSelect implements ICgSelect {
            selected: this.selected!,
            selectedItems: this.selectedItems,
            indexes: this.indexes,
-            darkTheme: this.darkTheme,
            multiselectTag: this.multiselectTag,
          };
        }
@@ -655,32 +655,6 @@ export class CGSelect implements ICgSelect {
    });
  }

-  /**
-   * @private
-   * @method checkTheme
-   * @description Changes the color scheme from dark to light.
-   */
-  private checkTheme(): void {
-    const select = this.element!.querySelector('.cg-select');
-    const caret = this.element!.querySelector('.caret');
-    const list = this.element!.querySelector('ul.list');
-    const search = this.element!.querySelector('.inputSearch');
-
-    if (this.darkTheme == false) {
-      select!.classList.add('selectWhite');
-      caret!.classList.add('caretWhite');
-      list!.classList.add('listWhite');
-
-      if (this.searchMode == true) {
-        search!.classList.add('inputWhite');
-      }
-    } else if (this.darkTheme == true) {
-      return;
-    } else {
-      throw new Error('Styles error or invalid value entered!');
-    }
-  }
-
  /**
   * @private
   * @param {boolean} nativeSelectMode parameter responsible for adding native select.
@@ -797,7 +771,7 @@ export class CGSelect implements ICgSelect {
   * @returns {HTMLElement} returns a reference to the selected HTML element.
   * @method getElement
   */
-  public getElement(numberItem: number): IItems[] | string[] | any {
+  public getElement(numberItem: number): IItems[] | any {
    if (numberItem > this.items.length) {
      return;
    }
@@ -841,7 +815,7 @@ export class CGSelect implements ICgSelect {
      return;
    }

-    this.btnCntr = button!;
+    this.buttonAction = button!;
    button.addEventListener('click', () => {
      if (method.toLowerCase() === 'open') {
        this.open(true);
@@ -940,4 +914,48 @@ export class CGSelect implements ICgSelect {
    const select: string = options[index].innerText;
    this.render(select);
  }
+
+  /**
+   * @description Method for tracking the actions of the select, you can pass a callback
+   * @param state select state.
+   * @param callback
+   * @method on
+   */
+  public on(state: string, callback: (state: any, value?: string) => any) {
+    const options = this.element?.querySelectorAll('.list__item');
+    let value = '';
+
+    switch (state) {
+      case 'select':
+        options?.forEach((option: Element) => {
+          option.addEventListener('click', () => {
+            console.log('option:select', option.textContent);
+            value = option.textContent!;
+            callback(state, value);
+          });
+        });
+        break;
+      case 'close':
+        this.element!.addEventListener('click', () => {
+          console.log('list:close', this.list!.classList.contains('close'));
+        });
+        callback(state);
+        break;
+      case 'open':
+        this.element!.addEventListener('click', () => {
+          console.log('list:open', this.list!.classList.contains('open'));
+        });
+        callback(state);
+        break;
+      case 'clear':
+        this.element!.addEventListener('click', () => {
+          const svgIcon = this.element?.querySelector('.svg-icon');
+          svgIcon?.addEventListener('click', () => {
+            console.log('list:clear', svgIcon.classList.contains('svg-clear'));
+          });
+        });
+        callback(state);
+        break;
+    }
+  }
 }
--- a/src/components/theme/theme.interface.ts
+++ b/src/components/theme/theme.interface.ts
@@ -0,0 +1,24 @@
+export interface CustomTheme {
+  name: string;
+  styles: {
+    head?: string;
+    list?: string;
+    placeholder?: string;
+    caret?: string;
+    search?: string;
+    chips?: string;
+    lable?: string;
+  };
+}
+
+export interface CustomThemeJson {
+  name: string;
+  styles: {
+    head?: object;
+    list?: object;
+    placeholder?: object;
+    caret?: object;
+    search?: object;
+    lable?: object;
+  };
+}
--- a/src/components/theme/theme.ts
+++ b/src/components/theme/theme.ts
@@ -0,0 +1,70 @@
+import { customStylesFormat } from '../utils/utils';
+import { CustomTheme, CustomThemeJson } from './theme.interface';
+
+export function changeTheme(element: Element, theme: string | CustomTheme | CustomThemeJson) {
+  const select = element!.querySelector('.cg-select');
+  const caret = element!.querySelector('.caret');
+  const list = element!.querySelector('ul.list');
+  const search = element!.querySelector('.inputSearch');
+  const placeholder = element!.querySelector('.selected');
+  const lable = document.querySelector('.label');
+  const path = element.querySelectorAll('.pathWhite');
+  const nativeSelect = element.querySelector('.nativeSelect');
+
+  select!.classList.remove('classicSelect');
+  list!.classList.remove('classicList');
+  path.forEach((elem) => {
+    elem.classList.remove('pathBlack');
+    elem.classList.remove('pathWhite');
+  });
+
+  if (typeof theme === 'string') {
+    switch (theme) {
+      case 'dark':
+        select!.classList.add('selectDark');
+        list!.classList.add('listDark');
+        nativeSelect?.classList.add('listDark');
+        path.forEach((elem) => {
+          elem.classList.add('pathWhite');
+        });
+        break;
+      case 'white':
+        select!.classList.add('selectWhite');
+        caret!.classList.add('caretWhite');
+        list!.classList.add('listWhite');
+        nativeSelect?.classList.add('listWhite');
+        path.forEach((elem) => {
+          elem.classList.add('pathBlack');
+        });
+
+        if (search!) {
+          search!.classList.add('inputWhite');
+        }
+        break;
+
+      default:
+        select!.classList.add('classicSelect');
+        list!.classList.add('classicList');
+        break;
+    }
+  } else {
+    if (theme.name!) {
+      let customThemeHead = theme.styles.head! as object;
+      let customThemeList = theme.styles.list! as object;
+      let customThemeCaret = theme.styles.caret! as object;
+      let customThemePl = theme.styles.placeholder! as object;
+      let customThemeSearch = theme.styles.search! as object;
+      let customThemeLable = theme.styles.lable! as object;
+
+      customStylesFormat(customThemeHead, select!);
+      customStylesFormat(customThemeList, list!);
+      customStylesFormat(customThemeCaret, caret!);
+      customStylesFormat(customThemePl, placeholder!);
+      customStylesFormat(customThemeSearch, search!);
+      customStylesFormat(customThemeLable, lable!);
+    } else {
+      select!.classList.add(`${theme.styles.head}`);
+      list!.classList.add(`${theme.styles.list}`);
+    }
+  }
+}
--- a/src/components/utils/utils.interface.ts
+++ b/src/components/utils/utils.interface.ts
@@ -1,3 +1,4 @@
+import { CustomTheme, CustomThemeJson } from 'components/theme/theme.interface';
 import { IItems } from 'interfaces/items.interface';

 /**
@@ -55,5 +56,5 @@ export interface ISelectedItems {
   * An optional parameter that is responsible for enabling a light/dark theme by default, the dark theme is set.
   * @type {boolean}
   */
-  darkTheme?: boolean;
+  theme?: string | CustomTheme | CustomThemeJson;
 }
--- a/src/components/utils/utils.ts
+++ b/src/components/utils/utils.ts
@@ -4,7 +4,7 @@
 */
 import { IStyle } from 'interfaces/cg-select.interface';
 import { IItems } from 'interfaces/items.interface';
-import { ISelectedItems } from './urils.interface';
+import { ISelectedItems } from './utils.interface';

 /**
 * Converting each item obtained from the Items field;
@@ -77,6 +77,7 @@ export function createSelected(element: Element, content?: string, styles?: ISty
  const caret = document.createElement('div');

  select.classList.add('cg-select');
+  select.classList.add('classicSelect');
  selected.classList.add('selected');
  caret.classList.add('caret');

@@ -103,7 +104,7 @@ export function createSelected(element: Element, content?: string, styles?: ISty
 * @param {ISelectedItems} dataSelectText the text that is rendered in the select.
 */
 export function clearSelect(select: HTMLElement, element: Element, dataSelectText: ISelectedItems) {
-  const { selectedItems, indexes, darkTheme, multiselectTag } = dataSelectText;
+  const { selectedItems, indexes, theme, multiselectTag } = dataSelectText;

  const options = element.querySelectorAll('.list__item');
  const nativeOption = element!.querySelectorAll('.nativeSelect__nativeOption');
@@ -122,14 +123,19 @@ export function clearSelect(select: HTMLElement, element: Element, dataSelectTex
    return;
  }

-  if (darkTheme === true || !darkTheme) {
-    path1.classList.add('pathWhite');
-    path2.classList.add('pathWhite');
-  }
-
-  if (darkTheme === false) {
-    path1.classList.add('pathBlack');
-    path2.classList.add('pathBlack');
+  switch (theme) {
+    case 'dark':
+      path1.classList.add('pathWhite');
+      path2.classList.add('pathWhite');
+      break;
+    case 'white':
+      path1.classList.add('pathBlack');
+      path2.classList.add('pathBlack');
+      break;
+    default:
+      path1.classList.add('pathWhite');
+      path2.classList.add('pathWhite');
+      break;
  }

  svgIcon.classList.add('svg-icon');
@@ -137,7 +143,9 @@ export function clearSelect(select: HTMLElement, element: Element, dataSelectTex

  select!.appendChild(svgIcon);

-  svgIcon.addEventListener('click', () => {
+  svgIcon.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
    select!.innerText = '';

    nativeOption.forEach((option) => {
--- a/src/images/logoCG2.ico
+++ b/src/images/logoCG2.ico
--- a/src/interfaces/cg-select.interface.ts
+++ b/src/interfaces/cg-select.interface.ts
@@ -1,3 +1,4 @@
+import { CustomTheme, CustomThemeJson } from 'components/theme/theme.interface';
 import { IItems } from './items.interface';

 /**
@@ -26,10 +27,10 @@ export interface ICgSelect {
   */
  items?: IItems[] | string[] | any;
  /**
-   * An optional parameter that is responsible for enabling a light / dark theme by default, the dark theme is set (darkTheme == true).
-   * @type {boolean}
+   * An optional parameter responsible for switching between different themes, the classic theme is set by default.
+   * @type {string} values: dark, white
   */
-  darkTheme?: boolean;
+  theme?: string | CustomTheme | CustomThemeJson;
  /**
   * An optional parameter that adds a live search on the select elements.
   * @type {boolean}
@@ -61,7 +62,7 @@ export interface ICgSelect {
   * An optional parameter that adds a lable before the select.
   * @type {string}
   */
-  lable?: string;
+  label?: string;
  /**
   * An optional parameter that is responsible for customizing the select elements,
   * objects with CSS properties for customizable elements are passed to it.
--- a/src/main.scss
+++ b/src/main.scss
@@ -3,6 +3,8 @@
@import './style/svgStyle.scss';
@import './style/whiteTheme.scss';
@import './style/displayMode.scss';
+@import './style/classicTheme.scss';
+@import './style/darkTheme.scss';

 // ----Layout----
 .cg-dropdown {
@@ -26,7 +28,6 @@
  flex-grow: 1;

  min-height: 50px;
-  color: #fff;
  padding: 5px;

  display: -webkit-box;
@@ -42,7 +43,6 @@
  align-items: center;

  text-overflow: ellipsis;
-  background: #2a2f3b;

  border: none;
  cursor: pointer;
@@ -70,8 +70,6 @@
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
-
-    background: #394050;
  }
 }

@@ -114,10 +112,6 @@
  margin-top: -0.2px;
  list-style: none;

-  color: white;
-  background: #2a2f3b;
-  border: 1px #0a0b0e solid;
-
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
--- a/src/style/classicTheme.scss
+++ b/src/style/classicTheme.scss
@@ -0,0 +1,22 @@
+.classicSelect {
+  color: #fff;
+  background: #2a2f3b;
+
+  &:hover {
+    background: #394050;
+  }
+}
+
+.classicList {
+  color: white;
+  background: #2a2f3b;
+  border: 1px #0a0b0e solid;
+}
+
+.pathWhite {
+  color: white !important;
+}
+
+.pathBlack {
+  color: black;
+}
--- a/src/style/darkTheme.scss
+++ b/src/style/darkTheme.scss
@@ -0,0 +1,17 @@
+.selectDark {
+  background: rgb(29, 29, 29);
+  color: white;
+}
+
+.caretWhite {
+  border-top: 6px solid black !important;
+}
+
+.listDark {
+  background: rgb(29, 29, 29);
+  color: white;
+}
+
+.inputDark {
+  border-bottom: 1px solid black !important;
+}
--- a/src/style/whiteTheme.scss
+++ b/src/style/whiteTheme.scss
@@ -1,5 +1,5 @@
 .selectWhite {
-  background: rgb(248, 248, 248) !important;
+  background: rgb(248, 248, 248);
 }

 .selectWhite,
@@ -7,25 +7,18 @@
 .inputWhite,
 .pathBlack,
 .selectWhite {
-  color: black !important;
+  color: black;
 }

 .caretWhite {
-  border-top: 6px solid black !important;
+  border-top: 6px solid black;
 }

 .listWhite {
-  background-color: white !important;
+  background-color: white;
 }

 .inputWhite {
  border-bottom: 1px solid black !important;
-}
-
-.pathWhite {
-  color: white !important;
-}
-
-.pathBlack {
  color: black !important;
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,83 +1,19 @@
 {
  // "include": ["src/**/*", "index.ts"],
  "compilerOptions": {
-    /* Projects */
-    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
-    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
-    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
-    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
-    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
-    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
-
    /* Language and Environment */
    "target": "es2017" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
-    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
-    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
-    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
-    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
-    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
-    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
-    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
-    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
-    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
-
    /* Modules */
    "module": "commonjs" /* Specify what module code is generated. */,
    "rootDir": "./" /* Specify the root folder within your source files. */,
-    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
    "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,
-    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
-    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
-    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
-    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
-    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files. */
-    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
-
-    /* JavaScript Support */
-    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
-    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
-    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
-
-    /* Emit */
-    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
-    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
-    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
-    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
-    // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
-    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
-    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
-    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
-    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
-    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
-    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
-    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
-    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
-    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
-    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
-    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
-    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
-    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
-    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
-    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
-
-    /* Interop Constraints */
-    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
    "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
-
+    "moduleResolution": "node",
    "strict": true,
-
-    /* Completeness */
-    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  }
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,53 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: './index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'main.js',
+    clean: true,
+    library: {
+      name: 'CGSelect',
+      type: 'window',
+      export: 'default',
+    },
+  },
+  // devServer: {
+  //   open: true,
+  //   port: 5500,
+  // },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.s[ac]ss$/i,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.(?:js|mjs|cjs)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [['@babel/preset-env', { targets: 'defaults' }]],
+            plugins: ['@babel/plugin-proposal-class-properties'],
+          },
+        },
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  // plugins: [
+  //   new HtmlWebpackPlugin({
+  //     template: path.resolve(__dirname, './test/index.html'),
+  //     filename: 'index.html',
+  //   }),
+  // ],
+};
Author	SHA1	Message	Date
MaxOvs19	5527157568	create cdn-main	2023-04-13 12:46:11 +03:00
MaxOvs19	71df31eda9	Update 0.3.11	2023-04-12 15:26:52 +03:00
MaxOvs19	37bb4d148b	Merge pull request #40 from apuc/test-webpack-build Fixed import select(cdn)	2023-04-11 15:20:12 +03:00
MaxOvs19	798024d05c	Fixed import select(cdn)	2023-04-11 15:19:42 +03:00
MaxOvs19	f8e76ba5ec	Merge pull request #39 from apuc/test-webpack-build New update 0.3.0	2023-04-06 15:16:04 +03:00
MaxOvs19	72fdcb6c0b	Fix docs	2023-04-06 15:15:24 +03:00
MaxOvs19	b2c1abf54e	New update 0.3.0	2023-04-06 15:14:30 +03:00
MaxOvs19	e89a20593c	testing webpack	2023-04-05 22:05:49 +03:00
MaxOvs19	570c7f5512	fix 0.2.71	2023-04-04 17:33:14 +03:00
MaxOvs19	197a5f25c8	Fixed config	2023-03-31 15:02:52 +03:00
MaxOvs19	70fc08523e	Update 0.2.7	2023-03-31 14:51:02 +03:00
MaxOvs19	b0b02bc105	Update 0.2.6	2023-03-22 21:50:03 +03:00
MaxOvs19	635deb6878	Update README.md	2023-03-21 15:57:58 +03:00
MaxOvs19	6f964027ee	Fixed docs	2023-03-21 15:51:50 +03:00
MaxOvs19	7a06e3a619	Fixed readme	2023-03-21 15:02:59 +03:00
MaxOvs19	e75cfd96a6	Ready to update	2023-03-21 14:44:24 +03:00
MaxOvs19	c635e838c8	Finished working	2023-03-20 20:25:14 +03:00
MaxOvs19	2d4d774931	Added new mode for created customs theme	2023-03-15 20:09:51 +03:00
MaxOvs19	2659db4326	Create new branch, added interface themeJson	2023-03-03 19:34:32 +03:00
MaxOvs19	4df0bb1897	Update 0.2.5	2023-02-27 17:42:07 +03:00
MaxOvs19	c411b9a6a8	Merge pull request #38 from apuc/select-only Moving an example using a select to a separate repository	2023-02-27 17:35:37 +03:00
MaxOvs19	ac2422829a	Run to update	2023-02-27 17:34:19 +03:00
MaxOvs19	f16ec53e91	Added docs	2023-02-21 20:46:34 +03:00
Victor	3702547f99	new version	2023-02-20 21:02:04 +03:00
MaxOvs19	3bd587b846	Merge pull request #37 from apuc/custom-themes Update 0.2.4	2023-02-20 14:28:10 +03:00
MaxOvs19	682332645e	Finish update 0.2.	2023-02-20 14:26:47 +03:00
MaxOvs19	93fec79c1e	Constructor in working. Added description in style builder	2023-02-17 19:56:41 +03:00
MaxOvs19	b206334a8b	Added constructor select(css) and tested his	2023-02-17 16:03:37 +03:00
MaxOvs19	a6b6f020dd	Test in textArea	2023-02-16 19:02:53 +03:00
MaxOvs19	a3c433d328	Added constructor.js	2023-02-16 17:32:08 +03:00
MaxOvs19	2cd1920eb5	Create block in decription themes	2023-02-15 19:49:17 +03:00
MaxOvs19	fd8fc093d0	Added custom theme	2023-02-14 20:19:57 +03:00
MaxOvs19	4a2e8c9b17	Fix version	2023-02-13 20:38:36 +03:00
MaxOvs19	f65d2de59e	Fixed index.js	2023-02-09 21:02:29 +03:00
MaxOvs19	8b68bbc498	Fix index.js	2023-02-09 21:01:44 +03:00
MaxOvs19	90047207d6	Update README.md	2023-02-09 16:52:39 +03:00
MaxOvs19	cf954bfa84	Update READMERU.md	2023-02-09 16:52:26 +03:00
MaxOvs19	91b9e641d6	Update READMERU.md	2023-02-09 16:51:42 +03:00
MaxOvs19	d4fb1be3a4	Fixed conflict in merge	2023-02-09 16:50:53 +03:00
MaxOvs19	1635198b5b	Added Russian version README	2023-02-09 16:47:55 +03:00
MaxOvs19	11473e288a	Update 0.2.32	2023-02-08 15:21:51 +03:00
MaxOvs19	efbb4a32e6	Merge pull request #36 from apuc/rebuild-exemple-page Rebuild exemple page	2023-02-08 15:05:59 +03:00
MaxOvs19	d9e6fc72c9	Finished update	2023-02-08 15:03:36 +03:00
MaxOvs19	c5d41550b1	Finished update docs	2023-02-08 13:41:41 +03:00
MaxOvs19	74eecaaa07	Fixed modules and variabales in menu docs	2023-02-07 18:56:54 +03:00
MaxOvs19	2bb94f0402	Fixed docs	2023-02-07 17:43:01 +03:00
MaxOvs19	038b7d627c	Fixed themes	2023-02-06 19:18:08 +03:00
MaxOvs19	bcad805727	Fixed exemple page and collback	2023-02-06 15:24:36 +03:00
MaxOvs19	993b8855fa	Merge pull request #35 from apuc/add-collback Add collback	2023-01-31 16:47:09 +03:00
MaxOvs19	9ae357c06d	Fixed docs	2023-01-31 16:46:36 +03:00
Max	df37f23aaf	Generated new docs	2023-01-31 15:28:00 +03:00
MaxOvs19	31b10e21d5	added comment	2023-01-31 14:51:17 +03:00
MaxOvs19	784eb578fd	Added description in methods On	2023-01-31 14:50:03 +03:00
MaxOvs19	63d5f0e35f	Added method On	2023-01-30 17:57:13 +03:00
MaxOvs19	1c5ee130f9	Merge pull request #34 from apuc/add-new-theme Add new theme	2023-01-27 20:07:35 +03:00
MaxOvs19	879296c7aa	Fixed docs	2023-01-27 20:06:32 +03:00
MaxOvs19	fe91c1206e	Changed the theme selection function	2023-01-27 17:23:25 +03:00
MaxOvs19	102fb5a7b1	Added new theme fn	2023-01-26 19:06:17 +03:00
MaxOvs19	8baf5554df	Fix packege	2023-01-26 17:47:58 +03:00
Max	05e2e1ee86	Fixed docs	2023-01-24 20:10:53 +03:00
Max	3b56254919	Merge https://github.com/apuc/cg-select	2023-01-20 19:22:58 +03:00
MaxOvs	136a6bc6e5	pull 30.12	2022-12-30 23:20:33 +03:00
MaxOvs	03269cc99f	Pull in main repo	2022-12-27 20:09:25 +03:00
MaxOvs	d8993da744	Update in main brench	2022-12-22 15:57:06 +03:00
MaxOvs19	864783aaf8	Update README.md	2022-12-20 15:04:10 +03:00
MaxOvs	0a44732782	Pull on main rep	2022-12-20 14:57:21 +03:00
MaxOvs	970d84b131	Pull on home directory	2022-11-18 19:25:21 +03:00
MaxOvs	6416a42781	Pull in fixed conflict	2022-11-18 12:18:25 +03:00
MaxOvs19	0fff32cbed	Update cg-dropdown.js	2022-11-17 21:19:46 +03:00
MaxOvs19	6cb388d959	Update index.html	2022-11-17 21:17:21 +03:00
MaxOvs19	815d92f71d	Update index.js	2022-11-17 21:16:25 +03:00
MaxOvs19	c30b8faf09	Update ExemplePage.scss	2022-11-17 21:15:10 +03:00
MaxOvs19	2a53537df2	Update index.html	2022-11-17 21:13:02 +03:00
MaxOvs	c25d983a02	Fixed search method	2022-11-15 17:42:10 +03:00
MaxOvs19	fc67642d10	Update index.js	2022-11-15 14:23:53 +03:00
MaxOvs19	827b684fd3	Update nativSelect.scss	2022-11-14 19:02:28 +03:00
MaxOvs19	fdb3c73588	Update main.scss	2022-11-14 19:01:03 +03:00
MaxOvs19	22e9b7692c	Update cg-dropdown.js	2022-11-14 18:58:35 +03:00
MaxOvs19	dafbe807da	Update README.md	2022-11-14 13:37:57 +03:00
MaxOvs19	461578abe7	Update package.json	2022-11-14 13:22:15 +03:00
MaxOvs19	e1055e171a	Update package.json	2022-11-14 13:19:20 +03:00