@dxtmisha/wiki 0.39.2 → 0.39.3

package/src/media/mdx/Image/size.ru.mdx

@@ -1,32 +0,0 @@
-## Управление отображением изображения
-
-Свойства `size`, `coordinator`, `x` и `y` позволяют детально управлять масштабированием, областью видимости и позиционированием изображения внутри контейнера.
-
-**Свойства:**
-
-- `size` — режим масштабирования и заполнения изображения (`auto`, `contain`, `cover`)
-- `coordinator` — массив координат для обрезки области отображения `[left, top, right, bottom]` в процентах
-- `x` — смещение изображения по горизонтали (пиксели, проценты)
-- `y` — смещение изображения по вертикали (пиксели, проценты)
-
-Свойства работают совместно или по отдельности. Значение `size` определяет режим масштабирования: `auto` использует исходный размер, `contain` вписывает изображение полностью, `cover` заполняет контейнер с возможной обрезкой. Свойство `coordinator` задаёт видимую область, обрезая изображение по указанным координатам. Параметры `x` и `y` смещают изображение относительно контейнера для точного позиционирования.
-
-```html
-<!-- Режим масштабирования -->
-<Image value="image.png" size="contain" />
-
-<!-- Обрезка по координатам -->
-<Image value="image.png" :coordinator="[10, 20, 100, 80]" />
-
-<!-- Смещение позиции -->
-<Image value="image.png" x="15" y="-10" />
-
-<!-- Комбинация параметров -->
-<Image
-  value="image.png"
-  size="cover"
-  :coordinator="[0, 0, 100, 50]"
-  x="10"
-  y="5"
-/>
-```

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

@@ -1,23 +0,0 @@
-## Main value
-
-The `value` property defines the image content. This universal property supports multiple source types for maximum flexibility.
-
-**Supported types:**
-
-- **Icon name** — built-in or custom icon from the design system
-- **Image URL** — direct link to file (PNG, JPG, SVG, GIF, WebP, etc.)
-- **File object** — JavaScript File object obtained from `<input type="file">`
-- **PDF document** — direct link to PDF file with automatic display
-
-The component automatically detects the source type and selects the optimal display method. When passing a File object, the content is read and previewed. The property is reactive and supports dynamic updates.
-
-```html
-<!-- Icon by name -->
-<Image value="icon-user" />
-
-<!-- Image by URL -->
-<Image value="https://example.com/image.png" />
-
-<!-- User file -->
-<Image :value="fileFromInput" />
-```

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

@@ -1,23 +0,0 @@
-## Основное значение
-
-Свойство `value` определяет контент изображения. Это универсальное свойство, поддерживающее несколько типов источников для максимальной гибкости.
-
-**Поддерживаемые типы:**
-
-- **Имя иконки** — встроенная или пользовательская иконка из системы дизайна
-- **URL изображения** — прямая ссылка на файл (PNG, JPG, SVG, GIF, WebP и др.)
-- **Объект File** — JavaScript-объект File, полученный из `<input type="file">`
-- **PDF-документ** — прямая ссылка на PDF-файл с автоматическим отображением
-
-Компонент автоматически определяет тип источника и выбирает оптимальный способ отображения. При передаче объекта File происходит чтение и предпросмотр содержимого. Свойство реактивно и поддерживает динамическое обновление.
-
-```html
-<!-- Иконка по имени -->
-<Image value="icon-user" />
-
-<!-- Изображение по URL -->
-<Image value="https://example.com/image.png" />
-
-<!-- Файл от пользователя -->
-<Image :value="fileFromInput" />
-```

package/src/media/mdx/Image/wikiMdxImage.ts

@@ -1,58 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import imageEn from './image.en.mdx'
-import imageRu from './image.ru.mdx'
-import valueEn from './value.en.mdx'
-import valueRu from './value.ru.mdx'
-import sizeEn from './size.en.mdx'
-import sizeRu from './size.ru.mdx'
-import adaptiveEn from './adaptive.en.mdx'
-import adaptiveRu from './adaptive.ru.mdx'
-import imgTagEn from './img-tag.en.mdx'
-import imgTagRu from './img-tag.ru.mdx'
-import flagEn from './flag.en.mdx'
-import flagRu from './flag.ru.mdx'
-
-import eventLoadEn from './event.load.en.mdx'
-import eventLoadRu from './event.load.ru.mdx'
-
-import exposeEn from './expose.en.mdx'
-import exposeRu from './expose.ru.mdx'
-
-export const wikiMdxImage: StorybookComponentsMdxItem = {
-  name: 'Image',
-  descriptions: {
-    'image': {
-      en: imageEn,
-      ru: imageRu
-    },
-    'value': {
-      en: valueEn,
-      ru: valueRu
-    },
-    'size': {
-      en: sizeEn,
-      ru: sizeRu
-    },
-    'adaptive': {
-      en: adaptiveEn,
-      ru: adaptiveRu
-    },
-    'img-tag': {
-      en: imgTagEn,
-      ru: imgTagRu
-    },
-    'flag': {
-      en: flagEn,
-      ru: flagRu
-    },
-    'event.load': {
-      en: eventLoadEn,
-      ru: eventLoadRu
-    },
-    'expose': {
-      en: exposeEn,
-      ru: exposeRu
-    }
-  }
-}

package/src/media/mdx/Input/currency.en.mdx

@@ -1,38 +0,0 @@
-## Currency Formatting
-
-Properties `type`, `currency`, `currencyHide`, `language`, and `fraction` are designed to manage currency value formatting with automatic currency symbol insertion and localization.
-
-**Properties:**
-
-- `type` — input type (set to `currency`)
-- `currency` — currency code (e.g., `USD`, `EUR`, `RUB`)
-- `currencyHide` — hides currency symbol in the input field
-- `language` — locale code for formatting (e.g., `ru-RU`, `en-US`)
-- `fraction` — number of decimal places (default `2`)
-
-Properties work together: `type="currency"` automatically activates currency formatting mode with two decimal places. `currency` defines the symbol appended to the formatted number (`$`, `€`, `₽`). When `currencyHide` is set, currency symbol is not displayed, but number formatting is preserved. Property `language` affects thousand separators, decimal separator, and currency symbol position. Number of decimal places can be changed via `fraction`, overriding the default value.
-
-```html
-<script setup>
-import { ref } from 'vue'
-const value = ref('1234.56')
-</script>
-
-<template>
-  <!-- Standard currency input -->
-  <Input v-model="value" type="currency" currency="USD" language="en-US" label="Price" />
-
-  <!-- Currency with Russian locale -->
-  <Input v-model="value" type="currency" currency="RUB" language="ru-RU" label="Salary" />
-
-  <!-- Currency without symbol -->
-  <Input v-model="value" type="currency" currency="EUR" currency-hide language="de-DE" label="Amount" />
-
-  <!-- Currency with three decimals -->
-  <Input v-model="value" type="currency" currency="USD" language="en-US" :fraction="3" label="Precise Amount" />
-
-  <!-- Number formatting only -->
-  <Input v-model="value" type="number-format" language="ru-RU" label="Number" />
-</template>
-```
-

package/src/media/mdx/Input/currency.ru.mdx

@@ -1,38 +0,0 @@
-## Работа с валютой
-
-Свойства `type`, `currency`, `currencyHide`, `language` и `fraction` предназначены для управления форматированием денежных значений с автоматической подстановкой символа валюты и локализацией.
-
-**Свойства:**
-
-- `type` — тип инпута (устанавливается значение `currency`)
-- `currency` — код валюты (например, `USD`, `EUR`, `RUB`)
-- `currencyHide` — скрывает символ валюты в поле ввода
-- `language` — код локали для форматирования (например, `ru-RU`, `en-US`)
-- `fraction` — количество знаков после запятой (по умолчанию `2`)
-
-Свойства работают совместно: `type="currency"` автоматически активирует режим валютного форматирования с двумя знаками после запятой. `currency` определяет символ, который добавляется к отформатированному числу (`$`, `€`, `₽`). При установке `currencyHide` символ валюты не отображается, но форматирование числа сохраняется. Свойство `language` влияет на разделители тысяч, десятичный разделитель и позицию символа валюты. Количество десятичных знаков можно изменить через `fraction`, перезаписав значение по умолчанию.
-
-```html
-<script setup>
-import { ref } from 'vue'
-const value = ref('1234.56')
-</script>
-
-<template>
-  <!-- Стандартный валютный инпут -->
-  <Input v-model="value" type="currency" currency="USD" language="en-US" label="Цена" />
-
-  <!-- Валюта с русской локалью -->
-  <Input v-model="value" type="currency" currency="RUB" language="ru-RU" label="Зарплата" />
-
-  <!-- Валюта без символа -->
-  <Input v-model="value" type="currency" currency="EUR" currency-hide language="de-DE" label="Сумма" />
-
-  <!-- Валюта с тремя знаками -->
-  <Input v-model="value" type="currency" currency="USD" language="en-US" :fraction="3" label="Точная сумма" />
-
-  <!-- Только числовое форматирование -->
-  <Input v-model="value" type="number-format" language="ru-RU" label="Число" />
-</template>
-```
-

package/src/media/mdx/Input/date.en.mdx

@@ -1,53 +0,0 @@
-## Date and Time Formatting
-
-Properties `type`, `language`, and `mask` are designed to manage date and time input and formatting with automatic localization and masking.
-
-**Properties:**
-
-- `type` — input type (set to one of: `date`, `datetime`, `year-month`, `time`, `hour-minute`)
-- `language` — locale code for formatting (e.g., `ru-RU`, `en-US`)
-- `mask` — custom input mask (optional)
-- `min` — minimum allowed date/time value
-- `max` — maximum allowed date/time value
-
-Properties work together: `type="date"` automatically activates date input mode with localized formatting. `language` determines the order of date components (day/month/year or month/day/year) and separators. `type="datetime"` adds time input to the date. Types `year-month`, `time`, and `hour-minute` allow input of specific components only. Properties `min` and `max` restrict the range of allowed values. You can override the automatic mask via the `mask` property for custom formatting.
-
-```html
-<script setup>
-import { ref } from 'vue'
-const dateValue = ref('2024-03-15')
-const datetimeValue = ref('2024-03-15T14:30:00')
-const timeValue = ref('14:30')
-const yearMonthValue = ref('2024-03')
-</script>
-
-<template>
-  <!-- Standard date input -->
-  <Input v-model="dateValue" type="date" language="en-US" label="Date" />
-
-  <!-- Date with Russian locale -->
-  <Input v-model="dateValue" type="date" language="ru-RU" label="Дата" />
-
-  <!-- Date and time -->
-  <Input v-model="datetimeValue" type="datetime" language="en-US" label="Date and Time" />
-
-  <!-- Time only -->
-  <Input v-model="timeValue" type="time" language="en-US" label="Time" />
-
-  <!-- Hours and minutes -->
-  <Input v-model="timeValue" type="hour-minute" language="en-US" label="Hours:Minutes" />
-
-  <!-- Year and month -->
-  <Input v-model="yearMonthValue" type="year-month" language="en-US" label="Period" />
-
-  <!-- Date with constraints -->
-  <Input
-    v-model="dateValue"
-    type="date"
-    language="en-US"
-    min="2024-01-01"
-    max="2024-12-31"
-    label="Date in 2024"
-  />
-</template>
-```

package/src/media/mdx/Input/date.ru.mdx

@@ -1,53 +0,0 @@
-## Работа с датой и временем
-
-Свойства `type`, `language` и `mask` предназначены для управления вводом и форматированием значений даты и времени с автоматической локализацией и маскированием.
-
-**Свойства:**
-
-- `type` — тип инпута (устанавливается одно из значений: `date`, `datetime`, `year-month`, `time`, `hour-minute`)
-- `language` — код локали для форматирования (например, `ru-RU`, `en-US`)
-- `mask` — пользовательская маска для ввода (опционально)
-- `min` — минимальное допустимое значение даты/времени
-- `max` — максимальное допустимое значение даты/времени
-
-Свойства работают совместно: `type="date"` автоматически активирует режим ввода даты с локализованным форматированием. `language` определяет порядок компонентов даты (день/месяц/год или месяц/день/год) и разделители. `type="datetime"` добавляет к дате ввод времени. Типы `year-month`, `time` и `hour-minute` позволяют вводить только определённые компоненты. Свойства `min` и `max` ограничивают диапазон допустимых значений. Можно переопределить автоматическую маску через свойство `mask` для кастомного форматирования.
-
-```html
-<script setup>
-import { ref } from 'vue'
-const dateValue = ref('2024-03-15')
-const datetimeValue = ref('2024-03-15T14:30:00')
-const timeValue = ref('14:30')
-const yearMonthValue = ref('2024-03')
-</script>
-
-<template>
-  <!-- Стандартный ввод даты -->
-  <Input v-model="dateValue" type="date" language="ru-RU" label="Дата" />
-
-  <!-- Дата с английской локалью -->
-  <Input v-model="dateValue" type="date" language="en-US" label="Date" />
-
-  <!-- Дата и время -->
-  <Input v-model="datetimeValue" type="datetime" language="ru-RU" label="Дата и время" />
-
-  <!-- Только время -->
-  <Input v-model="timeValue" type="time" language="ru-RU" label="Время" />
-
-  <!-- Часы и минуты -->
-  <Input v-model="timeValue" type="hour-minute" language="ru-RU" label="Часы:Минуты" />
-
-  <!-- Год и месяц -->
-  <Input v-model="yearMonthValue" type="year-month" language="ru-RU" label="Период" />
-
-  <!-- Дата с ограничениями -->
-  <Input
-    v-model="dateValue"
-    type="date"
-    language="ru-RU"
-    min="2024-01-01"
-    max="2024-12-31"
-    label="Дата в 2024 году"
-  />
-</template>
-```

package/src/media/mdx/Input/input.en.mdx

@@ -1,143 +0,0 @@
-Text input field component with validation, masking and formatting support.
-
-Input provides a flexible interface for entering various types of data: text, numbers, email, passwords, phones, URLs, dates and time. The component automatically applies appropriate validation, formatting and keyboard based on the specified type. Supports masking for structured input (phones, dates, custom patterns), currency and number formatting, password visibility control and integration with the Field component for consistent styling.
-
-**Key features:**
-
-- Multiple input types (text, number, email, password, tel, url, date, time and more)
-- Built-in validation with custom messages
-- Masking for formatted input
-- Currency and number formatting with localization
-- Password visibility toggle
-- Prefix and suffix for additional context
-- Character counter for length limits
-- Navigation arrows for numeric values
-- Autocomplete and spellcheck support
-- Clear button for value reset
-
-**Common use cases:**
-
-- Registration and login forms
-- Contact information fields (email, phone)
-- Numeric fields (quantity, price, age)
-- Password fields with visibility toggle
-- Search fields with quick clear
-- Formatted input (phones, dates, cards)
-- Currency fields with automatic formatting
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const email = ref('')
-const password = ref('')
-
-const handleInput = (event, validation) => {
-  console.log('Input value:', validation.value)
-  console.log('Valid:', validation.status)
-}
-</script>
-
-<template>
-  <div class="form">
-    <Input
-      v-model="email"
-      type="email"
-      label="Email"
-      placeholder="example@mail.com"
-      required
-      @input="handleInput"
-    />
-
-    <Input
-      v-model="password"
-      type="password"
-      label="Password"
-      placeholder="Enter password"
-      minlength="8"
-      required
-      iconVisibility="visibility"
-      iconVisibilityOff="visibility_off"
-    />
-
-    <Input
-      type="currency"
-      label="Price"
-      currency="USD"
-      language="en-US"
-    />
-  </div>
-</template>
-```
-Компонент текстового поля ввода с поддержкой валидации, маскирования и форматирования.
-
-Input предоставляет гибкий интерфейс для ввода данных различных типов: текст, числа, email, пароли, телефоны, URL, даты и время. Компонент автоматически применяет соответствующую валидацию, форматирование и клавиатуру в зависимости от указанного типа. Поддерживает маскирование для структурированного ввода (телефоны, даты, кастомные паттерны), форматирование валют и чисел, управление видимостью пароля и интеграцию с компонентом Field для единообразной стилизации.
-
-**Основные возможности:**
-
-- Множественные типы ввода (text, number, email, password, tel, url, date, time и другие)
-- Встроенная валидация с пользовательскими сообщениями
-- Маскирование для форматированного ввода
-- Форматирование валюты и чисел с локализацией
-- Переключатель видимости пароля
-- Префикс и суффикс для дополнительного контекста
-- Счётчик символов для ограничения длины
-- Стрелки навигации для числовых значений
-- Поддержка автозаполнения и проверки орфографии
-- Кнопка очистки значения
-
-**Типичные сценарии использования:**
-
-- Формы регистрации и авторизации
-- Поля ввода контактных данных (email, телефон)
-- Числовые поля (количество, цена, возраст)
-- Поля для ввода паролей с переключением видимости
-- Поля поиска с быстрой очисткой
-- Форматированный ввод (телефоны, даты, карты)
-- Валютные поля с автоматическим форматированием
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const email = ref('')
-const password = ref('')
-
-const handleInput = (event, validation) => {
-  console.log('Введённое значение:', validation.value)
-  console.log('Валидно:', validation.status)
-}
-</script>
-
-<template>
-  <div class="form">
-    <Input
-      v-model="email"
-      type="email"
-      label="Email"
-      placeholder="example@mail.com"
-      required
-      @input="handleInput"
-    />
-
-    <Input
-      v-model="password"
-      type="password"
-      label="Пароль"
-      placeholder="Введите пароль"
-      minlength="8"
-      required
-      iconVisibility="visibility"
-      iconVisibilityOff="visibility_off"
-    />
-
-    <Input
-      type="currency"
-      label="Цена"
-      currency="RUB"
-      language="ru-RU"
-    />
-  </div>
-</template>
-```
-

package/src/media/mdx/Input/input.ru.mdx

@@ -1,71 +0,0 @@
-Компонент текстового поля ввода с поддержкой валидации, маскирования и форматирования.
-
-Input предоставляет гибкий интерфейс для ввода данных различных типов: текст, числа, email, пароли, телефоны, URL, даты и время. Компонент автоматически применяет соответствующую валидацию, форматирование и клавиатуру в зависимости от указанного типа. Поддерживает маскирование для структурированного ввода (телефоны, даты, кастомные паттерны), форматирование валют и чисел, управление видимостью пароля и интеграцию с компонентом Field для единообразной стилизации.
-
-**Основные возможности:**
-
-- Множественные типы ввода (text, number, email, password, tel, url, date, time и другие)
-- Встроенная валидация с пользовательскими сообщениями
-- Маскирование для форматированного ввода
-- Форматирование валюты и чисел с локализацией
-- Переключатель видимости пароля
-- Префикс и суффикс для дополнительного контекста
-- Счётчик символов для ограничения длины
-- Стрелки навигации для числовых значений
-- Поддержка автозаполнения и проверки орфографии
-- Кнопка очистки значения
-
-**Типичные сценарии использования:**
-
-- Формы регистрации и авторизации
-- Поля ввода контактных данных (email, телефон)
-- Числовые поля (количество, цена, возраст)
-- Поля для ввода паролей с переключением видимости
-- Поля поиска с быстрой очисткой
-- Форматированный ввод (телефоны, даты, карты)
-- Валютные поля с автоматическим форматированием
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const email = ref('')
-const password = ref('')
-
-const handleInput = (event, validation) => {
-  console.log('Введённое значение:', validation.value)
-  console.log('Валидно:', validation.status)
-}
-</script>
-
-<template>
-  <div class="form">
-    <Input
-      v-model="email"
-      type="email"
-      label="Email"
-      placeholder="example@mail.com"
-      required
-      @input="handleInput"
-    />
-
-    <Input
-      v-model="password"
-      type="password"
-      label="Пароль"
-      placeholder="Введите пароль"
-      minlength="8"
-      required
-      iconVisibility="visibility"
-      iconVisibilityOff="visibility_off"
-    />
-
-    <Input
-      type="currency"
-      label="Цена"
-      currency="RUB"
-      language="ru-RU"
-    />
-  </div>
-</template>
-```

package/src/media/mdx/Input/mask.en.mdx

@@ -1,30 +0,0 @@
-## Input Masking
-
-Properties `mask`, `maskVisible`, `maskNone`, and `maskAttrs` are designed to manage formatted input with automatic separator insertion and character control at specified positions.
-
-**Properties:**
-
-- `mask` — mask template as a string (e.g., `+1 (***) ***-****`)
-- `maskVisible` — controls placeholder characters display (default `true`)
-- `maskNone` — completely disables the mask
-- `maskAttrs` — object with extended mask settings
-
-Properties work together: `mask` defines the formatting structure, where special character (default `*`) defines positions for digit input, and other characters (spaces, brackets, hyphens) are automatically inserted as fixed separators. `maskVisible` controls the display of unfilled positions, where when set to `true` they are displayed with placeholder characters `_`, and when `false` only entered characters with separators are shown. `maskNone` allows completely disabling masking logic, converting the field to a regular text input. `maskAttrs` provides access to extended settings, allowing configuration of special characters (`special`), regular expressions for validation (`match`), custom placeholder characters (`view`), validation patterns (`pattern`), and rubber groups (`rubber`).
-
-```html
-<script setup>
-import { ref } from 'vue'
-const value = ref('')
-</script>
-
-<template>
-  <!-- US Phone -->
-  <Input v-model="value" type="tel" mask="+1 (###) ###-####" placeholder="+1 (555) 000-0000" label="Phone" />
-
-  <!-- Credit Card -->
-  <Input v-model="value" type="text" mask="#### #### #### ####" placeholder="0000 0000 0000 0000" label="Card" />
-
-  <!-- Without placeholder display -->
-  <Input v-model="value" type="tel" mask="+1 (###) ###-####" :mask-visible="false" label="No placeholder" />
-</template>
-```

package/src/media/mdx/Input/mask.ru.mdx

@@ -1,30 +0,0 @@
-## Маскирование ввода
-
-Свойства `mask`, `maskVisible`, `maskNone` и `maskAttrs` предназначены для управления форматированным вводом с автоматической подстановкой разделителей и контролем символов в заданных позициях.
-
-**Свойства:**
-
-- `mask` — шаблон маски в виде строки (например, `+1 (***) ***-****`)
-- `maskVisible` — управляет отображением символов-заполнителей (по умолчанию `true`)
-- `maskNone` — полностью отключает маску
-- `maskAttrs` — объект с расширенными настройками маски
-
-Свойства работают совместно: `mask` определяет структуру форматирования, где специальный символ (по умолчанию `*`) определяет позиции для ввода цифр, а остальные символы (пробелы, скобки, дефисы) автоматически подставляются как фиксированные разделители. `maskVisible` управляет отображением незаполненных позиций, где при значении `true` они отображаются символами-заполнителями `_`, а при `false` показываются только введённые символы с разделителями. `maskNone` позволяет полностью отключить логику маскирования, превращая поле в обычный текстовый инпут. `maskAttrs` обеспечивает доступ к расширенным настройкам, позволяя настраивать специальные символы (`special`), регулярные выражения для проверки (`match`), кастомные символы-заполнители (`view`), паттерны валидации (`pattern`) и резиновые группы (`rubber`).
-
-```html
-<script setup>
-import { ref } from 'vue'
-const value = ref('')
-</script>
-
-<template>
-  <!-- Телефон США -->
-  <Input v-model="value" type="tel" mask="+1 (###) ###-####" placeholder="+1 (555) 000-0000" label="Телефон" />
-
-  <!-- Кредитная карта -->
-  <Input v-model="value" type="text" mask="#### #### #### ####" placeholder="0000 0000 0000 0000" label="Карта" />
-
-  <!-- Без отображения символов-заполнителей -->
-  <Input v-model="value" type="tel" mask="+1 (###) ###-####" :mask-visible="false" label="Без заполнителя" />
-</template>
-```

package/src/media/mdx/Input/number.en.mdx

@@ -1,41 +0,0 @@
-## Working with Numbers
-
-Properties `type`, `fraction`, `language`, `min`, `max`, `step`, `arrow`, `arrowStep`, and `align` are designed to manage numeric value input and formatting with localization support and interactive control elements.
-
-**Properties:**
-
-- `type` — input type (`number` or `number-format`)
-- `fraction` — number of decimal places (number, `true` for dynamic fractional part)
-- `language` — locale code for formatting (e.g., `ru-RU`, `en-US`)
-- `min` — minimum allowed value
-- `max` — maximum allowed value
-- `step` — step size for keyboard input
-- `arrow` — control arrows type (`auto`, `stepper`, `carousel`, `none`)
-- `arrowStep` — step size for arrow clicks
-- `align` — arrows placement (`left`, `center`, `right`)
-
-Properties work together: `type` defines the base input mode, where `number` activates simple numeric input with basic validation without formatting, and `number-format` enables automatic formatting with thousands separators and decimal places depending on locale. `language` defines regional rules for thousands separators (space, comma, period) and decimal separator (period or comma). Properties `min` and `max` activate built-in range validation. `step` defines increment/decrement magnitude when using arrow keys up/down and Page Up/Down. Properties `arrow` and `arrowStep` add visual control elements (± buttons or < > arrows) with customizable step size, where if `arrowStep` is not specified, `step` value is used. `align` controls arrows placement in the input field.
-
-```html
-<script setup>
-import { ref } from 'vue'
-const value = ref('1234567.89')
-</script>
-
-<template>
-  <!-- Simple numeric input -->
-  <Input v-model="value" type="number" label="Number" />
-
-  <!-- Formatted number with locale -->
-  <Input v-model="value" type="number-format" language="en-US" label="Formatted" />
-
-  <!-- With range constraints -->
-  <Input v-model="value" type="number" :min="0" :max="100" label="From 0 to 100" />
-
-  <!-- With step and stepper arrows -->
-  <Input v-model="value" type="number" arrow="stepper" :step="5" :arrow-step="10" label="Step 5/10" />
-
-  <!-- With center alignment -->
-  <Input v-model="value" type="number-format" align="center" :fraction="2" label="Centered" />
-</template>
-```