Классы элементов

Slim Select формирует собственную DOM-структуру поверх стандартного <select>, полностью заменяя визуальное представление нативного элемента набором переиспользуемых блоков. Каждый элемент интерфейса получает набор CSS-классов, которые определяют его поведение, состояние и позиционирование. Архитектура классов построена так, чтобы обеспечить как базовую стилизацию, так и гибкую кастомизацию через переопределение селекторов.

Корневой элемент Slim Select создаётся как обёртка вокруг исходного <select> и получает основной класс:

• ss-main — главный контейнер компонента

Он выступает в роли якоря для всей внутренней структуры. Внутри него размещается визуальная часть селекта и скрытый оригинальный <select>, который сохраняется для совместимости с формами и нативными событиями.

Дополнительные классы состояния могут добавляться к корневому элементу:

• ss-disabled — компонент заблокирован
• ss-open — выпадающий список открыт
• ss-multiple — режим множественного выбора
• ss-single — одиночный выбор

Эти классы управляют внешним видом и логикой отображения без необходимости прямого обращения к внутренним узлам.

Область отображения выбранного значения

Отдельный блок внутри контейнера отвечает за отображение текущего состояния выбора:

• ss-values — контейнер выбранных значений
• ss-placeholder — плейсхолдер, отображаемый при отсутствии выбора
• ss-single-selected — выбранное значение в режиме одиночного выбора

В одиночном режиме значение отображается в компактной форме, тогда как в мультивыборе используется набор отдельных элементов.

Элементы множественного выбора

При включённом множественном выборе Slim Select создаёт отдельные визуальные «токены» для каждого выбранного элемента:

• ss-value — отдельное выбранное значение
• ss-value-text — текст внутри выбранного элемента
• ss-value-delete — кнопка удаления выбранного элемента

Структура каждого выбранного элемента обычно выглядит как вложенная композиция:

• контейнер значения
• текстовый узел
• управляющий элемент удаления

Такой подход позволяет независимо стилизовать каждый компонент и управлять поведением удаления без затрагивания основной логики селекта.

Выпадающий список

Выпадающая часть интерфейса строится отдельно от основного контейнера и обычно рендерится в конце документа для удобства позиционирования:

• ss-content — контейнер выпадающего списка
• ss-list — список опций

Состояние отображения списка управляется классами корневого элемента, однако сама структура списка остаётся независимой.

Элементы списка опций

Каждая опция внутри выпадающего списка имеет собственный набор классов:

• ss-option — базовый элемент опции
• ss-highlighted — подсвеченная (активная при навигации с клавиатуры)
• ss-selected — выбранная опция
• ss-disabled — недоступная для выбора опция

Внутри опции обычно присутствует текстовый узел, но возможна кастомизация через шаблоны, добавляющая дополнительные элементы.

Группы опций

При использовании группировки Slim Select добавляет дополнительный уровень структуры:

• ss-optgroup — контейнер группы
• ss-optgroup-label — заголовок группы
• ss-optgroup-options — список опций внутри группы

Группы визуально отделяются от обычных элементов списка и могут иметь отдельную стилизацию, включая отступы, линии-разделители и фиксированные заголовки.

Состояния взаимодействия

Slim Select активно использует классы для отражения пользовательского взаимодействия:

• ss-open-above — список открыт вверх (при нехватке места снизу)
• ss-open-below — список открыт вниз
• ss-search — активирован режим поиска
• ss-loading — идёт загрузка данных

Эти классы позволяют адаптировать поведение интерфейса под условия окружения без изменения логики компонента.

Поисковый ввод

Если включён поиск, внутри выпадающего списка появляется отдельный элемент:

• ss-search — контейнер поиска
• ss-search-input — поле ввода

Поле поиска интегрировано в структуру списка и влияет на фильтрацию элементов в реальном времени. Классы состояния позволяют стилизовать активный ввод, фокус и пустое состояние.

Служебные классы и переиспользование

Внутренняя система Slim Select опирается на единый принцип: каждый функциональный узел получает отдельный класс, который не зависит от вложенности. Это обеспечивает:

• предсказуемость CSS-правил
• возможность полной замены темы
• изоляцию состояний
• отсутствие конфликтов с внешними стилями

Ключевые универсальные классы состояния:

• ss-hide — скрытие элемента
• ss-show — отображение элемента
• ss-fade — анимация появления/исчезновения (если включена тема с анимациями)

Кастомизация через classNames

Slim Select поддерживает переопределение стандартных классов через параметр classNames. Эта система позволяет заменить любые базовые селекторы на пользовательские без изменения логики работы компонента.

Пример логики переопределения:

• main — корневой контейнер
• content — выпадающий список
• list — список опций
• option — элемент опции
• selected — выбранная опция
• disabled — заблокированная опция
• open — открытое состояние

Переопределение классов позволяет интегрировать Slim Select в существующие дизайн-системы, где уже используются строгие соглашения по неймингу CSS.

Взаимодействие классов с состояниями

Классы Slim Select работают как система флагов, отражающих текущее состояние компонента. Один и тот же элемент может одновременно содержать несколько классов, например:

• открытый список + режим поиска
• выбранный элемент + состояние фокуса
• опция + disabled + highlighted

Комбинация классов формирует финальное поведение интерфейса, а CSS становится основным инструментом управления визуальной логикой.

Приоритеты и переопределение стилей

Из-за плоской структуры классов приоритет стилей определяется исключительно специфичностью селекторов. Slim Select не использует глубоко вложенные селекторы, что снижает вероятность конфликтов, но требует аккуратного управления каскадом.

Типичные правила:

• классы состояния имеют более высокий приоритет, чем базовые стили
• модификаторы состояния всегда накладываются поверх базовых классов
• стили опций не зависят от структуры DOM

Такой подход делает систему предсказуемой при масштабировании интерфейса и подключении кастомных тем.