@dxtmisha/wiki 0.39.2 → 0.39.4

package/src/media/functional/ui/properties/type-selector-virtual/type-selector-virtual.en.mdx

@@ -0,0 +1,49 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/types/Pseudo-classes and pseudo-elements (selector, virtual)'/>
+
+# Pseudo-classes and pseudo-elements (selector, virtual)
+
+The `selector` and `virtual` structural types are designed to style native browser interaction states and generated elements (specifically, pseudo-classes like `:hover`, `:focus` and pseudo-elements like `::before`, `::after`). The compiler inherently binds these structures to the parent block utilizing fundamental SCSS conventions (`&:` and `&::`).
+
+These types can be initialized using the explicit shortcuts `:` (for selectors) and `::` (for virtual elements). Furthermore, the majority of standard browser keys (such as `hover`, `active`, `before`) are natively recognized and automatically parsed by the compiler without requiring strict prefixes.
+
+**Input Configuration (`properties.json`):**
+> For pseudo-elements (`virtual`), the compiler automatically injects the foundational `content: ""` property into the output, making manual declaration entirely redundant.
+```json
+{
+  "button": {
+    "padding": "12px",
+    
+    ":hover": {                  // Explicit pseudo-class (selector, : prefix)
+      "opacity": "0.8"
+    },
+    
+    "::after": {                 // Explicit pseudo-element (virtual, :: prefix)
+      "position": "absolute",
+      "inset": "0"
+    },
+    
+    "active": {                  // Implicit declaration (auto-detected)
+      "transform": "scale(0.95)"
+    }
+  }
+}
+```
+
+**Conceptual Compiled Output (SCSS):**
+```scss
+.button {
+  padding: 12px;
+
+  &:hover { opacity: 0.8; }
+  
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+  
+  &:active { transform: scale(0.95); }
+}
+```

package/src/media/functional/ui/properties/type-selector-virtual/type-selector-virtual.ru.mdx

@@ -0,0 +1,49 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/types/Псевдоклассы и псевдоэлементы (selector, virtual)'/>
+
+# Псевдоклассы и псевдоэлементы (selector, virtual)
+
+Структурные типы `selector` и `virtual` предназначены для стилизации нативных состояний и элементов в браузере (соответственно, псевдоклассов `:hover`, `:focus` и псевдоэлементов `::before`, `::after`). Компилятор привязывает эти стили к родительскому блоку с использованием базового синтаксиса SCSS (`&:` и `&::`).
+
+Объявить эти типы можно с помощью шорткатов `:` (для псевдоклассов) и `::` (для псевдоэлементов). Большинство стандартных браузерных ключей (таких как `hover`, `active`, `before`) также распознаются компилятором автоматически без явных префиксов.
+
+**Входная конфигурация (`properties.json`):**
+> Для псевдоэлементов (`virtual`) компилятор автоматически генерирует базовое свойство `content: ""`, поэтому вручную прописывать его в конфигурации не нужно.
+```json
+{
+  "button": {
+    "padding": "12px",
+    
+    ":hover": {                  // Явный псевдокласс (selector, префикс :)
+      "opacity": "0.8"
+    },
+    
+    "::after": {                 // Явный псевдоэлемент (virtual, префикс ::)
+      "position": "absolute",
+      "inset": "0"
+    },
+    
+    "active": {                  // Неявное объявление (определяется автоматически)
+      "transform": "scale(0.95)"
+    }
+  }
+}
+```
+
+**Ожидаемый результат генерации (SCSS):**
+```scss
+.button {
+  padding: 12px;
+
+  &:hover { opacity: 0.8; }
+  
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+  
+  &:active { transform: scale(0.95); }
+}
+```

package/src/media/functional/ui/properties/type-selector-virtual/type-selector-virtual.vi.mdx

@@ -0,0 +1,49 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/types/Pseudo-classes và pseudo-elements (selector, virtual)'/>
+
+# Pseudo-classes và pseudo-elements (selector, virtual)
+
+Loại cấu trúc `selector` và `virtual` được dọn đường để xử lý tạo kiểu cho các trạng thái chuẩn của trình duyệt (cụ thể là các pseudo-class như `:hover`, `:focus` rẽ nhánh kèm chuỗi pseudo-element giả như `::before`, `::after`). Bộ Compiler sẽ ngầm ghim dính bộ thuộc tính này ngược vào block cha với cú pháp SCSS siêu kinh điển (`&:` và `&::`).
+
+Lập trình viên có thể khai báo chúng qua shortcut cấp tốc `:` (dành cho selector) và `::` (dành cho virtual element). Hơn nữa, gần như toàn bộ kho từ khóa phổ thông của CSS (như `hover`, `active`, `before`) đều được trí tuệ nhân tạo của code bộ biên dịch nhận diện tự động mà không cần mồi sẵn một prefix nào cả.
+
+**File Cấu hình Đầu vào (`properties.json`):**
+> Đối với pseudo-elements (`virtual`), compiler sẽ tự động chèn sẵn tham số gốc `content: ""` vào tệp CSS, lập trình viên không cần mất công khai báo thủ công.
+```json
+{
+  "button": {
+    "padding": "12px",
+    
+    ":hover": {                  // Pseudo-class cắm cờ (selector, tiền tố :)
+      "opacity": "0.8"
+    },
+    
+    "::after": {                 // Pseudo-element cắm cờ (virtual, tiền tố ::)
+      "position": "absolute",
+      "inset": "0"
+    },
+    
+    "active": {                  // Khai báo tàng hình (tự động nội suy)
+      "transform": "scale(0.95)"
+    }
+  }
+}
+```
+
+**Kết quả Biên dịch Dự kiến (SCSS Output):**
+```scss
+.button {
+  padding: 12px;
+
+  &:hover { opacity: 0.8; }
+  
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+  
+  &:active { transform: scale(0.95); }
+}
+```

package/src/media/functional/ui/properties/type-state/type-state.en.mdx

@@ -0,0 +1,66 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/types/State (state)'/>
+
+# State (state)
+
+The `state` structural type is designated for conceptualizing functional variations, interactive modes, or modifier scales (such as size grids). Assigning this type explicitly forces the compiler to map a modifier CSS class natively to the parent scope adhering to BEM (e.g., `&--primary` or composite `&--size-sm`).
+
+States can be rigidly declared utilizing the `~` prefix or manually via the systemic `_type: "state"` property. Within `dxt-ui`, every declared state natively reflects in the component's strict typings (`props.ts`) and synchronizes with Vue's reactive prop bindings.
+
+The architectural engine relies on two foundational approaches:
+- **Singular states:** Utilized for pure boolean toggle flags (e.g., `~primary`). The corresponding compiled modifier is mapped explicitly (`&--primary`).
+- **Grouped states:** Utilized for array-like or multi-value properties (e.g., the `~size` grid). Nested structural keys organically emit composite modifiers (`&--size-sm`).
+
+> The `_default` key defines the foundational fallback value during component initialization. Boolean flags accept a `true` assignment, whereas grouped parameters require the string identifier of the active node (e.g., `"md"`). The compiler automatically translates this structural fallback into the `props.ts` configuration.
+
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "button": {
+    "padding": "12px",
+    
+    "~primary": {                // Singular state (utilizing ~ alias)
+      "background-color": "blue",
+      "_default": true           // Boolean default fallback
+    },
+    
+    "disabled": {                // Explicit state type assignment
+      "_type": "state",
+      "opacity": "0.5"
+    },
+    
+    "~size": {                   // Grouped multi-value states
+      "sm": { "height": "32px" },
+      "md": { "height": "40px" },
+      "_default": "md"           // String default fallback
+    }
+  }
+}
+```
+
+**Conceptual Compiled Output (SCSS):**
+```scss
+.button {
+  padding: 12px;
+
+  &--primary { background-color: blue; }
+  &--disabled { opacity: 0.5; }
+  &--size-sm { height: 32px; }
+  &--size-md { height: 40px; }
+}
+```
+
+**Vue Integration (`props.ts` and `Component.vue`):**
+```typescript
+// --- props.ts ---
+primary?: boolean
+disabled?: boolean
+size?: 'sm' | 'md'
+
+// --- Component.vue (class bindings) ---
+'d1-button--primary': props.primary,
+'d1-button--disabled': props.disabled,
+[`d1-button--size--${props.size}`]: inArray(propsValues.size, props.size)
+```

package/src/media/functional/ui/properties/type-state/type-state.ru.mdx

@@ -0,0 +1,66 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/types/Состояние (state)'/>
+
+# Состояние (state)
+
+Тип `state` предназначен для описания вариаций, интерактивных режимов или сеток модификаторов (например, размеров). Привязка этого типа предписывает компилятору сгенерировать класс-модификатор по методологии BEM (например, `&--primary` или составной `&--size-sm`).
+
+Объявить состояние можно с помощью префикса `~` или явно через `_type: "state"`. В `dxt-ui` каждое объявленное состояние автоматически типизируется в `props.ts` и привязывается к реактивным свойствам Vue.
+
+В системе выделяют два основных подхода к формированию состояний:
+- **Одиночное состояние:** Используется для простых булевых флагов (например, `~primary`). Результирующий класс-модификатор строится напрямую (`&--primary`).
+- **Сгруппированные состояния:** Используется для многозначных параметров (например, размерной сетки `~size`). Вложенные в него ключи образуют составные модификаторы (`&--size-sm`).
+
+> Ключ `_default` определяет базовое значение свойства при инициализации компонента. Для булевых флагов задается значение `true`, а для сгруппированных параметров — строковой идентификатор активного узла (например, `"md"`). Компилятор автоматически транслирует это значение в файле `props.ts`.
+
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "button": {
+    "padding": "12px",
+    
+    "~primary": {                // Одиночное состояние (алиас ~)
+      "background-color": "blue",
+      "_default": true           // Булево значение по умолчанию
+    },
+    
+    "disabled": {                // Явное объявление типа (state)
+      "_type": "state",
+      "opacity": "0.5"
+    },
+    
+    "~size": {                   // Сгруппированные состояния
+      "sm": { "height": "32px" },
+      "md": { "height": "40px" },
+      "_default": "md"           // Строковое значение по умолчанию
+    }
+  }
+}
+```
+
+**Ожидаемый результат генерации (SCSS):**
+```scss
+.button {
+  padding: 12px;
+
+  &--primary { background-color: blue; }
+  &--disabled { opacity: 0.5; }
+  &--size-sm { height: 32px; }
+  &--size-md { height: 40px; }
+}
+```
+
+**Интеграция с Vue (`props.ts` и `Component.vue`):**
+```typescript
+// --- props.ts ---
+primary?: boolean
+disabled?: boolean
+size?: 'sm' | 'md'
+
+// --- Component.vue (classes) ---
+'d1-button--primary': props.primary,
+'d1-button--disabled': props.disabled,
+[`d1-button--size--${props.size}`]: inArray(propsValues.size, props.size)
+```

package/src/media/functional/ui/properties/type-state/type-state.vi.mdx

@@ -0,0 +1,66 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/types/Trạng thái (state)'/>
+
+# Trạng thái (state)
+
+Type cấu trúc `state` được sinh ra để đặc tả các luồng biến thể, chế độ tương tác phụ trợ, hoặc lưới modifier đa dạng (như size grid). Phân bổ Type này sẽ ấn định cỗ máy Compiler gen dòng mã class CSS modifier tuân thủ nguyên lý BEM đính trực tiếp vào block cha (Ví dụ: `&--primary` hoặc chuỗi phức hợp `&--size-sm`).
+
+Lập trình viên có thể khởi tạo state bằng mã phím tắt rút gọn `~` hoặc ghim cứng bằng lệnh qua định danh tham số `_type: "state"`. Trong lõi `dxt-ui`, mọi state khởi tạo sẽ tự động rễ bám sâu vào lớp type (`props.ts`) lẫn luồng chốt class binding reactive của Vue.
+
+Bên trong hệ sinh thái của compiler, chúng ta phân tách làm hai thủ pháp chủ đạo:
+- **Trạng thái đơn lẻ:** Được trưng dụng cho các cờ boolean cơ sở (Ví dụ: thiết lập `~primary`). Compiler sẽ đúc thẳng tắp ra class modifier gốc (`&--primary`).
+- **Trạng thái gom nhóm đa cực:** Được trưng dụng cho bộ thông số nhiều lớp giá trị (Ví dụ: scale `~size`). Các nhánh lồng bên trong sẽ ép dính thành chuỗi modifier ghép nối tiếp (`&--size-sm`).
+
+> Khóa `_default` xác định giá trị cơ sở mặc định trong quá trình khởi tạo component. Cờ Boolean nhận trạng thái `true`, trong khi các tham số nhóm yêu cầu chuỗi định danh của node mục tiêu (ví dụ: `"md"`). Compiler sẽ tự động dịch chuyển thiết lập này thành giá trị ẩn định trong cấu hình `props.ts`.
+
+
+**File Cấu hình Đầu vào (`properties.json`):**
+```json
+{
+  "button": {
+    "padding": "12px",
+    
+    "~primary": {                // Trạng thái cục bộ (lối tắt ~)
+      "background-color": "blue",
+      "_default": true           // Cấu hình cờ boolean mặc định
+    },
+    
+    "disabled": {                // Khai báo explicit state
+      "_type": "state",
+      "opacity": "0.5"
+    },
+    
+    "~size": {                   // Gom nhóm trạng thái đa cực
+      "sm": { "height": "32px" },
+      "md": { "height": "40px" },
+      "_default": "md"           // Cấu hình string mặc định
+    }
+  }
+}
+```
+
+**Kết quả Biên dịch Dự kiến (SCSS Output):**
+```scss
+.button {
+  padding: 12px;
+
+  &--primary { background-color: blue; }
+  &--disabled { opacity: 0.5; }
+  &--size-sm { height: 32px; }
+  &--size-md { height: 40px; }
+}
+```
+
+**Đồng bộ Tích hợp Vue (`props.ts` và `Component.vue`):**
+```typescript
+// --- props.ts ---
+primary?: boolean
+disabled?: boolean
+size?: 'sm' | 'md'
+
+// --- Component.vue (dynamic class bindings) ---
+'d1-button--primary': props.primary,
+'d1-button--disabled': props.disabled,
+[`d1-button--size--${props.size}`]: inArray(propsValues.size, props.size)
+```

package/src/media/functional/ui/properties/type-subclass/type-subclass.en.mdx

@@ -0,0 +1,44 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/types/Subclass (subclass)'/>
+
+# Subclass (subclass)
+
+The `subclass` type is designated for conceptualizing nested structural blocks conforming to the BEM (Block-Element-Modifier) architectural methodology. Assigning this type forces the compiler to generate a deeply nested descendant CSS class firmly rooted to the parent identifier (e.g., `&__element`).
+
+The optimal standard practice for initiating a subclass branch utilizes the `#` prefix. For rigid and explicit structural assignments, the `subclass` type may be statically assigned utilizing the internal `_type` property. Both methodologies emit parallel internal structures.
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "card": {
+    "padding": "16px",
+    
+    "#icon": {                   // Utilizing the # alias prefix
+      "width": "24px"
+    },
+    
+    "content": {                 // Explicit structural type assignment
+      "_type": "subclass",
+      "display": "flex"
+    }
+  }
+}
+```
+
+**Conceptual Compiled Output (SCSS):**
+```scss
+.card {
+  padding: 16px;
+
+  &__icon {
+    width: 24px;
+  }
+
+  &__content {
+    display: flex;
+  }
+}
+```
+
+Utilizing `subclass` explicitly governs CSS scope isolation, fundamentally averting global namespace collisions and tying dependent components intimately to the primary architectural parent.

package/src/media/functional/ui/properties/type-subclass/type-subclass.ru.mdx

@@ -0,0 +1,44 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/types/Подкласс (subclass)'/>
+
+# Подкласс (subclass)
+
+Тип `subclass` используется для создания вложенных структурных элементов по методологии BEM (Блок-Элемент-Модификатор). Привязка этого типа к узлу предписывает компилятору сгенерировать дочерний CSS-класс, используя родительское имя как основу (например, `&__element`).
+
+Наиболее частый и лаконичный способ создать подкласс — использование префикса `#`. Для строгой, развернутой структурной разметки тип `subclass` можно объявить явно через свойство `_type`. Оба подхода генерируют идентичный результат.
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "card": {
+    "padding": "16px",
+    
+    "#icon": {                   // Использование алиаса #
+      "width": "24px"
+    },
+    
+    "content": {                 // Явное объявление типа
+      "_type": "subclass",
+      "display": "flex"
+    }
+  }
+}
+```
+
+**Ожидаемый результат генерации (SCSS):**
+```scss
+.card {
+  padding: 16px;
+
+  &__icon {
+    width: 24px;
+  }
+
+  &__content {
+    display: flex;
+  }
+}
+```
+
+Использование типа `subclass` гарантирует надежную инкапсуляцию стилей и предотвращает глобальное загрязнение CSS, жестко привязывая внутренние элементы к их компоненту-родителю.

package/src/media/functional/ui/properties/type-subclass/type-subclass.vi.mdx

@@ -0,0 +1,44 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/types/Lớp con (subclass)'/>
+
+# Lớp con (subclass)
+
+Type cấu trúc `subclass` được sinh ra chuyên dụng để khởi tạo các thực thể mảng lồng nhau (nested element) tuân thủ quy chuẩn hình thái BEM (Block-Element-Modifier). Phân bổ Type này sẽ cưỡng chế bộ máy Compiler xuất bản dòng mã chuỗi class CSS con trực tiếp được gắn kèm đằng sau tên định danh cha gốc (Ví dụ: biên dịch vòng lặp qua cấu trúc `&__element`).
+
+Giải pháp tối ưu và lả lướt nhất để sản sinh một class lồng con vĩnh viễn là sử dụng mã ký hiệu `#` ở tiền tố. Tuỳ nhiên đối với những cấu trúc rập khuôn cứng nhắc, thao tác cấu hình bung rộng tham số type explicit `_type: "subclass"` vẫn được trưng dụng đồng tâm hiệp lực. Cả hai giải pháp gen cùng một kết quả biên dịch hệ thống.
+
+**File Cấu hình Đầu vào (`properties.json`):**
+```json
+{
+  "card": {
+    "padding": "16px",
+    
+    "#icon": {                   // Áp dụng định danh lối tắt #
+      "width": "24px"
+    },
+    
+    "content": {                 // Phân rã cấu trúc type explicit
+      "_type": "subclass",
+      "display": "flex"
+    }
+  }
+}
+```
+
+**Kết quả Biên dịch Dự kiến (SCSS Output):**
+```scss
+.card {
+  padding: 16px;
+
+  &__icon {
+    width: 24px;
+  }
+
+  &__content {
+    display: flex;
+  }
+}
+```
+
+Sức mạnh trọng tâm của dạng thức `subclass` đảm nhận nhiệm vụ cô lập tầm vực scope CSS. Toàn bộ code gắn Subclass đóng chốt hiện tượng tranh chấp lớp class CSS trên toàn cục, ráp chặt mối nối UI phụ tùng vào thẳng lõi gốc cha.

package/src/media/functional/ui/properties/type-var/type-var.en.mdx

@@ -0,0 +1,63 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/types/Variables (var)'/>
+
+# Variables (var)
+
+The property generation engine provides two distinct methodologies for managing CSS Custom Properties (variables): explicit variable declaration utilizing the structural `var` type, and combinatorial generation encompassing both properties and variables via the `_var: true` boolean flag.
+
+## Declarative Assignment (Type `var`)
+
+Assigning the `var` type (or utilizing its symbolic alias `$`) instructs the compiler to bypass standard CSS property generation. The target node is compiled strictly as a native CSS variable injected securely into the local compilation scope of the component.
+
+> **Type Inheritance:** The `var` type propagates structurally. If a parent node is declared as `var` (or prefixed with `$`), all structurally nested child nodes will inherently adopt the exact same type. There is no need to iteratively declare `var` on succeeding descendants.
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "card": {
+    "padding": {
+      "_type": "var",
+      "value": "16px"
+    }
+  }
+}
+```
+*(Deploying the symbol alias `$padding: "16px"` yields an identical output structural tree).*
+
+**Conceptual Compiled Output (SCSS):** 
+```scss
+.card {
+  --card-padding: 16px;
+}
+```
+
+## Combinatorial Generation (Flag `_var`)
+
+Component architectures frequently require rendering a conventional physical CSS attribute while abstracting its core value strictly behind a dynamic CSS variable (vital for theming integrations or dynamic Vue runtime bindings).
+
+This is achieved securely using the configuration flag `_var: true`. This modifier retains the target node's designated structure type (inherently `property` unless overridden), coercing the compiler to execute a dual-stage emission:
+1. Formulating and compiling a robust CSS variable initialized with the active literal value.
+2. Formulating the target physical CSS property, structurally pointing its value to the evaluated `var()` function output.
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "button": {
+    "background": {
+      "_var": true,
+      "value": "blue"
+    }
+  }
+}
+```
+
+**Conceptual Compiled Output (SCSS):**
+```scss
+.button {
+  --button-background: blue;
+  background: var(--button-background);
+}
+```
+
+Effectively, deploying the `_var: true` modifier permanently mitigates manual assignment repetition, automating the structural linkage between dynamic CSS variables and literal CSS properties inside configuration trees.

package/src/media/functional/ui/properties/type-var/type-var.ru.mdx

@@ -0,0 +1,63 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/types/Переменные (var)'/>
+
+# Переменные (var)
+
+Система генерации свойств предлагает два механизма работы с пользовательскими CSS-переменными (Custom Properties): явное объявление узла как переменной с помощью системного типа `var` и комбинированную генерацию свойств и переменных с помощью флага `_var: true`.
+
+## Декларативное объявление (Тип `var`)
+
+Тип `var` (или его алиас `$`) предписывает компилятору отказаться от создания обычного CSS-свойства. Узел компилируется исключительно как CSS-переменная и становится доступен в области видимости (scope) текущего компонента.
+
+> **Каскадное наследование:** Тип `var` обладает свойством структурного нисхождения. Если родительский узел объявлен как `var` (или через алиас `$`), все его вложенные дочерние узлы автоматически унаследуют этот же тип. Вам не нужно дублировать объявление `var` для каждого потомка.
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "card": {
+    "padding": {
+      "_type": "var",
+      "value": "16px"
+    }
+  }
+}
+```
+*(Использование алиаса `$padding: "16px"` приведет к абсолютно идентичному результату).*
+
+**Ожидаемый результат генерации (SCSS):** 
+```scss
+.card {
+  --card-padding: 16px;
+}
+```
+
+## Комбинированная генерация (Флаг `_var`)
+
+Часто возникает архитектурная потребность сгенерировать классическое физическое CSS-свойство, но при этом "запитать" его от изменяемой CSS-переменной (например, для динамической смены тем или состояний во Vue-компоненте).
+
+Для этого используется конфигурационный флаг `_var: true`. Он позволяет узлу сохранить свой изначальный тип (по умолчанию `property`), но заставляет компилятор выполнить сразу два действия:
+1. Сгенерировать CSS-переменную со значением свойства.
+2. Присвоить самому CSS-свойству значение через функцию `var()`.
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "button": {
+    "background": {
+      "_var": true,
+      "value": "blue"
+    }
+  }
+}
+```
+
+**Ожидаемый результат компиляции (SCSS/CSS):**
+```scss
+.button {
+  --button-background: blue;
+  background: var(--button-background);
+}
+```
+
+Таким образом, использование мульти-флага `_var: true` полностью устраняет необходимость писать дублирующийся код рутинной привязки переменных к свойствам.