Publish

- @advdominion/browserslist-to-targets@1.0.1
 - @advdominion/sass-importer@1.0.1
 - @advdominion/stylelint-config@2.1.0

.oxlintrc.json

@@ -26,6 +26,7 @@
     "eslint/no-inline-comments": "off",
     "eslint/no-irregular-whitespace": ["error", { "skipTemplates": true }],
     "eslint/no-magic-numbers": "off",
+    "eslint/no-nested-ternary": "off",
     "eslint/no-new": "off",
     "eslint/no-shadow": "off",
     "eslint/no-ternary": "off",
@@ -33,6 +34,7 @@
     "eslint/no-undefined": "off",
     "eslint/no-underscore-dangle": "off",
     "eslint/no-unexpected-multiline": "off",
+    "eslint/one-var": "off",
     "eslint/prefer-destructuring": [
       "warn",
       {
@@ -55,6 +57,7 @@
     "oxc/no-map-spread": "off",
     "oxc/no-optional-chaining": "off",
     "oxc/no-rest-spread-properties": "off",
+    "unicorn/explicit-timer-delay": "off",
     "unicorn/filename-case": ["warn", { "cases": { "kebabCase": true, "pascalCase": true } }],
     "unicorn/no-empty-file": "warn",
     "unicorn/no-nested-ternary": "off",

packages/babel-plugin-nunjucks/README.md

@@ -1,70 +0,0 @@
-# babel-plugin-nunjucks
-
-Плагин для [babel-loader](https://github.com/babel/babel-loader), позволяющий использовать шаблонизатор [Nunjucks](https://mozilla.github.io/nunjucks/) внутри JS-файлов.
-
-## Установка
-
-```bash
-yarn add -D @advdominion/babel-plugin-nunjucks
-```
-
-## Использование
-
-Используются [Tagged templates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) с тегом `njk`:
-
-```js
-njk`
-    {% from "./item.njk" import item as item %}
-
-    <div class="items">
-		{% for n in range(0, 10) %}
-			{{item()}}
-		{% endfor %}
-    </div>
-`;
-```
-
-Пример конфигурации Webpack:
-
-```js
-[
-    {
-        test: /\.js$/,
-        exclude: [/mocks\.js$/],
-        use: [
-            {
-                loader: 'babel-loader',
-                options: {
-                    cacheDirectory: true,
-                },
-            },
-        ],
-    },
-    {
-        test: /mocks\.js$/,
-        use: [
-            {
-                loader: 'babel-loader',
-                options: {
-                    compact: false,
-                    plugins: [
-                        [
-                            '@advdominion/babel-plugin-nunjucks',
-                            {
-                                templatesFolder: 'src/templates/',
-                            },
-                        ],
-                    ],
-                },
-            },
-        ],
-    },
-];
-```
-
-## Опции
-
-- `templatesFolder` - строка, обязательный параметр. Путь до папки с файлами шаблонов
-- `globals` - массив, необязательный параметр. Глобальные переменные для Nunjucks (например, `[{name: "message", value: "Hello, world!"}]`)
-
-**Важно:** Параметр `cacheDirectory` в опциях babel-loader должен быть отключён.

packages/babel-plugin-nunjucks/index.js

@@ -1,25 +0,0 @@
-import nunjucks from 'nunjucks';
-
-const babelPluginNunjucks = ({ types: t }) => {
-    return {
-        pre(state) {
-            const options = state.opts.plugins[0].options;
-            this.njkenv = new nunjucks.Environment(new nunjucks.FileSystemLoader(options.templatesFolder));
-            if (options.globals) {
-                for (const { name, value } of options.globals) {
-                    this.njkenv.addGlobal(name, value);
-                }
-            }
-        },
-        visitor: {
-            TaggedTemplateExpression(path) {
-                if (path.get('tag').isIdentifier({ name: 'njk' })) {
-                    const render = this.njkenv.renderString(path.node.quasi.quasis[0].value.raw);
-                    path.replaceWith(t.stringLiteral(render));
-                }
-            },
-        },
-    };
-};
-
-export default babelPluginNunjucks;

packages/browserslist-to-targets/README.md

@@ -0,0 +1,47 @@
+# @advdominion/browserslist-to-targets
+
+Преобразует конфиг [browserslist](https://github.com/browserslist/browserslist) в массив target-строк, совместимый с [esbuild](https://esbuild.github.io) и [Oxc](https://oxc.rs).
+
+## Зачем
+
+Оба инструмента (esbuild и Oxc) понимают ограниченный набор целевых браузеров, который отличается от browserslist. Пакет приводит результат `browserslist()` к короткому esbuild-формату: `["chrome109", "ios18.5"]`, а всё, что esbuild/Oxc не поддерживает (`and_chr`, `kaios`, `samsung` и т.д.) — отбрасывает.
+
+## Установка
+
+```bash
+yarn add -D @advdominion/browserslist-to-targets
+```
+
+## Использование
+
+```js
+import browserslist from 'browserslist';
+import { browserslistToTargets } from '@advdominion/browserslist-to-targets';
+
+const targets = browserslistToTargets(browserslist());
+// ["chrome109", "edge149", "firefox140", "ios18.5", "opera127", "safari26.5"]
+```
+
+## API
+
+### `browserslistToTargets(browsers): string[]`
+
+- `browsers` — массив строк от `browserslist()`, например `["chrome 151", "ios_saf 26.6"]`.
+- Возвращает массив target-строк без пробела: `["chrome151", "ios26.5"]`.
+
+## Правила преобразования
+
+| browserslist                                      | esbuild/Oxc     | Примечание                                 |
+| ------------------------------------------------- | --------------- | ------------------------------------------ |
+| `chrome 151`                                      | `chrome151`     | версия становится «приклеенной» к имени    |
+| `ios_saf 26.6`                                    | `ios26.5`       | `ios_saf → ios`, остаётся самая старая     |
+| `ios_saf 25-26.5`                                 | `ios25`         | `ios_saf → ios`, диапазон → нижняя граница |
+| `android 151`                                     | `chrome151`     | `android → chrome`                         |
+| `ios 26.0`                                        | `ios26`         | убирает завершающий `.0`                   |
+| `and_chr`, `kaios`, `samsung`, `op_mob`, `and_ff` | — отбрасывается | нет в esbuild/Oxc                          |
+
+Для каждого браузера остаётся самая старая версия — трансформации покрывают самую консервативную цель.
+
+## Лицензия
+
+MIT

packages/browserslist-to-targets/index.js

@@ -0,0 +1,65 @@
+/**
+ * Браузеры, поддерживаемые esbuild/Oxc.
+ *
+ * Зачем: browserslist как входной конфиг должен быть приведён к целевому
+ * формату, который понимает минификатор/трансформер. У esbuild и Oxc
+ * список целевых браузеров жёстко ограничен и отличается от browserslist.
+ * Поэтому мы транслируем браузеры из browserslist в короткий esbuild-формат,
+ * а всё, чего в нём нет — отбрасываем.
+ */
+const SUPPORTED_TARGETS = new Set(['es', 'chrome', 'edge', 'firefox', 'ios', 'node', 'safari', 'opera', 'ie']);
+
+/**
+ * Соответствие идентификаторов браузеров browserslist тем, что знает esbuild.
+ *
+ * Browserslist различает `ios_saf` (Safari на iOS) и `android` (Chrome на
+ * Android), тогда как esbuild знает общее `ios` и `chrome`.
+ */
+const REPLACES = {
+    ios_saf: 'ios',
+    android: 'chrome',
+};
+
+/**
+ * Преобразует результат `browserslist()` в массив target-строк для esbuild/Oxc.
+ *
+ * Вход — массив записей вида `"chrome 109"`, `"ios_saf 18.5-18.7"`.
+ * Выход — массив вида `["chrome109", "ios18.5"]`.
+ *
+ * Шаги:
+ *   1. Режем запись на имя и версию.
+ *   2. Подменяем идентификаторы (`ios_saf → ios`, `android → chrome`).
+ *   3. Диапазоны версий сводим к нижней границе (`18.5-18.7 → 18.5`).
+ *   4. Приводим `18.0` к `18` (убираем хвостовой `.0`).
+ *   5. Отбрасываем версии, не проходящие regex (ломают esbuild), и браузеры,
+ *      которых нет в `SUPPORTED_TARGETS` (`and_chr`, `kaios`, `samsung` и т.д.).
+ *   6. Для каждого браузера оставляем самую старую версию — esbuild применяет
+ *      трансформации, покрывающие самую консервативную цель.
+ *   7. Собираем целевые строки без пробела: `chrome109`.
+ *
+ * @param {string[]} browsers - массив строк браузеров от `browserslist()`.
+ * @returns {string[]} массив target-строк совместимый с esbuild/Oxc.
+ */
+export const browserslistToTargets = (browsers) => {
+    const result = new Map();
+
+    for (const browser of browsers) {
+        // Шаг 1: ['chrome', '109'].
+        let [name, version] = browser.split(' ');
+        // Шаг 2: подмена идентификаторов.
+        name = REPLACES[name] ?? name;
+        // Шаг 3: диапазон → нижняя граница.
+        version = version.includes('-') ? version.slice(0, version.indexOf('-')) : version;
+        // Шаг 4: `18.0` → `18`, но `18.5` не должно трогаться.
+        version = version.endsWith('.0') ? version.slice(0, -2) : version;
+
+        // Шаг 5: валидная версия + поддерживаемый браузер.
+        if (/^\d+(\.\d+)*$/.test(version) && SUPPORTED_TARGETS.has(name)) {
+            // Шаг 6: самая старая версия (последняя в списке) перезатирает предыдущую.
+            result.set(name, version);
+        }
+    }
+
+    // Шаг 7: собираем без пробела.
+    return [...result].map(([name, version]) => `${name}${version}`);
+};

packages/browserslist-to-targets/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@advdominion/browserslist-to-targets",
+  "version": "1.0.1",
+  "type": "module",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://gitea.optiweb.ru/public/frontend.git"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/lightbox-gallery/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@advdominion/lightbox-gallery",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "type": "module",
   "main": "index.js",
   "repository": {
     "type": "git",
-    "url": "https://gitea.optiweb.ru/public/lightbox-gallery.git"
+    "url": "https://gitea.optiweb.ru/public/frontend.git"
   },
   "license": "MIT",
   "publishConfig": {

packages/lightningcss-loader/README.md

@@ -1,53 +0,0 @@
-# lightningcss-loader
-
-[Lightning CSS](https://lightningcss.dev) loader for [Webpack](https://webpack.js.org)
-
-## Usage
-
-```js
-import { transform } from 'lightningcss';
-
-return {
-    ...,
-    rules: [
-        {
-            test: /\.css$/,
-            use: [
-                {
-                    loader: '@advdominion/lightningcss-loader',
-                    options: {
-                        implementation: transform,
-                    },
-                },
-            ],
-        },
-    ],
-};
-```
-
-### Passing options to Lightning CSS
-
-```js
-import { transform } from 'lightningcss';
-
-return {
-    ...,
-    rules: [
-        {
-            test: /\.css$/,
-            use: [
-                {
-                    loader: '@advdominion/lightningcss-loader',
-                    options: {
-                        implementation: transform,
-                        drafts: {
-                            customMedia: true,
-                        },
-                        minify: false,
-                    },
-                },
-            ],
-        },
-    ],
-};
-```

packages/lightningcss-loader/index.js

@@ -1,22 +0,0 @@
-const lightningcssLoader = function (source, sourceMap) {
-    const { implementation, ...options } = this.getOptions();
-    const callback = this.async();
-
-    if (typeof implementation !== 'function') {
-        throw new TypeError(
-            `[lightningcss-loader]: The "implementation" option is required and must provide "transform" function of the LightningCSS`,
-        );
-    }
-
-    const { code, map } = implementation({
-        filename: this.resourcePath,
-        code: Buffer.from(source),
-        sourceMap: this.sourceMap,
-        inputSourceMap: this.sourceMap && sourceMap ? JSON.stringify(sourceMap) : undefined,
-        ...options,
-    });
-
-    callback(undefined, code.toString(), map && JSON.parse(map.toString()));
-};
-
-export default lightningcssLoader;

packages/sass-importer/README.md

@@ -0,0 +1,71 @@
+# @advdominion/sass-importer
+
+Кастомный импортёр для [sass-embedded](https://github.com/sass/dart-sass-embedded), который берёт резолв `@use`/`@forward`-импортов на себя и читает файлы через `node:fs`.
+
+## Зачем
+
+В проектах на **Yarn PnP** пакеты лежат не в `node_modules`, а внутри `.zip` по виртуальным путям:
+
+```
+.yarn/__virtual__/@example-example-virtual-.../cache/@example-example-....zip/node_modules/@example/example/...
+```
+
+`.zip`-путь может открыть только код, читающий файлы через `node:fs` (в нём есть PnP-хуки). А `sass-embedded` читает файлы своим отдельным кодом, `node:fs` не использует, поэтому импорты внутри пакетов не резолвятся. Этот импортёр обходит проблему: он сам превращает импорт в существующий файл (`canonicalize`) и отдаёт его содержимое через `readFileSync` (`load`).
+
+Работает и в `node-modules`-проектах — там `require` без PnP-хуков, но тот же резолв остаётся корректным.
+
+## Установка
+
+```bash
+yarn add -D @advdominion/sass-importer
+```
+
+## Использование
+
+```js
+import { createRequire } from 'node:module';
+import { createImporter } from '@advdominion/sass-importer';
+
+const require = createRequire(import.meta.url);
+const importer = createImporter(require);
+
+const { css } = compiler.compileString(source, {
+    importers: [importer],
+    loadPaths: ['src/styles'],
+});
+```
+
+Импортёр принимает `require` из `createRequire(import.meta.url)`: в PnP он несёт PnP-хуки, в `node-modules` — обычный `require`. Это позволяет резолвить и пакеты, и их внутренние относительные импорты одинаково надёжно.
+
+## API
+
+### `createImporter(require): Importer`
+
+- `require` — функция резолва (обычно `createRequire(import.meta.url)`), используется для ветки `pkg:`.
+- Возвращает объект из двух колбэков для `sass-embedded`: `canonicalize` и `load`.
+
+`canonicalize(url, ctx)` превращает импорт в канонический `file://` URL или возвращает `null` («я не знаю такой файл» — тогда Sass перебирает следующие импортёры/`loadPaths`).
+
+`load(canonicalUrl)` отдаёт содержимое файла и его синтаксис (`syntax: 'scss'`). Если файла нет — бросает `Error: Stylesheet not found: <путь>`.
+
+## Правила резолва
+
+| Приоритет | Вариант            | Пример                                  |
+| --------- | ------------------ | --------------------------------------- |
+| 1         | Точное совпадение  | `@use 'variables'` → `variables` (файл) |
+| 2         | Файл с расширением | `@use 'variables'` → `variables.scss`   |
+| 3         | Каталог с `_index` | `@use './lib'` → `./lib/_index.scss`    |
+| 4         | Каталог с `index`  | `@use './lib'` → `./lib/index.scss`     |
+
+Для каталогов берутся `_index` и `index` как с `.scss`, так и с `.css`. Порядок проверок соответствует порядку перебора Sass, поэтому первая найденная запись — приоритетная.
+
+## Виды импортов
+
+- `pkg:@scope/pkg/path/to/file` → `require.resolve` + резолв кандидата.
+- `file:///abs/path` → кандидат по файловому пути.
+- относительные (`../../variables`) → склейка с каталогом содержащего файла (берётся из `ctx.containingUrl`), затем резолв кандидата.
+- абсолютные (`/...`) и незнакомые схемы (`http:`, `data:`) → отдаёт `null`, резолв остаётся на Sass.
+
+## Лицензия
+
+MIT

packages/sass-importer/index.js

@@ -0,0 +1,150 @@
+import { existsSync, readFileSync, statSync } from 'node:fs';
+import path from 'node:path';
+
+const isFile = (filePath) => existsSync(filePath) && statSync(filePath).isFile();
+const toFileUrl = (filePath) => new URL(`file://${encodeURI(path.normalize(filePath))}`);
+const EXTENSIONS = ['.scss', '.css'];
+
+/*
+    resolveCandidate(lookupPath) — по пути импорта находит существующий SCSS-файл
+    и возвращает его file:// URL.
+
+    Мы сами эмулируем правила резолва Sass, потому что (см. комментарий над importer) взяли резолв на себя,
+    а не отдали его Sass. Sass при обычной работе умеет подбирать: файл без расширения, файл с расширением,
+    _index.scss внутри папки, index.scss внутри папки. Всё это воспроизводим здесь. Порядок проверок
+    соответствует порядку, в котором Sass перебирает варианты, поэтому первая найденная запись — приоритетная.
+
+    Возвращает null, если ни один вариант не существует: для импортёра это сигнал «я не знаю такой файл»,
+    и Sass переберёт другие импортеры/loadPaths.
+*/
+const resolveCandidate = (lookupPath) => {
+    /* 1. Точное совпадение: переданный путь уже указывает на существующий файл. */
+    if (isFile(lookupPath)) {
+        return toFileUrl(lookupPath);
+    }
+    /* 2. «Файл с расширением»: path + .scss/.css. Покрывает @use 'variables' -> variables.scss. */
+    for (const ext of EXTENSIONS) {
+        if (isFile(lookupPath + ext)) {
+            return toFileUrl(lookupPath + ext);
+        }
+    }
+    /* 3. «Директория с partial»: <lookupPath>/_index.scss и т.п. — то, что Sass подставляет при импорте папки/фичи. */
+    for (const ext of EXTENSIONS) {
+        const candidate = path.join(lookupPath, `_index${ext}`);
+        if (isFile(candidate)) {
+            return toFileUrl(candidate);
+        }
+    }
+    /* 4. «Директория с index»: <lookupPath>/index.scss — обычный fallback, если _index нет. */
+    for (const ext of EXTENSIONS) {
+        const candidate = path.join(lookupPath, `index${ext}`);
+        if (isFile(candidate)) {
+            return toFileUrl(candidate);
+        }
+    }
+    return null; // oxlint-disable-line unicorn/no-null
+};
+
+/*
+    Импортер для sass-embedded.
+
+    Проект собирается через Yarn PnP, поэтому пакеты лежат не в node_modules,
+    а внутри .zip по виртуальным путям:
+      .yarn/__virtual__/@example-example-virtual-.../cache/@example-example-....zip/node_modules/@example/example/...
+    .zip-путь может открыть только код, читающий файлы через node:fs (в нём есть PnP-хуки).
+    А sass-embedded читает файлы своим отдельным кодом, node:fs не использует, поэтому мы
+    резолв импортов берём на себя через readFileSync. `require` передаётся извне: в PnP это
+    createRequire(import.meta.url) с PnP-хуками, в node-modules — обычный require.
+
+    Сюда попадают импорты трёх видов: пути с префиксом pkg:, file:// и относительные
+    (в том числе вложенные @use '../../variables' внутри пакета). Все они проходят через
+    resolveCandidate, а содержимое читается через readFileSync, поэтому и пакеты, и их внутренние
+    относительные импорты открываются одинаково надёжно.
+*/
+export const createImporter = (require) => ({
+    /*
+        canonicalize(url, ctx) — Sass спрашивает «во что превратить этот импорт, чтобы я мог его прочитать?».
+        На вход приходит строка url (в оригинальном виде из @use/@forward) и контекст ctx с containingUrl —
+        файлом, из которого сделан импорт. Возвращаем канонический file:// URL или null («не знаю»).
+    */
+    canonicalize(url, ctx) {
+        /*
+            Ветка 1: импорт пакета вида «pkg:@scope/pkg/path/to/file».
+            url.slice(4) убирает префикс «pkg:», остаётся «@example/example/...». require.resolve превращает
+            это имя в абсолютный путь внутри пакета (благодаря PnP-хукам). Затем resolveCandidate
+            подбирает реальный SCSS-файл и возвращает file:// URL.
+        */
+        if (url.startsWith('pkg:')) {
+            try {
+                return resolveCandidate(require.resolve(url.slice(4)));
+            } catch {
+                /*
+                    Пакет не резолвится (нет в зависимостях) — отдаём null, пусть Sass пробует дальше.
+                */
+                return null; // oxlint-disable-line unicorn/no-null
+            }
+        }
+
+        /*
+            Ветка 2: Sass уже сам превратил что-то в file:// и спрашивает нас «подтверди/уточни путь».
+            Извлекаем файловый путь через .pathname (декодируем процент-эскейпы) и подбираем кандидата.
+        */
+        if (url.startsWith('file://')) {
+            return resolveCandidate(decodeURI(new URL(url).pathname));
+        }
+
+        /*
+            Ветка 3: абсолютный путь («/...») или URI с незнакомой схемой («http:», «data:» и т.п.).
+            Здесь мы в резолве не участвуем — отдаём null и позволяем Sass/loadPaths обработать самим.
+        */
+        if (url.includes(':') || url.startsWith('/')) {
+            return null; // oxlint-disable-line unicorn/no-null
+        }
+
+        /*
+            Ветка 4: относительный импорт («../../variables», «../link»).
+            Это именно тот случай, который ломает сборку в PnP: путь ведёт внутрь .zip.
+            Чтобы его открыть, нужен базовый файл, из которого сделан импорт, — его даёт ctx.containingUrl.
+            Склеиваем относительный путь с каталогом содержащего файла через path.resolve и резолвим через
+            resolveCandidate.
+        */
+        const containingUrl = ctx?.containingUrl;
+        if (containingUrl) {
+            const abs = path.resolve(path.dirname(decodeURI(containingUrl.pathname)), url);
+            return resolveCandidate(abs);
+        }
+
+        /*
+            Если контекста нет (чего в норме не бывает) — «не знаю», идём к следующему импортеру/loadPaths.
+        */
+        return null; // oxlint-disable-line unicorn/no-null
+    },
+
+    /*
+        load(canonicalUrl) — Sass просит содержимое файла по каноническому URL, который мы вернули в canonicalize.
+        Возвращаем текст файла и его синтаксис, чтобы Sass не гадал.
+    */
+    load(canonicalUrl) {
+        /*
+            file:// URL извлекаем как путь: .pathname уже декодирован, но для надёжности декодируем явно.
+        */
+        const filePath = decodeURI(canonicalUrl.pathname);
+        if (!isFile(filePath)) {
+            /*
+                Файла нет или это каталог — кидаем понятную ошибку с путём, чтобы в логе было видно, чего не хватает.
+            */
+            throw new Error(`Stylesheet not found: ${filePath}`);
+        }
+        return {
+            /*
+                readFileSync — синхронно читаем. Для PnP важен именно node:fs (см. док над importer):
+                только читаемый через него файл открывается внутри .zip.
+            */
+            contents: readFileSync(filePath, 'utf8'),
+            /*
+                Говорим Sass, что это SCSS-файл (иначе он пытается угадать по расширению, что для .zip-пути ненадёжно).
+            */
+            syntax: 'scss',
+        };
+    },
+});

packages/sass-importer/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@advdominion/lightningcss-loader",
+  "name": "@advdominion/sass-importer",
-  "version": "1.0.2",
+  "version": "1.0.1",
   "type": "module",
   "main": "index.js",
   "repository": {

packages/stylelint-config/README.md

@@ -2,7 +2,7 @@
 
 Включает в себя:
 
-- [stylelint-config-standard-scss](https://github.com/stylelint-scss/stylelint-config-standard-scss)
+- [stylelint-config-recommended-scss](https://github.com/stylelint-scss/stylelint-config-recommended-scss)
 - [stylelint-order](https://github.com/hudochenkov/stylelint-order)
 - Проверку кода тега `<style>` в файлах `.vue`
 
@@ -10,7 +10,7 @@
 
 ### Требования
 
-- [Stylelint](https://stylelint.io/) ^10.0.0
+- [Stylelint](https://stylelint.io/)
 
 ### Подключание
 

packages/stylelint-config/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable unicorn/no-null */
 
 export default {
-    extends: ['stylelint-config-standard-scss'],
+    extends: ['stylelint-config-recommended-scss'],
     overrides: [
         {
             files: ['**/*.vue'],
@@ -13,43 +13,35 @@ export default {
         'block-no-empty': null,
         'no-invalid-double-slash-comments': null,
         'no-invalid-position-declaration': [true, { ignoreAtRules: ['media'] }],
+        'length-zero-no-unit': true,
         'property-disallowed-list': [
-            'animation',
+            ['animation', 'background', 'border', 'flex', 'font', 'grid', 'margin', 'padding', 'transition'],
-            'background',
+            {
-            'border',
+                severity: 'warning',
-            'flex',
+            },
-            'font',
-            'grid',
-            'margin',
-            'padding',
-            'transition',
         ],
-        'color-hex-length': 'long',
+        'color-hex-length': ['long', { severity: 'warning' }],
-        'font-weight-notation': 'named-where-possible',
+        'font-weight-notation': ['named-where-possible', { severity: 'warning' }],
-        'container-name-pattern': null,
-        'custom-media-pattern': null,
-        'custom-property-pattern': null,
-        'keyframes-name-pattern': null,
-        'layer-name-pattern': null,
-        'selector-class-pattern': null,
-        'selector-id-pattern': null,
-        'declaration-block-no-redundant-longhand-properties': null,
-        'scss/double-slash-comment-empty-line-before': null,
         'order/order': [
+            [
+                {
+                    type: 'at-rule',
+                    name: 'use',
+                },
+                'dollar-variables',
+                'custom-properties',
+                'declarations',
+                {
+                    type: 'at-rule',
+                    name: 'include',
+                },
+                'at-rules',
+                'rules',
+            ],
             {
-                type: 'at-rule',
+                severity: 'warning',
-                name: 'use',
             },
-            'dollar-variables',
-            'custom-properties',
-            'declarations',
-            {
-                type: 'at-rule',
-                name: 'include',
-            },
-            'at-rules',
-            'rules',
         ],
-        'order/properties-alphabetical-order': true,
+        'order/properties-alphabetical-order': [true, { severity: 'warning' }],
     },
 };

packages/stylelint-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@advdominion/stylelint-config",
-  "version": "1.1.0",
+  "version": "2.1.0",
   "type": "module",
   "main": "index.js",
   "repository": {
@@ -12,10 +12,10 @@
     "access": "public"
   },
   "dependencies": {
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.26",
-    "postcss-html": "^1.8.1",
+    "postcss-html": "^2.0.0",
-    "stylelint-config-standard-scss": "^17.0.0",
+    "stylelint-config-recommended-scss": "^17.0.1",
-    "stylelint-order": "^7.0.1"
+    "stylelint-order": "^8.1.1"
   },
   "peerDependencies": {
     "stylelint": "^17.0.0"

packages/tooltip/CHANGELOG.md

@@ -0,0 +1,58 @@
+## v7.0.1
+
+- Исправление работы анимации
+
+## v7.0.0
+
+- Изменено значение по умолчанию для параметра `trigger`
+- Рефакторинг кода и устранение ошибок
+
+## v6.0.0
+
+- Корректная работа сообытий mouseenter/mouseleave на тач-устройствах
+- Предовтращаем лишние показы всплывающей подсказки
+
+## v5.0.0
+
+- Регистрируем сообытия mouseenter/mouseleave на тач-устройствах
+
+## v4.1.1
+
+- Исправление зависаний (в некоторых случаях) всплывающих подсказок
+
+## v4.1.0
+
+- Отключаем события mouseenter/mouseleave для toch-устройств
+
+## v4.0.0
+
+- Переработана логика инициализации и обновления тултипа
+- Добавлены новые триггеры: `focus`, `blur`
+- Опция `hideOnClick` теперь поддерживает значения: `true`, `'all'`, `'toggle'`
+- Исправлены ошибки с позиционированием, анимацией и стилями
+- Оптимизировано управление событиями и очистка ресурсов
+
+## v3.0.1
+
+- Исправлена работа событий
+
+## v3.0.0
+
+- Исправлено название опции с `virtialReference` на `virtualReference`
+
+## v2.1.0
+
+- Для опции `appendTo` добавлена возможность указать значение `parent`
+
+## v2.0.0
+
+- К `_tooltip.$tooltip` добавлено свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`
+- Для функций `show/hide` добавлен параметр `immediately` для мнгновенного открытия/закрытия всплывающей подсказки (`_tooltip.hide({ immediately: true })`)
+- Добавлена опция `shiftPadding` для добавления отступов от краёв области видимости по осям x/y
+- Добавлена опция `animation` для кастомизации анимации при открытии/закрытии всплывающей подсказки (для этого всё внутри `.tooltip` было обёрнуто в `.tooltip__root` и анимация применяется именно к этому блоку)
+- Опция `_tooltip._options` переименована в `_tooltip.options`
+- Оптимизция кода, исправление ошибок
+- Доработки по README.md
+- Доработки по .npmignore
+
+## v1.0.0

packages/tooltip/README.md

@@ -0,0 +1,177 @@
+# tooltip
+
+## Требования
+
+- [Floating UI](https://floating-ui.com)
+
+## Подключение и настройка
+
+### HTML
+
+```html
+<button type="button">Кнопка</button>
+```
+
+### JS
+
+#### Минимальные настройки
+
+```js
+import { createTooltip } from '@advdominion/tooltip';
+
+createTooltip(document.querySelector('button'), 'Подсказка');
+```
+
+#### Все настройки со значениями по умолчанию
+
+```js
+import { createTooltip } from '@advdominion/tooltip';
+
+createTooltip(document.querySelector('button'), 'Подсказка', {
+    animation: [
+        [{ opacity: 0 }, { opacity: 1 }],
+        [{ opacity: 1 }, { opacity: 0 }],
+    ],
+    appendTo: document.body,
+    arrow: true,
+    delay: [0, 0],
+    duration: [0, 0],
+    easing: ['linear', 'linear'],
+    hideOnClick: true,
+    interactive: true,
+    offset: [0, 8],
+    placement: 'top',
+    shiftPadding: [8, 0],
+    theme: 'light',
+    trigger: 'mouseenter click',
+    virtualReference: undefined,
+    zIndex: '',
+    // Callback-функции, по умолчанию не заданы
+    onCreate(instance) {},
+    onMount(instance) {},
+    onShow(instance) {},
+    onShown(instance) {},
+    onHide(instance) {},
+    onHidden(instance) {},
+});
+```
+
+#### hideOnClick
+
+- `true` (по умолчанию) — всплывающая подсказка скрывается при клике по любому элементу на странице (**кроме** самой всплывающей подсказки).
+- `'all'` — всплывающая подсказка скрывается при клике по любому элементу на странице (**включая** саму всплывающую подсказку).
+- `'toggle'` — всплывающая подсказка скрывается только при клике по элементу, который её вызывает.
+
+##### virtualReference
+
+Настройка используется для кастомного позиционирования, ожидает объект с методом `getBoundingClientRect`.
+
+Например, позиционирование всплывающей подсказки относительно виртуального элемента размером 100&times;50, который располагается в левой верхней точке экрана:
+
+```js
+createTooltip(document.querySelector('button'), 'Подсказка', {
+    virtualReference: {
+        getBoundingClientRect() {
+            return {
+                x: 0,
+                y: 0,
+                top: 0,
+                left: 0,
+                bottom: 50,
+                right: 100,
+                width: 100,
+                height: 50,
+            };
+        },
+    },
+});
+```
+
+#### Свойства
+
+#### $tooltip
+
+DOM-элемент всплывающей подсказки (имеет свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`)
+
+#### options
+
+Текущие настройки
+
+#### isVisible
+
+Видимость всплывающей подсказки - `true`/`false`
+
+#### Методы
+
+##### show
+
+```js
+document.querySelector('button')._tooltip.show();
+```
+
+##### hide
+
+```js
+document.querySelector('button')._tooltip.hide();
+```
+
+##### setContent
+
+```js
+document.querySelector('button')._tooltip.setContent('Новая подсказка');
+```
+
+##### updateOptions
+
+```js
+document.querySelector('button')._tooltip.updateOptions({ placement: 'bottom' });
+```
+
+Настройки так же можно переназначать, используя data-атрибуты:
+
+```html
+<button type="button" data-tooltip-placement="bottom">Кнопка</button>
+```
+
+##### destroy
+
+```js
+document.querySelector('button')._tooltip.destroy();
+```
+
+### Стили
+
+```scss
+$b: '.tooltip';
+
+#{$b} {
+    left: 0;
+    max-width: calc(100vw - 32px);
+    position: absolute;
+    top: 0;
+    width: max-content;
+    z-index: 200;
+
+    @media (min-width: 900px) {
+        max-width: 300px;
+    }
+
+    &__root {
+    }
+
+    &__arrow {
+        #{$b}_theme_light & {
+            background-color: white;
+            height: 8px;
+            width: 8px;
+        }
+    }
+
+    &__container {
+        #{$b}_theme_light & {
+            background-color: white;
+            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
+        }
+    }
+}
+```

packages/tooltip/index.js

@@ -0,0 +1,490 @@
+const roundByDPR = (value) => {
+        const dpr = window.devicePixelRatio || 1;
+        return Math.round(value * dpr) / dpr;
+    },
+    attributeToOption = (attribute) => {
+        attribute = attribute.replace('tooltip', '');
+        return attribute.charAt(0).toLowerCase() + attribute.slice(1);
+    };
+
+let visibilityListenerRegistered = false;
+const handleVisibilityChange = () => {
+        if (document.hidden) {
+            // Скрываем все активные всплывающие подсказки
+            for (const $tooltip of document.querySelectorAll('.tooltip')) {
+                const ref = $tooltip._reference;
+                if (ref?._tooltip) {
+                    // Очищаем таймеры появления при скрытии страницы
+                    clearTimeout(ref._tooltip._showTimeout);
+                    if (ref._tooltip.isVisible) {
+                        ref._tooltip.hide({ immediately: true });
+                    }
+                }
+            }
+        }
+    },
+    templates = {
+        arrow: () => `
+        <div class="tooltip__arrow" style="pointer-events: none; position: absolute; transform: rotate(45deg);"></div>
+    `,
+        interactiveHelper: () => `
+        <div class="tooltip__interactive-helper" style="position: absolute; z-index: -1;"></div>
+    `,
+    };
+
+export const createTooltip = ($el, content, options) => {
+    options = {
+        animation: [
+            [{ opacity: 0 }, { opacity: 1 }],
+            [{ opacity: 1 }, { opacity: 0 }],
+        ],
+        appendTo: document.body,
+        arrow: true,
+        delay: [0, 0],
+        duration: [0, 0],
+        easing: ['linear', 'linear'],
+        hideOnClick: true, // Возможные значения: true, 'all', 'toggle'
+        interactive: true,
+        offset: [0, 8],
+        placement: 'top',
+        shiftPadding: [8, 0],
+        theme: 'light',
+        trigger: 'mouseenter click',
+        virtualReference: undefined,
+        zIndex: '',
+        ...options,
+    };
+
+    for (const [key, value] of Object.entries($el.dataset)) {
+        if (key.startsWith('tooltip')) {
+            let parsedValue = value;
+            try {
+                parsedValue = JSON.parse(value);
+            } catch {} // eslint-disable-line no-empty
+            options[attributeToOption(key)] = parsedValue;
+        }
+    }
+
+    let rafId;
+    const listeners = [];
+
+    $el._tooltip = {
+        options,
+        isVisible: false,
+        $tooltip: undefined,
+        $container: undefined,
+        $arrow: undefined,
+        $interactive: undefined,
+        _showTimeout: undefined,
+        _hideTimeout: undefined,
+        _currentAnimation: undefined,
+        autoUpdateCleanup: () => {},
+        updatePosition: async () => {},
+
+        setContent(updatedContent) {
+            if (updatedContent !== undefined) {
+                content = updatedContent;
+            }
+            if ($el._tooltip.$container) {
+                if (content instanceof HTMLElement) {
+                    $el._tooltip.$container.innerHTML = '';
+                    $el._tooltip.$container.append(content);
+                } else {
+                    $el._tooltip.$container.innerHTML = content;
+                }
+            }
+        },
+
+        async updateOptions(updatedOptions = {}) {
+            for (const [name, value] of Object.entries(updatedOptions)) {
+                options[name] = value;
+            }
+
+            if (updatedOptions.arrow !== undefined && $el._tooltip.$tooltip) {
+                if (options.arrow) {
+                    if (!$el._tooltip.$arrow) {
+                        $el._tooltip.$tooltip
+                            .querySelector('.tooltip__root')
+                            .insertAdjacentHTML('afterbegin', templates.arrow());
+                        $el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
+                    }
+                } else {
+                    $el._tooltip.$arrow?.remove();
+                    $el._tooltip.$arrow = undefined;
+                }
+            }
+
+            if (updatedOptions.interactive !== undefined) {
+                for (const { el, event, listener } of listeners) {
+                    el.removeEventListener(event, listener);
+                }
+                listeners.length = 0;
+                registerListeners();
+                if ($el._tooltip.$tooltip) {
+                    if (options.interactive) {
+                        if (!$el._tooltip.$interactive) {
+                            $el._tooltip.$tooltip
+                                .querySelector('.tooltip__root')
+                                .insertAdjacentHTML('afterbegin', templates.interactiveHelper());
+                            $el._tooltip.$interactive =
+                                $el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');
+                        }
+                    } else {
+                        $el._tooltip.$interactive?.remove();
+                        $el._tooltip.$interactive = undefined;
+                    }
+                }
+            }
+
+            if (updatedOptions.theme !== undefined && $el._tooltip.$tooltip) {
+                const classIndex = [...$el._tooltip.$tooltip.classList].findIndex((className) =>
+                    className.startsWith('tooltip_theme_'),
+                );
+                if (classIndex === -1) {
+                    $el._tooltip.$tooltip.classList.add(`tooltip_theme_${options.theme}`);
+                } else {
+                    $el._tooltip.$tooltip.classList.replace(
+                        $el._tooltip.$tooltip.classList[classIndex],
+                        `tooltip_theme_${options.theme}`,
+                    );
+                }
+            }
+
+            if (updatedOptions.zIndex !== undefined && $el._tooltip.$tooltip) {
+                Object.assign($el._tooltip.$tooltip.style, { zIndex: options.zIndex });
+            }
+
+            if ($el._tooltip.$tooltip) {
+                await $el._tooltip.updatePosition();
+            }
+        },
+
+        destroy() {
+            if (!$el._tooltip) {
+                return;
+            }
+
+            clearTimeout($el._tooltip._showTimeout);
+            clearTimeout($el._tooltip._hideTimeout);
+            $el._tooltip._currentAnimation?.cancel();
+            cancelAnimationFrame(rafId);
+
+            $el._tooltip.$tooltip?.remove();
+
+            // Вызываем autoUpdateCleanup только если всплывающая подсказка была видна (иначе вызывать её не имеет смысла)
+            if ($el._tooltip.isVisible) {
+                $el._tooltip.autoUpdateCleanup();
+            }
+
+            for (const { el, event, listener } of listeners) {
+                el.removeEventListener(event, listener);
+            }
+            listeners.length = 0;
+
+            document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
+
+            delete $el._tooltip;
+        },
+    };
+
+    if (options.onCreate) {
+        options.onCreate($el._tooltip);
+    }
+
+    $el._tooltip.show = async ({ immediately } = {}) => {
+        clearTimeout($el._tooltip._hideTimeout);
+
+        if (!$el._tooltip.$tooltip) {
+            const { computePosition, offset, flip, shift, arrow } = await import('@floating-ui/dom');
+
+            $el._tooltip.$tooltip = document.createElement('div');
+            $el._tooltip.$tooltip._reference = $el;
+            $el._tooltip.$tooltip.classList.add('tooltip', `tooltip_theme_${options.theme}`);
+            Object.assign($el._tooltip.$tooltip.style, { zIndex: options.zIndex });
+
+            $el._tooltip.$tooltip.innerHTML = `
+                <div class="tooltip__root">
+                    ${options.interactive ? templates.interactiveHelper() : ''}
+                    ${options.arrow ? templates.arrow() : ''}
+                    <div class="tooltip__container"></div>
+                </div>
+            `;
+
+            $el._tooltip.$container = $el._tooltip.$tooltip.querySelector('.tooltip__container');
+            $el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
+            $el._tooltip.$interactive = $el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');
+
+            $el._tooltip.setContent();
+
+            $el._tooltip.updatePosition = () => {
+                cancelAnimationFrame(rafId);
+                rafId = requestAnimationFrame(async () => {
+                    const { x, y, placement, middlewareData } = await computePosition(
+                        options.virtualReference ?? $el,
+                        $el._tooltip.$tooltip,
+                        {
+                            placement: options.placement,
+                            middleware: [
+                                offset({ mainAxis: options.offset[1], crossAxis: options.offset[0] }),
+                                flip(),
+                                shift({
+                                    padding: {
+                                        top: options.shiftPadding[1],
+                                        right: options.shiftPadding[0],
+                                        bottom: options.shiftPadding[1],
+                                        left: options.shiftPadding[0],
+                                    },
+                                }),
+                                arrow({ element: $el._tooltip.$arrow }),
+                            ],
+                        },
+                    );
+
+                    Object.assign($el._tooltip.$tooltip.style, {
+                        transform: `translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`,
+                    });
+
+                    const side = placement.split('-')[0],
+                        staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[side];
+
+                    $el._tooltip.$tooltip.classList.remove(
+                        'tooltip_side_top',
+                        'tooltip_side_bottom',
+                        'tooltip_side_left',
+                        'tooltip_side_right',
+                    );
+                    $el._tooltip.$tooltip.classList.add(`tooltip_side_${side}`);
+
+                    if ($el._tooltip.$interactive) {
+                        Object.assign($el._tooltip.$interactive.style, {
+                            width: side === 'left' || side === 'right' ? `${options.offset[1]}px` : '100%',
+                            height: side === 'top' || side === 'bottom' ? `${options.offset[1]}px` : '100%',
+                            [staticSide]: `-${options.offset[1]}px`,
+                        });
+                    }
+
+                    if ($el._tooltip.$arrow && middlewareData.arrow) {
+                        const { x, y } = middlewareData.arrow;
+                        Object.assign($el._tooltip.$arrow.style, {
+                            left: x === undefined ? '' : `${x}px`,
+                            top: y === undefined ? '' : `${y}px`,
+                            [staticSide]: `-${$el._tooltip.$arrow.offsetWidth / 2}px`,
+                        });
+                    }
+                });
+            };
+
+            if (options.onMount) {
+                options.onMount($el._tooltip);
+            }
+        }
+
+        const { autoUpdate } = await import('@floating-ui/dom');
+
+        $el._tooltip._showTimeout = setTimeout(
+            async () => {
+                const isMouseEnterTrigger = options.trigger.includes('mouseenter'),
+                    isHovering = $el.matches(':hover');
+
+                // Проверяем $el._tooltip на сущестование и актуальность показа всплывающей подсказки
+                if (
+                    !$el._tooltip ||
+                    $el._tooltip.isVisible ||
+                    (isMouseEnterTrigger && !isHovering) ||
+                    document.hidden
+                ) {
+                    return;
+                }
+
+                (options.appendTo === 'parent' ? $el.parentElement : options.appendTo).append($el._tooltip.$tooltip);
+                $el._tooltip.isVisible = true;
+                $el._tooltip.autoUpdateCleanup = autoUpdate($el, $el._tooltip.$tooltip, $el._tooltip.updatePosition);
+
+                if (options.hideOnClick && (options.trigger.includes('click') || options.trigger.includes('manual'))) {
+                    document.body.addEventListener('click', $el._tooltip.hideOnClickListener);
+                    listeners.push({
+                        el: document.body,
+                        event: 'click',
+                        listener: $el._tooltip.hideOnClickListener,
+                    });
+                }
+
+                if (options.onShow) {
+                    options.onShow($el._tooltip);
+                }
+
+                try {
+                    const animation = $el._tooltip.$tooltip
+                        .querySelector('.tooltip__root')
+                        .animate(options.animation[0], {
+                            duration: immediately ? 0 : options.duration[0],
+                            easing: options.easing[0],
+                        });
+                    $el._tooltip._currentAnimation = animation;
+                    await animation.finished;
+                } catch {} // eslint-disable-line no-empty
+
+                if (options.onShown) {
+                    options.onShown($el._tooltip);
+                }
+            },
+            immediately ? 0 : options.delay[0],
+        );
+    };
+
+    $el._tooltip.hide = ({ immediately } = {}) => {
+        clearTimeout($el._tooltip._showTimeout);
+        $el._tooltip._hideTimeout = setTimeout(
+            async () => {
+                // Проверяем $el._tooltip на сущестование
+                if (!$el._tooltip || !$el._tooltip.isVisible) {
+                    return;
+                }
+
+                if (options.onHide) {
+                    options.onHide($el._tooltip);
+                }
+
+                document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
+
+                try {
+                    const animation = $el._tooltip.$tooltip
+                        .querySelector('.tooltip__root')
+                        .animate(options.animation[1], {
+                            duration: immediately ? 0 : options.duration[1],
+                            easing: options.easing[1],
+                        });
+                    $el._tooltip._currentAnimation = animation;
+                    await animation.finished;
+                } catch {} // eslint-disable-line no-empty
+
+                // Ещё одна проверка на сущестование $el._tooltip после await
+                if (!$el._tooltip) {
+                    return;
+                }
+
+                if ($el._tooltip.$tooltip) {
+                    $el._tooltip.$tooltip.remove();
+                }
+                $el._tooltip.isVisible = false;
+                $el._tooltip.autoUpdateCleanup();
+
+                if (options.onHidden) {
+                    options.onHidden($el._tooltip);
+                }
+            },
+            immediately ? 0 : options.delay[1],
+        );
+    };
+
+    $el._tooltip.hideOnClickListener = ({ target }) => {
+        if (!$el._tooltip.isVisible) {
+            return;
+        }
+
+        if (options.hideOnClick === 'all') {
+            $el._tooltip.hide();
+        } else if (options.hideOnClick === 'toggle') {
+            if ($el.contains(target)) {
+                $el._tooltip.hide();
+            }
+        } else {
+            // options.hideOnClick === true
+            if ($el.contains(target) || !$el._tooltip.$tooltip.contains(target)) {
+                $el._tooltip.hide();
+            }
+        }
+    };
+
+    $el._tooltip.clickListener = () => {
+        if (document.hidden) {
+            return;
+        }
+        if (!$el._tooltip.isVisible) {
+            $el._tooltip.show();
+        }
+    };
+
+    $el._tooltip.mouseEnterListener = (event) => {
+        if (event.pointerType !== 'mouse' || document.hidden) {
+            return;
+        }
+        $el._tooltip.show();
+    };
+
+    $el._tooltip.mouseLeaveListener = (event) => {
+        if (event.pointerType !== 'mouse') {
+            return;
+        }
+
+        if (options.interactive && event.relatedTarget && $el._tooltip.$tooltip?.contains(event.relatedTarget)) {
+            $el._tooltip.$tooltip.addEventListener(
+                'pointerleave',
+                (event) => {
+                    if (event.pointerType !== 'mouse') {
+                        return;
+                    }
+                    if (!event.relatedTarget || !$el.contains(event.relatedTarget)) {
+                        $el._tooltip.hide();
+                    }
+                },
+                { once: true },
+            );
+        } else {
+            $el._tooltip.hide();
+        }
+    };
+
+    $el._tooltip.focusListener = () => {
+        if (document.hidden) {
+            return;
+        }
+        $el._tooltip.show();
+    };
+
+    $el._tooltip.blurListener = () => {
+        $el._tooltip.hide();
+    };
+
+    const registerListeners = () => {
+        for (const trigger of options.trigger.split(' ')) {
+            switch (trigger) {
+                case 'mouseenter': {
+                    $el.addEventListener('pointerenter', $el._tooltip.mouseEnterListener);
+                    listeners.push({ el: $el, event: 'pointerenter', listener: $el._tooltip.mouseEnterListener });
+
+                    $el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
+                    listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
+                    break;
+                }
+                case 'click': {
+                    $el.addEventListener('click', $el._tooltip.clickListener);
+                    listeners.push({ el: $el, event: 'click', listener: $el._tooltip.clickListener });
+
+                    if (!options.interactive) {
+                        $el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
+                        listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
+                    }
+                    break;
+                }
+                case 'focus': {
+                    $el.addEventListener('focus', $el._tooltip.focusListener);
+                    listeners.push({ el: $el, event: 'focus', listener: $el._tooltip.focusListener });
+                    break;
+                }
+                case 'blur': {
+                    $el.addEventListener('blur', $el._tooltip.blurListener);
+                    listeners.push({ el: $el, event: 'blur', listener: $el._tooltip.blurListener });
+                    break;
+                }
+            }
+        }
+    };
+
+    registerListeners();
+
+    if (!visibilityListenerRegistered) {
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        visibilityListenerRegistered = true;
+    }
+};

packages/tooltip/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@advdominion/babel-plugin-nunjucks",
+  "name": "@advdominion/tooltip",
-  "version": "4.0.0",
+  "version": "7.0.2",
   "type": "module",
   "main": "index.js",
   "repository": {
@@ -12,7 +12,6 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@babel/core": "^8.0.0",
+    "@floating-ui/dom": "^1.0.0"
-    "nunjucks": "^3.0.0"
   }
 }

yarn.lock

@@ -5,12 +5,9 @@ __metadata:
   version: 10
   cacheKey: 10c0
 
-"@advdominion/babel-plugin-nunjucks@workspace:packages/babel-plugin-nunjucks":
+"@advdominion/browserslist-to-targets@workspace:packages/browserslist-to-targets":
   version: 0.0.0-use.local
-  resolution: "@advdominion/babel-plugin-nunjucks@workspace:packages/babel-plugin-nunjucks"
+  resolution: "@advdominion/browserslist-to-targets@workspace:packages/browserslist-to-targets"
-  peerDependencies:
-    "@babel/core": ^8.0.0
-    nunjucks: ^3.0.0
   languageName: unknown
   linkType: soft
 
@@ -36,18 +33,18 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@advdominion/lightningcss-loader@workspace:packages/lightningcss-loader":
-  version: 0.0.0-use.local
-  resolution: "@advdominion/lightningcss-loader@workspace:packages/lightningcss-loader"
-  languageName: unknown
-  linkType: soft
-
 "@advdominion/pluralize@workspace:packages/pluralize":
   version: 0.0.0-use.local
   resolution: "@advdominion/pluralize@workspace:packages/pluralize"
   languageName: unknown
   linkType: soft
 
+"@advdominion/sass-importer@workspace:packages/sass-importer":
+  version: 0.0.0-use.local
+  resolution: "@advdominion/sass-importer@workspace:packages/sass-importer"
+  languageName: unknown
+  linkType: soft
+
 "@advdominion/scroll-to@workspace:packages/scroll-to":
   version: 0.0.0-use.local
   resolution: "@advdominion/scroll-to@workspace:packages/scroll-to"
@@ -58,15 +55,23 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@advdominion/stylelint-config@workspace:packages/stylelint-config"
   dependencies:
-    postcss: "npm:^8.5.6"
+    postcss: "npm:^8.5.26"
-    postcss-html: "npm:^1.8.1"
+    postcss-html: "npm:^2.0.0"
-    stylelint-config-standard-scss: "npm:^17.0.0"
+    stylelint-config-recommended-scss: "npm:^17.0.1"
-    stylelint-order: "npm:^7.0.1"
+    stylelint-order: "npm:^8.1.1"
   peerDependencies:
     stylelint: ^17.0.0
   languageName: unknown
   linkType: soft
 
+"@advdominion/tooltip@workspace:packages/tooltip":
+  version: 0.0.0-use.local
+  resolution: "@advdominion/tooltip@workspace:packages/tooltip"
+  peerDependencies:
+    "@floating-ui/dom": ^1.0.0
+  languageName: unknown
+  linkType: soft
+
 "@babel/code-frame@npm:^7.0.0":
   version: 7.27.1
   resolution: "@babel/code-frame@npm:7.27.1"
@@ -143,6 +148,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@csstools/css-calc@npm:^3.2.1":
+  version: 3.3.0
+  resolution: "@csstools/css-calc@npm:3.3.0"
+  peerDependencies:
+    "@csstools/css-parser-algorithms": ^4.0.0
+    "@csstools/css-tokenizer": ^4.0.0
+  checksum: 10c0/83157b9fbf3599dfff2338ac40e7eec0884d1d729b9ca4a949af3c2da55d14368b2ac70ff4f659fc1ec6801a48c9225f2211a8be987678aadf6795dbebe5a2da
+  languageName: node
+  linkType: hard
+
 "@csstools/css-parser-algorithms@npm:^4.0.0":
   version: 4.0.0
   resolution: "@csstools/css-parser-algorithms@npm:4.0.0"
@@ -159,6 +174,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@csstools/css-syntax-patches-for-csstree@npm:^1.1.4":
+  version: 1.1.12
+  resolution: "@csstools/css-syntax-patches-for-csstree@npm:1.1.12"
+  peerDependencies:
+    css-tree: ^3.2.1
+  peerDependenciesMeta:
+    css-tree:
+      optional: true
+  checksum: 10c0/1ba981c04e3ea104a0009a51324c156760495f52d2e25418550a9c58cfb6b7efd91ca27ff7c3db0925f53bcd290641effa0647f0ab75cac5bf2ed37448c35a80
+  languageName: node
+  linkType: hard
+
 "@csstools/css-tokenizer@npm:^4.0.0":
   version: 4.0.0
   resolution: "@csstools/css-tokenizer@npm:4.0.0"
@@ -2101,7 +2128,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-tree@npm:^3.0.1, css-tree@npm:^3.1.0":
+"css-tree@npm:^3.1.0":
   version: 3.1.0
   resolution: "css-tree@npm:3.1.0"
   dependencies:
@@ -2111,6 +2138,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-tree@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "css-tree@npm:3.2.1"
+  dependencies:
+    mdn-data: "npm:2.27.1"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10c0/1f65e9ccaa56112a4706d6f003dd43d777f0dbcf848e66fd320f823192533581f8dd58daa906cb80622658332d50284d6be13b87a6ab4556cbbfe9ef535bbf7e
+  languageName: node
+  linkType: hard
+
 "cssesc@npm:^3.0.0":
   version: 3.0.0
   resolution: "cssesc@npm:3.0.0"
@@ -2235,7 +2272,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"domutils@npm:^3.0.1":
+"domutils@npm:^3.1.0":
   version: 3.2.2
   resolution: "domutils@npm:3.2.2"
   dependencies:
@@ -2337,7 +2374,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"entities@npm:^4.2.0, entities@npm:^4.4.0":
+"entities@npm:^4.2.0, entities@npm:^4.5.0":
   version: 4.5.0
   resolution: "entities@npm:4.5.0"
   checksum: 10c0/5b039739f7621f5d1ad996715e53d964035f75ad3b9a4d38c6b3804bb226e282ffeae2443624d8fdd9c47d8e926ae9ac009c54671243f0c3294c26af7cc85250
@@ -2945,15 +2982,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"htmlparser2@npm:^8.0.0":
+"htmlparser2@npm:^9.1.0":
-  version: 8.0.2
+  version: 9.1.0
-  resolution: "htmlparser2@npm:8.0.2"
+  resolution: "htmlparser2@npm:9.1.0"
   dependencies:
     domelementtype: "npm:^2.3.0"
     domhandler: "npm:^5.0.3"
-    domutils: "npm:^3.0.1"
+    domutils: "npm:^3.1.0"
-    entities: "npm:^4.4.0"
+    entities: "npm:^4.5.0"
-  checksum: 10c0/609cca85886d0bf2c9a5db8c6926a89f3764596877492e2caa7a25a789af4065bc6ee2cdc81807fe6b1d03a87bf8a373b5a754528a4cc05146b713c20575aab4
+  checksum: 10c0/394f6323efc265bbc791d8c0d96bfe95984e0407565248521ab92e2dc7668e5ceeca7bc6ed18d408b9ee3b25032c5743368a4280d280332d782821d5d467ad8f
   languageName: node
   linkType: hard
 
@@ -3677,10 +3714,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdn-data@npm:^2.25.0":
+"mdn-data@npm:2.27.1":
-  version: 2.27.0
+  version: 2.27.1
-  resolution: "mdn-data@npm:2.27.0"
+  resolution: "mdn-data@npm:2.27.1"
-  checksum: 10c0/f087b40c3b93fd3b586bb605422da01650412d62cff739b47c6259bee4c21f2ccb0337e0f489b5b8f4acde7ae837638f3bf1ad3cf5bca440c49a53ce8c48ed32
+  checksum: 10c0/eb8abf5d22e4d1e090346f5e81b67d23cef14c83940e445da5c44541ad874dc8fb9f6ca236e8258c3a489d9fb5884188a4d7d58773adb9089ac2c0b966796393
   languageName: node
   linkType: hard
 
@@ -3886,6 +3923,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^3.3.17":
+  version: 3.3.18
+  resolution: "nanoid@npm:3.3.18"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: 10c0/b994b4e396730f8be2520923284e2040d61eaee55cc6d4935ef6d38d34bafdc46133eda4d3faea5073bda545aa6079d82b886caeac5c731cf9ac18bcc1301425
+  languageName: node
+  linkType: hard
+
 "negotiator@npm:^1.0.0":
   version: 1.0.0
   resolution: "negotiator@npm:1.0.0"
@@ -4719,15 +4765,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-html@npm:^1.8.1":
+"postcss-html@npm:^2.0.0":
-  version: 1.8.1
+  version: 2.0.0
-  resolution: "postcss-html@npm:1.8.1"
+  resolution: "postcss-html@npm:2.0.0"
   dependencies:
-    htmlparser2: "npm:^8.0.0"
+    htmlparser2: "npm:^9.1.0"
     js-tokens: "npm:^9.0.0"
-    postcss: "npm:^8.5.0"
+    postcss-safe-parser: "npm:^7.0.1"
-    postcss-safe-parser: "npm:^6.0.0"
+  peerDependencies:
-  checksum: 10c0/2db37b710ae4d5cf8493ae982a381c7c1dfed328eb1806c4aa9220b166a0a44a636275beebf072efb41a38017dd35f47216e7cde682c10c8c69e30807d4126c6
+    postcss: ^8.5.0
+  checksum: 10c0/7c11a7711faf56cedcdf288bbc18091b1ea5ad49327689fd049b454cc336950147f620763a2bf0b0cbcc11c1ace540d9a91de965458a5eb789a803a8ebde3b65
   languageName: node
   linkType: hard
 
@@ -4745,15 +4792,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-safe-parser@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "postcss-safe-parser@npm:6.0.0"
-  peerDependencies:
-    postcss: ^8.3.3
-  checksum: 10c0/5b0997b63de6ab4afb4b718a52dd7902e465c21d1f2e516762bcb59047787459b4dc5713132f6a19c9c8c483043b20b8a380a55fb61152ee66cbffcddf3b57f0
-  languageName: node
-  linkType: hard
-
 "postcss-safe-parser@npm:^7.0.1":
   version: 7.0.1
   resolution: "postcss-safe-parser@npm:7.0.1"
@@ -4782,12 +4820,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-sorting@npm:^9.1.0":
+"postcss-sorting@npm:^10.0.0":
-  version: 9.1.0
+  version: 10.0.0
-  resolution: "postcss-sorting@npm:9.1.0"
+  resolution: "postcss-sorting@npm:10.0.0"
   peerDependencies:
     postcss: ^8.4.20
-  checksum: 10c0/1faea84bf00d85929228d297587798fa9c384a02966a28a942777b2de553a8186087cfdcd0aca3dd40e4b2793aee050792d807458db8cf4880867c98c7bf22fd
+  checksum: 10c0/2e53560ccfaefb6ccfaa44cd258735f815de7a06ff6c79e6fb0fe789422f10242266044902c716e2eec9680879d7e0872b4ecd5d89e9bd8670f6d9f6c3ce5adc
   languageName: node
   linkType: hard
 
@@ -4798,7 +4836,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.5.0, postcss@npm:^8.5.6":
+"postcss@npm:^8.5.26, postcss@npm:^8.5.8":
+  version: 8.5.26
+  resolution: "postcss@npm:8.5.26"
+  dependencies:
+    nanoid: "npm:^3.3.17"
+    picocolors: "npm:^1.1.1"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10c0/2bdafc00d96bd57b6649a52e458864a4bf58ee56cfdbe4aea1472b5cccc127e6c1ad653bd0bec50d211e650eb0b9270c80e1e72aff2e2fa40d9e7363234d6e43
+  languageName: node
+  linkType: hard
+
+"postcss@npm:^8.5.6":
   version: 8.5.6
   resolution: "postcss@npm:8.5.6"
   dependencies:
@@ -5346,9 +5395,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stylelint-config-recommended-scss@npm:^17.0.0":
+"stylelint-config-recommended-scss@npm:^17.0.1":
-  version: 17.0.0
+  version: 17.0.1
-  resolution: "stylelint-config-recommended-scss@npm:17.0.0"
+  resolution: "stylelint-config-recommended-scss@npm:17.0.1"
   dependencies:
     postcss-scss: "npm:^4.0.9"
     stylelint-config-recommended: "npm:^18.0.0"
@@ -5359,7 +5408,7 @@ __metadata:
   peerDependenciesMeta:
     postcss:
       optional: true
-  checksum: 10c0/05b2e8d4316c2a8cc66eed0a2a8f01237e0ee8966a2e73d0b3c6706694f7630be165daa5a0cef511bc51f7e3fcb07a84c55d948c15fe6193a7e13cf9bb67c913
+  checksum: 10c0/82f2df8505ffce7ba44526b54ee3e6eda6e42a2fa720bb0b61f3a3f9c5c3c562e00bf9a81cf04b81673d622fbcda1ddc12a6f5f7536b7af95076bdd6cdfe4366
   languageName: node
   linkType: hard
 
@@ -5372,60 +5421,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stylelint-config-standard-scss@npm:^17.0.0":
+"stylelint-order@npm:^8.1.1":
-  version: 17.0.0
+  version: 8.1.1
-  resolution: "stylelint-config-standard-scss@npm:17.0.0"
+  resolution: "stylelint-order@npm:8.1.1"
   dependencies:
-    stylelint-config-recommended-scss: "npm:^17.0.0"
+    postcss: "npm:^8.5.8"
-    stylelint-config-standard: "npm:^40.0.0"
+    postcss-sorting: "npm:^10.0.0"
-  peerDependencies:
-    postcss: ^8.3.3
-    stylelint: ^17.0.0
-  peerDependenciesMeta:
-    postcss:
-      optional: true
-  checksum: 10c0/0506537ba896f3d5e0fb002608090fcb41aa8ba7b65f1de8533702ce7c70e3f92b275782788a8356b5b687c86c53468c223e082226dda62780294b1cba324a36
-  languageName: node
-  linkType: hard
-
-"stylelint-config-standard@npm:^40.0.0":
-  version: 40.0.0
-  resolution: "stylelint-config-standard@npm:40.0.0"
-  dependencies:
-    stylelint-config-recommended: "npm:^18.0.0"
-  peerDependencies:
-    stylelint: ^17.0.0
-  checksum: 10c0/d8942552d53a3afda59b64d0c49503bb626fe5cef39a9e8c9583fcd60869f21431125ef4480ff27a59f7f2cf0da8af810d377129ef1d670ddc5def4defe2880c
-  languageName: node
-  linkType: hard
-
-"stylelint-order@npm:^7.0.1":
-  version: 7.0.1
-  resolution: "stylelint-order@npm:7.0.1"
-  dependencies:
-    postcss: "npm:^8.5.6"
-    postcss-sorting: "npm:^9.1.0"
   peerDependencies:
     stylelint: ^16.18.0 || ^17.0.0
-  checksum: 10c0/dfe3ab8f18725c9c2fead65f2940a6590208591ca267da6d25ee191c6e5f1df04813a6f6a76791bfe5f6fda33fbf6d81369c17c71831bfbd6802dfed26559845
+  checksum: 10c0/ef135a414d3ed98a53cc19e52f1cdff25105e34d96430ecc805d831dbdf4f505031d692dba0f2275b6e7b3a4f4b406f352d85a3924e2e3d89931af65a64eb047
   languageName: node
   linkType: hard
 
 "stylelint-scss@npm:^7.0.0":
-  version: 7.0.0
+  version: 7.2.0
-  resolution: "stylelint-scss@npm:7.0.0"
+  resolution: "stylelint-scss@npm:7.2.0"
   dependencies:
-    css-tree: "npm:^3.0.1"
+    "@csstools/css-calc": "npm:^3.2.1"
+    "@csstools/css-parser-algorithms": "npm:^4.0.0"
+    "@csstools/css-syntax-patches-for-csstree": "npm:^1.1.4"
+    "@csstools/css-tokenizer": "npm:^4.0.0"
+    css-tree: "npm:^3.2.1"
     is-plain-object: "npm:^5.0.0"
     known-css-properties: "npm:^0.37.0"
-    mdn-data: "npm:^2.25.0"
     postcss-media-query-parser: "npm:^0.2.3"
     postcss-resolve-nested-selector: "npm:^0.1.6"
     postcss-selector-parser: "npm:^7.1.1"
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
     stylelint: ^16.8.2 || ^17.0.0
-  checksum: 10c0/07d0f20c6bcb34b8b0b6bfb1d4367b4825b52a7eef7dde2adfbaec11ebc67242e6b99dccf70dfbef1eb0a9bf8712fe0ab49d183ff6e4cca9c7f89752f7e27027
+  checksum: 10c0/9f45690560e8a7156dd6aac7cbadf47010444dbf9b7953b75491ee7db08b8c660efdb0a421d09eab019bd73ef606efbc72ad983d37e1997daa397d5442109f47
   languageName: node
   linkType: hard