chuijs 4.0.3 → 4.0.4

package/framework/components/chui_diff_viewer/diff_viewer.js

@@ -56,34 +56,34 @@ class DiffViewer {
     #title = document.createElement("diff_viewer_title");
     #head = document.createElement("diff_viewer_head");
     #stats = document.createElement("diff_viewer_stats");
-    #stat_removed = document.createElement("diff_viewer_stat");
-    #stat_added = document.createElement("diff_viewer_stat");
-    #stat_changed = document.createElement("diff_viewer_stat");
+    #statRemoved = document.createElement("diff_viewer_stat");
+    #statAdded = document.createElement("diff_viewer_stat");
+    #statChanged = document.createElement("diff_viewer_stat");
     #prev = document.createElement("button");
     #next = document.createElement("button");
     #grid = document.createElement("diff_viewer_grid");
-    #head_row = document.createElement("diff_viewer_head_row");
+    #headRow = document.createElement("diff_viewer_head_row");
     #body = document.createElement("diff_viewer_body");
     #empty = document.createElement("diff_viewer_empty");
     #status = document.createElement("diff_viewer_status");
     #id = undefined;
     #left = "";
     #right = "";
-    #left_title = undefined;
-    #right_title = undefined;
+    #leftTitle = undefined;
+    #rightTitle = undefined;
     #mode = DiffViewer.MODE.SIDE_BY_SIDE;
     #context = 3;
-    #line_numbers = true;
+    #lineNumbers = true;
     #height = "360px";
-    #title_text = undefined;
-    #label_text = undefined;
-    #empty_text = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
+    #emptyText = undefined;
     #rows = [];
-    #stats_data = { equal: 0, added: 0, removed: 0, changed: 0, groups: 0 };
+    #statsData = { equal: 0, added: 0, removed: 0, changed: 0, groups: 0 };
     #approximate = false;
     #expanded = [];
-    #active_index = undefined;
-    #focus_index = undefined;
+    #activeIndex = undefined;
+    #focusIndex = undefined;
 
     constructor(
         options = {
@@ -107,16 +107,16 @@ class DiffViewer {
         this.#id = options.id === undefined ? `chui_diff_viewer_${DiffViewer.#counter}` : options.id;
         this.#root.id = this.#id;
         this.#root.setAttribute("role", "group");
-        this.#label_text = options.label;
-        if (options.leftTitle !== undefined) this.#left_title = String(options.leftTitle);
-        else this.#left_title = I18n.t("diffViewer.before");
-        if (options.rightTitle !== undefined) this.#right_title = String(options.rightTitle);
-        else this.#right_title = I18n.t("diffViewer.after");
-        if (options.emptyText !== undefined) this.#empty_text = String(options.emptyText);
-        else this.#empty_text = I18n.t("diffViewer.noChanges");
+        this.#labelText = options.label;
+        if (options.leftTitle !== undefined) this.#leftTitle = String(options.leftTitle);
+        else this.#leftTitle = I18n.t("diffViewer.before");
+        if (options.rightTitle !== undefined) this.#rightTitle = String(options.rightTitle);
+        else this.#rightTitle = I18n.t("diffViewer.after");
+        if (options.emptyText !== undefined) this.#emptyText = String(options.emptyText);
+        else this.#emptyText = I18n.t("diffViewer.noChanges");
         this.#mode = options.mode === DiffViewer.MODE.UNIFIED ? DiffViewer.MODE.UNIFIED : DiffViewer.MODE.SIDE_BY_SIDE;
         this.#context = options.context === undefined ? this.#context : options.context;
-        this.#line_numbers = options.lineNumbers !== false;
+        this.#lineNumbers = options.lineNumbers !== false;
         this.#title.className = "diff_viewer_title";
         this.#title.id = `${this.#id}_title`;
         this.#head.className = "diff_viewer_head";
@@ -125,8 +125,8 @@ class DiffViewer {
         this.#stats.setAttribute("aria-hidden", "true");
         this.#grid.className = "diff_viewer_grid";
         this.#grid.setAttribute("role", "table");
-        this.#head_row.className = "diff_viewer_head_row";
-        this.#head_row.setAttribute("role", "row");
+        this.#headRow.className = "diff_viewer_head_row";
+        this.#headRow.setAttribute("role", "row");
         this.#body.className = "diff_viewer_body";
         this.#body.setAttribute("role", "rowgroup");
         this.#empty.className = "diff_viewer_empty";
@@ -136,14 +136,14 @@ class DiffViewer {
         this.#buildHead();
         this.#root.appendChild(this.#title);
         this.#root.appendChild(this.#head);
-        this.#grid.appendChild(this.#head_row);
+        this.#grid.appendChild(this.#headRow);
         this.#grid.appendChild(this.#body);
         this.#root.appendChild(this.#grid);
         this.#root.appendChild(this.#empty);
         this.#root.appendChild(this.#status);
         if (options.title !== undefined) this.setTitle(options.title);
         else this.#title.hidden = true;
-        this.setLabel(this.#label_text === undefined ? I18n.t("diffViewer.title") : this.#label_text);
+        this.setLabel(this.#labelText === undefined ? I18n.t("diffViewer.title") : this.#labelText);
         // Высота из опций: без неё остаётся своя по умолчанию (360px, тело прокручивается)
         this.setHeight(options.height === undefined ? this.#height : options.height);
         this.setTexts(options.left === undefined ? "" : options.left, options.right === undefined ? "" : options.right);
@@ -158,12 +158,12 @@ class DiffViewer {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя компонента, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     getMode() {
@@ -179,11 +179,11 @@ class DiffViewer {
     }
 
     getLeftTitle() {
-        return this.#left_title;
+        return this.#leftTitle;
     }
 
     getRightTitle() {
-        return this.#right_title;
+        return this.#rightTitle;
     }
 
     /** Строки модели: `{type, left, right}` (у вставки нет левой строки, у удаления — правой) */
@@ -193,7 +193,7 @@ class DiffViewer {
 
     /** Счёт изменений: `{equal, added, removed, changed, groups}` */
     getStats() {
-        return Object.assign({}, this.#stats_data);
+        return Object.assign({}, this.#statsData);
     }
 
     /** Строки с учётом свёрнутых участков: у пропуска `{type: "gap", from, to}` (индексы модели) */
@@ -215,7 +215,7 @@ class DiffViewer {
     }
 
     isLineNumbers() {
-        return this.#line_numbers;
+        return this.#lineNumbers;
     }
 
     getHeight() {
@@ -223,7 +223,7 @@ class DiffViewer {
     }
 
     getEmptyText() {
-        return this.#empty_text;
+        return this.#emptyText;
     }
 
     /** Сработал ли предел алгоритма: середина расхождения показана одним блоком */
@@ -242,7 +242,7 @@ class DiffViewer {
 
     /** Подпись над сравнением; `undefined` её убирает (имя тогда даёт `label`) */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#title.hidden = true;
             this.#title.innerText = "";
@@ -257,19 +257,19 @@ class DiffViewer {
 
     /** Имя сравнения, когда подписи в разметке нет */
     setLabel(text = undefined) {
-        this.#label_text = text;
+        this.#labelText = text;
         this.#syncLabel();
         return this;
     }
 
     setLeftTitle(text = String()) {
-        this.#left_title = String(text);
+        this.#leftTitle = String(text);
         this.#render();
         return this;
     }
 
     setRightTitle(text = String()) {
-        this.#right_title = String(text);
+        this.#rightTitle = String(text);
         this.#render();
         return this;
     }
@@ -298,8 +298,8 @@ class DiffViewer {
         this.#expanded = [];
         this.#approximate = false;
         this.#rows = this.#buildRows(DiffViewer.#split(this.#left), DiffViewer.#split(this.#right));
-        this.#stats_data = this.#collectStats();
-        this.#active_index = undefined;
+        this.#statsData = this.#collectStats();
+        this.#activeIndex = undefined;
         this.#render();
         this.#announce();
         return this;
@@ -322,13 +322,13 @@ class DiffViewer {
     /** Раскрыть пропуск по индексам модели (как кнопка «Показать N строк») */
     expandRange(from = Number(), to = Number()) {
         this.#expanded.push({ from: Number(from), to: Number(to) });
-        this.#focus_index = Number(from);
+        this.#focusIndex = Number(from);
         this.#render();
         return this;
     }
 
     setLineNumbers(shown = Boolean()) {
-        this.#line_numbers = shown !== false;
+        this.#lineNumbers = shown !== false;
         this.#render();
         return this;
     }
@@ -347,7 +347,7 @@ class DiffViewer {
     }
 
     setEmptyText(text = String()) {
-        this.#empty_text = text === undefined ? "" : String(text);
+        this.#emptyText = text === undefined ? "" : String(text);
         this.#render();
         return this;
     }
@@ -448,20 +448,20 @@ class DiffViewer {
             suffix += 1;
         const rows = [];
         for (let i = 0; i < prefix; i += 1) rows.push(DiffViewer.#equalRow(left[i], i + 1, right[i], i + 1));
-        const mid_left = left.slice(prefix, left.length - suffix);
-        const mid_right = right.slice(prefix, right.length - suffix);
-        if (mid_left.length > 0 || mid_right.length > 0) {
+        const middleLeft = left.slice(prefix, left.length - suffix);
+        const middleRight = right.slice(prefix, right.length - suffix);
+        if (middleLeft.length > 0 || middleRight.length > 0) {
             let operations;
-            if (mid_left.length * mid_right.length > DiffViewer.LCS_LIMIT) {
+            if (middleLeft.length * middleRight.length > DiffViewer.LCS_LIMIT) {
                 // Предел алгоритма: вместо честного (но не помещающегося) LCS показываем один блок
                 this.#approximate = true;
                 operations = [];
-                if (mid_left.length > 0) operations.push({ type: DELETE, from: 0, to: mid_left.length });
-                if (mid_right.length > 0) operations.push({ type: INSERT, from: 0, to: mid_right.length });
+                if (middleLeft.length > 0) operations.push({ type: DELETE, from: 0, to: middleLeft.length });
+                if (middleRight.length > 0) operations.push({ type: INSERT, from: 0, to: middleRight.length });
             } else {
-                operations = DiffViewer.#operations(mid_left, mid_right);
+                operations = DiffViewer.#operations(middleLeft, middleRight);
             }
-            for (const row of DiffViewer.#middleRows(operations, mid_left, mid_right, prefix)) rows.push(row);
+            for (const row of DiffViewer.#middleRows(operations, middleLeft, middleRight, prefix)) rows.push(row);
         }
         for (let k = 0; k < suffix; k += 1) {
             const li = left.length - suffix + k;
@@ -471,11 +471,11 @@ class DiffViewer {
         return rows;
     }
 
-    static #equalRow(left_text = String(), left_number = Number(), right_text = String(), right_number = Number()) {
+    static #equalRow(leftText = String(), leftNumber = Number(), rightText = String(), rightNumber = Number()) {
         return {
             type: EQUAL,
-            left: { number: left_number, text: left_text },
-            right: { number: right_number, text: right_text },
+            left: { number: leftNumber, text: leftText },
+            right: { number: rightNumber, text: rightText },
         };
     }
 
@@ -490,12 +490,12 @@ class DiffViewer {
                 for (let k = 0; k < pairs; k += 1) {
                     const li = operation.from + k;
                     const ri = next.from + k;
-                    const has_left = li < operation.to;
-                    const has_right = ri < next.to;
+                    const hasLeft = li < operation.to;
+                    const hasRight = ri < next.to;
                     rows.push({
-                        type: has_left && has_right ? REPLACE : has_left ? DELETE : INSERT,
-                        left: has_left ? { number: offset + li + 1, text: left[li] } : undefined,
-                        right: has_right ? { number: offset + ri + 1, text: right[ri] } : undefined,
+                        type: hasLeft && hasRight ? REPLACE : hasLeft ? DELETE : INSERT,
+                        left: hasLeft ? { number: offset + li + 1, text: left[li] } : undefined,
+                        right: hasRight ? { number: offset + ri + 1, text: right[ri] } : undefined,
                     });
                 }
                 index += 1;
@@ -555,7 +555,7 @@ class DiffViewer {
     #visibleRows() {
         const total = this.#rows.length;
         const list = [];
-        if (this.#context === Infinity || this.#stats_data.groups === 0) {
+        if (this.#context === Infinity || this.#statsData.groups === 0) {
             for (let index = 0; index < total; index += 1)
                 list.push({ type: this.#rows[index].type, row: this.#rows[index], index: index });
             return list;
@@ -586,15 +586,15 @@ class DiffViewer {
     }
 
     #accessibleName() {
-        if (this.#title_text !== undefined && this.#title_text !== "") return this.#title_text;
-        if (this.#label_text !== undefined && this.#label_text !== "") return this.#label_text;
+        if (this.#titleText !== undefined && this.#titleText !== "") return this.#titleText;
+        if (this.#labelText !== undefined && this.#labelText !== "") return this.#labelText;
         return I18n.t("diffViewer.title");
     }
 
     // Имя компонента: видимая подпись — через aria-labelledby, скрытая — через aria-label.
     // Таблица внутри получает то же имя: у неё своя роль, и без имени она читалась бы безымянной
     #syncLabel() {
-        if (this.#title_text !== undefined && this.#title_text !== "") {
+        if (this.#titleText !== undefined && this.#titleText !== "") {
             this.#root.setAttribute("aria-labelledby", this.#title.id);
             this.#root.removeAttribute("aria-label");
         } else {
@@ -607,12 +607,12 @@ class DiffViewer {
 
     #buildHead() {
         this.#stats.innerHTML = "";
-        this.#stat_removed.className = "diff_viewer_stat diff_viewer_stat_removed";
-        this.#stat_added.className = "diff_viewer_stat diff_viewer_stat_added";
-        this.#stat_changed.className = "diff_viewer_stat diff_viewer_stat_changed";
-        this.#stats.appendChild(this.#stat_removed);
-        this.#stats.appendChild(this.#stat_added);
-        this.#stats.appendChild(this.#stat_changed);
+        this.#statRemoved.className = "diff_viewer_stat diff_viewer_stat_removed";
+        this.#statAdded.className = "diff_viewer_stat diff_viewer_stat_added";
+        this.#statChanged.className = "diff_viewer_stat diff_viewer_stat_changed";
+        this.#stats.appendChild(this.#statRemoved);
+        this.#stats.appendChild(this.#statAdded);
+        this.#stats.appendChild(this.#statChanged);
         this.#prev.type = "button";
         this.#prev.className = "diff_viewer_move diff_viewer_move_prev";
         this.#prev.setAttribute("aria-label", I18n.t("diffViewer.previousChange"));
@@ -658,7 +658,7 @@ class DiffViewer {
         const number = document.createElement("span");
         number.className = "diff_viewer_number";
         number.setAttribute("aria-hidden", "true");
-        number.innerText = this.#line_numbers && line !== undefined ? String(line.number) : "";
+        number.innerText = this.#lineNumbers && line !== undefined ? String(line.number) : "";
         const text = document.createElement("span");
         text.className = "diff_viewer_text";
         text.innerText = line === undefined ? "" : line.text;
@@ -677,7 +677,7 @@ class DiffViewer {
         const label = this.#rowLabel(row);
         if (label !== undefined) node.setAttribute("aria-label", label);
         if (row.type !== EQUAL) node.classList.add(`diff_viewer_row_${row.type}`);
-        node.classList.toggle("diff_viewer_row_no_numbers", this.#line_numbers === false);
+        node.classList.toggle("diff_viewer_row_no_numbers", this.#lineNumbers === false);
         for (const cell of this.#cells(row)) node.appendChild(cell);
         return node;
     }
@@ -722,10 +722,10 @@ class DiffViewer {
     }
 
     #applyStats() {
-        const stats = this.#stats_data;
-        this.#stat_removed.innerText = `−${stats.removed}`;
-        this.#stat_added.innerText = `+${stats.added}`;
-        this.#stat_changed.innerText = `~${stats.changed}`;
+        const stats = this.#statsData;
+        this.#statRemoved.innerText = `−${stats.removed}`;
+        this.#statAdded.innerText = `+${stats.added}`;
+        this.#statChanged.innerText = `~${stats.changed}`;
         const empty = stats.groups === 0;
         this.#prev.disabled = empty;
         this.#next.disabled = empty;
@@ -733,7 +733,7 @@ class DiffViewer {
     }
 
     #announce() {
-        const stats = this.#stats_data;
+        const stats = this.#statsData;
         if (stats.groups === 0) {
             this.#status.innerText = I18n.t("diffViewer.noChanges");
             return this;
@@ -751,19 +751,19 @@ class DiffViewer {
         // Строки пересобираются, а фокус живёт на строке: запоминаем её до перерисовки
         const active = document.activeElement;
         const focused = active === null || !this.#grid.contains(active) ? null : active.closest(".diff_viewer_row");
-        if (focused !== null && focused.dataset.index !== undefined) this.#focus_index = Number(focused.dataset.index);
-        this.#head_row.innerHTML = "";
+        if (focused !== null && focused.dataset.index !== undefined) this.#focusIndex = Number(focused.dataset.index);
+        this.#headRow.innerHTML = "";
         this.#body.innerHTML = "";
         const titles =
             this.#mode === DiffViewer.MODE.UNIFIED
                 ? [I18n.t("diffViewer.changes")]
-                : [this.#left_title, this.#right_title];
+                : [this.#leftTitle, this.#rightTitle];
         for (const title of titles) {
             const cell = document.createElement("div");
             cell.className = "diff_viewer_head_cell";
             cell.setAttribute("role", "columnheader");
             cell.innerText = title;
-            this.#head_row.appendChild(cell);
+            this.#headRow.appendChild(cell);
         }
         this.#grid.setAttribute("aria-colcount", String(titles.length));
         this.#grid.classList.toggle("diff_viewer_grid_unified", this.#mode === DiffViewer.MODE.UNIFIED);
@@ -772,8 +772,8 @@ class DiffViewer {
             this.#body.appendChild(entry.type === GAP ? this.#gapNode(entry) : this.#rowNode(entry));
         this.#grid.setAttribute("aria-rowcount", String(list.length + 1));
         this.#grid.hidden = this.#rows.length === 0;
-        this.#empty.hidden = this.#stats_data.groups !== 0;
-        this.#empty.innerText = this.#empty_text;
+        this.#empty.hidden = this.#statsData.groups !== 0;
+        this.#empty.innerText = this.#emptyText;
         this.#applyStats();
         this.#applyStop();
         return this;
@@ -784,14 +784,14 @@ class DiffViewer {
         const list = [...this.#body.querySelectorAll(".diff_viewer_row")];
         if (list.length === 0) return;
         const stop =
-            list.find((row) => Number(row.dataset.index) === this.#active_index) ??
-            list.find((row) => Number(row.dataset.index) === this.#focus_index) ??
+            list.find((row) => Number(row.dataset.index) === this.#activeIndex) ??
+            list.find((row) => Number(row.dataset.index) === this.#focusIndex) ??
             list[0];
-        this.#active_index = Number(stop.dataset.index);
+        this.#activeIndex = Number(stop.dataset.index);
         for (const row of list) row.setAttribute("tabindex", row === stop ? "0" : "-1");
         // Фокус возвращаем, только если он был в теле: иначе перерисовка его бы украла
-        if (this.#focus_index !== undefined && Number(stop.dataset.index) === this.#focus_index) {
-            this.#focus_index = undefined;
+        if (this.#focusIndex !== undefined && Number(stop.dataset.index) === this.#focusIndex) {
+            this.#focusIndex = undefined;
             stop.focus();
         }
         return this;
@@ -799,7 +799,7 @@ class DiffViewer {
 
     #focusRow(row = undefined) {
         if (row === undefined || row === null) return this;
-        this.#active_index = Number(row.dataset.index);
+        this.#activeIndex = Number(row.dataset.index);
         for (const other of this.#body.querySelectorAll(".diff_viewer_row")) {
             other.setAttribute("tabindex", other === row ? "0" : "-1");
         }
@@ -839,7 +839,7 @@ class DiffViewer {
     #goToChange(direction = Number()) {
         const groups = this.#changeGroups();
         if (groups.length === 0) return this;
-        const current = this.#active_index;
+        const current = this.#activeIndex;
         const forward = direction > 0;
         let target;
         if (current === undefined) target = forward ? groups[0] : groups[groups.length - 1];
@@ -859,7 +859,7 @@ class DiffViewer {
     #onFocusIn = (event) => {
         const row = event.target instanceof Element ? event.target.closest(".diff_viewer_row") : null;
         if (row === null || row.dataset.index === undefined) return;
-        this.#active_index = Number(row.dataset.index);
+        this.#activeIndex = Number(row.dataset.index);
     };
 
     #onKeyDown = (event) => {

package/framework/components/chui_diff_viewer/styles.css

@@ -7,10 +7,10 @@ chui_diff_viewer {
     box-sizing: border-box;
     width: -webkit-fill-available;
     max-width: 100%;
-    margin: var(--margin);
+    margin: var(--block_margin);
     overflow: hidden;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
     font-family: "chui_mono", monospace;
@@ -24,7 +24,7 @@ chui_diff_viewer.diff_viewer_fixed .diff_viewer_body {
 .diff_viewer_title {
     display: block;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-family: system-ui, sans-serif;
     font-size: var(--font_labels_size);
@@ -68,17 +68,17 @@ chui_diff_viewer.diff_viewer_fixed .diff_viewer_body {
 }
 
 .diff_viewer_stat_removed {
-    background: var(--badge_error_back);
+    background: var(--badge_error_background);
     color: var(--badge_error_text);
 }
 
 .diff_viewer_stat_added {
-    background: var(--badge_success_back);
+    background: var(--badge_success_background);
     color: var(--badge_success_text);
 }
 
 .diff_viewer_stat_changed {
-    background: var(--badge_warning_back);
+    background: var(--badge_warning_background);
     color: var(--badge_warning_text);
 }
 
@@ -246,15 +246,15 @@ chui_diff_viewer.diff_viewer_fixed .diff_viewer_body {
 /* Тона строк — те же, что у счётчиков: добавлено, удалено, заменено, без изменений.
    Класс строки собирается из типа модели (insert/delete/replace), поэтому имена совпадают с ним */
 .diff_viewer_row_insert {
-    background: var(--badge_success_back);
+    background: var(--badge_success_background);
 }
 
 .diff_viewer_row_delete {
-    background: var(--badge_error_back);
+    background: var(--badge_error_background);
 }
 
 .diff_viewer_row_replace {
-    background: var(--badge_warning_back);
+    background: var(--badge_warning_background);
 }
 
 .diff_viewer_row_insert .diff_viewer_marker {

package/framework/components/chui_divider/divider.js

@@ -26,7 +26,7 @@ class Divider {
     #root = document.createElement("chui_divider");
     #line = document.createElement("divider_line");
     // Вторая линия существует ровно тогда, когда есть подпись
-    #line_after = undefined;
+    #lineAfter = undefined;
     #text = undefined;
     #id = undefined;
 
@@ -80,17 +80,17 @@ class Divider {
                 this.#text.remove();
                 this.#text = undefined;
             }
-            if (this.#line_after !== undefined) {
-                this.#line_after.remove();
-                this.#line_after = undefined;
+            if (this.#lineAfter !== undefined) {
+                this.#lineAfter.remove();
+                this.#lineAfter = undefined;
             }
             return this;
         }
         if (this.#text === undefined) {
             this.#text = document.createElement("divider_text");
-            this.#line_after = document.createElement("divider_line");
+            this.#lineAfter = document.createElement("divider_line");
             this.#root.appendChild(this.#text);
-            this.#root.appendChild(this.#line_after);
+            this.#root.appendChild(this.#lineAfter);
         }
         this.#text.innerText = text;
         return this;

package/framework/components/chui_divider/styles.css

@@ -6,7 +6,7 @@ chui_divider {
     --divider_length: -webkit-fill-available;
     color: var(--text_color_disabled);
     font-size: var(--font_default_size);
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 chui_divider[data-orientation="horizontal"] {
@@ -18,7 +18,7 @@ chui_divider[data-orientation="vertical"] {
     align-self: stretch;
     width: 1px;
     height: var(--divider_length);
-    margin: 0 var(--margin);
+    margin: 0 var(--block_margin);
 }
 
 divider_line {