urfu-ui-kit-vanilla 2.3.1 → 2.3.2

package/main.js

@@ -1,357 +1,419 @@
-// UrFU UI-Kit Vanilla - Основной файл
-// Автоматически подключает CSS и добавляет поддержку динамических утилит
-// 
-// Использование в HTML:
-// <script src="node_modules/urfu-ui-kit-vanilla/main.js"></script>
-//
-// Использование в TypeScript/JavaScript:
-// import 'urfu-ui-kit-vanilla/main.js';
-// или
-// require('urfu-ui-kit-vanilla/main.js');
-
-(function() {
-    'use strict';
-    
-    // Автоматически подключаем CSS
-    function loadCSS() {
-        // Определяем путь к CSS относительно текущего скрипта
-        const currentScript = document.currentScript;
-        let cssPath = 'node_modules/urfu-ui-kit-vanilla/src/main.css';
-        
-        if (currentScript) {
-            const scriptPath = currentScript.src;
-            const scriptDir = scriptPath.substring(0, scriptPath.lastIndexOf('/'));
-            cssPath = scriptDir + '/src/main.css';
-        }
-        
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = cssPath;
-        link.id = 'urfu-ui-kit-css';
-        
-        // Проверяем, не подключен ли уже CSS
-        if (!document.getElementById('urfu-ui-kit-css')) {
-            document.head.appendChild(link);
-        }
-    }
-    
-    // Подключаем CSS при загрузке
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', loadCSS);
-    } else {
-        loadCSS();
-    }
-    
-    // Кэш для уже созданных стилей
-    const styleCache = new Set();
-    
-    // Функция для создания CSS-правила
-    function createStyle(selector, property, value) {
-        const rule = `${selector} { ${property}: ${value}; }`;
-        if (styleCache.has(rule)) return;
-        
-        styleCache.add(rule);
-        
-        // Создаем или находим элемент style
-        let styleElement = document.getElementById('dynamic-utils-styles');
-        if (!styleElement) {
-            styleElement = document.createElement('style');
-            styleElement.id = 'dynamic-utils-styles';
-            document.head.appendChild(styleElement);
-        }
-        
-        // Добавляем правило
-        styleElement.textContent += rule + '\n';
-    }
-    
-    // Функция для парсинга классов и создания стилей
-    function processElement(element) {
-        const classList = Array.from(element.classList);
-        
-        classList.forEach(className => {
-            // Проверяем паттерны для margin
-            const marginMatch = className.match(/^um([lrtb]?)(\d+)$/);
-            if (marginMatch) {
-                const [, direction, value] = marginMatch;
-                const pxValue = value + 'px';
-                
-                switch (direction) {
-                    case 'l':
-                        createStyle(`.${className}`, 'margin-left', pxValue);
-                        break;
-                    case 'r':
-                        createStyle(`.${className}`, 'margin-right', pxValue);
-                        break;
-                    case 't':
-                        createStyle(`.${className}`, 'margin-top', pxValue);
-                        break;
-                    case 'b':
-                        createStyle(`.${className}`, 'margin-bottom', pxValue);
-                        break;
-                    default:
-                        createStyle(`.${className}`, 'margin', pxValue);
-                        break;
-                }
-            }
-            
-            // Проверяем паттерны для padding
-            const paddingMatch = className.match(/^up([lrtb]?)(\d+)$/);
-            if (paddingMatch) {
-                const [, direction, value] = paddingMatch;
-                const pxValue = value + 'px';
-                
-                switch (direction) {
-                    case 'l':
-                        createStyle(`.${className}`, 'padding-left', pxValue);
-                        break;
-                    case 'r':
-                        createStyle(`.${className}`, 'padding-right', pxValue);
-                        break;
-                    case 't':
-                        createStyle(`.${className}`, 'padding-top', pxValue);
-                        break;
-                    case 'b':
-                        createStyle(`.${className}`, 'padding-bottom', pxValue);
-                        break;
-                    default:
-                        createStyle(`.${className}`, 'padding', pxValue);
-                        break;
-                }
-            }
-            
-            // Проверяем паттерны для width/height
-            const sizeMatch = className.match(/^u([wh])(\d+)$/);
-            if (sizeMatch) {
-                const [, property, value] = sizeMatch;
-                const pxValue = value + 'px';
-                
-                if (property === 'w') {
-                    createStyle(`.${className}`, 'width', pxValue);
-                } else if (property === 'h') {
-                    createStyle(`.${className}`, 'height', pxValue);
-                }
-            }
-            
-            // Проверяем паттерны для font-size
-            const fontSizeMatch = className.match(/^ufos(\d+)$/);
-            if (fontSizeMatch) {
-                const [, value] = fontSizeMatch;
-                const pxValue = value + 'px';
-                createStyle(`.${className}`, 'font-size', pxValue);
-            }
-            
-            // Проверяем паттерны для gap
-            const gapMatch = className.match(/^ug(\d+)$/);
-            if (gapMatch) {
-                const [, value] = gapMatch;
-                const pxValue = value + 'px';
-                createStyle(`.${className}`, 'gap', pxValue);
-            }
-            
-            // Проверяем паттерны для column-gap
-            const columnGapMatch = className.match(/^ucg(\d+)$/);
-            if (columnGapMatch) {
-                const [, value] = columnGapMatch;
-                const pxValue = value + 'px';
-                createStyle(`.${className}`, 'column-gap', pxValue);
-            }
-            
-            // Проверяем паттерны для row-gap
-            const rowGapMatch = className.match(/^urg(\d+)$/);
-            if (rowGapMatch) {
-                const [, value] = rowGapMatch;
-                const pxValue = value + 'px';
-                createStyle(`.${className}`, 'row-gap', pxValue);
-            }
-            
-            // Проверяем паттерны для min-width
-            const minWidthMatch = className.match(/^umnw(\d+)$/);
-            if (minWidthMatch) {
-                const [, value] = minWidthMatch;
-                const pxValue = value + 'px';
-                createStyle(`.${className}`, 'min-width', pxValue);
-            }
-            
-            // Проверяем паттерны для min-height
-            const minHeightMatch = className.match(/^umnh(\d+)$/);
-            if (minHeightMatch) {
-                const [, value] = minHeightMatch;
-                const pxValue = value + 'px';
-                createStyle(`.${className}`, 'min-height', pxValue);
-            }
-            
-            // Проверяем паттерны для max-width
-            const maxWidthMatch = className.match(/^umxw(\d+)$/);
-            if (maxWidthMatch) {
-                const [, value] = maxWidthMatch;
-                const pxValue = value + 'px';
-                createStyle(`.${className}`, 'max-width', pxValue);
-            }
-            
-            // Проверяем паттерны для max-height
-            const maxHeightMatch = className.match(/^umxh(\d+)$/);
-            if (maxHeightMatch) {
-                const [, value] = maxHeightMatch;
-                const pxValue = value + 'px';
-                createStyle(`.${className}`, 'max-height', pxValue);
-            }
-            
-            // Проверяем паттерны для line-height
-            const lineHeightMatch = className.match(/^ulh(\d+)$/);
-            if (lineHeightMatch) {
-                const [, value] = lineHeightMatch;
-                const pxValue = value + 'px';
-                createStyle(`.${className}`, 'line-height', pxValue);
-            }
-            
-            // Проверяем паттерны для border-width
-            const borderWidthMatch = className.match(/^ub(\d+)$/);
-            if (borderWidthMatch) {
-                const [, value] = borderWidthMatch;
-                const pxValue = value + 'px';
-                createStyle(`.${className}`, 'border-width', pxValue);
-                createStyle(`.${className}`, 'border-style', 'solid');
-            }
-            
-            // Проверяем паттерны для border-radius
-            const borderRadiusMatch = className.match(/^ubr(\d+)$/);
-            if (borderRadiusMatch) {
-                const [, value] = borderRadiusMatch;
-                const pxValue = value + 'px';
-                createStyle(`.${className}`, 'border-radius', pxValue);
-            }
-            
-            // Проверяем паттерны для opacity
-            const opacityMatch = className.match(/^uop(\d+)$/);
-            if (opacityMatch) {
-                const [, value] = opacityMatch;
-                const opacityValue = (parseInt(value) / 100).toString();
-                createStyle(`.${className}`, 'opacity', opacityValue);
-            }
-            
-            // Проверяем паттерны для z-index
-            const zIndexMatch = className.match(/^uzi(\d+)$/);
-            if (zIndexMatch) {
-                const [, value] = zIndexMatch;
-                createStyle(`.${className}`, 'z-index', value);
-            }
-            
-            // Проверяем паттерны для top
-            const topMatch = className.match(/^utop(\d+)$/);
-            if (topMatch) {
-                const [, value] = topMatch;
-                const pxValue = value + 'px';
-                createStyle(`.${className}`, 'top', pxValue);
-            }
-            
-            // Проверяем паттерны для right
-            const rightMatch = className.match(/^uright(\d+)$/);
-            if (rightMatch) {
-                const [, value] = rightMatch;
-                const pxValue = value + 'px';
-                createStyle(`.${className}`, 'right', pxValue);
-            }
-            
-            // Проверяем паттерны для bottom
-            const bottomMatch = className.match(/^ubottom(\d+)$/);
-            if (bottomMatch) {
-                const [, value] = bottomMatch;
-                const pxValue = value + 'px';
-                createStyle(`.${className}`, 'bottom', pxValue);
-            }
-            
-            // Проверяем паттерны для left
-            const leftMatch = className.match(/^uleft(\d+)$/);
-            if (leftMatch) {
-                const [, value] = leftMatch;
-                const pxValue = value + 'px';
-                createStyle(`.${className}`, 'left', pxValue);
-            }
-            
-            // Проверяем паттерны для flex-grow
-            const flexGrowMatch = className.match(/^ufg(\d+)$/);
-            if (flexGrowMatch) {
-                const [, value] = flexGrowMatch;
-                createStyle(`.${className}`, 'flex-grow', value);
-            }
-            
-            // Проверяем паттерны для flex-shrink
-            const flexShrinkMatch = className.match(/^ufs(\d+)$/);
-            if (flexShrinkMatch) {
-                const [, value] = flexShrinkMatch;
-                createStyle(`.${className}`, 'flex-shrink', value);
-            }
-            
-            // Проверяем паттерны для flex-basis
-            const flexBasisMatch = className.match(/^ufb(\d+)$/);
-            if (flexBasisMatch) {
-                const [, value] = flexBasisMatch;
-                const pxValue = value + 'px';
-                createStyle(`.${className}`, 'flex-basis', pxValue);
-            }
-            
-            // Проверяем паттерны для order
-            const orderMatch = className.match(/^uo(\d+)$/);
-            if (orderMatch) {
-                const [, value] = orderMatch;
-                createStyle(`.${className}`, 'order', value);
-            }
-            
-            // Проверяем паттерны для grid-template-columns
-            const gridColsMatch = className.match(/^ugtc(\d+)$/);
-            if (gridColsMatch) {
-                const [, value] = gridColsMatch;
-                const gridValue = `repeat(${value}, 1fr)`;
-                createStyle(`.${className}`, 'grid-template-columns', gridValue);
-            }
-            
-            // Проверяем паттерны для grid-template-rows
-            const gridRowsMatch = className.match(/^ugtr(\d+)$/);
-            if (gridRowsMatch) {
-                const [, value] = gridRowsMatch;
-                const gridValue = `repeat(${value}, 1fr)`;
-                createStyle(`.${className}`, 'grid-template-rows', gridValue);
-            }
-        });
-    }
-    
-    // Функция для обработки всех элементов на странице
-    function processAllElements() {
-        const allElements = document.querySelectorAll('*');
-        allElements.forEach(processElement);
-    }
-    
-    // Обработка новых элементов при изменении DOM
-    const observer = new MutationObserver(function(mutations) {
-        mutations.forEach(function(mutation) {
-            mutation.addedNodes.forEach(function(node) {
-                if (node.nodeType === 1) { // Element node
-                    processElement(node);
-                    // Обрабатываем также дочерние элементы
-                    const children = node.querySelectorAll('*');
-                    children.forEach(processElement);
-                }
-            });
-        });
-    });
-    
-    // Запуск при загрузке страницы
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', processAllElements);
-    } else {
-        processAllElements();
-    }
-    
-    // Наблюдение за изменениями DOM
-    observer.observe(document.body, {
-        childList: true,
-        subtree: true
-    });
-    
-    // Экспорт для ручного вызова
-    window.dynamicUtils = {
-        processAll: processAllElements,
-        processElement: processElement
-    };
-    
-})();
+// UrFU UI-Kit Vanilla - Основной файл
+// Автоматически подключает CSS и добавляет поддержку динамических утилит
+// 
+// Использование в HTML:
+// <script src="node_modules/urfu-ui-kit-vanilla/main.js"></script>
+//
+// Использование в TypeScript/JavaScript:
+// import 'urfu-ui-kit-vanilla/main.js';
+// или
+// require('urfu-ui-kit-vanilla/main.js');
+
+(function() {
+    'use strict';
+    
+    // Автоматически подключаем CSS
+    function loadCSS() {
+        // Определяем путь к CSS относительно текущего скрипта
+        const currentScript = document.currentScript;
+        let cssPath = 'node_modules/urfu-ui-kit-vanilla/src/main.css';
+        
+        if (currentScript) {
+            const scriptPath = currentScript.src;
+            const scriptDir = scriptPath.substring(0, scriptPath.lastIndexOf('/'));
+            cssPath = scriptDir + '/src/main.css';
+        }
+        
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = cssPath;
+        link.id = 'urfu-ui-kit-css';
+        
+        // Проверяем, не подключен ли уже CSS
+        if (!document.getElementById('urfu-ui-kit-css')) {
+            document.head.appendChild(link);
+        }
+    }
+    
+    // Подключаем CSS при загрузке
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', loadCSS);
+    } else {
+        loadCSS();
+    }
+    
+    // Кэш для уже созданных стилей
+    const styleCache = new Set();
+    
+    // Функция для создания CSS-правила
+    function createStyle(selector, property, value) {
+        const rule = `${selector} { ${property}: ${value}; }`;
+        if (styleCache.has(rule)) return;
+        
+        styleCache.add(rule);
+        
+        // Создаем или находим элемент style
+        let styleElement = document.getElementById('dynamic-utils-styles');
+        if (!styleElement) {
+            styleElement = document.createElement('style');
+            styleElement.id = 'dynamic-utils-styles';
+            document.head.appendChild(styleElement);
+        }
+        
+        // Добавляем правило
+        styleElement.textContent += rule + '\n';
+    }
+    
+    // Функция для парсинга классов и создания стилей
+    function processElement(element) {
+        const classList = Array.from(element.classList);
+        
+        classList.forEach(className => {
+            // Проверяем паттерны для margin
+            const marginMatch = className.match(/^um([lrtb]?)(\d+)$/);
+            if (marginMatch) {
+                const [, direction, value] = marginMatch;
+                const pxValue = value + 'px';
+                
+                switch (direction) {
+                    case 'l':
+                        createStyle(`.${className}`, 'margin-left', pxValue);
+                        break;
+                    case 'r':
+                        createStyle(`.${className}`, 'margin-right', pxValue);
+                        break;
+                    case 't':
+                        createStyle(`.${className}`, 'margin-top', pxValue);
+                        break;
+                    case 'b':
+                        createStyle(`.${className}`, 'margin-bottom', pxValue);
+                        break;
+                    default:
+                        createStyle(`.${className}`, 'margin', pxValue);
+                        break;
+                }
+            }
+            
+            // Проверяем паттерны для padding
+            const paddingMatch = className.match(/^up([lrtb]?)(\d+)$/);
+            if (paddingMatch) {
+                const [, direction, value] = paddingMatch;
+                const pxValue = value + 'px';
+                
+                switch (direction) {
+                    case 'l':
+                        createStyle(`.${className}`, 'padding-left', pxValue);
+                        break;
+                    case 'r':
+                        createStyle(`.${className}`, 'padding-right', pxValue);
+                        break;
+                    case 't':
+                        createStyle(`.${className}`, 'padding-top', pxValue);
+                        break;
+                    case 'b':
+                        createStyle(`.${className}`, 'padding-bottom', pxValue);
+                        break;
+                    default:
+                        createStyle(`.${className}`, 'padding', pxValue);
+                        break;
+                }
+            }
+            
+            // Проверяем паттерны для width/height
+            const sizeMatch = className.match(/^u([wh])(\d+)$/);
+            if (sizeMatch) {
+                const [, property, value] = sizeMatch;
+                const pxValue = value + 'px';
+                
+                if (property === 'w') {
+                    createStyle(`.${className}`, 'width', pxValue);
+                } else if (property === 'h') {
+                    createStyle(`.${className}`, 'height', pxValue);
+                }
+            }
+            
+            // Проверяем паттерны для font-size
+            const fontSizeMatch = className.match(/^ufos(\d+)$/);
+            if (fontSizeMatch) {
+                const [, value] = fontSizeMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'font-size', pxValue);
+            }
+            
+            // Проверяем паттерны для gap
+            const gapMatch = className.match(/^ug(\d+)$/);
+            if (gapMatch) {
+                const [, value] = gapMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'gap', pxValue);
+            }
+            
+            // Проверяем паттерны для column-gap
+            const columnGapMatch = className.match(/^ucg(\d+)$/);
+            if (columnGapMatch) {
+                const [, value] = columnGapMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'column-gap', pxValue);
+            }
+            
+            // Проверяем паттерны для row-gap
+            const rowGapMatch = className.match(/^urg(\d+)$/);
+            if (rowGapMatch) {
+                const [, value] = rowGapMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'row-gap', pxValue);
+            }
+            
+            // Проверяем паттерны для min-width
+            const minWidthMatch = className.match(/^umnw(\d+)$/);
+            if (minWidthMatch) {
+                const [, value] = minWidthMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'min-width', pxValue);
+            }
+            
+            // Проверяем паттерны для min-height
+            const minHeightMatch = className.match(/^umnh(\d+)$/);
+            if (minHeightMatch) {
+                const [, value] = minHeightMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'min-height', pxValue);
+            }
+            
+            // Проверяем паттерны для max-width
+            const maxWidthMatch = className.match(/^umxw(\d+)$/);
+            if (maxWidthMatch) {
+                const [, value] = maxWidthMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'max-width', pxValue);
+            }
+            
+            // Проверяем паттерны для max-height
+            const maxHeightMatch = className.match(/^umxh(\d+)$/);
+            if (maxHeightMatch) {
+                const [, value] = maxHeightMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'max-height', pxValue);
+            }
+            
+            // Проверяем паттерны для line-height
+            const lineHeightMatch = className.match(/^ulh(\d+)$/);
+            if (lineHeightMatch) {
+                const [, value] = lineHeightMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'line-height', pxValue);
+            }
+            
+            // Проверяем паттерны для border-width
+            const borderWidthMatch = className.match(/^ub(\d+)$/);
+            if (borderWidthMatch) {
+                const [, value] = borderWidthMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'border-width', pxValue);
+                createStyle(`.${className}`, 'border-style', 'solid');
+            }
+            
+            // Проверяем паттерны для border-radius
+            const borderRadiusMatch = className.match(/^ubr(\d+)$/);
+            if (borderRadiusMatch) {
+                const [, value] = borderRadiusMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'border-radius', pxValue);
+            }
+            
+            // Проверяем паттерны для opacity
+            const opacityMatch = className.match(/^uop(\d+)$/);
+            if (opacityMatch) {
+                const [, value] = opacityMatch;
+                const opacityValue = (parseInt(value) / 100).toString();
+                createStyle(`.${className}`, 'opacity', opacityValue);
+            }
+            
+            // Проверяем паттерны для z-index
+            const zIndexMatch = className.match(/^uzi(\d+)$/);
+            if (zIndexMatch) {
+                const [, value] = zIndexMatch;
+                createStyle(`.${className}`, 'z-index', value);
+            }
+            
+            // Проверяем паттерны для top
+            const topMatch = className.match(/^utop(\d+)$/);
+            if (topMatch) {
+                const [, value] = topMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'top', pxValue);
+            }
+            
+            // Проверяем паттерны для right
+            const rightMatch = className.match(/^uright(\d+)$/);
+            if (rightMatch) {
+                const [, value] = rightMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'right', pxValue);
+            }
+            
+            // Проверяем паттерны для bottom
+            const bottomMatch = className.match(/^ubottom(\d+)$/);
+            if (bottomMatch) {
+                const [, value] = bottomMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'bottom', pxValue);
+            }
+            
+            // Проверяем паттерны для left
+            const leftMatch = className.match(/^uleft(\d+)$/);
+            if (leftMatch) {
+                const [, value] = leftMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'left', pxValue);
+            }
+            
+            // Проверяем паттерны для flex-grow
+            const flexGrowMatch = className.match(/^ufg(\d+)$/);
+            if (flexGrowMatch) {
+                const [, value] = flexGrowMatch;
+                createStyle(`.${className}`, 'flex-grow', value);
+            }
+            
+            // Проверяем паттерны для flex-shrink
+            const flexShrinkMatch = className.match(/^ufs(\d+)$/);
+            if (flexShrinkMatch) {
+                const [, value] = flexShrinkMatch;
+                createStyle(`.${className}`, 'flex-shrink', value);
+            }
+            
+            // Проверяем паттерны для flex-basis
+            const flexBasisMatch = className.match(/^ufb(\d+)$/);
+            if (flexBasisMatch) {
+                const [, value] = flexBasisMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'flex-basis', pxValue);
+            }
+            
+            // Проверяем паттерны для order
+            const orderMatch = className.match(/^uo(\d+)$/);
+            if (orderMatch) {
+                const [, value] = orderMatch;
+                createStyle(`.${className}`, 'order', value);
+            }
+            
+            // Проверяем паттерны для grid-template-columns
+            const gridColsMatch = className.match(/^ugtc(\d+)$/);
+            if (gridColsMatch) {
+                const [, value] = gridColsMatch;
+                const gridValue = `repeat(${value}, 1fr)`;
+                createStyle(`.${className}`, 'grid-template-columns', gridValue);
+            }
+            
+            // Проверяем паттерны для grid-template-rows
+            const gridRowsMatch = className.match(/^ugtr(\d+)$/);
+            if (gridRowsMatch) {
+                const [, value] = gridRowsMatch;
+                const gridValue = `repeat(${value}, 1fr)`;
+                createStyle(`.${className}`, 'grid-template-rows', gridValue);
+            }
+        });
+    }
+    
+    // Функция для обработки всех элементов на странице
+    function processAllElements() {
+        const allElements = document.querySelectorAll('*');
+        allElements.forEach(processElement);
+    }
+    
+    // Кэш обработанных элементов для избежания дублирования
+    const processedElements = new WeakSet();
+    
+    // Улучшенная функция обработки элемента
+    function processElementSafe(element) {
+        if (processedElements.has(element)) return;
+        processedElements.add(element);
+        processElement(element);
+    }
+    
+    // Обработка новых элементов при изменении DOM
+    const observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            mutation.addedNodes.forEach(function(node) {
+                if (node.nodeType === 1) { // Element node
+                    processElementSafe(node);
+                    // Обрабатываем также дочерние элементы
+                    const children = node.querySelectorAll('*');
+                    children.forEach(processElementSafe);
+                }
+            });
+            
+            // Обрабатываем изменения атрибутов (включая class)
+            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                processElementSafe(mutation.target);
+            }
+        });
+    });
+    
+    // Периодическая проверка для React компонентов
+    let checkInterval;
+    function startPeriodicCheck() {
+        if (checkInterval) clearInterval(checkInterval);
+        checkInterval = setInterval(function() {
+            const allElements = document.querySelectorAll('*');
+            allElements.forEach(function(element) {
+                if (!processedElements.has(element)) {
+                    processElementSafe(element);
+                }
+            });
+        }, 1000); // Проверяем каждую секунду
+    }
+    
+    // Запуск при загрузке страницы
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function() {
+            processAllElements();
+            startPeriodicCheck();
+        });
+    } else {
+        processAllElements();
+        startPeriodicCheck();
+    }
+    
+    // Наблюдение за изменениями DOM
+    if (document.body) {
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['class']
+        });
+    } else {
+        // Если body еще не готов, ждем его
+        const bodyObserver = new MutationObserver(function() {
+            if (document.body) {
+                bodyObserver.disconnect();
+                observer.observe(document.body, {
+                    childList: true,
+                    subtree: true,
+                    attributes: true,
+                    attributeFilter: ['class']
+                });
+            }
+        });
+        bodyObserver.observe(document.documentElement, {
+            childList: true,
+            subtree: true
+        });
+    }
+    
+    // Функция для принудительной обработки всех элементов
+    function forceProcessAll() {
+        processedElements.clear();
+        processAllElements();
+    }
+    
+    // Экспорт для ручного вызова
+    window.dynamicUtils = {
+        processAll: processAllElements,
+        processElement: processElement,
+        forceProcessAll: forceProcessAll,
+        processElementSafe: processElementSafe
+    };
+    
+})();

package/package.json

@@ -3,7 +3,7 @@
   "description": "UrFU UI-Kit for Vanilla Web",
   "license": "Apache-2.0",
   "private": false,
-  "version": "2.3.1",
+  "version": "2.3.2",
   "type": "module",
   "scripts": {
     "start": "npm-run-all --parallel less:watch vite",
@@ -23,6 +23,7 @@
   },
   "files": [
     "src/main.css",
+    "src/ui-icons.css",
     "src/fonts/*",
     "main.js",
     "LICENSE"

package/src/ui-icons.css

@@ -0,0 +1,426 @@
+@font-face {
+  font-family: 'urfu-ui-icon-font';
+  src:  url('fonts/urfu-ui-icon-font.eot?z3h48');
+  src:  url('fonts/urfu-ui-icon-font.eot?z3h48#iefix') format('embedded-opentype'),
+    url('fonts/urfu-ui-icon-font.ttf?z3h48') format('truetype'),
+    url('fonts/urfu-ui-icon-font.woff?z3h48') format('woff'),
+    url('fonts/urfu-ui-icon-font.svg?z3h48#urfu-ui-icon-font') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+.u-icon {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'urfu-ui-icon-font' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-active:before {
+  content: "\e900";
+  color: #1e4391;
+}
+.icon-application:before {
+  content: "\e901";
+  color: #1e4391;
+}
+.icon-arrow-sideways:before {
+  content: "\e902";
+  color: #1e4391;
+}
+.icon-attention:before {
+  content: "\e903";
+  color: #ef302b;
+}
+.icon-audit:before {
+  content: "\e904";
+  color: #ef302b;
+}
+.icon-basket:before {
+  content: "\e905";
+  color: #1e4391;
+}
+.icon-block:before {
+  content: "\e906";
+  color: #1e4391;
+}
+.icon-briefcase:before {
+  content: "\e907";
+  color: #1e4391;
+}
+.icon-calculator:before {
+  content: "\e908";
+  color: #1e4391;
+}
+.icon-calendar:before {
+  content: "\e909";
+  color: #1e4391;
+}
+.icon-catalog:before {
+  content: "\e90a";
+  color: #1e4391;
+}
+.icon-chat:before {
+  content: "\e90b";
+  color: #1e4391;
+}
+.icon-check:before {
+  content: "\e90c";
+  color: #3ba68c;
+}
+.icon-clock:before {
+  content: "\e90d";
+  color: #1e4391;
+}
+.icon-cloud:before {
+  content: "\e90e";
+  color: #1e4391;
+}
+.icon-context:before {
+  content: "\e90f";
+  color: #ef302b;
+}
+.icon-copy:before {
+  content: "\e910";
+  color: #1e4391;
+}
+.icon-correct:before {
+  content: "\e911";
+  color: #1e4391;
+}
+.icon-cross:before {
+  content: "\e912";
+  color: #ef302b;
+}
+.icon-cross-small:before {
+  content: "\e913";
+  color: #9faecd;
+}
+.icon-cup:before {
+  content: "\e914";
+  color: #1e4391;
+}
+.icon-directory:before {
+  content: "\e915";
+  color: #1e4391;
+}
+.icon-doc:before {
+  content: "\e916";
+  color: #1e4391;
+}
+.icon-document:before {
+  content: "\e917";
+  color: #1e4391;
+}
+.icon-documents:before {
+  content: "\e918";
+  color: #1e4391;
+}
+.icon-down:before {
+  content: "\e919";
+  color: #1e4391;
+}
+.icon-down-arrow:before {
+  content: "\e91a";
+  color: #1e4391;
+}
+.icon-download:before {
+  content: "\e91b";
+  color: #1e4391;
+}
+.icon-download-line:before {
+  content: "\e91c";
+  color: #1e4391;
+}
+.icon-dropdown:before {
+  content: "\e91d";
+  color: #1e4391;
+}
+.icon-dropdown-horisontal:before {
+  content: "\e91e";
+  color: #1e4391;
+}
+.icon-entrance:before {
+  content: "\e91f";
+  color: #1e4391;
+}
+.icon-events:before {
+  content: "\e920";
+  color: #ef302b;
+}
+.icon-extracurricular-activities:before {
+  content: "\e921";
+  color: #1e4391;
+}
+.icon-filter:before {
+  content: "\e922";
+  color: #1e4391;
+}
+.icon-filter-mobile:before {
+  content: "\e923";
+  color: #1e4391;
+}
+.icon-folder:before {
+  content: "\e924";
+  color: #e98446;
+}
+.icon-folders:before {
+  content: "\e925";
+  color: #a7a7a7;
+}
+.icon-full-screen:before {
+  content: "\e926";
+  color: #1e4391;
+}
+.icon-hidden:before {
+  content: "\e927";
+  color: #1e4391;
+}
+.icon-home:before {
+  content: "\e928";
+  color: #1e4391;
+}
+.icon-img:before {
+  content: "\e929";
+  color: #467be3;
+}
+.icon-information:before {
+  content: "\e92a";
+  color: #1e4391;
+}
+.icon-jpg:before {
+  content: "\e92b";
+  color: #467be3;
+}
+.icon-left:before {
+  content: "\e92c";
+  color: #1e4391;
+}
+.icon-left-arrow:before {
+  content: "\e92d";
+  color: #1e4391;
+}
+.icon-letter:before {
+  content: "\e92e";
+  color: #1e4391;
+}
+.icon-like:before {
+  content: "\e92f";
+  color: #1e4391;
+}
+.icon-link:before {
+  content: "\e930";
+  color: #1e4391;
+}
+.icon-list-view:before {
+  content: "\e931";
+  color: #7a7a7a;
+}
+.icon-lk-role:before {
+  content: "\e932";
+  color: #1e4391;
+}
+.icon-map:before {
+  content: "\e933";
+  color: #ef302b;
+}
+.icon-minus:before {
+  content: "\e934";
+  color: #1e4391;
+}
+.icon-mobile:before {
+  content: "\e935";
+  color: #1e4391;
+}
+.icon-moderation:before {
+  content: "\e936";
+  color: #1e4391;
+}
+.icon-news:before {
+  content: "\e937";
+  color: #1e4391;
+}
+.icon-notify:before {
+  content: "\e938";
+  color: #ef302b;
+}
+.icon-ok:before {
+  content: "\e939";
+  color: #1e4391;
+}
+.icon-participant:before {
+  content: "\e93a";
+  color: #ef302b;
+}
+.icon-pdf:before {
+  content: "\e93b";
+  color: #ef302b;
+}
+.icon-pencil:before {
+  content: "\e93c";
+  color: #1e4391;
+}
+.icon-people:before {
+  content: "\e93d";
+  color: #1e4391;
+}
+.icon-plus:before {
+  content: "\e93e";
+  color: #1e4391;
+}
+.icon-png:before {
+  content: "\e93f";
+  color: #467be3;
+}
+.icon-ppt:before {
+  content: "\e940";
+  color: #e98446;
+}
+.icon-question:before {
+  content: "\e941";
+  color: #1e4391;
+}
+.icon-rating:before {
+  content: "\e942";
+  color: #1e4391;
+}
+.icon-right:before {
+  content: "\e943";
+  color: #1e4391;
+}
+.icon-right-arrow:before {
+  content: "\e944";
+  color: #1e4391;
+}
+.icon-role:before {
+  content: "\e945";
+  color: #1e4391;
+}
+.icon-save:before {
+  content: "\e946";
+  color: #1e4391;
+}
+.icon-search:before {
+  content: "\e947";
+  color: #1e4391;
+}
+.icon-setting:before {
+  content: "\e948";
+  color: #1e4391;
+}
+.icon-settlement:before {
+  content: "\e949";
+  color: #1e4391;
+}
+.icon-shell:before {
+  content: "\e94a";
+  color: #1e4391;
+}
+.icon-sorting:before {
+  content: "\e94b";
+  color: #1e4391;
+}
+.icon-star:before {
+  content: "\e94c";
+  color: #1e4391;
+}
+.icon-star2:before {
+  content: "\e94d";
+  color: #ef302b;
+}
+.icon-star-top20:before {
+  content: "\e94e";
+  color: #147246;
+}
+.icon-star-top50:before {
+  content: "\e94f";
+  color: #1e4391;
+}
+.icon-submenu:before {
+  content: "\e950";
+  color: #ef302b;
+}
+.icon-svg:before {
+  content: "\e951";
+  color: #a872bc;
+}
+.icon-table-view:before {
+  content: "\e952";
+  color: #1e4391;
+}
+.icon-telephone:before {
+  content: "\e953";
+  color: #1e4391;
+}
+.icon-test-tube:before {
+  content: "\e954";
+  color: #1e4391;
+}
+.icon-top20:before {
+  content: "\e955";
+  color: #147246;
+}
+.icon-top50:before {
+  content: "\e956";
+  color: #1e4391;
+}
+.icon-top100:before {
+  content: "\e957";
+  color: #ef302b;
+}
+.icon-university:before {
+  content: "\e958";
+  color: #1e4391;
+}
+.icon-unlink:before {
+  content: "\e959";
+  color: #1e4391;
+}
+.icon-unlink2:before {
+  content: "\e95a";
+  color: #ef302b;
+}
+.icon-up:before {
+  content: "\e95b";
+  color: #1e4391;
+}
+.icon-up-arrow:before {
+  content: "\e95c";
+  color: #1e4391;
+}
+.icon-upload:before {
+  content: "\e95d";
+  color: #1e4391;
+}
+.icon-user:before {
+  content: "\e95e";
+  color: #1e4391;
+}
+.icon-video:before {
+  content: "\e95f";
+  color: #0f2b5e;
+}
+.icon-video-instruction:before {
+  content: "\e960";
+}
+.icon-warning:before {
+  content: "\e961";
+  color: #ef302b;
+}
+.icon-xls:before {
+  content: "\e962";
+  color: #3ba68c;
+}
+.icon-zip:before {
+  content: "\e963";
+  color: #0987ae;
+}