@cedx/base 0.19.0 → 0.21.0

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

@@ -4,14 +4,39 @@
 export declare class LoadingIndicator extends HTMLElement {
     #private;
     /**
-     * Hides the loading indicator.
+     * The list of observed attributes.
+     */
+    static readonly observedAttributes: string[];
+    /**
+     * Value indicating whether to apply a transition.
+     */
+    get fade(): boolean;
+    set fade(value: boolean);
+    /**
+     * Value indicating whether to initially show this component.
+     */
+    get open(): boolean;
+    set open(value: boolean);
+    /**
+     * 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;
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback(): void;
+    /**
+     * Hides this loading indicator.
      * @param options Value indicating whether to force the loading indicator to hide.
      */
     hide(options?: {
         force?: boolean;
     }): void;
     /**
-     * Shows the loading indicator.
+     * Shows this loading indicator.
      */
     show(): void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingIndicator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/LoadingIndicator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;;IAchD;;;OAGG;IACH,IAAI,CAAC,OAAO,GAAE;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAM,GAAG,IAAI;IAS3C;;OAEG;IACH,IAAI,IAAI,IAAI;CAKZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,gBAAgB,CAAC;KACtC;CACD"}
+{"version":3,"file":"LoadingIndicator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/LoadingIndicator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;;IAEhD;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAY;IAc9C;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;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;IAO/F;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAIzB;;;OAGG;IACH,IAAI,CAAC,OAAO,GAAE;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAM,GAAG,IAAI;IAU3C;;OAEG;IACH,IAAI,IAAI,IAAI;CAcZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,gBAAgB,CAAC;KACtC;CACD"}

package/lib/UI/Components/LoadingIndicator.js

@@ -2,6 +2,10 @@
  * A component that shows up when an HTTP request starts, and hides when all concurrent HTTP requests are completed.
  */
 export class LoadingIndicator extends HTMLElement {
+    /**
+     * The list of observed attributes.
+     */
+    static observedAttributes = ["fade"];
     /**
      * The number of concurrent HTTP requests.
      */
@@ -13,7 +17,47 @@ export class LoadingIndicator extends HTMLElement {
         customElements.define("loading-indicator", this);
     }
     /**
-     * Hides the loading indicator.
+     * Value indicating whether to apply a transition.
+     */
+    get fade() {
+        return this.hasAttribute("fade");
+    }
+    set fade(value) {
+        this.toggleAttribute("fade", value);
+    }
+    /**
+     * Value indicating whether to initially show this component.
+     */
+    get open() {
+        return this.hasAttribute("open");
+    }
+    set open(value) {
+        this.toggleAttribute("open", 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, oldValue, newValue) {
+        if (newValue != oldValue)
+            switch (attribute) {
+                case "fade":
+                    this.#updateFade(newValue != null);
+                    break;
+                // No default
+            }
+    }
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback() {
+        if (this.open)
+            this.show();
+    }
+    /**
+     * Hides this loading indicator.
      * @param options Value indicating whether to force the loading indicator to hide.
      */
     hide(options = {}) {
@@ -22,14 +66,23 @@ export class LoadingIndicator extends HTMLElement {
             this.#requestCount = 0;
             this.classList.add("hide");
             this.classList.remove("show");
+            document.body.classList.remove("loading");
         }
     }
     /**
-     * Shows the loading indicator.
+     * Shows this loading indicator.
      */
     show() {
         this.#requestCount++;
         this.classList.remove("hide");
         this.classList.add("show");
+        document.body.classList.add("loading");
+    }
+    /**
+     * Updates the value indicating whether to apply a transition.
+     * @param value The new value.
+     */
+    #updateFade(value) {
+        this.classList.toggle("fade", value);
     }
 }

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

@@ -3,6 +3,27 @@
  */
 export declare class OfflineIndicator extends HTMLElement {
     #private;
+    /**
+     * The list of observed attributes.
+     */
+    static readonly observedAttributes: string[];
+    /**
+     * Value indicating whether to apply a transition.
+     */
+    get fade(): boolean;
+    set fade(value: boolean);
+    /**
+     * Value indicating whether to initially show this component.
+     */
+    get open(): boolean;
+    set open(value: boolean);
+    /**
+     * 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;
     /**
      * Method invoked when this component is connected.
      */
@@ -11,6 +32,14 @@ export declare class OfflineIndicator extends HTMLElement {
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback(): void;
+    /**
+     * Hides this offline indicator.
+     */
+    hide(): void;
+    /**
+     * Shows this offline indicator.
+     */
+    show(): void;
 }
 /**
  * Declaration merging.

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

@@ -1 +1 @@
-{"version":3,"file":"OfflineIndicator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/OfflineIndicator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;;IAShD;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAW5B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,gBAAgB,CAAC;KACtC;CACD"}
+{"version":3,"file":"OfflineIndicator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/OfflineIndicator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;;IAEhD;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAY;IAS9C;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;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;IAO/F;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAKZ;;OAEG;IACH,IAAI,IAAI,IAAI;CAoBZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,gBAAgB,CAAC;KACtC;CACD"}

package/lib/UI/Components/OfflineIndicator.js

@@ -2,32 +2,95 @@
  * A component that shows up when the network is unavailable, and hides when connectivity is restored.
  */
 export class OfflineIndicator extends HTMLElement {
+    /**
+     * The list of observed attributes.
+     */
+    static observedAttributes = ["fade"];
     /**
      * Registers the component.
      */
     static {
         customElements.define("offline-indicator", this);
     }
+    /**
+     * Value indicating whether to apply a transition.
+     */
+    get fade() {
+        return this.hasAttribute("fade");
+    }
+    set fade(value) {
+        this.toggleAttribute("fade", value);
+    }
+    /**
+     * Value indicating whether to initially show this component.
+     */
+    get open() {
+        return this.hasAttribute("open");
+    }
+    set open(value) {
+        this.toggleAttribute("open", 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, oldValue, newValue) {
+        if (newValue != oldValue)
+            switch (attribute) {
+                case "fade":
+                    this.#updateFade(newValue != null);
+                    break;
+                // No default
+            }
+    }
     /**
      * Method invoked when this component is connected.
      */
     connectedCallback() {
-        this.#update();
         for (const event of ["online", "offline"])
-            addEventListener(event, this.#update);
+            addEventListener(event, this.#updateVisibility);
+        if (this.open)
+            this.show();
+        else
+            this.#updateVisibility();
     }
     /**
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback() {
         for (const event of ["online", "offline"])
-            removeEventListener(event, this.#update);
+            removeEventListener(event, this.#updateVisibility);
+    }
+    /**
+     * Hides this offline indicator.
+     */
+    hide() {
+        this.classList.remove("show");
+        this.classList.add("hide");
+    }
+    /**
+     * Shows this offline indicator.
+     */
+    show() {
+        this.classList.remove("hide");
+        this.classList.add("show");
+    }
+    /**
+     * Updates the value indicating whether to apply a transition.
+     * @param value The new value.
+     */
+    #updateFade(value) {
+        this.classList.toggle("fade", value);
     }
     /**
-     * Updates this component.
+     * Updates the visibility of this component.
      */
-    #update = () => {
-        this.classList.toggle("hide", navigator.onLine);
-        this.classList.toggle("show", !navigator.onLine);
+    #updateVisibility = () => {
+        if (navigator.onLine)
+            this.hide();
+        else
+            this.show();
     };
 }

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 fade transition.
-     */
-    animation?: boolean;
     /**
      * Value indicating whether to automatically hide the toast.
      */
@@ -14,7 +10,7 @@ export interface IToast {
     /**
      * The child content displayed in the body.
      */
-    body: DocumentFragment | string;
+    body: DocumentFragment;
     /**
      * The title displayed in the header.
      */
@@ -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 fade 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,GAAC,MAAM,CAAC;IAE9B;;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 fade 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 fade 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 fade 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.
      */
@@ -62,7 +62,7 @@ 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.
      */
-    show(context: Context, caption: string, body: DocumentFragment | string): void;
+    show(context: Context, caption: string, body: DocumentFragment): void;
     /**
      * Shows a toast.
      * @param toast The toast to show.

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;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"}
+{"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

@@ -1,5 +1,4 @@
 import { Context } from "../Context.js";
-import { createDocumentFragment } from "../ElementExtensions.js";
 import { Position, toCss } from "../Position.js";
 /**
  * Manages the notifications.
@@ -27,15 +26,6 @@ export class Toaster extends HTMLElement {
     static {
         customElements.define("toaster-container", this);
     }
-    /**
-     * Value indicating whether to apply a fade transition.
-     */
-    get animation() {
-        return this.hasAttribute("animation");
-    }
-    set animation(value) {
-        this.toggleAttribute("animation", value);
-    }
     /**
      * Value indicating whether to automatically hide the toasts.
      */
@@ -75,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.
      */
@@ -119,20 +118,20 @@ export class Toaster extends HTMLElement {
      * @param caption The title displayed in the toast header.
      * @param body The child content displayed in the toast body.
      */
-    show(toast, caption = "", body = "") {
+    show(toast, caption = "", body = document.createDocumentFragment()) {
         if (typeof toast == "string")
             toast = { context: toast, caption, body };
         const item = document.createElement("toaster-item");
         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;
+        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/{FormExtensions.d.ts → Form.d.ts}

@@ -30,4 +30,4 @@ export declare function resetValidity(element: Element): void;
  * @param element The element to process.
  */
 export declare function trimControl(element: Element): void;
-//# sourceMappingURL=FormExtensions.d.ts.map
+//# sourceMappingURL=Form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Form.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAC,iBAAiB,GAAC,mBAAmB,CAAC;AAEjF;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,eAAe,GAAG,WAAW,EAAE,CAEpE;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,eAAe,GAAG,WAAW,GAAC,IAAI,CAEtE;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,WAAW,CAEtE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAGpD;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAIlD"}

package/lib/UI/Tag.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Creates a CSS stylesheet from the specified template literal.
+ * @param fragments The string fragments.
+ * @param values The interpolated values.
+ * @returns The CSS stylesheet corresponding to the specified template literal.
+ */
+export declare function css(fragments: TemplateStringsArray, ...values: unknown[]): CSSStyleSheet;
+/**
+ * Creates a document fragment from the specified template literal.
+ * @param fragments The string fragments.
+ * @param values The interpolated values.
+ * @returns The document fragment corresponding to the specified template literal.
+ */
+export declare function html(fragments: TemplateStringsArray, ...values: unknown[]): DocumentFragment;
+//# sourceMappingURL=Tag.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Tag.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,SAAS,EAAE,oBAAoB,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,aAAa,CAQxF;AAED;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,SAAS,EAAE,oBAAoB,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,gBAAgB,CAK5F"}

package/lib/UI/Tag.js

@@ -0,0 +1,44 @@
+/**
+ * Creates a CSS stylesheet from the specified template literal.
+ * @param fragments The string fragments.
+ * @param values The interpolated values.
+ * @returns The CSS stylesheet corresponding to the specified template literal.
+ */
+export function css(fragments, ...values) {
+    const styleSheet = new CSSStyleSheet;
+    styleSheet.replaceSync(fragments.length == 1 ? fragments[0] : values.reduce((fragment, value, index) => fragment + stringFromCss(value) + fragments[index + 1], fragments[0]));
+    return styleSheet;
+}
+/**
+ * Creates a document fragment from the specified template literal.
+ * @param fragments The string fragments.
+ * @param values The interpolated values.
+ * @returns The document fragment corresponding to the specified template literal.
+ */
+export function html(fragments, ...values) {
+    return document.createRange().createContextualFragment(fragments.length == 1 ? fragments[0] : values.reduce((fragment, value, index) => fragment + stringFromHtml(value) + fragments[index + 1], fragments[0]));
+}
+/**
+ * Converts the specified value to a CSS string.
+ * @param value A value representing a CSS fragment.
+ * @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 value === null || typeof value == "undefined" ? "" : String(value);
+    return Array.from(value.cssRules).map(cssRule => cssRule.cssText).join("\n");
+}
+/**
+ * Converts the specified value to an HTML string.
+ * @param value A value representing an HTML fragment.
+ * @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 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.19.0",
+	"version": "0.21.0",
 	"devDependencies": {
 		"@playwright/browser-chromium": "^1.55.0",
 		"@types/bootstrap": "^5.2.10",