chuijs 4.0.2 → 4.0.3

package/framework/components/chui_skeleton/skeleton.js

@@ -1,5 +1,5 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Плейсхолдер загрузки (skeleton): серые фигуры на месте будущего содержимого.
@@ -20,12 +20,12 @@ class Skeleton {
         TEXT: "text",
         TITLE: "title",
         CIRCLE: "circle",
-        RECT: "rect"
+        RECT: "rect",
     };
     static ANIMATION = {
         SHIMMER: "shimmer",
         PULSE: "pulse",
-        NONE: "none"
+        NONE: "none",
     };
     /** Ширина последней строки многострочного текста — строки не должны быть равными */
     static LAST_LINE_WIDTH = "60%";
@@ -37,19 +37,21 @@ class Skeleton {
     #id = undefined;
     #animation = Skeleton.ANIMATION.SHIMMER;
 
-    constructor(options = {
-        id: String(),
-        shape: String(),
-        lines: Number(),
-        width: String(),
-        height: String(),
-        radius: String(),
-        gap: String(),
-        animation: String(),
-        label: String(),
-        style: String(),
-        shapes: []
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            shape: String(),
+            lines: Number(),
+            width: String(),
+            height: String(),
+            radius: String(),
+            gap: String(),
+            animation: String(),
+            label: String(),
+            style: String(),
+            shapes: [],
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Skeleton");
         Skeleton.#counter += 1;
         this.#id = options.id === undefined ? `chui_skeleton_${Skeleton.#counter}` : options.id;
@@ -71,17 +73,20 @@ class Skeleton {
         }
         const shape = options.shape === undefined ? Skeleton.SHAPE.TEXT : options.shape;
         if (shape !== Skeleton.SHAPE.TEXT && shape !== Skeleton.SHAPE.TITLE) {
-            this.addShape({shape, width: options.width, height: options.height, radius: options.radius});
+            this.addShape({ shape, width: options.width, height: options.height, radius: options.radius });
             return;
         }
         const lines = options.lines === undefined ? 1 : options.lines;
         for (let line = 1; line <= lines; line++) {
             // Последняя строка многострочного текста короче — так скелет читается как текст
             const isLast = line === lines;
-            const width = options.width !== undefined
-                ? options.width
-                : (isLast && lines > 1 ? Skeleton.LAST_LINE_WIDTH : undefined);
-            this.addShape({shape, width, height: options.height, radius: options.radius});
+            const width =
+                options.width !== undefined
+                    ? options.width
+                    : isLast && lines > 1
+                      ? Skeleton.LAST_LINE_WIDTH
+                      : undefined;
+            this.addShape({ shape, width, height: options.height, radius: options.radius });
         }
     }
 
@@ -140,7 +145,7 @@ class Skeleton {
 
     // ФИГУРЫ
     /** Добавляет фигуру: shape, width, height, radius, style */
-    addShape(options = {shape: String(), width: String(), height: String(), radius: String(), style: String()}) {
+    addShape(options = { shape: String(), width: String(), height: String(), radius: String(), style: String() }) {
         const shape = options.shape === undefined ? Skeleton.SHAPE.TEXT : options.shape;
         const element = document.createElement("skeleton_shape");
         element.classList.add(`skeleton_${shape}`);
@@ -174,4 +179,4 @@ class Skeleton {
     }
 }
 
-exports.Skeleton = Skeleton
+exports.Skeleton = Skeleton;

package/framework/components/chui_slideshow/slideshow.js

@@ -1,26 +1,26 @@
-const {Icon, Icons} = require("../chui_icons/icons");
-const {optionOr} = require("../../modules/chui_functions");
-const {Animation} = require("../../modules/chui_animations/animations");
-const {makeKeyboardButton} = require("../../modules/chui_a11y/chui_a11y");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { optionOr } = require("../../modules/chui_functions");
+const { Animation } = require("../../modules/chui_animations/animations");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 class SlideShow {
     #default_slide = 0;
-    #chui_slides_main = document.createElement('chui_slides_main');
+    #chui_slides_main = document.createElement("chui_slides_main");
     //
-    #chui_slides_list = document.createElement("chui_slides_list")
-    #chui_next_slide = document.createElement('chui_next_slide');
-    #chui_prev_slide = document.createElement('chui_prev_slide');
-    #chui_slideshow_controls = document.createElement('chui_slideshow_controls');
-    #chui_slideshow_dots = document.createElement('chui_slideshow_dots');
-    #chui_slideshow_pause = document.createElement('chui_slideshow_pause');
+    #chui_slides_list = document.createElement("chui_slides_list");
+    #chui_next_slide = document.createElement("chui_next_slide");
+    #chui_prev_slide = document.createElement("chui_prev_slide");
+    #chui_slideshow_controls = document.createElement("chui_slideshow_controls");
+    #chui_slideshow_dots = document.createElement("chui_slideshow_dots");
+    #chui_slideshow_pause = document.createElement("chui_slideshow_pause");
     //
     #slides_list = undefined;
     #autoplay = undefined;
     #autoplay_timer = undefined;
     #user_paused = false;
     constructor(options = {}) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_SlideShow');
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_SlideShow");
         // Частичный объект опций: у каждого поля своё значение по умолчанию
         const width = optionOr(options.width, undefined);
         const height = optionOr(options.height, undefined);
@@ -35,7 +35,10 @@ class SlideShow {
         // Частичный объект опций: у каждого поля своё значение по умолчанию. Без этого
         // `autoplay: {status: true}` без interval давал setInterval с NaN — слайды мелькали,
         // а `autoplay: true` вообще не включал прокрутку
-        const autoplay = options.autoplay === undefined || options.autoplay === null || typeof options.autoplay !== "object" ? {} : options.autoplay;
+        const autoplay =
+            options.autoplay === undefined || options.autoplay === null || typeof options.autoplay !== "object"
+                ? {}
+                : options.autoplay;
         const interval = Number(autoplay.interval);
         this.#autoplay = {
             status: options.autoplay === true || autoplay.status === true,
@@ -50,8 +53,8 @@ class SlideShow {
         this.#chui_prev_slide.setAttribute("aria-label", I18n.t("feedback.previousSlide"));
         makeKeyboardButton(this.#chui_next_slide);
         makeKeyboardButton(this.#chui_prev_slide);
-        this.#chui_next_slide.addEventListener("click", () => this.#changeSlide(1))
-        this.#chui_prev_slide.addEventListener("click", () => this.#changeSlide(-1))
+        this.#chui_next_slide.addEventListener("click", () => this.#changeSlide(1));
+        this.#chui_prev_slide.addEventListener("click", () => this.#changeSlide(-1));
         this.#chui_slides_main.appendChild(this.#chui_slides_list);
         // Шевроны, а не изогнутые redo/undo: в круглой кнопке они читаются как «назад/вперёд».
         // Цвет не задаём — его берёт глиф из кнопки (`color: inherit` в styles.css), поэтому
@@ -85,14 +88,17 @@ class SlideShow {
             this.#changeSlide(event.key === "ArrowRight" ? 1 : -1);
         });
         //
-        this.#renderSlide(true)
+        this.#renderSlide(true);
         //
     }
     #buildDots() {
         this.#slides_list.forEach((_, index) => {
             const dot = document.createElement("chui_slideshow_dot");
             dot.setAttribute("role", "button");
-            dot.setAttribute("aria-label", I18n.t("feedback.slideOf", {index: index + 1, total: this.#slides_list.length}));
+            dot.setAttribute(
+                "aria-label",
+                I18n.t("feedback.slideOf", { index: index + 1, total: this.#slides_list.length })
+            );
             makeKeyboardButton(dot);
             dot.addEventListener("click", () => this.#goToSlide(index));
             this.#chui_slideshow_dots.appendChild(dot);
@@ -111,22 +117,27 @@ class SlideShow {
     #changeSlide(n = Number()) {
         let sum_slides = this.#slides_list.length;
         this.#default_slide = this.#default_slide + n;
-        if (this.#default_slide > (sum_slides - 1)) this.#default_slide = 0;
+        if (this.#default_slide > sum_slides - 1) this.#default_slide = 0;
         if (this.#default_slide < 0) this.#default_slide = sum_slides - 1;
         this.#renderSlide();
     }
     #renderSlide(is_initial = false) {
-        for (let child of this.#chui_slides_list.childNodes) { this.#chui_slides_list.removeChild(child); }
+        for (let child of this.#chui_slides_list.childNodes) {
+            this.#chui_slides_list.removeChild(child);
+        }
         let slide = this.#slides_list[this.#default_slide].set();
         slide.setAttribute("role", "group");
         slide.setAttribute("aria-roledescription", I18n.t("feedback.slide"));
-        slide.setAttribute("aria-label", I18n.t("feedback.slideOf", {index: this.#default_slide + 1, total: this.#slides_list.length}));
-        this.#chui_slides_list.appendChild(slide)
+        slide.setAttribute(
+            "aria-label",
+            I18n.t("feedback.slideOf", { index: this.#default_slide + 1, total: this.#slides_list.length })
+        );
+        this.#chui_slides_list.appendChild(slide);
         // Первый слайд показываем так же, как раньше (display: flex до анимации)
-        if (is_initial) slide.style.display = 'flex';
-        else slide.style.display = 'none';
-        new Animation(slide).fadeIn()
-        this.#syncIndicators()
+        if (is_initial) slide.style.display = "flex";
+        else slide.style.display = "none";
+        new Animation(slide).fadeIn();
+        this.#syncIndicators();
     }
     // === АВТОПРОКРУТКА ===
     #startAutoplay() {
@@ -145,13 +156,17 @@ class SlideShow {
     }
     #toggleAutoplay() {
         this.#user_paused = !this.#user_paused;
-        if (this.#user_paused) this.#stopAutoplay(); else this.#startAutoplay();
+        if (this.#user_paused) this.#stopAutoplay();
+        else this.#startAutoplay();
         this.#updatePauseButton();
     }
     #updatePauseButton() {
         const icon = this.#user_paused ? Icons.AUDIO_VIDEO.PLAY_ARROW : Icons.AUDIO_VIDEO.PAUSE;
         this.#chui_slideshow_pause.innerHTML = new Icon(icon, "14pt", "var(--button_text_color)").getHTML();
-        this.#chui_slideshow_pause.setAttribute("aria-label", this.#user_paused ? I18n.t("feedback.autoplayStart") : I18n.t("feedback.autoplayPause"));
+        this.#chui_slideshow_pause.setAttribute(
+            "aria-label",
+            this.#user_paused ? I18n.t("feedback.autoplayStart") : I18n.t("feedback.autoplayPause")
+        );
         this.#chui_slideshow_pause.setAttribute("aria-pressed", this.#user_paused ? "true" : "false");
     }
     /** Полное удаление: остановить автопрокрутку (остальные слушатели — на элементах компонента) */
@@ -163,19 +178,21 @@ class SlideShow {
         return this.#chui_slides_main;
     }
     static SLIDE(options = { width: String(), height: String(), components: [] }) {
-        return new Slide(options)
+        return new Slide(options);
     }
 }
-exports.SlideShow = SlideShow
+exports.SlideShow = SlideShow;
 
 class Slide {
-    #chui_slide = document.createElement('chui_slide');
-    #chui_slide_content = document.createElement('chui_slide_content');
-    constructor(options = {
-        size: { width: String(), height: String() },
-        style: { direction: String(), wrap: String(), align: String(), justify: String() },
-        components: []
-    }) {
+    #chui_slide = document.createElement("chui_slide");
+    #chui_slide_content = document.createElement("chui_slide_content");
+    constructor(
+        options = {
+            size: { width: String(), height: String() },
+            style: { direction: String(), wrap: String(), align: String(), justify: String() },
+            components: [],
+        }
+    ) {
         // Частичный объект опций: `SLIDE({components})` падал на отсутствующем `size`
         const size = options.size === undefined ? {} : options.size;
         const style = options.style === undefined ? {} : options.style;
@@ -186,8 +203,10 @@ class Slide {
         if (style.wrap !== undefined) this.#chui_slide_content.style.flexWrap = style.wrap;
         if (style.align !== undefined) this.#chui_slide_content.style.alignItems = style.align;
         if (style.justify !== undefined) this.#chui_slide_content.style.justifyContent = style.justify;
-        for (let child of components) this.#chui_slide_content.appendChild(child.set())
-        this.#chui_slide.appendChild(this.#chui_slide_content)
+        for (let child of components) this.#chui_slide_content.appendChild(child.set());
+        this.#chui_slide.appendChild(this.#chui_slide_content);
     }
-    set() { return this.#chui_slide }
-}
+    set() {
+        return this.#chui_slide;
+    }
+}

package/framework/components/chui_slideshow/styles.css

@@ -12,7 +12,8 @@ chui_slides_main {
 
 /* Стрелки — круглые кнопки-стёкла на середине высоты: полоса во всю высоту читалась
    тяжёлой границей, а кнопка не спорит с содержимым слайда. Хит-зона 40px */
-chui_next_slide, chui_prev_slide {
+chui_next_slide,
+chui_prev_slide {
     cursor: pointer;
     position: absolute;
     top: 50%;
@@ -32,30 +33,33 @@ chui_next_slide, chui_prev_slide {
     box-shadow: var(--box_shadow_main);
     display: flex;
     align-items: center;
-    justify-content: center
+    justify-content: center;
 }
 
 chui_next_slide {
-    inset-inline-end: 10px
+    inset-inline-end: 10px;
 }
 
 chui_prev_slide {
-    inset-inline-start: 10px
+    inset-inline-start: 10px;
 }
 
-chui_next_slide:hover, chui_prev_slide:hover {
+chui_next_slide:hover,
+chui_prev_slide:hover {
     background-color: var(--element_background_hover);
-    color: var(--text_color)
+    color: var(--text_color);
 }
 
-chui_next_slide:active, chui_prev_slide:active {
+chui_next_slide:active,
+chui_prev_slide:active {
     background-color: var(--blue_prime_background);
-    color: var(--text_color_hover)
+    color: var(--text_color_hover);
 }
 
 /* chui_icon задаёт собственный color, поэтому цвет берём от кнопки: тогда значок
    меняется вместе с ней в наведении и нажатии */
-chui_next_slide chui_icon, chui_prev_slide chui_icon {
+chui_next_slide chui_icon,
+chui_prev_slide chui_icon {
     color: inherit;
 }
 
@@ -88,7 +92,9 @@ chui_slideshow_dot {
     height: 8px;
     border-radius: var(--radius_pill);
     background: var(--element_background);
-    transition: width var(--transition_time) ease, background-color var(--transition_time) ease;
+    transition:
+        width var(--transition_time) ease,
+        background-color var(--transition_time) ease;
 }
 
 /* Наведение — нейтральная ступень, кружок текущего слайда — акцент */
@@ -138,7 +144,7 @@ chui_slide {
     color: var(--text_color);
     border-radius: var(--border_radius);
     width: 100%;
-    height: -webkit-fill-available
+    height: -webkit-fill-available;
 }
 
 chui_slide_content {
@@ -147,7 +153,7 @@ chui_slide_content {
     border-radius: var(--border_radius);
     width: -webkit-fill-available;
     height: -webkit-fill-available;
-    overflow: auto
+    overflow: auto;
 }
 
 /* Нажатие — акцент, как у Button: контрол отвечает на клик ещё до действия */

package/framework/components/chui_spinner/spinner.js

@@ -1,5 +1,5 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { Animation } = require("../../modules/chui_animations/animations");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 const SVG_NS = "http://www.w3.org/2000/svg";
 /** Доля кольца, которую занимает дуга: четверть — самый читаемый «бегунок» */
@@ -15,12 +15,12 @@ const ARC_SHARE = 0.25;
  * Слушателей и таймеров нет: `remove()` убирает узел и повторный вызов уже ничего не делает.
  */
 class Spinner {
-    #spinner_main = document.createElement('chui_spiner')
-    #spinner = document.createElement('spinner')
+    #spinner_main = document.createElement("chui_spiner");
+    #spinner = document.createElement("spinner");
     #label = I18n.t("feedback.loading");
     #removed = false;
     constructor(size = Spinner.SIZE.DEFAULT, margin = String(), label = I18n.t("feedback.loading")) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Spinner');
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Spinner");
         this.#spinner_main.style.margin = margin;
         this.#spinner_main.setAttribute("role", "status");
         this.#spinner_main.setAttribute("aria-live", "polite");
@@ -91,8 +91,8 @@ class Spinner {
         SMALL: { SIZE: 45, BORDER: 3 },
         DEFAULT: { SIZE: 60, BORDER: 4 },
         BIG: { SIZE: 75, BORDER: 5 },
-        V_BIG: { SIZE: 90, BORDER: 5 }
-    }
+        V_BIG: { SIZE: 90, BORDER: 5 },
+    };
 }
 
-exports.Spinner = Spinner
+exports.Spinner = Spinner;

package/framework/components/chui_spinner/styles.css

@@ -58,4 +58,3 @@ spinner .spinner_arc {
         animation-duration: 2.5s;
     }
 }
-

package/framework/components/chui_split_button/split_button.js

@@ -1,7 +1,7 @@
-const {setStyles} = require("../../modules/chui_functions");
-const {Icon, Icons} = require("../chui_icons/icons");
-const {MenuKeyboard} = require("../../modules/chui_a11y/chui_a11y");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { MenuKeyboard } = require("../../modules/chui_a11y/chui_a11y");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 const SPLIT_MENU_GAP = 4;
 const SPLIT_MENU_EDGE = 8;
@@ -53,16 +53,18 @@ class SplitButton {
     #is_open = false;
     #destroyed = false;
 
-    constructor(options = {
-        id: String(),
-        title: String(),
-        icon: String(),
-        reverse: Boolean(),
-        disabled: Boolean(),
-        label: String(),
-        clickEvent: undefined,
-        items: []
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            icon: String(),
+            reverse: Boolean(),
+            disabled: Boolean(),
+            label: String(),
+            clickEvent: undefined,
+            items: [],
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_SplitButton");
         SplitButton.#counter += 1;
         this.#id = options.id === undefined ? `chui_split_button_${SplitButton.#counter}` : options.id;
@@ -91,7 +93,7 @@ class SplitButton {
         this.#keyboard = new MenuKeyboard(this.#menu, {
             itemSelector: "button",
             onEscape: () => this.close(),
-            trigger: this.#caret
+            trigger: this.#caret,
         });
         this.#keyboard.setExpanded(false);
         this.#caret.addEventListener("click", this.#onCaretClick);
@@ -183,7 +185,9 @@ class SplitButton {
     }
 
     /** Пункт меню: заголовок, значок, горячая клавиша и обработчик */
-    static Item(options = { title: String(), icon: String(), shortcut: String(), disabled: Boolean(), clickEvent: undefined }) {
+    static Item(
+        options = { title: String(), icon: String(), shortcut: String(), disabled: Boolean(), clickEvent: undefined }
+    ) {
         return Object.assign({ type: "item" }, options);
     }
 
@@ -301,7 +305,8 @@ class SplitButton {
     #positionMenu() {
         const button = this.#caret.getBoundingClientRect();
         let left = button.right - this.#menu.offsetWidth;
-        if (left + this.#menu.offsetWidth > window.innerWidth - SPLIT_MENU_EDGE) left = window.innerWidth - SPLIT_MENU_EDGE - this.#menu.offsetWidth;
+        if (left + this.#menu.offsetWidth > window.innerWidth - SPLIT_MENU_EDGE)
+            left = window.innerWidth - SPLIT_MENU_EDGE - this.#menu.offsetWidth;
         if (left < SPLIT_MENU_EDGE) left = SPLIT_MENU_EDGE;
         this.#menu.style.left = `${Math.round(left)}px`;
         this.#menu.style.top = `${Math.round(button.bottom + SPLIT_MENU_GAP)}px`;
@@ -325,4 +330,4 @@ class SplitButton {
     static ICON_SIZE = "16px";
 }
 
-exports.SplitButton = SplitButton
+exports.SplitButton = SplitButton;

package/framework/components/chui_split_button/styles.css

@@ -91,7 +91,7 @@ chui_split_button:not(.split_button_disabled):hover {
    правилом, а половинка кнопки, сжимающаяся отдельно, читалась бы поломкой */
 chui_split_button:not(.split_button_disabled):has(.split_button_main:active, .split_button_caret:active) {
     border-color: var(--button_border_color_hover);
-    transform: scale(.97);
+    transform: scale(0.97);
 }
 
 /* Нажатие — акцент, как у Button: обе половины отвечают одинаково */

package/framework/components/chui_splitter/splitter.js

@@ -1,5 +1,5 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Разделитель панелей: несколько областей и перетаскиваемые границы между ними.
@@ -31,7 +31,7 @@ const {I18n} = require('../../modules/chui_i18n/chui_i18n');
 class Splitter {
     static DIRECTION = {
         HORIZONTAL: "horizontal",
-        VERTICAL: "vertical"
+        VERTICAL: "vertical",
     };
     static DEFAULT_SIZE = 6;
     static DEFAULT_STEP = 2;
@@ -53,21 +53,23 @@ class Splitter {
     #on_reset = undefined;
     #dragging = undefined;
 
-    constructor(options = {
-        id: String(),
-        direction: String(),
-        sizes: [],
-        min: undefined,
-        panes: [],
-        width: String(),
-        height: String(),
-        disabled: Boolean(),
-        label: String(),
-        step: Number(),
-        onResize: undefined,
-        onResizeEnd: undefined,
-        onReset: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            direction: String(),
+            sizes: [],
+            min: undefined,
+            panes: [],
+            width: String(),
+            height: String(),
+            disabled: Boolean(),
+            label: String(),
+            step: Number(),
+            onResize: undefined,
+            onResizeEnd: undefined,
+            onReset: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Splitter");
         Splitter.#counter += 1;
         // Заготовка опции (`String()`) равносильна отсутствующей: иначе вызов без аргументов
@@ -75,7 +77,7 @@ class Splitter {
         this.#id = optionOr(options.id, `chui_splitter_${Splitter.#counter}`);
         this.#root.id = this.#id;
         this.#direction = options.direction === undefined ? Splitter.DIRECTION.HORIZONTAL : options.direction;
-        this.#min = options.min === undefined ? [] : (Array.isArray(options.min) ? options.min : [options.min]);
+        this.#min = options.min === undefined ? [] : Array.isArray(options.min) ? options.min : [options.min];
         this.#step = options.step === undefined ? Splitter.DEFAULT_STEP : options.step;
         this.#on_resize = options.onResize;
         this.#on_resize_end = options.onResizeEnd;
@@ -287,13 +289,16 @@ class Splitter {
             const side = this.#isHorizontal()
                 ? [I18n.t("a11y.sideLeft"), I18n.t("a11y.sideRight")]
                 : [I18n.t("a11y.sideTop"), I18n.t("a11y.sideBottom")];
-            handle.setAttribute("aria-valuetext", I18n.t("a11y.splitterValue", {
-                first: side[0],
-                firstPercent: Math.round(first),
-                second: side[1].toLowerCase(),
-                secondPercent: Math.round(second),
-                total: Math.round(total)
-            }));
+            handle.setAttribute(
+                "aria-valuetext",
+                I18n.t("a11y.splitterValue", {
+                    first: side[0],
+                    firstPercent: Math.round(first),
+                    second: side[1].toLowerCase(),
+                    secondPercent: Math.round(second),
+                    total: Math.round(total),
+                })
+            );
         });
     }
 
@@ -307,7 +312,9 @@ class Splitter {
         const position = clientPosition - start;
         const before = this.#panes[index];
         const after = this.#panes[index + 1];
-        const beforeStart = this.#isHorizontal() ? before.getBoundingClientRect().left - start : before.getBoundingClientRect().top - start;
+        const beforeStart = this.#isHorizontal()
+            ? before.getBoundingClientRect().left - start
+            : before.getBoundingClientRect().top - start;
         const pairSize = this.#paneSize(before) + this.#paneSize(after);
         if (pairSize === 0) return undefined;
         const pairShare = this.#sizes[index] + this.#sizes[index + 1];
@@ -428,4 +435,4 @@ class Splitter {
     };
 }
 
-exports.Splitter = Splitter
+exports.Splitter = Splitter;