@cedx/base 0.17.0 → 0.18.0

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

@@ -10,6 +10,10 @@ export declare class Toaster extends HTMLElement {
      * The list of observed attributes.
      */
     static readonly observedAttributes: string[];
+    /**
+     * Creates a new toaster.
+     */
+    constructor();
     /**
      * Value indicating whether to apply a fade transition.
      */
@@ -58,9 +62,9 @@ export declare class Toaster extends HTMLElement {
      * @param caption The title displayed in the toast header.
      * @param body The child content displayed in the toast body.
      */
-    notify(context: Context, caption: string, body: DocumentFragment | string): void;
+    show(context: Context, caption: string, body: DocumentFragment | string): void;
     /**
-     * Shows the specified toast.
+     * Shows a toast.
      * @param toast The toast to show.
      */
     show(toast: IToast): void;

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;AAEtC,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;IAclD;;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,EAE1B;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;IAS/F;;;;;OAKG;IACH,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,GAAC,MAAM,GAAG,IAAI;IAI9E;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CA2BzB;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;AAEtC,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,GAAC,MAAM,GAAG,IAAI;IAE5E;;;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

@@ -13,6 +13,14 @@ export class Toaster extends HTMLElement {
      * The template for a toast.
      */
     #toastTemplate = this.querySelector("template").content;
+    /**
+     * Creates a new toaster.
+     */
+    constructor() {
+        super();
+        for (const toast of this.querySelectorAll("toaster-item"))
+            toast.addEventListener("hidden.bs.toast", () => toast.remove());
+    }
     /**
      * Registers the component.
      */
@@ -75,7 +83,10 @@ export class Toaster extends HTMLElement {
         return value.trim() || null;
     }
     set icon(value) {
-        this.toggleAttribute("icon", Boolean(value));
+        if (value)
+            this.setAttribute("icon", value);
+        else
+            this.removeAttribute("icon");
     }
     /**
      * The toaster placement.
@@ -104,21 +115,17 @@ export class Toaster extends HTMLElement {
     }
     /**
      * Shows a toast.
-     * @param context The contextual modifier.
+     * @param toast The toast to show, or the contextual modifier.
      * @param caption The title displayed in the toast header.
      * @param body The child content displayed in the toast body.
      */
-    notify(context, caption, body) {
-        this.show({ context, caption, body });
-    }
-    /**
-     * Shows the specified toast.
-     * @param toast The toast to show.
-     */
-    show(toast) {
+    show(toast, caption = "", body = "") {
+        if (typeof toast == "string")
+            toast = { context: toast, caption, body };
         const item = document.createElement("toaster-item");
-        item.addEventListener("hidden.bs.toast", () => item.remove());
-        item.appendChild(this.#toastTemplate.cloneNode(true).querySelector(".toast"));
+        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 = typeof toast.body == "string" ? createDocumentFragment(toast.body) : toast.body;

package/package.json

@@ -7,7 +7,7 @@
 	"name": "@cedx/base",
 	"repository": "cedx/base",
 	"type": "module",
-	"version": "0.17.0",
+	"version": "0.18.0",
 	"devDependencies": {
 		"@playwright/browser-chromium": "^1.55.0",
 		"@types/bootstrap": "^5.2.10",
@@ -21,7 +21,7 @@
 		"mocha": "^11.7.1",
 		"playwright": "^1.55.0",
 		"serve-handler": "^6.1.6",
-		"typedoc": "^0.28.10",
+		"typedoc": "^0.28.11",
 		"typescript": "^5.9.2",
 		"typescript-eslint": "^8.40.0"
 	},

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

@@ -58,7 +58,8 @@ export class DialogButton extends HTMLElement {
 		return Object.values(Context).includes(value) ? value : null;
 	}
 	set context(value: Context|null) {
-		this.toggleAttribute("context", Boolean(value));
+		if (value) this.setAttribute("context", value);
+		else this.removeAttribute("context");
 	}
 
 	/**
@@ -69,7 +70,8 @@ export class DialogButton extends HTMLElement {
 		return value.trim() || null;
 	}
 	set icon(value: string|null) {
-		this.toggleAttribute("icon", Boolean(value));
+		if (value) this.setAttribute("icon", value);
+		else this.removeAttribute("icon");
 	}
 
 	/**
@@ -101,7 +103,8 @@ export class DialogButton extends HTMLElement {
 		return Object.values(Variant).includes(value) ? value : null;
 	}
 	set variant(value: Variant|null) {
-		this.toggleAttribute("context", Boolean(value));
+		if (value) this.setAttribute("variant", value);
+		else this.removeAttribute("variant");
 	}
 
 	/**

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

@@ -0,0 +1,417 @@
+import {Modal} from "bootstrap";
+import {Context, getIcon, toCss} from "../Context.js";
+import {DialogResult} from "../DialogResult.js";
+import {createDocumentFragment} from "../ElementExtensions.js";
+import {Variant} from "../Variant.js";
+import type {DialogButton, IDialogButton} from "./DialogButton.js";
+
+/**
+ * Represents a message to display in a dialog box.
+ */
+export interface IMessage {
+
+	/**
+	 * Value indicating whether to apply a fade transition.
+	 */
+	animation?: boolean;
+
+	/**
+	 * The child content displayed in the body.
+	 */
+	body: DocumentFragment|string;
+
+	/**
+	 * The title displayed in the header.
+	 */
+	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|string;
+
+	/**
+	 * 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.
+ */
+export class MessageBox extends HTMLElement {
+
+	/**
+	 * The list of observed attributes.
+	 */
+	static readonly observedAttributes = ["animation", "caption", "centered", "context", "icon", "modal", "scrollable"];
+
+	/**
+	 * The template for a button.
+	 */
+	readonly #buttonTemplate: DocumentFragment = this.querySelector("template")!.content;
+
+	/**
+	 * The underlying Bootstrap modal.
+	 */
+	#modal!: Modal;
+
+	/**
+	 * The function invoked to return the dialog box result.
+	 */
+	#resolve: (value: DialogResult) => void = () => { /* Noop */ };
+
+	/**
+	 * The dialog result.
+	 */
+	#result: DialogResult = DialogResult.None;
+
+	/**
+	 * Creates a new message box.
+	 */
+	constructor() {
+		super();
+		this.firstElementChild!.addEventListener("hidden.bs.modal", () => this.#resolve(this.#result));
+		this.querySelector(".btn-close")!.addEventListener("click", this.#close);
+		for (const button of this.querySelectorAll(".modal-footer button")) button.addEventListener("click", this.#close);
+	}
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("message-box", this);
+	}
+
+	/**
+	 * Value indicating whether to apply a fade transition.
+	 */
+	get animation(): boolean {
+		return this.hasAttribute("animation");
+	}
+	set animation(value: boolean) {
+		this.toggleAttribute("animation", value);
+	}
+
+	/**
+	 * The child content displayed in the body.
+	 */
+	set body(value: DocumentFragment) { // eslint-disable-line accessor-pairs
+		this.querySelector(".modal-body > div")!.replaceChildren(...value.childNodes);
+	}
+
+	/**
+	 * The title displayed in the header.
+	 */
+	get caption(): string {
+		return (this.getAttribute("caption") ?? "").trim();
+	}
+	set caption(value: string) {
+		this.setAttribute("caption", value);
+	}
+
+	/**
+	 * Value indicating whether to vertically center this message box.
+	 */
+	get centered(): boolean {
+		return this.hasAttribute("centered");
+	}
+	set centered(value: boolean) {
+		this.toggleAttribute("centered", value);
+	}
+
+	/**
+	 * A contextual modifier.
+	 */
+	get context(): Context {
+		const value = this.getAttribute("context") as Context;
+		return Object.values(Context).includes(value) ? value : Context.Info;
+	}
+	set context(value: Context) {
+		this.setAttribute("context", value);
+	}
+
+	/**
+	 * The child content displayed in the footer.
+	 */
+	set footer(value: DocumentFragment) { // eslint-disable-line accessor-pairs
+		const footer = this.querySelector<HTMLElement>(".modal-footer")!;
+		footer.hidden = !value.hasChildNodes();
+		footer.replaceChildren(...value.childNodes);
+	}
+
+	/**
+	 * 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.
+	 */
+	get modal(): boolean {
+		return this.hasAttribute("modal");
+	}
+	set modal(value: boolean) {
+		this.toggleAttribute("modal", value);
+	}
+
+	/**
+	 * Value indicating whether to initially show this message box.
+	 */
+	get open(): boolean {
+		return this.hasAttribute("open");
+	}
+	set open(value: boolean) {
+		this.toggleAttribute("open", value);
+	}
+
+	/**
+	 * Value indicating whether the body is scrollable.
+	 */
+	get scrollable(): boolean {
+		return this.hasAttribute("scrollable");
+	}
+	set scrollable(value: boolean) {
+		this.toggleAttribute("scrollable", value);
+	}
+
+	/**
+	 * Method invoked when an attribute has been changed.
+	 * @param attribute The attribute name.
+	 * @param oldValue The previous attribute value.
+	 * @param newValue The new attribute value.
+	 */
+	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;
+			// No default
+		}
+	}
+
+	/**
+	 * Shows an alert message with an "OK" button.
+	 * @param context The contextual modifier.
+	 * @param caption The title displayed in the header.
+	 * @param body The child content displayed in the body.
+	 * @returns The dialog box result.
+	 */
+	async alert(context: Context, caption: string, body: DocumentFragment|string): Promise<DialogResult> {
+		return await this.show(context, caption, body, [
+			{label: "OK", value: DialogResult.OK, variant: Variant.Primary}
+		]);
+	}
+
+	/**
+	 * Closes this message box.
+	 * @param result The dialog box result.
+	 */
+	close(result: DialogResult = DialogResult.None): void {
+		this.#result = result;
+		this.#modal.hide();
+	}
+
+	/**
+	 * Shows a confirmation message with two buttons, "OK" and "Cancel".
+	 * @param context The contextual modifier.
+	 * @param caption The title displayed in the header.
+	 * @param body The child content displayed in the body.
+	 * @returns The dialog box result.
+	 */
+	async confirm(context: Context, caption: string, body: DocumentFragment|string): Promise<DialogResult> {
+		return await this.show(context, caption, body, [
+			{label: "OK", value: DialogResult.OK, variant: Variant.Primary},
+			{label: "Annuler", value: DialogResult.Cancel, variant: Variant.Secondary}
+		]);
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 */
+	connectedCallback(): void {
+		this.#modal = new Modal(this.firstElementChild!);
+		if (this.open) void this.show();
+	}
+
+	/**
+	 * Method invoked when this component is disconnected.
+	 */
+	disconnectedCallback(): void {
+		this.#modal.dispose();
+	}
+
+	/**
+	 * Shows a message.
+	 * @param message The message to show.
+	 * @returns The dialog box result.
+	 */
+	show(message?: IMessage): Promise<DialogResult>;
+
+	/**
+	 * Shows a message.
+	 * @param context The contextual modifier.
+	 * @param caption The title displayed in the header.
+	 * @param body The child content displayed in the body.
+	 * @param buttons The buttons displayed in the footer.
+	 * @returns The dialog box result.
+	 */
+	show(context: Context, caption: string, body: DocumentFragment|string, buttons?: IDialogButton[]): Promise<DialogResult>;
+
+	/**
+	 * Shows a message.
+	 * @param message The message to show, or the contextual modifier.
+	 * @param caption The title displayed in the header.
+	 * @param body The child content displayed in the body.
+	 * @param buttons The buttons displayed in the footer.
+	 * @returns The dialog box result.
+	 */
+	show(message: IMessage|Context|null = null, caption = "", body: DocumentFragment|string = "", buttons: IDialogButton[] = []): Promise<DialogResult> {
+		if (typeof message == "string") {
+			const footer = document.createDocumentFragment();
+			footer.append(...buttons.map(button => this.#createButton(button)));
+			message = {context: message, caption, body, footer};
+		}
+
+		if (typeof message == "object" && message) {
+			this.body = typeof message.body == "string" ? createDocumentFragment(message.body) : message.body;
+			this.caption = message.caption;
+			this.context = message.context ?? Context.Info;
+			this.icon = message.icon ?? getIcon(this.context);
+
+			const footer = typeof message.footer == "string" ? createDocumentFragment(message.footer) : (message.footer ?? document.createDocumentFragment());
+			for (const button of footer.querySelectorAll("button")) button.addEventListener("click", this.#close);
+			this.footer = footer;
+		}
+
+		const {promise, resolve} = Promise.withResolvers<DialogResult>();
+		this.#resolve = resolve;
+		this.#result = DialogResult.None;
+		this.#modal.show();
+		return promise;
+	}
+
+	/**
+	 * Closes this message box.
+	 * @param event The dispatched event.
+	 */
+	readonly #close: (event: Event) => void = event => {
+		const button = (event.target as Element).closest("button")!;
+		this.close(Object.values(DialogResult).includes(button.value as DialogResult) ? button.value as DialogResult : DialogResult.None);
+	}
+
+	/**
+	 * Creates the component instance corresponding to the specified button.
+	 * @param button An object describing the appearance of the button.
+	 * @returns The component instance corresponding to the specified button.
+	 */
+	#createButton(button: IDialogButton): DialogButton {
+		const element = document.createElement("dialog-button");
+		const childContent = (this.#buttonTemplate.cloneNode(true) as DocumentFragment).querySelector("button")!;
+		childContent.addEventListener("click", this.#close);
+		element.appendChild(childContent);
+
+		element.context = button.context ?? null;
+		element.icon = button.icon ?? null;
+		element.label = button.label ?? "";
+		element.value = button.value ?? DialogResult.None;
+		element.variant = button.variant ?? null;
+		return element;
+	}
+
+	/**
+	 * Updates the message box animation.
+	 * @param value The new value.
+	 */
+	#updateAnimation(value: boolean): void {
+		this.firstElementChild!.classList.toggle("fade", value);
+	}
+
+	/**
+	 * Updates the title displayed in the header.
+	 * @param value The new value.
+	 */
+	#updateCaption(value: string): void {
+		this.querySelector(".modal-title")!.textContent = value.trim();
+	}
+
+	/**
+	 * Updates the value indicating whether to vertically center this message box.
+	 * @param value The new value.
+	 */
+	#updateCentered(value: boolean): void {
+		this.querySelector(".modal-dialog")!.classList.toggle("modal-dialog-centered", value);
+	}
+
+	/**
+	 * 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.
+	 * @param value The new value.
+	 */
+	#updateIcon(value: string|null): void {
+		this.querySelector(".modal-body > .icon")!.textContent = (value ?? "").trim() || getIcon(this.context);
+	}
+
+	/**
+	 * Updates the value indicating whether to this message box will not close when clicking outside of it.
+	 * @param value The new value.
+	 */
+	#updateModal(value: boolean): void {
+		(this.firstElementChild! as HTMLElement).dataset.bsBackdrop = value ? "static" : "true";
+	}
+
+	/**
+	 * Updates the body scrolling.
+	 * @param value The new value.
+	 */
+	#updateScrolling(value: boolean): void {
+		this.querySelector(".modal-dialog")!.classList.toggle("modal-dialog-scrollable", value);
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"message-box": MessageBox;
+	}
+}

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

@@ -89,15 +89,9 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	attributeChangedCallback(attribute: string, oldValue: string|null, newValue: string|null): void {
 		if (newValue != oldValue) switch (attribute) {
-			case "alignment":
-				this.#updateAlignment(Object.values(Alignment).includes(newValue as Alignment) ? newValue as Alignment : Alignment.End);
-				break;
-			case "apptheme":
-				this.#updateAppTheme(Object.values(AppTheme).includes(newValue as AppTheme) ? newValue as AppTheme : AppTheme.System);
-				break;
-			case "label":
-				this.#updateLabel(newValue ?? "");
-				break;
+			case "alignment": this.#updateAlignment(Object.values(Alignment).includes(newValue as Alignment) ? newValue as Alignment : Alignment.End); break;
+			case "apptheme": this.#updateAppTheme(Object.values(AppTheme).includes(newValue as AppTheme) ? newValue as AppTheme : AppTheme.System); break;
+			case "label": this.#updateLabel(newValue ?? ""); break;
 			// No default
 		}
 	}

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

@@ -55,7 +55,7 @@ export class Toast extends HTMLElement {
 	/**
 	 * The list of observed attributes.
 	 */
-	static readonly observedAttributes = ["animation", "caption", "context", "culture", "icon", "open"];
+	static readonly observedAttributes = ["animation", "autohide", "caption", "context", "culture", "delay", "icon"];
 
 	/**
 	 * The time units.
@@ -174,7 +174,8 @@ export class Toast extends HTMLElement {
 		return value.trim() || null;
 	}
 	set icon(value: string|null) {
-		this.toggleAttribute("icon", Boolean(value));
+		if (value) this.setAttribute("icon", value);
+		else this.removeAttribute("icon");
 	}
 
 	/**
@@ -196,11 +197,12 @@ export class Toast 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 "autohide": this.#updateAutoHide(newValue != null); break;
 			case "caption": this.#updateCaption(newValue ?? ""); break;
 			case "context": this.#updateContext(Object.values(Context).includes(newValue as Context) ? newValue as Context : Context.Info); break;
 			case "culture": this.#formatter = new Intl.RelativeTimeFormat((newValue ?? "").trim() || navigator.language, {style: "long"}); break;
+			case "delay": this.#updateDelay(Number(newValue)); break;
 			case "icon": this.#updateIcon(newValue); break;
-			case "open": this.#updateVisibility(newValue != null); break;
 			// No default
 		}
 	}
@@ -220,8 +222,8 @@ export class Toast extends HTMLElement {
 		toast.addEventListener("hidden.bs.toast", () => clearInterval(this.#timer));
 		toast.addEventListener("show.bs.toast", () => this.#timer = window.setInterval(this.#updateElapsedTime, 1_000));
 
-		const {animation, autoHide: autohide, delay} = this;
-		this.#toast = new BootstrapToast(toast, {animation, autohide, delay});
+		this.#toast = new BootstrapToast(toast);
+		if (this.open) this.show();
 	}
 
 	/**
@@ -260,11 +262,19 @@ export class Toast extends HTMLElement {
 	}
 
 	/**
-	 * Updates the toast animation.
+	 * Updates the value indicating whether to apply a fade transition.
 	 * @param value The new value.
 	 */
 	#updateAnimation(value: boolean): void {
-		this.firstElementChild!.classList.toggle("fade", value);
+		(this.firstElementChild! as HTMLElement).dataset.bsAnimation = value ? "true" : "false";
+	}
+
+	/**
+	 * Updates the value indicating whether to automatically hide this toast.
+	 * @param value The new value.
+	 */
+	#updateAutoHide(value: boolean): void {
+		(this.firstElementChild! as HTMLElement).dataset.bsAutohide = value ? "true" : "false";
 	}
 
 	/**
@@ -291,6 +301,15 @@ export class Toast extends HTMLElement {
 		classList.add(`text-${toCss(value)}`);
 	}
 
+	/**
+	 * Updates the delay to hide the toast.
+	 * @param value The new value.
+	 */
+	#updateDelay(value: number): void {
+		const delay = Math.max(0, Number.isNaN(value) ? 5_000 : value);
+		(this.firstElementChild! as HTMLElement).dataset.bsDelay = delay.toString();
+	}
+
 	/**
 	 * Updates the label corresponding to the elapsed time.
 	 */
@@ -306,14 +325,6 @@ export class Toast extends HTMLElement {
 	#updateIcon(value: string|null): void {
 		this.querySelector(".toast-header .icon")!.textContent = (value ?? "").trim() || getIcon(this.context);
 	}
-
-	/**
-	 * Updates the toast visibility.
-	 * @param value The new value.
-	 */
-	#updateVisibility(value: boolean): void {
-		this.firstElementChild!.classList.toggle("show", value);
-	}
 }
 
 /**