@cedx/base 0.15.3 → 0.16.0

package/ReadMe.md

@@ -1,7 +1,7 @@
-# Belin.io Base
-![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![Version](https://badgen.net/badge/project/v0.15.3/blue) ![Licence](https://badgen.net/badge/licence/MIT/blue)
+# Cédric Belin's Base
+![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![Version](https://badgen.net/badge/project/v0.16.0/blue) ![Licence](https://badgen.net/badge/licence/MIT/blue)
 
-Base library by [Cédric Belin](https://belin.io), full stack developer,
+Base library by [Cédric Belin](https://cedric-belin.fr), full stack developer,
 implemented in [C#](https://learn.microsoft.com/en-us/dotnet/csharp) and [TypeScript](https://www.typescriptlang.org).
 
 > This library is dedicated to personal/side projects.  
@@ -17,4 +17,4 @@ implemented in [C#](https://learn.microsoft.com/en-us/dotnet/csharp) and [TypeSc
 - [Submit an issue](https://github.com/cedx/base/issues)
 
 ## Licence
-[Belin.io Base](https://github.com/cedx/base) is distributed under the MIT License.
+[Cédric Belin's Base](https://github.com/cedx/base) is distributed under the MIT License.

package/lib/UI/Alignment.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Defines the alignment of a component.
+ */
+export declare const Alignment: Readonly<{
+    /**
+     * The element is aligned at the start.
+     */
+    Start: "Start";
+    /**
+     * The element is aligned in the center.
+     */
+    Center: "Center";
+    /**
+     * The element is aligned at the end.
+     */
+    End: "End";
+}>;
+/**
+ * Defines the alignment of a component.
+ */
+export type Alignment = typeof Alignment[keyof typeof Alignment];
+//# sourceMappingURL=Alignment.d.ts.map

package/lib/UI/Alignment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alignment.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Alignment.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,SAAS;IAErB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC"}

package/lib/UI/Alignment.js

@@ -0,0 +1,17 @@
+/**
+ * Defines the alignment of a component.
+ */
+export const Alignment = Object.freeze({
+    /**
+     * The element is aligned at the start.
+     */
+    Start: "Start",
+    /**
+     * The element is aligned in the center.
+     */
+    Center: "Center",
+    /**
+     * The element is aligned at the end.
+     */
+    End: "End"
+});

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

@@ -0,0 +1,57 @@
+import { Context } from "../Context.js";
+import { DialogResult } from "../DialogResult.js";
+import { Variant } from "../Variant.js";
+/**
+ * Represents a dialog box button.
+ */
+export declare class DialogButton extends HTMLElement {
+    #private;
+    /**
+     * The list of observed attributes.
+     */
+    static readonly observedAttributes: string[];
+    /**
+     * A contextual modifier.
+     */
+    get context(): Context | null;
+    set context(value: Context | null);
+    /**
+     * The button icon.
+     */
+    get icon(): string | null;
+    set icon(value: string | null);
+    /**
+     * The button label.
+     */
+    get label(): string;
+    set label(value: string);
+    /**
+     * The button value.
+     */
+    get value(): DialogResult;
+    set value(value: DialogResult);
+    /**
+     * A tone variant.
+     */
+    get variant(): Variant | null;
+    set variant(value: Variant | null);
+    /**
+     * 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;
+}
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "dialog-button": DialogButton;
+    }
+}
+//# sourceMappingURL=DialogButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogButton.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/DialogButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAsB,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAsB,MAAM,eAAe,CAAC;AAE3D;;GAEG;AACH,qBAAa,YAAa,SAAQ,WAAW;;IAE5C;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAoD;IAStF;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,GAAC,IAAI,CAG1B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,GAAC,IAAI,EAG9B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAG1B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,YAAY,CAGxB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,YAAY,EAE5B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,GAAC,IAAI,CAG1B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,GAAC,IAAI,EAG9B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;CA6D/F;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}

package/lib/UI/Components/DialogButton.js

@@ -0,0 +1,151 @@
+import { Context, toCss as contextCss } from "../Context.js";
+import { DialogResult } from "../DialogResult.js";
+import { Variant, toCss as variantCss } from "../Variant.js";
+/**
+ * Represents a dialog box button.
+ */
+export class DialogButton extends HTMLElement {
+    /**
+     * The list of observed attributes.
+     */
+    static observedAttributes = ["context", "icon", "label", "value", "variant"];
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("dialog-button", this);
+    }
+    /**
+     * A contextual modifier.
+     */
+    get context() {
+        const value = this.getAttribute("context");
+        return Object.values(Context).includes(value) ? value : null;
+    }
+    set context(value) {
+        if (value)
+            this.setAttribute("context", value);
+        else
+            this.removeAttribute("context");
+    }
+    /**
+     * The button icon.
+     */
+    get icon() {
+        const value = this.getAttribute("icon") ?? "";
+        return value.trim() || null;
+    }
+    set icon(value) {
+        if (value)
+            this.setAttribute("icon", value);
+        else
+            this.removeAttribute("icon");
+    }
+    /**
+     * The button label.
+     */
+    get label() {
+        return (this.getAttribute("label") ?? "").trim();
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    /**
+     * The button value.
+     */
+    get value() {
+        const value = this.getAttribute("value");
+        return Object.values(DialogResult).includes(value) ? value : DialogResult.None;
+    }
+    set value(value) {
+        this.setAttribute("value", value);
+    }
+    /**
+     * A tone variant.
+     */
+    get variant() {
+        const value = this.getAttribute("variant");
+        return Object.values(Variant).includes(value) ? value : null;
+    }
+    set variant(value) {
+        if (value)
+            this.setAttribute("variant", value);
+        else
+            this.removeAttribute("variant");
+    }
+    /**
+     * 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, oldValue, newValue) {
+        if (newValue != oldValue)
+            switch (attribute) {
+                case "context":
+                    this.#updateContext(Object.values(Context).includes(newValue) ? newValue : null);
+                    break;
+                case "icon":
+                    this.#updateIcon(newValue);
+                    break;
+                case "label":
+                    this.#updateLabel(newValue ?? "");
+                    break;
+                case "value":
+                    this.#updateValue(Object.values(DialogResult).includes(newValue) ? newValue : DialogResult.None);
+                    break;
+                case "variant":
+                    this.#updateVariant(Object.values(Variant).includes(newValue) ? newValue : null);
+                    break;
+                // No default
+            }
+    }
+    /**
+     * Updates the contextual modifier.
+     * @param value The new value.
+     */
+    #updateContext(value) {
+        const { classList } = this.querySelector("button");
+        classList.remove(...Object.values(Context).map(context => `btn-${contextCss(context)}`));
+        if (value)
+            classList.add(`btn-${contextCss(value)}`);
+    }
+    /**
+     * Updates the button icon.
+     * @param value The new value.
+     */
+    #updateIcon(value) {
+        const element = this.querySelector(".icon");
+        const icon = (value ?? "").trim();
+        element.textContent = icon;
+        element.hidden = !icon;
+    }
+    /**
+     * Updates the button label.
+     * @param value The new value.
+     */
+    #updateLabel(value) {
+        const element = this.querySelector("span");
+        const label = value.trim();
+        element.textContent = label;
+        element.hidden = !label;
+        this.querySelector(".icon").classList.toggle("me-1", !element.hidden);
+    }
+    /**
+     * Updates the button value.
+     * @param value The new value.
+     */
+    #updateValue(value) {
+        this.querySelector("button").value = value;
+    }
+    /**
+     * Updates the tone variant.
+     * @param value The new value.
+     */
+    #updateVariant(value) {
+        const { classList } = this.querySelector("button");
+        classList.remove(...Object.values(Variant).map(variant => `btn-${variantCss(variant)}`));
+        if (value)
+            classList.add(`btn-${variantCss(value)}`);
+    }
+}

package/lib/UI/Components/KeyboardAccelerator.js

@@ -31,7 +31,7 @@ export class KeyboardAccelerator extends HTMLElement {
             .reduce((modifiers, value) => modifiers | (KeyboardAccelerator.#modifiers.get(value) ?? 0), KeyboardModifiers.None);
     }
     set modifiers(value) {
-        this.setAttribute("modifiers", KeyboardAccelerator.#modifiers.entries()
+        this.setAttribute("modifiers", !value ? "None" : KeyboardAccelerator.#modifiers.entries()
             .filter(([, flag]) => (value & flag) != 0)
             .map(([key]) => key)
             .toArray().join(", "));

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

@@ -1,5 +1,5 @@
+import { Alignment } from "../Alignment.js";
 import { AppTheme } from "../AppTheme.js";
-import { MenuAlignment } from "../MenuAlignment.js";
 /**
  * A dropdown menu for switching the application theme.
  */
@@ -16,8 +16,8 @@ export declare class ThemeDropdown extends HTMLElement {
     /**
      * The alignment of the dropdown menu.
      */
-    get alignment(): MenuAlignment;
-    set alignment(value: MenuAlignment);
+    get alignment(): Alignment;
+    set alignment(value: Alignment);
     /**
      * The current application theme.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeDropdown.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/ThemeDropdown.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAU,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAElD;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;;IAE7C;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAsC;IAYxE;;OAEG;;IAaH;;OAEG;IACH,IAAI,SAAS,IAAI,aAAa,CAG7B;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,aAAa,EAEjC;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,QAAQ,CAGvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAE3B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,CAGvB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,EAE3B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAe/F;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAQzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;CAkDZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}
+{"version":3,"file":"ThemeDropdown.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/ThemeDropdown.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAU,MAAM,gBAAgB,CAAC;AAEjD;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;;IAE7C;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAsC;IAYxE;;OAEG;;IAaH;;OAEG;IACH,IAAI,SAAS,IAAI,SAAS,CAGzB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,SAAS,EAE7B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,QAAQ,CAGvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAE3B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,CAGvB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,EAE3B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAe/F;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAQzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;CAgDZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}

package/lib/UI/Components/ThemeDropdown.js

@@ -1,6 +1,6 @@
 import { Dropdown } from "bootstrap";
+import { Alignment } from "../Alignment.js";
 import { AppTheme, getIcon } from "../AppTheme.js";
-import { MenuAlignment } from "../MenuAlignment.js";
 /**
  * A dropdown menu for switching the application theme.
  */
@@ -36,7 +36,7 @@ export class ThemeDropdown extends HTMLElement {
      */
     get alignment() {
         const value = this.getAttribute("alignment");
-        return Object.values(MenuAlignment).includes(value) ? value : MenuAlignment.End;
+        return Object.values(Alignment).includes(value) ? value : Alignment.End;
     }
     set alignment(value) {
         this.setAttribute("alignment", value);
@@ -81,7 +81,7 @@ export class ThemeDropdown extends HTMLElement {
         if (newValue != oldValue)
             switch (attribute) {
                 case "alignment":
-                    this.#updateAlignment(Object.values(MenuAlignment).includes(newValue) ? newValue : MenuAlignment.End);
+                    this.#updateAlignment(Object.values(Alignment).includes(newValue) ? newValue : Alignment.End);
                     break;
                 case "apptheme":
                     this.#updateAppTheme(Object.values(AppTheme).includes(newValue) ? newValue : AppTheme.System);
@@ -149,11 +149,7 @@ export class ThemeDropdown extends HTMLElement {
      * @param value The new value.
      */
     #updateAlignment(value) {
-        const { classList } = this.querySelector(".dropdown-menu");
-        if (value == MenuAlignment.End)
-            classList.add("dropdown-menu-end");
-        else
-            classList.remove("dropdown-menu-end");
+        this.querySelector(".dropdown-menu").classList.toggle("dropdown-menu-end", value == Alignment.End);
     }
     /**
      * Updates the application theme.

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

@@ -49,8 +49,8 @@ export declare class Toast extends HTMLElement {
     /**
      * The icon displayed next to the caption.
      */
-    get icon(): string;
-    set icon(value: string);
+    get icon(): string | null;
+    set icon(value: string | null);
     /**
      * Value indicating whether to initially show this toast.
      */

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,qBAAa,KAAM,SAAQ,WAAW;;IAErC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAqD;IAkCvF;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED;;OAEG;IACH,IAAI,YAAY,CAAC,KAAK,EAAE,gBAAgB,EAEvC;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,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAGtB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAoB/F;;OAEG;IACH,iBAAiB,IAAI,IAAI;IASzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;CA2EZ;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,qBAAa,KAAM,SAAQ,WAAW;;IAErC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAkE;IAkCpG;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED;;OAEG;IACH,IAAI,YAAY,CAAC,KAAK,EAAE,gBAAgB,EAEvC;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,EAGtB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAY/F;;OAEG;IACH,iBAAiB,IAAI,IAAI;IASzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;CA+EZ;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 = ["caption", "context", "culture", "icon", "open"];
+    static observedAttributes = ["animation", "caption", "context", "culture", "icon", "open"];
     /**
      * The time units.
      */
@@ -114,10 +114,13 @@ export class Toast extends HTMLElement {
      */
     get icon() {
         const value = this.getAttribute("icon") ?? "";
-        return value.trim() || getIcon(this.context);
+        return value.trim() || null;
     }
     set icon(value) {
-        this.setAttribute("icon", value);
+        if (value)
+            this.setAttribute("icon", value);
+        else
+            this.removeAttribute("icon");
     }
     /**
      * Value indicating whether to initially show this toast.
@@ -140,6 +143,9 @@ export class Toast extends HTMLElement {
     attributeChangedCallback(attribute, oldValue, newValue) {
         if (newValue != oldValue)
             switch (attribute) {
+                case "animation":
+                    this.#updateAnimation(newValue != null);
+                    break;
                 case "caption":
                     this.#updateCaption(newValue ?? "");
                     break;
@@ -150,10 +156,11 @@ export class Toast extends HTMLElement {
                     this.#formatter = new Intl.RelativeTimeFormat((newValue ?? "").trim() || navigator.language, { style: "long" });
                     break;
                 case "icon":
-                    this.#updateIcon(newValue ?? "");
+                    this.#updateIcon(newValue);
                     break;
                 case "open":
-                    this.#updateVisibility();
+                    this.#updateVisibility(newValue != null);
+                    break;
                 // No default
             }
     }
@@ -203,6 +210,13 @@ export class Toast extends HTMLElement {
         }
         return this.#formatter.format(Math.ceil(-elapsed), Toast.#timeUnits[index]);
     }
+    /**
+     * Updates the toast animation.
+     * @param value The new value.
+     */
+    #updateAnimation(value) {
+        this.firstElementChild.classList.toggle("fade", value);
+    }
     /**
      * Updates the title displayed in the header.
      * @param value The new value.
@@ -211,7 +225,7 @@ export class Toast extends HTMLElement {
         this.querySelector(".toast-header b").textContent = value.trim();
     }
     /**
-     * Updates the title displayed in the header.
+     * Updates the contextual modifier.
      * @param value The new value.
      */
     #updateContext(value) {
@@ -235,19 +249,13 @@ export class Toast extends HTMLElement {
      * @param value The new value.
      */
     #updateIcon(value) {
-        this.querySelector(".toast-header .icon").textContent = value.trim() || getIcon(this.context);
+        this.querySelector(".toast-header .icon").textContent = (value ?? "").trim() || getIcon(this.context);
     }
     /**
      * Updates the toast visibility.
+     * @param value The new value.
      */
-    #updateVisibility() {
-        const { classList } = this.firstElementChild;
-        if (!this.open)
-            classList.remove("show");
-        else {
-            if (this.animation)
-                classList.add("fade");
-            classList.add("show");
-        }
+    #updateVisibility(value) {
+        this.firstElementChild.classList.toggle("show", value);
     }
 }

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

@@ -74,8 +74,8 @@ export declare class Toaster extends HTMLElement {
     /**
      * The default icon displayed next to the captions.
      */
-    get icon(): string;
-    set icon(value: string);
+    get icon(): string | null;
+    set icon(value: string | null);
     /**
      * The toaster placement.
      */

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;AAE/C;;GAEG;AACH,MAAM,WAAW,MAAM;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,YAAY,EAAE,gBAAgB,GAAC,MAAM,CAAC;IAEtC;;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,CAAC;CACd;AAED;;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,EAG3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;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,CAEjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;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,YAAY,EAAE,gBAAgB,GAAC,MAAM,GAAG,IAAI;IAItF;;;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;AAE/C;;GAEG;AACH,MAAM,WAAW,MAAM;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,YAAY,EAAE,gBAAgB,GAAC,MAAM,CAAC;IAEtC;;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,CAAC;CACd;AAED;;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,EAG3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;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;IAS/F;;;;;OAKG;IACH,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,gBAAgB,GAAC,MAAM,GAAG,IAAI;IAItF;;;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"}

package/lib/UI/Components/Toaster.js

@@ -77,10 +77,14 @@ export class Toaster extends HTMLElement {
      * The default icon displayed next to the captions.
      */
     get icon() {
-        return (this.getAttribute("icon") ?? "").trim();
+        const value = this.getAttribute("icon") ?? "";
+        return value.trim() || null;
     }
     set icon(value) {
-        this.setAttribute("icon", value);
+        if (value)
+            this.setAttribute("icon", value);
+        else
+            this.removeAttribute("icon");
     }
     /**
      * The toaster placement.

package/lib/UI/DialogResult.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Specifies the return value of a dialog box.
+ */
+export declare const DialogResult: Readonly<{
+    /**
+     * The dialog box does not return any value.
+     */
+    None: "None";
+    /**
+     * The return value of the dialog box is "OK".
+     */
+    OK: "OK";
+    /**
+     * The return value of the dialog box is "Cancel".
+     */
+    Cancel: "Cancel";
+    /**
+     * The return value of the dialog box is "Abort".
+     */
+    Abort: "Abort";
+    /**
+     * The return value of the dialog box is "Retry".
+     */
+    Retry: "Retry";
+    /**
+     * The return value of the dialog box is "Ignore".
+     */
+    Ignore: "Ignore";
+    /**
+     * The return value of the dialog box is "Yes".
+     */
+    Yes: "Yes";
+    /**
+     * The return value of the dialog box is "No".
+     */
+    No: "No";
+}>;
+/**
+ * Specifies the return value of a dialog box.
+ */
+export type DialogResult = typeof DialogResult[keyof typeof DialogResult];
+//# sourceMappingURL=DialogResult.d.ts.map

package/lib/UI/DialogResult.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogResult.d.ts","sourceRoot":"","sources":["../../src/Client/UI/DialogResult.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,YAAY;IAExB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC"}

package/lib/UI/DialogResult.js

@@ -0,0 +1,37 @@
+/**
+ * Specifies the return value of a dialog box.
+ */
+export const DialogResult = Object.freeze({
+    /**
+     * The dialog box does not return any value.
+     */
+    None: "None",
+    /**
+     * The return value of the dialog box is "OK".
+     */
+    OK: "OK",
+    /**
+     * The return value of the dialog box is "Cancel".
+     */
+    Cancel: "Cancel",
+    /**
+     * The return value of the dialog box is "Abort".
+     */
+    Abort: "Abort",
+    /**
+     * The return value of the dialog box is "Retry".
+     */
+    Retry: "Retry",
+    /**
+     * The return value of the dialog box is "Ignore".
+     */
+    Ignore: "Ignore",
+    /**
+     * The return value of the dialog box is "Yes".
+     */
+    Yes: "Yes",
+    /**
+     * The return value of the dialog box is "No".
+     */
+    No: "No"
+});

package/package.json

@@ -7,7 +7,7 @@
 	"name": "@cedx/base",
 	"repository": "cedx/base",
 	"type": "module",
-	"version": "0.15.3",
+	"version": "0.16.0",
 	"devDependencies": {
 		"@playwright/browser-chromium": "^1.55.0",
 		"@types/bootstrap": "^5.2.10",
@@ -45,8 +45,7 @@
 		"library"
 	],
 	"peerDependencies": {
-		"bootstrap": ">=5.3.0",
-		"lit": ">=3.3.0"
+		"bootstrap": ">=5.3.0"
 	},
 	"publishConfig": {
 		"access": "public"

package/src/Client/UI/Alignment.ts

@@ -0,0 +1,25 @@
+/**
+ * Defines the alignment of a component.
+ */
+export const Alignment = Object.freeze({
+
+	/**
+	 * The element is aligned at the start.
+	 */
+	Start: "Start",
+
+	/**
+	 * The element is aligned in the center.
+	 */
+	Center: "Center",
+
+	/**
+	 * The element is aligned at the end.
+	 */
+	End: "End"
+});
+
+/**
+ * Defines the alignment of a component.
+ */
+export type Alignment = typeof Alignment[keyof typeof Alignment];

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

@@ -0,0 +1,159 @@
+import {Context, toCss as contextCss} from "../Context.js";
+import {DialogResult} from "../DialogResult.js";
+import {Variant, toCss as variantCss} from "../Variant.js";
+
+/**
+ * Represents a dialog box button.
+ */
+export class DialogButton extends HTMLElement {
+
+	/**
+	 * The list of observed attributes.
+	 */
+	static readonly observedAttributes = ["context", "icon", "label", "value", "variant"];
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("dialog-button", this);
+	}
+
+	/**
+	 * A contextual modifier.
+	 */
+	get context(): Context|null {
+		const value = this.getAttribute("context") as Context;
+		return Object.values(Context).includes(value) ? value : null;
+	}
+	set context(value: Context|null) {
+		if (value) this.setAttribute("context", value);
+		else this.removeAttribute("context");
+	}
+
+	/**
+	 * The button icon.
+	 */
+	get icon(): string|null {
+		const value = this.getAttribute("icon") ?? "";
+		return value.trim() || null;
+	}
+	set icon(value: string|null) {
+		if (value) this.setAttribute("icon", value);
+		else this.removeAttribute("icon");
+	}
+
+	/**
+	 * The button label.
+	 */
+	get label(): string {
+		return (this.getAttribute("label") ?? "").trim();
+	}
+	set label(value: string) {
+		this.setAttribute("label", value);
+	}
+
+	/**
+	 * The button value.
+	 */
+	get value(): DialogResult {
+		const value = this.getAttribute("value") as DialogResult;
+		return Object.values(DialogResult).includes(value) ? value : DialogResult.None;
+	}
+	set value(value: DialogResult) {
+		this.setAttribute("value", value);
+	}
+
+	/**
+	 * A tone variant.
+	 */
+	get variant(): Variant|null {
+		const value = this.getAttribute("variant") as Variant;
+		return Object.values(Variant).includes(value) ? value : null;
+	}
+	set variant(value: Variant|null) {
+		if (value) this.setAttribute("variant", value);
+		else this.removeAttribute("variant");
+	}
+
+	/**
+	 * 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 "context": this.#updateContext(Object.values(Context).includes(newValue as Context) ? newValue as Context : null); break;
+			case "icon": this.#updateIcon(newValue); break;
+			case "label": this.#updateLabel(newValue ?? ""); break;
+			case "value": this.#updateValue(Object.values(DialogResult).includes(newValue as DialogResult) ? newValue as DialogResult : DialogResult.None); break;
+			case "variant": this.#updateVariant(Object.values(Variant).includes(newValue as Variant) ? newValue as Variant : null); break;
+			// No default
+		}
+	}
+
+	/**
+	 * Updates the contextual modifier.
+	 * @param value The new value.
+	 */
+	#updateContext(value: Context|null): void {
+		const {classList} = this.querySelector("button")!;
+		classList.remove(...Object.values(Context).map(context => `btn-${contextCss(context)}`));
+		if (value) classList.add(`btn-${contextCss(value)}`);
+	}
+
+	/**
+	 * Updates the button icon.
+	 * @param value The new value.
+	 */
+	#updateIcon(value: string|null): void {
+		const element = this.querySelector<HTMLElement>(".icon")!;
+		const icon = (value ?? "").trim();
+		element.textContent = icon;
+		element.hidden = !icon;
+	}
+
+	/**
+	 * Updates the button label.
+	 * @param value The new value.
+	 */
+	#updateLabel(value: string): void {
+		const element = this.querySelector("span")!;
+		const label = value.trim();
+		element.textContent = label;
+		element.hidden = !label;
+		this.querySelector(".icon")!.classList.toggle("me-1", !element.hidden);
+	}
+
+	/**
+	 * Updates the button value.
+	 * @param value The new value.
+	 */
+	#updateValue(value: DialogResult): void {
+		this.querySelector("button")!.value = value;
+	}
+
+	/**
+	 * Updates the tone variant.
+	 * @param value The new value.
+	 */
+	#updateVariant(value: Variant|null): void {
+		const {classList} = this.querySelector("button")!;
+		classList.remove(...Object.values(Variant).map(variant => `btn-${variantCss(variant)}`));
+		if (value) classList.add(`btn-${variantCss(value)}`);
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"dialog-button": DialogButton;
+	}
+}

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

@@ -36,7 +36,7 @@ export class KeyboardAccelerator extends HTMLElement {
 			.reduce<number>((modifiers, value) => modifiers | (KeyboardAccelerator.#modifiers.get(value) ?? 0), KeyboardModifiers.None);
 	}
 	set modifiers(value: number) {
-		this.setAttribute("modifiers", KeyboardAccelerator.#modifiers.entries()
+		this.setAttribute("modifiers", !value ? "None" : KeyboardAccelerator.#modifiers.entries()
 			.filter(([, flag]) => (value & flag) != 0)
 			.map(([key]) => key)
 			.toArray().join(", "));

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

@@ -1,6 +1,6 @@
 import {Dropdown} from "bootstrap";
+import {Alignment} from "../Alignment.js";
 import {AppTheme, getIcon} from "../AppTheme.js";
-import {MenuAlignment} from "../MenuAlignment.js";
 
 /**
  * A dropdown menu for switching the application theme.
@@ -40,11 +40,11 @@ export class ThemeDropdown extends HTMLElement {
 	/**
 	 * The alignment of the dropdown menu.
 	 */
-	get alignment(): MenuAlignment {
-		const value = this.getAttribute("alignment") as MenuAlignment;
-		return Object.values(MenuAlignment).includes(value) ? value : MenuAlignment.End;
+	get alignment(): Alignment {
+		const value = this.getAttribute("alignment") as Alignment;
+		return Object.values(Alignment).includes(value) ? value : Alignment.End;
 	}
-	set alignment(value: MenuAlignment) {
+	set alignment(value: Alignment) {
 		this.setAttribute("alignment", value);
 	}
 
@@ -90,7 +90,7 @@ 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(MenuAlignment).includes(newValue as MenuAlignment) ? newValue as MenuAlignment : MenuAlignment.End);
+				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);
@@ -165,10 +165,8 @@ export class ThemeDropdown extends HTMLElement {
 	 * Updates the alignment of the dropdown menu.
 	 * @param value The new value.
 	 */
-	#updateAlignment(value: MenuAlignment): void {
-		const {classList} = this.querySelector(".dropdown-menu")!;
-		if (value == MenuAlignment.End) classList.add("dropdown-menu-end");
-		else classList.remove("dropdown-menu-end");
+	#updateAlignment(value: Alignment): void {
+		this.querySelector(".dropdown-menu")!.classList.toggle("dropdown-menu-end", value == Alignment.End);
 	}
 
 	/**

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

@@ -9,7 +9,7 @@ export class Toast extends HTMLElement {
 	/**
 	 * The list of observed attributes.
 	 */
-	static readonly observedAttributes = ["caption", "context", "culture", "icon", "open"];
+	static readonly observedAttributes = ["animation", "caption", "context", "culture", "icon", "open"];
 
 	/**
 	 * The time units.
@@ -125,12 +125,13 @@ export class Toast extends HTMLElement {
 	/**
 	 * The icon displayed next to the caption.
 	 */
-	get icon(): string {
+	get icon(): string|null {
 		const value = this.getAttribute("icon") ?? "";
-		return value.trim() || getIcon(this.context);
+		return value.trim() || null;
 	}
-	set icon(value: string) {
-		this.setAttribute("icon", value);
+	set icon(value: string|null) {
+		if (value) this.setAttribute("icon", value);
+		else this.removeAttribute("icon");
 	}
 
 	/**
@@ -152,20 +153,12 @@ export class Toast extends HTMLElement {
 	 */
 	attributeChangedCallback(attribute: string, oldValue: string|null, newValue: string|null): void {
 		if (newValue != oldValue) switch (attribute) {
-			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 "icon":
-				this.#updateIcon(newValue ?? "");
-				break;
-			case "open":
-				this.#updateVisibility();
+			case "animation": this.#updateAnimation(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 "icon": this.#updateIcon(newValue); break;
+			case "open": this.#updateVisibility(newValue != null); break;
 			// No default
 		}
 	}
@@ -224,6 +217,14 @@ export class Toast extends HTMLElement {
 		return this.#formatter.format(Math.ceil(-elapsed), Toast.#timeUnits[index]);
 	}
 
+	/**
+	 * Updates the toast 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.
@@ -233,7 +234,7 @@ export class Toast extends HTMLElement {
 	}
 
 	/**
-	 * Updates the title displayed in the header.
+	 * Updates the contextual modifier.
 	 * @param value The new value.
 	 */
 	#updateContext(value: Context): void {
@@ -260,20 +261,16 @@ export class Toast extends HTMLElement {
 	 * Updates the icon displayed next to the caption.
 	 * @param value The new value.
 	 */
-	#updateIcon(value: string): void {
-		this.querySelector(".toast-header .icon")!.textContent = value.trim() || getIcon(this.context);
+	#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(): void {
-		const {classList} = this.firstElementChild!;
-		if (!this.open) classList.remove("show");
-		else {
-			if (this.animation) classList.add("fade");
-			classList.add("show");
-		}
+	#updateVisibility(value: boolean): void {
+		this.firstElementChild!.classList.toggle("show", value);
 	}
 }
 

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

@@ -128,11 +128,13 @@ export class Toaster extends HTMLElement {
 	/**
 	 * The default icon displayed next to the captions.
 	 */
-	get icon(): string {
-		return (this.getAttribute("icon") ?? "").trim();
+	get icon(): string|null {
+		const value = this.getAttribute("icon") ?? "";
+		return value.trim() || null;
 	}
-	set icon(value: string) {
-		this.setAttribute("icon", value);
+	set icon(value: string|null) {
+		if (value) this.setAttribute("icon", value);
+		else this.removeAttribute("icon");
 	}
 
 	/**

package/src/Client/UI/DialogResult.ts

@@ -0,0 +1,50 @@
+/**
+ * Specifies the return value of a dialog box.
+ */
+export const DialogResult = Object.freeze({
+
+	/**
+	 * The dialog box does not return any value.
+	 */
+	None: "None",
+
+	/**
+	 * The return value of the dialog box is "OK".
+	 */
+	OK: "OK",
+
+	/**
+	 * The return value of the dialog box is "Cancel".
+	 */
+	Cancel: "Cancel",
+
+	/**
+	 * The return value of the dialog box is "Abort".
+	 */
+	Abort: "Abort",
+
+	/**
+	 * The return value of the dialog box is "Retry".
+	 */
+	Retry: "Retry",
+
+	/**
+	 * The return value of the dialog box is "Ignore".
+	 */
+	Ignore: "Ignore",
+
+	/**
+	 * The return value of the dialog box is "Yes".
+	 */
+	Yes: "Yes",
+
+	/**
+	 * The return value of the dialog box is "No".
+	 */
+	No: "No"
+});
+
+/**
+ * Specifies the return value of a dialog box.
+ */
+export type DialogResult = typeof DialogResult[keyof typeof DialogResult];

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

@@ -1,24 +0,0 @@
-import { LitElement, type CSSResultGroup } from "lit";
-/**
- * Optional base class for UI components. Alternatively, components may extend {@link LitElement} directly.
- */
-export declare abstract class ComponentBase extends LitElement {
-    #private;
-    /**
-     * The component styles.
-     */
-    static styles: CSSResultGroup;
-    /**
-     * Creates a new component.
-     * @param options Value indicating whether a shadow DOM tree should be attached to this component.
-     */
-    constructor(options?: {
-        attachShadow?: boolean;
-    });
-    /**
-     * Returns the node into which this component should render.
-     * @returns The node into which this component should render.
-     */
-    protected createRenderRoot(): DocumentFragment | HTMLElement;
-}
-//# sourceMappingURL=ComponentBase.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ComponentBase.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/ComponentBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,KAAK,cAAc,EAAC,MAAM,KAAK,CAAC;AAEpD;;GAEG;AACH,8BAAsB,aAAc,SAAQ,UAAU;;IAErD;;OAEG;IACH,OAAgB,MAAM,EAAE,cAAc,CAAiC;IAOvE;;;OAGG;gBACS,OAAO,GAAE;QAAC,YAAY,CAAC,EAAE,OAAO,CAAA;KAAM;IAKlD;;;OAGG;cACgB,gBAAgB,IAAI,gBAAgB,GAAC,WAAW;CAGnE"}

package/lib/UI/Components/ComponentBase.js

@@ -1,29 +0,0 @@
-import { LitElement } from "lit";
-/**
- * Optional base class for UI components. Alternatively, components may extend {@link LitElement} directly.
- */
-export class ComponentBase extends LitElement {
-    /**
-     * The component styles.
-     */
-    static styles = [document.adoptedStyleSheets];
-    /**
-     * Value indicating whether a shadow DOM tree should be attached to this component.
-     */
-    #attachShadow;
-    /**
-     * Creates a new component.
-     * @param options Value indicating whether a shadow DOM tree should be attached to this component.
-     */
-    constructor(options = {}) {
-        super();
-        this.#attachShadow = options.attachShadow ?? false;
-    }
-    /**
-     * Returns the node into which this component should render.
-     * @returns The node into which this component should render.
-     */
-    createRenderRoot() {
-        return this.#attachShadow ? super.createRenderRoot() : this;
-    }
-}

package/lib/UI/MenuAlignment.d.ts

@@ -1,18 +0,0 @@
-/**
- * Defines the alignment of a dropdown menu.
- */
-export declare const MenuAlignment: Readonly<{
-    /**
-     * The dropdown menu is left aligned.
-     */
-    Start: "Start";
-    /**
-     * The dropdown menu is right aligned.
-     */
-    End: "End";
-}>;
-/**
- * Defines the alignment of a dropdown menu.
- */
-export type MenuAlignment = typeof MenuAlignment[keyof typeof MenuAlignment];
-//# sourceMappingURL=MenuAlignment.d.ts.map

package/lib/UI/MenuAlignment.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuAlignment.d.ts","sourceRoot":"","sources":["../../src/Client/UI/MenuAlignment.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,aAAa;IAEzB;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,aAAa,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC"}

package/lib/UI/MenuAlignment.js

@@ -1,13 +0,0 @@
-/**
- * Defines the alignment of a dropdown menu.
- */
-export const MenuAlignment = Object.freeze({
-    /**
-     * The dropdown menu is left aligned.
-     */
-    Start: "Start",
-    /**
-     * The dropdown menu is right aligned.
-     */
-    End: "End"
-});

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

@@ -1,34 +0,0 @@
-import {LitElement, type CSSResultGroup} from "lit";
-
-/**
- * Optional base class for UI components. Alternatively, components may extend {@link LitElement} directly.
- */
-export abstract class ComponentBase extends LitElement {
-
-	/**
-	 * The component styles.
-	 */
-	static override styles: CSSResultGroup = [document.adoptedStyleSheets];
-
-	/**
-	 * Value indicating whether a shadow DOM tree should be attached to this component.
-	 */
-	readonly #attachShadow: boolean;
-
-	/**
-	 * Creates a new component.
-	 * @param options Value indicating whether a shadow DOM tree should be attached to this component.
-	 */
-	constructor(options: {attachShadow?: boolean} = {}) {
-		super();
-		this.#attachShadow = options.attachShadow ?? false;
-	}
-
-	/**
-	 * Returns the node into which this component should render.
-	 * @returns The node into which this component should render.
-	 */
-	protected override createRenderRoot(): DocumentFragment|HTMLElement {
-		return this.#attachShadow ? super.createRenderRoot() : this;
-	}
-}

package/src/Client/UI/MenuAlignment.ts

@@ -1,20 +0,0 @@
-/**
- * Defines the alignment of a dropdown menu.
- */
-export const MenuAlignment = Object.freeze({
-
-	/**
-	 * The dropdown menu is left aligned.
-	 */
-	Start: "Start",
-
-	/**
-	 * The dropdown menu is right aligned.
-	 */
-	End: "End"
-});
-
-/**
- * Defines the alignment of a dropdown menu.
- */
-export type MenuAlignment = typeof MenuAlignment[keyof typeof MenuAlignment];