chuijs 4.0.3 → 4.0.4

package/framework/components/chui_banner/banner.js

@@ -0,0 +1,222 @@
+const { setStyles, optionOr, markdownToHtml } = require("../../modules/chui_functions");
+const { Icon } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
+const { tokenTime } = require("../../modules/chui_animations/motion");
+
+/**
+ * Баннер — карточка-объявление: картинка или значок, заголовок с подзаголовком, действия
+ * и закрытие.
+ *
+ * Баннер стоит в потоке страницы, а не всплывает слоем: для модального сообщения есть
+ * `Popup`, для сообщения о состоянии — `Alert`, для всплывающего — `Toast`. От `Alert` он
+ * отличается задачей: там состояние (ошибка, предупреждение), здесь предложение — «попробуйте
+ * новое», «настройте», «посмотрите» — поэтому у баннера крупный материал, картинка и действия
+ * кнопками.
+ *
+ * Два вида (`mode`) и два размера (`size`):
+ *   - `tint` — значок в цветной плашке, `image` — фотография; фото занимает кромку карточки
+ *     целиком и не затемняется: текст лежит рядом, а не поверх снимка, поэтому подпись читается
+ *     при любом кадре (всплывающие подписи поверх фото требуют затемнения на глаз — в тёмной
+ *     и светлой схеме оно даёт разный результат);
+ *   - `s` — строка: плашка слева, заголовок и подзаголовок рядом, действия справа;
+ *   - `m` — карточка: картинка сверху во всю ширину, под ней заголовок, подзаголовок, текст
+ *     и действия.
+ *
+ * Опции: `id`, `title`, `subtitle`, `text`, `markdownText`, `icon`, `image`, `mode`, `size`,
+ * `actions`, `closable`, `onClose`, `onClick`.
+ *
+ * Методы: `setTitle(text)`, `setSubtitle(text)`, `setText(text)`, `setMarkdownText(md)`,
+ * `setIcon(glyph)`, `setImage(src)`, `setMode(mode)`, `setSize(size)`, `addActions(...actions)`,
+ * `setClosable(bool)`, `close()`, `isClosed()`, `set()`, `destroy()`.
+ */
+class Banner {
+    static MODE = { TINT: "tint", IMAGE: "image" };
+    static SIZE = { S: "s", M: "m" };
+
+    #root = document.createElement("chui_banner");
+    #media = document.createElement("banner_media");
+    #content = document.createElement("banner_content");
+    #title = undefined;
+    #subtitle = undefined;
+    #text = undefined;
+    #actions = document.createElement("banner_actions");
+    #close = undefined;
+    #image = undefined;
+    #onClose = undefined;
+    #onClick = undefined;
+    #closed = false;
+    #removed = false;
+
+    constructor(options = {}) {
+        setStyles(__dirname + "/styles.css", "chUiJS_Banner");
+        if (options.id !== undefined) this.#root.id = options.id;
+        this.setSize(optionOr(options.size, Banner.SIZE.M));
+        this.setMode(optionOr(options.mode, Banner.MODE.TINT));
+        this.#onClose = typeof options.onClose === "function" ? options.onClose : undefined;
+        this.#onClick = typeof options.onClick === "function" ? options.onClick : undefined;
+        this.#root.append(this.#media, this.#content, this.#actions);
+        if (options.title !== undefined) this.setTitle(options.title);
+        if (options.subtitle !== undefined) this.setSubtitle(options.subtitle);
+        if (options.markdownText !== undefined) this.setMarkdownText(options.markdownText);
+        else if (options.text !== undefined) this.setText(options.text);
+        if (options.icon !== undefined) this.setIcon(options.icon);
+        if (options.image !== undefined) this.setImage(options.image);
+        if (Array.isArray(options.actions)) this.addActions(...options.actions);
+        if (options.closable === true) this.setClosable(true);
+        if (this.#onClick !== undefined) this.#makeClickable();
+        this.#syncName();
+    }
+
+    // GET
+    isClosed() {
+        return this.#closed;
+    }
+
+    // SET
+    setTitle(text = String()) {
+        this.#title = this.#writeText(this.#title, "banner_title", text, "title");
+        this.#syncName();
+        return this;
+    }
+    setSubtitle(text = String()) {
+        this.#subtitle = this.#writeText(this.#subtitle, "banner_subtitle", text, "subtitle");
+        return this;
+    }
+    setText(text = String()) {
+        this.#text = this.#writeText(this.#text, "banner_text", text, "text");
+        return this;
+    }
+    /** Разметка в теле баннера: тот же приём, что у `Alert` — текст приходит готовым HTML */
+    setMarkdownText(markdown = String()) {
+        if (this.#text === undefined) this.#text = this.#insertText("banner_text", "text");
+        this.#text.innerHTML = markdownToHtml(String(markdown));
+        return this;
+    }
+    /** Значок в плашке: состояние `tint`. Прежняя картинка при этом уходит */
+    setIcon(glyph = String()) {
+        const icon = new Icon(String(glyph), "22px").set();
+        this.#media.replaceChildren(icon);
+        this.#root.dataset.mode = Banner.MODE.TINT;
+        this.#image = undefined;
+        return this;
+    }
+    /** Фотография на кромке карточки: состояние `image` */
+    setImage(src = String()) {
+        if (this.#image === undefined) {
+            this.#image = document.createElement("img");
+            // Картинка здесь украшение: смысл несёт заголовок, поэтому подпись пуста
+            this.#image.alt = "";
+            this.#image.loading = "lazy";
+        }
+        this.#image.src = String(src);
+        this.#media.replaceChildren(this.#image);
+        this.#root.dataset.mode = Banner.MODE.IMAGE;
+        return this;
+    }
+    setMode(mode = String()) {
+        this.#root.dataset.mode = mode === Banner.MODE.IMAGE ? Banner.MODE.IMAGE : Banner.MODE.TINT;
+        return this;
+    }
+    setSize(size = String()) {
+        this.#root.dataset.size = size === Banner.SIZE.S ? Banner.SIZE.S : Banner.SIZE.M;
+        return this;
+    }
+    /** Действия баннера: компоненты фреймворка (у них есть `set()`) или готовые узлы */
+    addActions(...actions) {
+        for (const action of actions) {
+            if (action === undefined || action === null) continue;
+            this.#actions.appendChild(typeof action.set === "function" ? action.set() : action);
+        }
+        return this;
+    }
+    /**
+     * Кнопка закрытия — настоящий `<button>`: у неё есть мышь, клавиатура и имя
+     * для скринридера (подписи в баннере нет, имя даёт словарь).
+     */
+    setClosable(boolean = Boolean()) {
+        if (boolean !== true) {
+            if (this.#close !== undefined) this.#close.remove();
+            this.#close = undefined;
+            return this;
+        }
+        if (this.#close === undefined) {
+            this.#close = document.createElement("button");
+            this.#close.type = "button";
+            this.#close.className = "banner_close";
+            this.#close.innerHTML = new Icon("close", "16px").getHTML();
+            this.#close.setAttribute("aria-label", I18n.t("a11y.closeMessage"));
+            this.#close.setAttribute("title", I18n.t("common.close"));
+            this.#close.addEventListener("click", () => this.close());
+            this.#root.appendChild(this.#close);
+        }
+        return this;
+    }
+
+    /**
+     * Закрытие: баннер гаснет и сходит общим кадром ухода, а узел убирается по его концу.
+     * Слушатель одноразовый (проверка цели): иначе он поймал бы любой конец кадра на узле.
+     * Срок из токена страхует случай, когда кадр не проиграется вовсе — у скрытого узла
+     * `animationend` не приходит.
+     */
+    close() {
+        if (this.#closed === true) return this;
+        this.#closed = true;
+        if (this.#onClose !== undefined) this.#onClose(this);
+        const finish = () => {
+            if (this.#removed === true) return;
+            this.#removed = true;
+            this.#root.removeEventListener("animationend", finish);
+            this.#root.remove();
+        };
+        this.#root.addEventListener("animationend", finish);
+        this.#root.classList.add("banner_leaving");
+        setTimeout(finish, tokenTime("--motion_fast"));
+        return this;
+    }
+
+    set() {
+        return this.#root;
+    }
+    /** Узлы баннера уходят из документа вместе со своими слушателями; работа снимается явно */
+    destroy() {
+        this.#onClick = undefined;
+        this.#onClose = undefined;
+        this.#removed = true;
+        this.#root.remove();
+    }
+
+    // === ВНУТРЕННЕЕ ===
+    #writeText(node = undefined, className = String(), text = String(), key = String()) {
+        const target = node === undefined ? this.#insertText(className, key) : node;
+        target.innerText = String(text);
+        return target;
+    }
+    #insertText(className = String(), key = String()) {
+        const node = document.createElement(`banner_${key}`);
+        node.className = className;
+        this.#content.appendChild(node);
+        return node;
+    }
+    /** Клик по всей карточке: роль кнопки, обход клавиатурой и активация Enter/Space */
+    #makeClickable() {
+        makeKeyboardButton(this.#root);
+        this.#root.addEventListener("click", () => {
+            if (this.#onClick !== undefined) this.#onClick(this);
+        });
+    }
+    /**
+     * Имя баннера для скринридера: заголовок, а без него — общая подпись из словаря.
+     * У кликабельного баннера имя обязательно: без него роль кнопки читается как «кнопка».
+     */
+    #syncName() {
+        const title = this.#title === undefined ? "" : this.#title.innerText.trim();
+        const name = title === "" ? I18n.t("feedback.banner") : title;
+        if (this.#onClick === undefined && this.#root.getAttribute("role") === null) {
+            this.#root.setAttribute("role", "region");
+        }
+        this.#root.setAttribute("aria-label", name);
+    }
+}
+
+exports.Banner = Banner;

package/framework/components/chui_banner/styles.css

@@ -0,0 +1,170 @@
+/* Баннер: карточка-объявление с кромкой (значок или фото), текстом и действиями.
+   Материал — как у карточки и `Alert`: своя подложка и волосяная рамка. Отдельных цветов
+   у компонента нет: состояние несут плашка значка, фото и кнопки. */
+
+chui_banner {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+    /* Компонент сам задаёт ширину: в flex-колонке с `align-items: flex-start` карточка
+       без ширины получила бы `max-content` и вылезла за содержимое */
+    width: -webkit-fill-available;
+    box-sizing: border-box;
+    padding: 12px 14px;
+    border: 1px solid var(--border_color);
+    border-radius: var(--radius_md);
+    background: var(--element_background_2);
+    color: var(--text_color);
+    font-size: var(--font_default_size);
+    text-align: start;
+    /* Появление: карточка встаёт на место — общий кадр из global_style.css */
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
+}
+
+/* Уход: карточка гаснет и сходит вверх, узел убирается по концу кадра */
+.banner_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
+}
+
+/* Крупный баннер — карточка: кромка сверху во всю ширину, текст и действия под ней */
+chui_banner[data-size="m"] {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+    /* Кромка касается краёв карточки: свои отступы у неё снизу, у текста — по бокам */
+    padding: 0 0 12px;
+}
+
+banner_media {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    /* Кромка со значком — квадрат со строку текста (29 px у поля + воздух): в обоих
+       размерах она одного роста, а крупный вид с фотографией перекрывает этот размер ниже */
+    width: 44px;
+    height: 44px;
+    overflow: hidden;
+    border-radius: var(--radius_sm);
+    background: var(--element_background);
+    color: var(--blue_prime_background);
+}
+
+chui_banner[data-mode="tint"] banner_media {
+    background: var(--blue_prime_background_tint);
+}
+
+/* Фото — состояние `image`: кромка тянется во всю ширину карточки */
+chui_banner[data-mode="image"][data-size="m"] banner_media {
+    width: -webkit-fill-available;
+    height: 140px;
+    border-radius: var(--radius_md) var(--radius_md) 0 0;
+}
+
+/* Плашка со значком в крупном баннере остаётся плашкой: без картинки полоса во всю ширину
+   была бы пустой — объявление читалось бы полем без содержимого */
+chui_banner[data-mode="tint"][data-size="m"] banner_media {
+    align-self: flex-start;
+    margin: 12px 14px 0;
+}
+
+banner_media img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+banner_content {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+/* В крупном баннере текст отходит от краёв карточки: кромка их уже заняла */
+chui_banner[data-size="m"] banner_content {
+    padding-inline: 14px;
+}
+
+banner_title {
+    font-weight: 600;
+    color: var(--text_color);
+    word-break: break-word;
+}
+
+banner_subtitle {
+    color: var(--text_color_disabled);
+    font-size: var(--font_labels_size);
+    word-break: break-word;
+}
+
+banner_text {
+    color: var(--text_color);
+    word-break: break-word;
+}
+
+banner_text p {
+    margin: 0;
+}
+
+banner_actions {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+}
+
+/* Пустой блок действий места не занимает */
+banner_actions:empty {
+    display: none;
+}
+
+chui_banner[data-size="m"] banner_actions {
+    padding-inline: 14px;
+}
+
+/* Закрытие — круглая кнопка в углу карточки: в крупном баннере она лежит поверх кромки,
+   поэтому фон у неё есть всегда, иначе значок терялся бы на снимке */
+.banner_close {
+    position: absolute;
+    top: 8px;
+    inset-inline-end: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 26px;
+    height: 26px;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius_circle);
+    background: var(--element_background);
+    color: var(--text_color_disabled);
+}
+
+.banner_close:hover {
+    background: var(--element_background_hover);
+    color: var(--text_color);
+}
+
+.banner_close chui_icon {
+    color: inherit;
+}
+
+/* В строке (размер `s`) кнопке хватает места в ряду: поверх кромки она не лежит */
+chui_banner[data-size="s"] .banner_close {
+    position: static;
+    flex: none;
+    background: transparent;
+}
+
+chui_banner[data-size="s"] .banner_close:hover {
+    background: var(--element_background_hover);
+}

package/framework/components/chui_breadcrumb/styles.css

@@ -3,7 +3,7 @@ chui_breadcrumb {
     display: block;
     width: max-content;
     max-width: 100%;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_default_size);
 }

package/framework/components/chui_button/button.js

@@ -1,11 +1,11 @@
 const { Icon } = require("../chui_icons/icons");
 
 class Button {
-    #chui_button = document.createElement("chui_button");
+    #chuiButton = document.createElement("chui_button");
     #button = document.createElement("button");
-    #button_text = document.createElement("button_text");
-    #button_icon = document.createElement("button_icon");
-    #label_text = undefined;
+    #buttonText = document.createElement("button_text");
+    #buttonIcon = document.createElement("button_icon");
+    #labelText = undefined;
     constructor(
         options = {
             reverse: Boolean(),
@@ -19,37 +19,34 @@ class Button {
         require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Button");
 
         this.#button.className = "chui_button";
-        this.#button_text.className = "chui_button_text";
+        this.#buttonText.className = "chui_button_text";
         // Иконка декоративна: иначе её глиф-имя («print», «delete»…) попадает в имя кнопки
-        this.#button_icon.setAttribute("aria-hidden", "true");
+        this.#buttonIcon.setAttribute("aria-hidden", "true");
 
-        if (options.title !== undefined) this.#button_text.innerText = options.title;
+        if (options.title !== undefined) this.#buttonText.innerText = options.title;
         if (options.icon !== undefined)
-            this.#button_icon.innerHTML = new Icon(options.icon, "var(--header_icon_size)").getHTML();
+            this.#buttonIcon.innerHTML = new Icon(options.icon, "var(--header_icon_size)").getHTML();
 
         if (options.title !== undefined && options.icon === undefined) {
-            this.#button.appendChild(this.#button_text);
+            this.#button.appendChild(this.#buttonText);
         } else if (options.title === undefined && options.icon !== undefined) {
             // Квадратный отступ для кнопки только со значком: признак читает CSS
             this.#button.dataset.icon_only = "true";
-            this.#button.appendChild(this.#button_icon);
+            this.#button.appendChild(this.#buttonIcon);
         } else {
             // Порядок детей задаёт `reverse`, а зазор между значком и подписью —
             // `gap` в CSS: инлайновые отступы здесь больше не нужны
             if (options.reverse) {
-                this.#button.appendChild(this.#button_icon);
-                this.#button.appendChild(this.#button_text);
+                this.#button.appendChild(this.#buttonIcon);
+                this.#button.appendChild(this.#buttonText);
             } else {
-                this.#button.appendChild(this.#button_text);
-                this.#button.appendChild(this.#button_icon);
+                this.#button.appendChild(this.#buttonText);
+                this.#button.appendChild(this.#buttonIcon);
             }
         }
 
         if (options.clickEvent !== undefined) this.#button.addEventListener("click", options.clickEvent);
-        this.#button.addEventListener("mousedown", () => {
-            return false;
-        });
-        this.#chui_button.appendChild(this.#button);
+        this.#chuiButton.appendChild(this.#button);
         // Доступное имя кнопки без надписи: значок декоративен (`aria-hidden`) и имени не даёт,
         // поэтому кнопка только со значком оставалась бы без имени
         if (options.label !== undefined) this.setLabel(options.label);
@@ -57,34 +54,33 @@ class Button {
         if (options.disabled === true) this.setDisabled(true);
     }
     getText() {
-        return this.#button_text.innerText;
+        return this.#buttonText.innerText;
     }
     /** Новый текст. Пишем в `button_text`, а не в саму кнопку: запись в кнопку целиком
      *  затирала бы и значок, и его разметку (`aria-hidden`), а `getText()` читал бы старый узел */
     setText(text = String()) {
-        this.#button_text.innerText = text;
+        this.#buttonText.innerText = text;
         // Пустой узел в разметку не дописываем: кнопке только со значком он ничего не даёт
-        if (String(text) !== "" && !this.#button.contains(this.#button_text))
-            this.#button.appendChild(this.#button_text);
+        if (String(text) !== "" && !this.#button.contains(this.#buttonText)) this.#button.appendChild(this.#buttonText);
         this.#syncLabel();
         return this;
     }
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
     /** Доступное имя кнопки без видимой надписи; `undefined` его убирает.
      *  Пока надпись есть, имя даёт она сама — `aria-label` тогда не ставится и не подменяет её */
     setLabel(label = undefined) {
-        this.#label_text = label;
+        this.#labelText = label;
         this.#syncLabel();
         return this;
     }
     /** Имя кнопки: из видимой надписи, а если её нет — из `label` */
     #syncLabel() {
-        const hasText = this.#button.contains(this.#button_text) && this.#button_text.innerText.trim() !== "";
-        if (hasText || this.#label_text === undefined || this.#label_text === "")
+        const hasText = this.#button.contains(this.#buttonText) && this.#buttonText.innerText.trim() !== "";
+        if (hasText || this.#labelText === undefined || this.#labelText === "")
             this.#button.removeAttribute("aria-label");
-        else this.#button.setAttribute("aria-label", String(this.#label_text));
+        else this.#button.setAttribute("aria-label", String(this.#labelText));
     }
     addClickListener(listener = () => {}) {
         this.#button.addEventListener("click", listener);
@@ -93,7 +89,7 @@ class Button {
         this.#button.disabled = boolean;
     }
     set() {
-        return this.#chui_button;
+        return this.#chuiButton;
     }
 }
 

package/framework/components/chui_button/styles.css

@@ -2,19 +2,19 @@ chui_button {
     cursor: pointer;
     height: max-content;
     width: max-content;
-    border-radius: var(--border_radius);
-    margin: var(--margin);
+    border-radius: var(--radius_sm);
+    margin: var(--block_margin);
 }
 
 .chui_button {
     cursor: pointer;
     height: max-content;
     width: max-content;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     /* Компактный шаг: 5px по вертикали дают 29px (значок 17 + отступы 10 + черта 2) —
-       как у кнопок шапки (30px). Прежде стояло --main_padding (8px 13px), и кнопка
+       как у кнопок шапки (30px). Прежде стояло --block_padding (8px 13px), и кнопка
        выходила 35px, то есть ростом с поле ввода — самый крупный контроль в вёрстке. */
-    padding: var(--main_padding_sm);
+    padding: var(--block_padding_sm);
     /* Зазор вместо `margin-left`, который ставил JS: отступ между значком и подписью
        держит flex-контейнер, поэтому он не зависит от порядка детей (включая `reverse`). */
     gap: var(--control_padding);

package/framework/components/chui_calendar/calendar.js

@@ -37,8 +37,8 @@ class Calendar {
             second: 'numeric'
         };*/
         while (this.date.getMonth() === this.month) {
-            let dayToPush = this.date;
-            let days = [];
+            const dayToPush = this.date;
+            const days = [];
             days.push(dayToPush.toLocaleString(I18n.getLocale(), { day: "numeric" }));
             days.push(dayToPush.toLocaleString(I18n.getLocale(), { weekday: "short" }).toUpperCase());
             days.push(dayToPush.toLocaleString(I18n.getLocale(), { month: "long" }).toUpperCase());
@@ -46,10 +46,10 @@ class Calendar {
             this.list.push(days);
         }
         let index = 1;
-        for (let day of this.list) {
-            for (let name_day of this.calendar[0]) {
-                let indexz = this.calendar[0].indexOf(name_day);
-                if (day[1].includes(name_day)) {
+        for (const day of this.list) {
+            for (const nameDay of this.calendar[0]) {
+                const indexz = this.calendar[0].indexOf(nameDay);
+                if (day[1].includes(nameDay)) {
                     this.calendar[index][indexz] = day[0];
                     if (indexz === 6) {
                         index++;

package/framework/components/chui_card/card.js

@@ -2,7 +2,7 @@ const { Icon } = require("../chui_icons/icons");
 const { optionOr } = require("../../modules/chui_functions");
 
 class Card {
-    #chui_card = document.createElement("chui_card");
+    #chuiCard = document.createElement("chui_card");
     #head;
     #icon;
     #titles;
@@ -22,12 +22,12 @@ class Card {
         }
     ) {
         require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Card");
-        if (options.id !== undefined) this.#chui_card.id = options.id;
+        if (options.id !== undefined) this.#chuiCard.id = options.id;
         const style = optionOr(options.style, undefined);
-        if (style !== undefined) this.#chui_card.classList.add(style);
-        if (options.width !== undefined) this.#chui_card.style.width = options.width;
-        if (options.height !== undefined) this.#chui_card.style.height = options.height;
-        this.#chui_card.appendChild(this.#body);
+        if (style !== undefined) this.#chuiCard.classList.add(style);
+        if (options.width !== undefined) this.#chuiCard.style.width = options.width;
+        if (options.height !== undefined) this.#chuiCard.style.height = options.height;
+        this.#chuiCard.appendChild(this.#body);
         if (options.icon !== undefined) this.setIcon(options.icon);
         if (options.title !== undefined) this.setTitle(options.title);
         if (options.description !== undefined) this.setDescription(options.description);
@@ -35,7 +35,7 @@ class Card {
     }
     // GET
     getId() {
-        return this.#chui_card.id;
+        return this.#chuiCard.id;
     }
     getTitle() {
         return this.#title === undefined ? "" : this.#title.innerText;
@@ -48,18 +48,18 @@ class Card {
     }
     // SET
     setId(id = String()) {
-        this.#chui_card.id = id;
+        this.#chuiCard.id = id;
     }
     // Пустая строка — «не задана»: `classList.add("")` бросает исключение
     setStyle(style = String()) {
         const known = optionOr(style, undefined);
-        if (known !== undefined) this.#chui_card.classList.add(known);
+        if (known !== undefined) this.#chuiCard.classList.add(known);
     }
     setWidth(width = String()) {
-        this.#chui_card.style.width = width;
+        this.#chuiCard.style.width = width;
     }
     setHeight(height = String()) {
-        this.#chui_card.style.height = height;
+        this.#chuiCard.style.height = height;
     }
     setIcon(icon = String()) {
         if (this.#icon === undefined) {
@@ -84,7 +84,7 @@ class Card {
     }
     // FUNCTIONS
     add(...components) {
-        for (let component of components) this.#body.appendChild(component.set());
+        for (const component of components) this.#body.appendChild(component.set());
     }
     clear() {
         this.#body.innerHTML = "";
@@ -93,7 +93,7 @@ class Card {
     #headNode() {
         if (this.#head === undefined) {
             this.#head = document.createElement("card_head");
-            this.#chui_card.prepend(this.#head);
+            this.#chuiCard.prepend(this.#head);
         }
         return this.#head;
     }
@@ -106,7 +106,7 @@ class Card {
     }
     // RENDER
     set() {
-        return this.#chui_card;
+        return this.#chuiCard;
     }
 }