@dxtmisha/wiki 0.24.2 → 0.24.3

package/src/media/mdx/style/asPalette.ru.mdx

@@ -1,9 +1,17 @@
-## Управление палитрой компонента
+## Цветовая палитра
 
-Свойство `asPalette` отвечает за изменение цвета компонента в соответствии с классом палитры его родителя, сохраняя базовую насыщенность цвета.
+Свойство `asPalette` активирует наследование цветовой схемы от родительского элемента с сохранением базовой насыщенности.
 
-### Рекомендации
+**Применение:**
 
-- Применяйте для автоматической адаптации компонентов к теме приложения.
-- Убедитесь, что у родительского элемента задан корректный класс палитры.
+Позволяет автоматически адаптировать цвета к контексту размещения. Элемент принимает цветовую палитру родителя, не теряя своих характеристик насыщенности.
 
+**Значения:**
+
+- `false` (по умолчанию) — используется собственная цветовая схема
+- `true` — наследует палитру от родительского элемента
+
+```html
+<!-- Наследование палитры от родителя -->
+<Component asPalette />
+```

package/src/media/mdx/style/dir.en.mdx

@@ -1,10 +1,17 @@
-## Managing Component Direction
+## Direction
 
-The `dir` property controls the mirroring of the component based on the site's text direction (LTR/RTL).
-It ensures the correct interface display for right-to-left languages.
+Property `dir` controls mirroring of the element based on text direction (LTR/RTL).
 
-### Recommendations
+**Usage:**
 
-- Use alongside your app's localization settings.
-- Particularly useful for arrow icons that also need to flip when a direction changes.
-- Verify third-party SVG icons as they might have preset directions.
+Automatically inverts the visual representation when switching between left-to-right and right-to-left languages. Especially important for elements containing directional graphic symbols (arrows, pointers).
+
+**Values:**
+
+- `false` (default) — standard display
+- `true` — enables text direction adaptation
+
+```html
+<!-- Text direction adaptation -->
+<Component dir />
+```

package/src/media/mdx/style/dir.ru.mdx

@@ -1,10 +1,17 @@
-## Управление направлением компонента
+## Направление
 
-Свойство `dir` отвечает за зеркальное отображение компонента в зависимости от направления сайта (LTR/RTL).
-Это обеспечивает корректное отображение интерфейсов для языков с правосторонним письмом.
+Свойство `dir` управляет зеркальным отображением элемента в зависимости от направления текста (LTR/RTL).
 
-### Рекомендации
+**Применение:**
 
-- Используйте вместе с настройками локализации приложения.
-- Особенно полезно для стрелочных иконок, которые также нужно отразить при смене направления.
-- Проверяйте отображение сторонних SVG-иконок, так как они могут иметь собственные направления.
+Автоматически инвертирует визуальное представление при переключении между языками с левосторонним и правосторонним письмом. Особенно важно для элементов, содержащих направленные графические символы (стрелки, указатели).
+
+**Значения:**
+
+- `false` (по умолчанию) — стандартное отображение
+- `true` — включает адаптацию к направлению текста
+
+```html
+<!-- Адаптация под направление текста -->
+<Component dir />
+```

package/src/media/mdx/style/isSkeleton.en.mdx

@@ -1,8 +1,22 @@
-## Skeleton Mode
+## Skeleton mode
 
-The `isSkeleton` property works in conjunction with the `Skeleton` component. When an element is a child of the `Skeleton` component and has the `isSkeleton` property, its display depends on the parent `Skeleton`'s state.
+The `isSkeleton` property defines element behavior when interacting with the parent Skeleton component.
 
-- When `active=false` on the `Skeleton` component, all child elements display normally, regardless of the `isSkeleton` value.
-- When `active=true` on the `Skeleton` component, all child elements enter skeleton mode, but behavior depends on `isSkeleton`:
-  - If the element has `isSkeleton=true` — the element displays as a skeleton
-  - If the element has `isSkeleton=false` — the element becomes invisible
+**Possible values:**
+
+- `true` — element displays as skeleton when Skeleton is in active state
+- `false` — element becomes invisible when Skeleton is in active state
+
+Works in conjunction with the Skeleton component to control visibility and display mode of child elements. When parent Skeleton has `active=false`, all child elements display normally regardless of `isSkeleton` value. When `active=true`, elements with `isSkeleton=true` are shown as skeleton placeholders, while elements with `isSkeleton=false` are completely hidden.
+
+```html
+<!-- Element will display as skeleton -->
+<Skeleton active>
+  <ListItem isSkeleton text="Loading..." />
+</Skeleton>
+
+<!-- Element will be hidden -->
+<Skeleton active>
+  <ListItem :isSkeleton="false" text="Hidden text" />
+</Skeleton>
+```

package/src/media/mdx/style/isSkeleton.ru.mdx

@@ -1,8 +1,22 @@
 ## Режим скелетона
 
-Свойство `isSkeleton` работает в паре с компонентом `Skeleton`. Когда элемент является дочерним элементом компонента `Skeleton` и имеет свойство `isSkeleton`, его отображение зависит от состояния родительского `Skeleton`.
+Свойство `isSkeleton` определяет поведение элемента при взаимодействии с родительским компонентом Skeleton.
 
-- При `active=false` у компонента `Skeleton` все дочерние элементы отображаются, как обычно, независимо от значения `isSkeleton`.
-- При `active=true` у компонента `Skeleton` все дочерние элементы переходят в режим скелетона, но поведение зависит от `isSkeleton`:
-  - Если у элемента `isSkeleton=true` — элемент отображается как скелетон
-  - Если у элемента `isSkeleton=false` — элемент становится невидимым
+**Возможные значения:**
+
+- `true` — элемент отображается как скелетон при активном состоянии Skeleton
+- `false` — элемент становится невидимым при активном состоянии Skeleton
+
+Работает в паре с компонентом Skeleton для управления видимостью и режимом отображения дочерних элементов. При `active=false` у родительского Skeleton все дочерние элементы отображаются нормально независимо от значения `isSkeleton`. При `active=true` элементы с `isSkeleton=true` показываются как скелетон-заглушки, а элементы с `isSkeleton=false` скрываются полностью.
+
+```html
+<!-- Элемент будет отображаться как скелетон -->
+<Skeleton active>
+  <ListItem isSkeleton text="Загрузка..." />
+</Skeleton>
+
+<!-- Элемент будет скрыт -->
+<Skeleton active>
+  <ListItem :isSkeleton="false" text="Скрытый текст" />
+</Skeleton>
+```

package/src/media/mdx/value/highlight.en.mdx

@@ -1,18 +1,25 @@
-## Text Highlighting Properties
+## Managing search and highlighting
 
-The `highlight` and `highlightLengthStart` properties are designed to control text highlighting functionality in components.
+The `highlight` and `highlightLengthStart` properties work together to control match highlighting when searching through list items. They set the search string and minimum query length for activating visual highlighting of found fragments.
 
-### Properties
+**Properties:**
 
-- **highlight** — Text to highlight within the component content
-- **highlightLengthStart** — Minimum length of highlight value to start highlighting
+- `highlight` — search string for finding and highlighting in list items
+- `highlightLengthStart` — minimum search string length to start highlighting, defaults to `2`
 
-### Property Relationships
+Match highlighting is activated automatically: when the `highlight` length is less than `highlightLengthStart`, search works but visual highlighting is not applied. When the minimum length is reached, the component begins highlighting found fragments across the entire list hierarchy. Search works in real-time and considers nested items in groups and menus. Use `highlightLengthStart` to prevent excessive highlighting with short queries.
 
-The properties work together to provide intelligent text highlighting. `highlight` defines what to highlight, while `highlightLengthStart` controls when to start highlighting.
+```html
+<!-- Standard search with highlighting from 2 characters -->
+<List :list="items" highlight="text" />
+
+<!-- Search with highlighting from 3 characters -->
+<List :list="items" highlight="abc" :highlightLengthStart="3" />
+
+<!-- Dynamic search with v-model -->
+<List :list="items" :highlight="searchQuery" :highlightLengthStart="1" />
+
+<!-- Search without minimum threshold -->
+<List :list="products" :highlight="filter" :highlightLengthStart="0" />
+```
 
-- `highlight` contains the text string that needs to be found and highlighted in the component
-- `highlightLengthStart` sets the minimum search string length to activate the highlighting function
-- Highlighting is activated only when the length of `highlight` reaches the `highlightLengthStart` value
-- This prevents unwanted highlighting when entering short search strings
-- Both properties ensure optimal user experience when working with search and filtering

package/src/media/mdx/value/highlight.ru.mdx

@@ -1,18 +1,25 @@
-## Свойства выделения текста
+## Управление поиском и выделением
 
-Свойства `highlight` и `highlightLengthStart` предназначены для управления выделением текста в компонентах.
+Свойства `highlight` и `highlightLengthStart` работают в связке для управления подсветкой совпадений при поиске по элементам списка. Они устанавливают строку поиска и минимальную длину запроса для активации визуального выделения найденных фрагментов.
 
-### Свойства
+**Свойства:**
 
-- **highlight** — Текст для выделения в содержимом компоненте
-- **highlightLengthStart** — Минимальная длина значения highlight для начала выделения
+- `highlight` — строка для поиска и подсветки в элементах списка
+- `highlightLengthStart` — минимальная длина строки поиска для начала выделения, по умолчанию `2`
 
-### Взаимосвязь свойств
+Выделение совпадений активируется автоматически: когда длина `highlight` меньше `highlightLengthStart`, поиск работает, но визуальное выделение не применяется. При достижении минимальной длины компонент начинает подсвечивать найденные фрагменты во всей иерархии списка. Поиск работает в реальном времени и учитывает вложенные элементы в группах и меню. Используйте `highlightLengthStart` для предотвращения чрезмерного выделения при коротких запросах.
 
-Свойства работают совместно для обеспечения интеллектуального выделения текста. `highlight` определяет что выделять, а `highlightLengthStart` контролирует когда начинать выделение.
+```html
+<!-- Стандартный поиск с выделением от 2 символов -->
+<List :list="items" highlight="текст" />
+
+<!-- Поиск с выделением от 3 символов -->
+<List :list="items" highlight="abc" :highlightLengthStart="3" />
+
+<!-- Динамический поиск с v-model -->
+<List :list="items" :highlight="searchQuery" :highlightLengthStart="1" />
+
+<!-- Поиск без минимального порога -->
+<List :list="products" :highlight="filter" :highlightLengthStart="0" />
+```
 
-- `highlight` содержит строку текста, которую нужно найти и выделить в компоненте
-- `highlightLengthStart` устанавливает минимальную длину строки поиска для активации функции выделения
-- Выделение активируется только когда длина `highlight` достигает значения `highlightLengthStart`
-- Это предотвращает нежелательное выделение при вводе коротких строк поиска
-- Оба свойства обеспечивают оптимальный пользовательский опыт при работе с поиском и фильтрацией

package/src/media/mdx/value/labelNumber.en.mdx

@@ -1,28 +1,47 @@
-## Properties for text and number handling
+## Working with text labels and numbers
 
-The `label`, `labelMax`, and `formatting` properties are designed to control the display of textual and numerical content in components.
+The `label`, `labelMax`, and `formatting` properties are designed to manage the display of textual and numerical content in interface components.
 
-### Properties
+**Properties:**
 
-- **label** — Text label or numeric value of the component
-- **labelMax** — Maximum length of a label text before truncation
-- **formatting** — Determines whether values should be formatted before display
+- `label` — text label or numeric value to display
+- `labelMax` — maximum value for numeric labels (adds "+" indicator when exceeded)
+- `formatting` — enables formatting of numeric values according to user locale
 
-### Functionality
+Properties work together for flexible content management: `label` accepts both textual and numeric values. When a number is passed, automatic processing is applied with localization consideration. The `labelMax` property limits the display of large numbers — when the value is exceeded, a "+" symbol is added (e.g., "99+"). The `formatting` property controls number formatting according to user regional settings, ensuring correct display of separators and numeric formats.
 
-These properties provide flexible content display management:
+```html
+<script setup>
+import { ref } from 'vue'
 
-#### Label processing
-- `label` can contain both textual and numeric values
-- When a numeric value is passed to `label`, the `toNumberByMax` function is automatically applied
-- Conversion occurs with consideration of maximum values and localization
+const count = ref(5)
+const largeNumber = ref(1234)
+</script>
 
-#### Length limitation
-- `labelMax` sets the maximum length of displayed text
-- When the limit is exceeded, a text is truncated with an overflow indicator
-- Ensures consistent display across different contexts
+<template>
+  <!-- Basic usage with text -->
+  <Component label="Text" />
 
-#### Value formatting
-- `formatting` controls whether formatting should be applied to values
-- When formatting is enabled, numeric values are converted according to user locale
-- Supports automatic interface language detection
+  <!-- Numeric value -->
+  <Component :label="count" />
+
+  <!-- Maximum value limitation -->
+  <Component :label="150" :label-max="99" />
+  <!-- Displays: 99+ -->
+
+  <!-- With number formatting -->
+  <Component
+    :label="largeNumber"
+    :formatting="true"
+  />
+  <!-- Displays: 1,234 (depending on locale) -->
+
+  <!-- Combined usage -->
+  <Component
+    :label="999"
+    :label-max="99"
+    :formatting="true"
+  />
+  <!-- Displays: 99+ -->
+</template>
+```

package/src/media/mdx/value/labelNumber.ru.mdx

@@ -1,28 +1,47 @@
-## Свойства для работы с текстом и числами
+## Работа с текстовыми метками и числами
 
-Свойства `label`, `labelMax` и `formatting` предназначены для управления отображением текстового и числового контента в компонентах.
+Свойства `label`, `labelMax` и `formatting` предназначены для управления отображением текстового и числового контента в компонентах интерфейса.
 
-### Свойства
+**Свойства:**
 
-- **label** — Текстовая метка или числовое значение компонента
-- **labelMax** — Максимальная длина текста метки перед обрезкой
-- **formatting** — Определяет необходимость форматирования значений перед отображением
+- `label` — текстовая метка или числовое значение для отображения
+- `labelMax` — максимальное значение для числовых меток (при превышении добавляется индикатор "+")
+- `formatting` — включает форматирование числовых значений согласно локали пользователя
 
-### Функциональность
+Свойства работают совместно для гибкого управления контентом: `label` принимает как текстовые, так и числовые значения. При передаче числа применяется автоматическая обработка с учётом локализации. Свойство `labelMax` ограничивает отображение больших чисел — при превышении значения добавляется символ "+" (например, "99+"). Свойство `formatting` контролирует форматирование чисел согласно региональным настройкам пользователя, обеспечивая корректное отображение разделителей и числовых форматов.
 
-Эти свойства обеспечивают гибкое управление отображением контента:
+```html
+<script setup>
+import { ref } from 'vue'
 
-#### Обработка меток
-- `label` может содержать как текстовые, так и числовые значения
-- При передаче числового значения в `label` автоматически применяется функция `toNumberByMax`
-- Происходит преобразование с учетом максимальных значений и локализации
+const count = ref(5)
+const largeNumber = ref(1234)
+</script>
 
-#### Ограничение длины
-- `labelMax` устанавливает максимальную длину отображаемого текста
-- При превышении лимита текст обрезается с добавлением индикатора переполнения
-- Обеспечивает консистентность отображения в различных контекстах
+<template>
+  <!-- Базовое использование с текстом -->
+  <Component label="Текст" />
 
-#### Форматирование значений
-- `formatting` контролирует, нужно ли применять форматирование к значениям
-- При включенном форматировании числовые значения преобразуются согласно локали пользователя
-- Поддерживается автоматическое определение языка интерфейса
+  <!-- Числовое значение -->
+  <Component :label="count" />
+
+  <!-- Ограничение максимального значения -->
+  <Component :label="150" :label-max="99" />
+  <!-- Отобразит: 99+ -->
+
+  <!-- С форматированием чисел -->
+  <Component
+    :label="largeNumber"
+    :formatting="true"
+  />
+  <!-- Отобразит: 1 234 (в зависимости от локали) -->
+
+  <!-- Комбинированное использование -->
+  <Component
+    :label="999"
+    :label-max="99"
+    :formatting="true"
+  />
+  <!-- Отобразит: 99+ -->
+</template>
+```

package/src/media/mdx/value/value.en.mdx

@@ -1,16 +1,10 @@
-## Value and Data Properties
+## Value and Data Passing
 
-The `value` and `detail` properties are designed to transfer information when interacting with components.
+The `value` and `detail` properties are designed to transfer information when interacting with components and handling events.
 
-### Properties
+**Properties:**
 
-- **value** — Main component value
-- **detail** — Additional data and contextual information
+- `value` — main component value (string, number, object)
+- `detail` — additional data and contextual information
 
-### Property Relationship
-
-The properties complement each other, providing complete information about the component's state and context. `value` contains the main value, while `detail` extends it with additional data.
-
-- `value` reflects the current state or value of the component
-- `detail` can contain metadata, identifiers, coordinates, or other auxiliary data
-- Both properties work together to transfer structured information
+Properties work together: `value` contains the main component value, which is passed during events and accessible via the expose API. `detail` extends `value` with additional data such as metadata, identifiers, or other auxiliary information. Both properties are available for programmatic reading and passed in component events, providing complete information about the state and context during interaction.

package/src/media/mdx/value/value.ru.mdx

@@ -1,16 +1,10 @@
-## Свойства значений и данных
+## Передача значений и данных
 
-Свойства `value` и `detail` предназначены для передачи информации при взаимодействии с компонентами.
+Свойства `value` и `detail` предназначены для передачи информации при взаимодействии с компонентами и обработке событий.
 
-### Свойства
+**Свойства:**
 
-- **value** — Основное значение компонента
-- **detail** — Дополнительные данные и контекстная информация
+- `value` — основное значение компонента (строка, число, объект)
+- `detail` — дополнительные данные и контекстная информация
 
-### Взаимосвязь свойств
-
-Свойства дополняют друг друга, предоставляя полную информацию о состоянии и контексте компонента. `value` содержит основное значение, а `detail` расширяет его дополнительными данными.
-
-- `value` отражает текущее состояние или значение компонента
-- `detail` может содержать метаданные, идентификаторы, координаты или другие вспомогательные данные
-- Оба свойства работают совместно для передачи структурированной информации
+Свойства работают совместно: `value` содержит основное значение компонента, которое передаётся при событиях и доступно через expose API. `detail` расширяет `value` дополнительными данными, такими как метаданные, идентификаторы или другая вспомогательная информация. Оба свойства доступны для программного чтения и передаются в события компонента, обеспечивая полную информацию о состоянии и контексте при взаимодействии.

package/src/media/styles/color.md

@@ -0,0 +1 @@
+

package/src/media/styles/en/about.mdx

@@ -0,0 +1,79 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/styles/en/About'/>
+
+# @dxtmisha/styles
+
+SCSS utilities library for DXT UI ecosystem. Contains ready-made mixins and functions for styling with CSS Custom Properties support, automatic RTL handling, and responsive design patterns.
+
+## Package Contents
+
+### Color Management
+
+- **Color Functions** — validation, conversion, palette management, opacity handling
+- **getColor** — color value extraction with opacity support
+- **getPalette** — palette color management
+- **toColorRbg** — color conversion to RGB format
+- **toGradient** — color to gradient conversion
+
+### Layout & Positioning
+
+- **Flexbox Mixins** — horizontal/vertical layouts, centering, spacing presets
+- **Position Mixins** — absolute/relative positioning with automatic RTL support via inset-inline
+- **Dimension Mixins** — width, height, aspect ratio, viewport units (dvw/dvh)
+- **Margin & Padding** — spacing utilities with RTL support via margin-inline/padding-inline
+
+### Typography
+
+- **Font Mixins** — font size, line height, paragraph spacing with CSS variables
+- **Text Alignment** — automatic RTL text alignment inversion
+- **Text Overflow** — truncate, clamp, ellipsis handling
+- **Text Transformation** — uppercase, lowercase, capitalize utilities
+
+### Direction & RTL Support
+
+- **Dir System** — automatic LTR/RTL direction management via CSS variables
+- **initDir** — initialization with --d-dir multiplier (1 for LTR, -1 for RTL)
+- **dirLeft/dirRight** — automatic value inversion for RTL
+- **dirFlexLeft/dirFlexRight** — flex alignment with RTL support
+
+### Responsive Design
+
+- **Media Queries** — min/max width breakpoints from design system
+- **Container Queries** — responsive components based on parent container size
+- **mediaMinWidth/mediaMaxWidth** — convenient media query wrappers
+- **containerMinWidth/containerMaxWidth** — container query utilities
+
+### Transform & Animation
+
+- **Transform Mixins** — translateX/Y, scale, rotate with CSS variables
+- **transformInit** — applies all transforms with automatic RTL for translateX
+- **translateInit** — translate-only transforms
+
+### Interactive States
+
+- **Selector Mixins** — hover, active, focus, disabled, readonly states
+- **enabled** — automatic exclusion of disabled/readonly/loading states
+- **focus** — includes :focus, :focus-within, and BEM modifier support
+
+### Utilities
+
+- **Content Visibility** — performance optimization for off-screen content
+- **Scrollbar** — hide scrollbar while keeping scroll functionality
+- **Rules** — map operations, string manipulation, selector utilities
+- **Custom Properties** — CSS variable management and validation
+
+## Key Features
+
+**RTL Support:** Automatic right-to-left layout support through CSS Logical Properties (margin-inline, padding-inline, inset-inline) and direction system integration
+
+**CSS Custom Properties:** All sizing, spacing, and transform values stored as CSS variables for dynamic theming
+
+**Design System Integration:** Breakpoints, colors, and spacing values from centralized design tokens
+
+**Performance:** Content visibility optimizations, efficient selector generation, minimal CSS output
+
+**Type Safety:** Validation functions for colors, custom properties, and data types
+
+**BEM Compatible:** All mixins work seamlessly with BEM methodology
+