@cedx/base 0.20.0 → 0.21.1

package/lib/UI/Components/Toast.d.ts

@@ -3,10 +3,6 @@ import { Context } from "../Context.js";
  * Represents a notification.
  */
 export interface IToast {
-    /**
-     * Value indicating whether to apply a transition.
-     */
-    animation?: boolean;
     /**
      * Value indicating whether to automatically hide the toast.
      */
@@ -31,6 +27,10 @@ export interface IToast {
      * The delay, in milliseconds, to hide the toast.
      */
     delay?: number;
+    /**
+     * Value indicating whether to apply a transition.
+     */
+    fade?: boolean;
     /**
      * The icon displayed next to the caption.
      */
@@ -45,11 +45,6 @@ export declare class Toast extends HTMLElement {
      * The list of observed attributes.
      */
     static readonly observedAttributes: string[];
-    /**
-     * Value indicating whether to apply a transition.
-     */
-    get animation(): boolean;
-    set animation(value: boolean);
     /**
      * Value indicating whether to automatically hide this toast.
      */
@@ -83,13 +78,18 @@ export declare class Toast extends HTMLElement {
      * The time elapsed since this component was initially shown, in milliseconds.
      */
     get elapsedTime(): number;
+    /**
+     * Value indicating whether to apply a transition.
+     */
+    get fade(): boolean;
+    set fade(value: boolean);
     /**
      * The icon displayed next to the caption.
      */
     get icon(): string | null;
     set icon(value: string | null);
     /**
-     * Value indicating whether to initially show this toast.
+     * Value indicating whether to initially show this component.
      */
     get open(): boolean;
     set open(value: boolean);

package/lib/UI/Components/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toast.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAiB,MAAM,eAAe,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,MAAM;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAC,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,qBAAa,KAAM,SAAQ,WAAW;;IAErC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAA+E;IAkCjH;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,IAAI,IAAI,CAAC,KAAK,EAAE,gBAAgB,EAE/B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAGrB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,CAGzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,WAAW,IAAI,MAAM,CAExB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAG1B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAa/F;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,iBAAiB,IAAI,IAAI;IASzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;CAwFZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,cAAc,EAAE,KAAK,CAAC;KACtB;CACD"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toast.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAiB,MAAM,eAAe,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,MAAM;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAC,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,qBAAa,KAAM,SAAQ,WAAW;;IAErC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAA0E;IAkC5G;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,IAAI,IAAI,CAAC,KAAK,EAAE,gBAAgB,EAE/B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAGrB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,CAGzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,WAAW,IAAI,MAAM,CAExB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAG1B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAa/F;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,iBAAiB,IAAI,IAAI;IASzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;CAwFZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,cAAc,EAAE,KAAK,CAAC;KACtB;CACD"}

package/lib/UI/Components/Toast.js

@@ -7,7 +7,7 @@ export class Toast extends HTMLElement {
     /**
      * The list of observed attributes.
      */
-    static observedAttributes = ["animation", "autohide", "caption", "context", "culture", "delay", "icon"];
+    static observedAttributes = ["autohide", "caption", "context", "culture", "delay", "fade", "icon"];
     /**
      * The time units.
      */
@@ -34,15 +34,6 @@ export class Toast extends HTMLElement {
     static {
         customElements.define("toaster-item", this);
     }
-    /**
-     * Value indicating whether to apply a transition.
-     */
-    get animation() {
-        return this.hasAttribute("animation");
-    }
-    set animation(value) {
-        this.toggleAttribute("animation", value);
-    }
     /**
      * Value indicating whether to automatically hide this toast.
      */
@@ -103,6 +94,15 @@ export class Toast extends HTMLElement {
     get elapsedTime() {
         return Date.now() - this.#initialTime;
     }
+    /**
+     * Value indicating whether to apply a transition.
+     */
+    get fade() {
+        return this.hasAttribute("fade");
+    }
+    set fade(value) {
+        this.toggleAttribute("fade", value);
+    }
     /**
      * The icon displayed next to the caption.
      */
@@ -117,7 +117,7 @@ export class Toast extends HTMLElement {
             this.removeAttribute("icon");
     }
     /**
-     * Value indicating whether to initially show this toast.
+     * Value indicating whether to initially show this component.
      */
     get open() {
         return this.hasAttribute("open");
@@ -134,9 +134,6 @@ export class Toast extends HTMLElement {
     attributeChangedCallback(attribute, oldValue, newValue) {
         if (newValue != oldValue)
             switch (attribute) {
-                case "animation":
-                    this.#updateAnimation(newValue != null);
-                    break;
                 case "autohide":
                     this.#updateAutoHide(newValue != null);
                     break;
@@ -152,6 +149,9 @@ export class Toast extends HTMLElement {
                 case "delay":
                     this.#updateDelay(Number(newValue));
                     break;
+                case "fade":
+                    this.#updateFade(newValue != null);
+                    break;
                 case "icon":
                     this.#updateIcon(newValue);
                     break;
@@ -205,13 +205,6 @@ export class Toast extends HTMLElement {
         }
         return this.#formatter.format(Math.ceil(-elapsed), Toast.#timeUnits[index]);
     }
-    /**
-     * Updates the value indicating whether to apply a transition.
-     * @param value The new value.
-     */
-    #updateAnimation(value) {
-        this.firstElementChild.dataset.bsAnimation = value ? "true" : "false";
-    }
     /**
      * Updates the value indicating whether to automatically hide this toast.
      * @param value The new value.
@@ -254,6 +247,13 @@ export class Toast extends HTMLElement {
         const { elapsedTime } = this;
         this.querySelector(".toast-header small").textContent = elapsedTime > 0 ? this.#formatTime(elapsedTime / 1_000) : "";
     };
+    /**
+     * Updates the value indicating whether to apply a transition.
+     * @param value The new value.
+     */
+    #updateFade(value) {
+        this.firstElementChild.dataset.bsAnimation = value ? "true" : "false";
+    }
     /**
      * Updates the icon displayed next to the caption.
      * @param value The new value.

package/lib/UI/Components/Toaster.d.ts

@@ -14,11 +14,6 @@ export declare class Toaster extends HTMLElement {
      * Creates a new toaster.
      */
     constructor();
-    /**
-     * Value indicating whether to apply a transition.
-     */
-    get animation(): boolean;
-    set animation(value: boolean);
     /**
      * Value indicating whether to automatically hide the toasts.
      */
@@ -39,6 +34,11 @@ export declare class Toaster extends HTMLElement {
      */
     get delay(): number;
     set delay(value: number);
+    /**
+     * Value indicating whether to apply a transition.
+     */
+    get fade(): boolean;
+    set fade(value: boolean);
     /**
      * The default icon displayed next to the captions.
      */

package/lib/UI/Components/Toaster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toaster.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAQ,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,YAAY,CAAC;AAEvC;;GAEG;AACH,qBAAa,OAAQ,SAAQ,WAAW;;IAEvC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAgB;IAOlD;;OAEG;;IAaH;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAGrB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,CAGzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAG1B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,QAAQ,CAGvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAE3B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAO/F;;;;;OAKG;IACH,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAErE;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CAsCzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,OAAO,CAAC;KAC7B;CACD"}
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toaster.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAQ,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,YAAY,CAAC;AAEvC;;GAEG;AACH,qBAAa,OAAQ,SAAQ,WAAW;;IAEvC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAgB;IAOlD;;OAEG;;IAaH;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAGrB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,CAGzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAG1B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,QAAQ,CAGvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAE3B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAO/F;;;;;OAKG;IACH,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAErE;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CAsCzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,OAAO,CAAC;KAC7B;CACD"}

package/lib/UI/Components/Toaster.js

@@ -26,15 +26,6 @@ export class Toaster extends HTMLElement {
     static {
         customElements.define("toaster-container", this);
     }
-    /**
-     * Value indicating whether to apply a transition.
-     */
-    get animation() {
-        return this.hasAttribute("animation");
-    }
-    set animation(value) {
-        this.toggleAttribute("animation", value);
-    }
     /**
      * Value indicating whether to automatically hide the toasts.
      */
@@ -74,6 +65,15 @@ export class Toaster extends HTMLElement {
     set delay(value) {
         this.setAttribute("delay", value.toString());
     }
+    /**
+     * Value indicating whether to apply a transition.
+     */
+    get fade() {
+        return this.hasAttribute("fade");
+    }
+    set fade(value) {
+        this.toggleAttribute("fade", value);
+    }
     /**
      * The default icon displayed next to the captions.
      */
@@ -125,13 +125,13 @@ export class Toaster extends HTMLElement {
         const childContent = this.#toastTemplate.cloneNode(true).querySelector(".toast");
         childContent.addEventListener("hidden.bs.toast", () => item.remove());
         item.appendChild(childContent);
-        item.animation = toast.animation ?? this.animation;
         item.autoHide = toast.autoHide ?? this.autoHide;
         item.body = toast.body;
         item.caption = toast.caption;
         item.context = toast.context ?? this.context;
         item.culture = toast.culture ?? this.culture;
         item.delay = toast.delay ?? this.delay;
+        item.fade = toast.fade ?? this.fade;
         item.icon = toast.icon ?? this.icon;
         this.firstElementChild.appendChild(item);
         item.show();

package/lib/UI/Tag.js

@@ -24,8 +24,9 @@ export function html(fragments, ...values) {
  * @returns The CSS string corresponding to the specified value.
  */
 function stringFromCss(value) {
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string
     if (!(value instanceof CSSStyleSheet))
-        return String(value);
+        return value === null || typeof value == "undefined" ? "" : String(value);
     return Array.from(value.cssRules).map(cssRule => cssRule.cssText).join("\n");
 }
 /**
@@ -34,8 +35,9 @@ function stringFromCss(value) {
  * @returns The HTML string corresponding to the specified value.
  */
 function stringFromHtml(value) {
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string
     if (!(value instanceof DocumentFragment))
-        return String(value);
+        return value === null || typeof value == "undefined" ? "" : String(value);
     const element = document.createElement("div");
     element.appendChild(value);
     return element.innerHTML;

package/package.json

@@ -7,7 +7,7 @@
 	"name": "@cedx/base",
 	"repository": "cedx/base",
 	"type": "module",
-	"version": "0.20.0",
+	"version": "0.21.1",
 	"devDependencies": {
 		"@playwright/browser-chromium": "^1.55.0",
 		"@types/bootstrap": "^5.2.10",

package/src/Client/UI/Components/{MessageBox.ts → DialogBox.ts}

@@ -1,6 +1,7 @@
 import {Modal} from "bootstrap";
-import {Context, getIcon, toCss} from "../Context.js";
+import {type Context, getIcon, toCss} from "../Context.js";
 import {DialogResult} from "../DialogResult.js";
+import {html} from "../Tag.js";
 import {Variant} from "../Variant.js";
 import type {DialogButton, IDialogButton} from "./DialogButton.js";
 
@@ -9,11 +10,6 @@ import type {DialogButton, IDialogButton} from "./DialogButton.js";
  */
 export interface IMessage {
 
-	/**
-	 * Value indicating whether to apply a transition.
-	 */
-	animation?: boolean;
-
 	/**
 	 * The child content displayed in the body.
 	 */
@@ -24,41 +20,21 @@ export interface IMessage {
 	 */
 	caption: string;
 
-	/**
-	 * Value indicating whether to vertically center this message box.
-	 */
-	centered?: boolean;
-
-	/**
-	 * A contextual modifier.
-	 */
-	context?: Context;
-
 	/**
 	 * The child content displayed in the footer.
 	 */
 	footer?: DocumentFragment;
-
-	/**
-	 * The icon displayed next to the body.
-	 */
-	icon?: string|null;
-
-	/**
-	 * Value indicating whether the body is scrollable.
-	 */
-	scrollable?: boolean;
 }
 
 /**
- * Displays a message window, also known as dialog box, which presents a message to the user.
+ * Displays a dialog box, which presents a message to the user.
  */
-export class MessageBox extends HTMLElement {
+export class DialogBox extends HTMLElement {
 
 	/**
 	 * The list of observed attributes.
 	 */
-	static readonly observedAttributes = ["animation", "caption", "centered", "context", "icon", "modal", "scrollable"];
+	static readonly observedAttributes = ["caption", "centered", "fade", "modal", "scrollable"];
 
 	/**
 	 * The template for a button.
@@ -81,7 +57,7 @@ export class MessageBox extends HTMLElement {
 	#result: DialogResult = DialogResult.None;
 
 	/**
-	 * Creates a new message box.
+	 * Creates a new dialog box.
 	 */
 	constructor() {
 		super();
@@ -94,24 +70,14 @@ export class MessageBox extends HTMLElement {
 	 * Registers the component.
 	 */
 	static {
-		customElements.define("message-box", this);
-	}
-
-	/**
-	 * Value indicating whether to apply a transition.
-	 */
-	get animation(): boolean {
-		return this.hasAttribute("animation");
-	}
-	set animation(value: boolean) {
-		this.toggleAttribute("animation", value);
+		customElements.define("dialog-box", this);
 	}
 
 	/**
 	 * The child content displayed in the body.
 	 */
 	set body(value: DocumentFragment) { // eslint-disable-line accessor-pairs
-		this.querySelector(".modal-body > div")!.replaceChildren(...value.childNodes);
+		this.querySelector(".modal-body")!.replaceChildren(...value.childNodes);
 	}
 
 	/**
@@ -125,7 +91,7 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * Value indicating whether to vertically center this message box.
+	 * Value indicating whether to vertically center this dialog box.
 	 */
 	get centered(): boolean {
 		return this.hasAttribute("centered");
@@ -135,14 +101,13 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * A contextual modifier.
+	 * Value indicating whether to apply a transition.
 	 */
-	get context(): Context {
-		const value = this.getAttribute("context") as Context;
-		return Object.values(Context).includes(value) ? value : Context.Info;
+	get fade(): boolean {
+		return this.hasAttribute("fade");
 	}
-	set context(value: Context) {
-		this.setAttribute("context", value);
+	set fade(value: boolean) {
+		this.toggleAttribute("fade", value);
 	}
 
 	/**
@@ -155,18 +120,7 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * The icon displayed next to the body.
-	 */
-	get icon(): string|null {
-		const value = this.getAttribute("icon") ?? "";
-		return value.trim() || null;
-	}
-	set icon(value: string|null) {
-		this.toggleAttribute("icon", Boolean(value));
-	}
-
-	/**
-	 * Value indicating whether to this message box will not close when clicking outside of it.
+	 * Value indicating whether to this dialog box will not close when clicking outside of it.
 	 */
 	get modal(): boolean {
 		return this.hasAttribute("modal");
@@ -176,7 +130,7 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * Value indicating whether to initially show this message box.
+	 * Value indicating whether to initially show this component.
 	 */
 	get open(): boolean {
 		return this.hasAttribute("open");
@@ -203,13 +157,11 @@ export class MessageBox extends HTMLElement {
 	 */
 	attributeChangedCallback(attribute: string, oldValue: string|null, newValue: string|null): void {
 		if (newValue != oldValue) switch (attribute) {
-			case "animation": this.#updateAnimation(newValue != null); break;
 			case "caption": this.#updateCaption(newValue ?? ""); break;
 			case "centered": this.#updateCentered(newValue != null); break;
-			case "context": this.#updateContext(Object.values(Context).includes(newValue as Context) ? newValue as Context : Context.Info); break;
-			case "icon": this.#updateIcon(newValue); break;
 			case "modal": this.#updateModal(newValue != null); break;
-			case "scrollable": this.#updateScrolling(newValue != null); break;
+			case "fade": this.#updateFade(newValue != null); break;
+			case "scrollable": this.#updateScrollable(newValue != null); break;
 			// No default
 		}
 	}
@@ -221,14 +173,14 @@ export class MessageBox extends HTMLElement {
 	 * @param body The child content displayed in the body.
 	 * @returns The dialog box result.
 	 */
-	async alert(context: Context, caption: string, body: DocumentFragment): Promise<DialogResult> {
-		return await this.show(context, caption, body, [
+	alert(context: Context, caption: string, body: DocumentFragment): Promise<DialogResult> {
+		return this.show(context, caption, this.#getBodyTemplate(context, body), [
 			{label: "OK", value: DialogResult.OK, variant: Variant.Primary}
 		]);
 	}
 
 	/**
-	 * Closes this message box.
+	 * Closes this dialog box.
 	 * @param result The dialog box result.
 	 */
 	close(result: DialogResult = DialogResult.None): void {
@@ -243,8 +195,8 @@ export class MessageBox extends HTMLElement {
 	 * @param body The child content displayed in the body.
 	 * @returns The dialog box result.
 	 */
-	async confirm(context: Context, caption: string, body: DocumentFragment): Promise<DialogResult> {
-		return await this.show(context, caption, body, [
+	confirm(context: Context, caption: string, body: DocumentFragment): Promise<DialogResult> {
+		return this.show(context, caption, this.#getBodyTemplate(context, body), [
 			{label: "OK", value: DialogResult.OK, variant: Variant.Primary},
 			{label: "Annuler", value: DialogResult.Cancel, variant: Variant.Secondary}
 		]);
@@ -294,17 +246,14 @@ export class MessageBox extends HTMLElement {
 		if (typeof message == "string") {
 			const footer = document.createDocumentFragment();
 			footer.append(...buttons.map(button => this.#createButton(button)));
-			message = {context: message, caption, body, footer};
+			message = {body, caption, footer};
 		}
 
-		if (typeof message == "object" && message) {
-			this.body = message.body;
-			this.caption = message.caption;
-			this.context = message.context ?? Context.Info;
-			this.icon = message.icon ?? getIcon(this.context);
-
+		if (message) {
 			const footer = message.footer ?? document.createDocumentFragment();
 			for (const button of footer.querySelectorAll("button")) button.addEventListener("click", this.#close);
+			this.body = message.body;
+			this.caption = message.caption;
 			this.footer = footer;
 		}
 
@@ -316,7 +265,7 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * Closes this message box.
+	 * Closes this dialog box.
 	 * @param event The dispatched event.
 	 */
 	readonly #close: (event: Event) => void = event => {
@@ -344,11 +293,18 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * Updates the message box animation.
-	 * @param value The new value.
+	 * Gets the body template corresponding to the specified context and message.
+	 * @param context The contextual modifier.
+	 * @param message The child content displayed in the body.
+	 * @returns The body template corresponding to the specified context and message.
 	 */
-	#updateAnimation(value: boolean): void {
-		this.firstElementChild!.classList.toggle("fade", value);
+	#getBodyTemplate(context: Context, message: DocumentFragment): DocumentFragment {
+		return html`
+			<div class="d-flex gap-2">
+				<i class="icon icon-fill fs-1 text-${toCss(context)}"> ${getIcon(context)}</i>
+				<div class="flex-grow-1">${message}</div>
+			</div>
+		`;
 	}
 
 	/**
@@ -360,7 +316,7 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * Updates the value indicating whether to vertically center this message box.
+	 * Updates the value indicating whether to vertically center this dialog box.
 	 * @param value The new value.
 	 */
 	#updateCentered(value: boolean): void {
@@ -368,25 +324,15 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * Updates the contextual modifier.
-	 * @param value The new value.
-	 */
-	#updateContext(value: Context): void {
-		const {classList} = this.querySelector(".modal-body > .icon")!;
-		classList.remove(...Object.values(Context).map(context => `text-${toCss(context)}`));
-		classList.add(`text-${toCss(value)}`);
-	}
-
-	/**
-	 * Updates the icon displayed next to the body.
+	 * Updates the value indicating whether to apply a transition.
 	 * @param value The new value.
 	 */
-	#updateIcon(value: string|null): void {
-		this.querySelector(".modal-body > .icon")!.textContent = (value ?? "").trim() || getIcon(this.context);
+	#updateFade(value: boolean): void {
+		this.firstElementChild!.classList.toggle("fade", value);
 	}
 
 	/**
-	 * Updates the value indicating whether to this message box will not close when clicking outside of it.
+	 * Updates the value indicating whether to this dialog box will not close when clicking outside of it.
 	 * @param value The new value.
 	 */
 	#updateModal(value: boolean): void {
@@ -394,10 +340,10 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * Updates the body scrolling.
+	 * Updates the value indicating whether the body is scrollable.
 	 * @param value The new value.
 	 */
-	#updateScrolling(value: boolean): void {
+	#updateScrollable(value: boolean): void {
 		this.querySelector(".modal-dialog")!.classList.toggle("modal-dialog-scrollable", value);
 	}
 }
@@ -411,6 +357,6 @@ declare global {
 	 * The map of HTML tag names.
 	 */
 	interface HTMLElementTagNameMap {
-		"message-box": MessageBox;
+		"dialog-box": DialogBox;
 	}
 }

package/src/Client/UI/Components/LoadingIndicator.ts

@@ -6,7 +6,7 @@ export class LoadingIndicator extends HTMLElement {
 	/**
 	 * The list of observed attributes.
 	 */
-	static readonly observedAttributes = ["animation"];
+	static readonly observedAttributes = ["fade"];
 
 	/**
 	 * The number of concurrent HTTP requests.
@@ -23,11 +23,21 @@ export class LoadingIndicator extends HTMLElement {
 	/**
 	 * Value indicating whether to apply a transition.
 	 */
-	get animation(): boolean {
-		return this.hasAttribute("animation");
+	get fade(): boolean {
+		return this.hasAttribute("fade");
 	}
-	set animation(value: boolean) {
-		this.toggleAttribute("animation", value);
+	set fade(value: boolean) {
+		this.toggleAttribute("fade", value);
+	}
+
+	/**
+	 * Value indicating whether to initially show this component.
+	 */
+	get open(): boolean {
+		return this.hasAttribute("open");
+	}
+	set open(value: boolean) {
+		this.toggleAttribute("open", value);
 	}
 
 	/**
@@ -38,13 +48,20 @@ export class LoadingIndicator extends HTMLElement {
 	 */
 	attributeChangedCallback(attribute: string, oldValue: string|null, newValue: string|null): void {
 		if (newValue != oldValue) switch (attribute) {
-			case "animation": this.#updateAnimation(newValue != null); break;
+			case "fade": this.#updateFade(newValue != null); break;
 			// No default
 		}
 	}
 
 	/**
-	 * Hides the loading indicator.
+	 * Method invoked when this component is connected.
+	 */
+	connectedCallback(): void {
+		if (this.open) this.show();
+	}
+
+	/**
+	 * Hides this loading indicator.
 	 * @param options Value indicating whether to force the loading indicator to hide.
 	 */
 	hide(options: {force?: boolean} = {}): void {
@@ -58,7 +75,7 @@ export class LoadingIndicator extends HTMLElement {
 	}
 
 	/**
-	 * Shows the loading indicator.
+	 * Shows this loading indicator.
 	 */
 	show(): void {
 		this.#requestCount++;
@@ -71,7 +88,7 @@ export class LoadingIndicator extends HTMLElement {
 	 * Updates the value indicating whether to apply a transition.
 	 * @param value The new value.
 	 */
-	#updateAnimation(value: boolean): void {
+	#updateFade(value: boolean): void {
 		this.classList.toggle("fade", value);
 	}
 }