@cedx/base 0.29.0 → 0.31.0

package/ReadMe.md

@@ -1,5 +1,5 @@
 # Cédric Belin's Base
-![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![Version](https://badgen.net/badge/project/v0.29.0/blue) ![Licence](https://badgen.net/badge/licence/MIT/blue)
+![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![Version](https://badgen.net/badge/project/v0.31.0/blue) ![Licence](https://badgen.net/badge/licence/MIT/blue)
 
 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).

package/lib/String.d.ts

@@ -8,9 +8,12 @@ export declare function capitalize(value: string, locale?: Intl.Locale | string)
 /**
  * Replaces all new lines in the specified value by HTML line breaks.
  * @param value The string to format.
+ * @param options Value indicating whether to use XHTML compatible line breaks.
  * @returns The formatted string.
  */
-export declare function newLineToBr(value: string): string;
+export declare function newLineToBr(value: string, options?: {
+    xhtml?: boolean;
+}): string;
 /**
  * Reverses the specified string.
  * @param value The string to reverse.

package/lib/String.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"String.d.ts","sourceRoot":"","sources":["../src/Client/String.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,GAAE,IAAI,CAAC,MAAM,GAAC,MAA2B,GAAG,MAAM,CAEjG;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEjD;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,SAAI,GAAG,MAAM,EAAE,CAE9D;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE/C;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAQ,GAAG,MAAM,CAEhF"}
+{"version":3,"file":"String.d.ts","sourceRoot":"","sources":["../src/Client/String.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,GAAE,IAAI,CAAC,MAAM,GAAC,MAA2B,GAAG,MAAM,CAEjG;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,GAAE;IAAC,KAAK,CAAC,EAAE,OAAO,CAAA;CAAM,GAAG,MAAM,CAElF;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,SAAI,GAAG,MAAM,EAAE,CAE9D;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE/C;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAQ,GAAG,MAAM,CAEhF"}

package/lib/String.js

@@ -10,10 +10,11 @@ export function capitalize(value, locale = navigator.language) {
 /**
  * Replaces all new lines in the specified value by HTML line breaks.
  * @param value The string to format.
+ * @param options Value indicating whether to use XHTML compatible line breaks.
  * @returns The formatted string.
  */
-export function newLineToBr(value) {
-    return value.split(/\r?\n/g).join("<br>");
+export function newLineToBr(value, options = {}) {
+    return value.split(/\r?\n/g).join(options.xhtml ? "<br />" : "<br>");
 }
 /**
  * Reverses the specified string.

package/lib/TimeSpan.d.ts

@@ -9,7 +9,7 @@ export declare const TimeSpan: Readonly<{
     /**
      * The number of minutes in 1 day.
      */
-    MinutesPerDay: 1440;
+    MinutesPerDay: number;
     /**
      * The number of minutes in 1 hour.
      */
@@ -17,11 +17,11 @@ export declare const TimeSpan: Readonly<{
     /**
      * The number of seconds in 1 day.
      */
-    SecondsPerDay: 86400;
+    SecondsPerDay: number;
     /**
      * The number of seconds in 1 hour.
      */
-    SecondsPerHour: 3600;
+    SecondsPerHour: number;
     /**
      * The number of seconds in 1 minute.
      */
@@ -29,15 +29,15 @@ export declare const TimeSpan: Readonly<{
     /**
      * The number of milliseconds in 1 day.
      */
-    MillisecondsPerDay: 86400000;
+    MillisecondsPerDay: number;
     /**
      * The number of milliseconds in 1 hour.
      */
-    MillisecondsPerHour: 3600000;
+    MillisecondsPerHour: number;
     /**
      * The number of milliseconds in 1 minute.
      */
-    MillisecondsPerMinute: 60000;
+    MillisecondsPerMinute: number;
     /**
      * The number of milliseconds in 1 second.
      */

package/lib/TimeSpan.js

@@ -9,7 +9,7 @@ export const TimeSpan = Object.freeze({
     /**
      * The number of minutes in 1 day.
      */
-    MinutesPerDay: 1_440,
+    MinutesPerDay: 24 * 60,
     /**
      * The number of minutes in 1 hour.
      */
@@ -17,11 +17,11 @@ export const TimeSpan = Object.freeze({
     /**
      * The number of seconds in 1 day.
      */
-    SecondsPerDay: 86_400,
+    SecondsPerDay: 24 * 60 * 60,
     /**
      * The number of seconds in 1 hour.
      */
-    SecondsPerHour: 3_600,
+    SecondsPerHour: 60 * 60,
     /**
      * The number of seconds in 1 minute.
      */
@@ -29,15 +29,15 @@ export const TimeSpan = Object.freeze({
     /**
      * The number of milliseconds in 1 day.
      */
-    MillisecondsPerDay: 86_400_000,
+    MillisecondsPerDay: 24 * 60 * 60 * 1_000,
     /**
      * The number of milliseconds in 1 hour.
      */
-    MillisecondsPerHour: 3_600_000,
+    MillisecondsPerHour: 60 * 60 * 1_000,
     /**
      * The number of milliseconds in 1 minute.
      */
-    MillisecondsPerMinute: 60_000,
+    MillisecondsPerMinute: 60 * 1_000,
     /**
      * The number of milliseconds in 1 second.
      */

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

@@ -15,7 +15,7 @@ export declare class BackButton extends HTMLElement {
      * Moves back in the session history.
      * @param event The dispatched event.
      */
-    goBack(event?: Event): void;
+    readonly goBack: (event?: Event) => void;
 }
 /**
  * Declaration merging.

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

@@ -1 +1 @@
-{"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/BackButton.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,UAAW,SAAQ,WAAW;IAE1C;;OAEG;;IAaH;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;;OAGG;IACH,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI;CAI3B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
+{"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/BackButton.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,UAAW,SAAQ,WAAW;IAE1C;;OAEG;;IAaH;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAGtC;CACF;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

package/lib/UI/Components/BackButton.js

@@ -7,7 +7,7 @@ export class BackButton extends HTMLElement {
      */
     constructor() {
         super();
-        this.addEventListener("click", this.goBack.bind(this), { capture: true });
+        this.addEventListener("click", this.goBack, { capture: true });
     }
     /**
      * Registers the component.
@@ -29,8 +29,8 @@ export class BackButton extends HTMLElement {
      * Moves back in the session history.
      * @param event The dispatched event.
      */
-    goBack(event) {
+    goBack = event => {
         event?.stopPropagation();
         history.go(-this.steps);
-    }
+    };
 }

package/lib/UI/Components/DialogBox.js

@@ -29,9 +29,9 @@ export class DialogBox extends HTMLElement {
     constructor() {
         super();
         this.firstElementChild.addEventListener("hide.bs.modal", () => this.#resolve(this.#result));
-        this.querySelector(".btn-close").addEventListener("click", this.#close.bind(this));
+        this.querySelector(".btn-close").addEventListener("click", this.#close);
         for (const button of this.querySelectorAll(".modal-footer button"))
-            button.addEventListener("click", this.#close.bind(this));
+            button.addEventListener("click", this.#close);
     }
     /**
      * Registers the component.
@@ -211,7 +211,7 @@ export class DialogBox extends HTMLElement {
         if (message) {
             const footer = message.footer ?? document.createDocumentFragment();
             for (const button of footer.querySelectorAll("button"))
-                button.addEventListener("click", this.#close.bind(this));
+                button.addEventListener("click", this.#close);
             this.body = message.body;
             this.caption = message.caption;
             this.footer = footer;
@@ -226,10 +226,10 @@ export class DialogBox extends HTMLElement {
      * Closes this dialog box.
      * @param event The dispatched event.
      */
-    #close(event) {
+    #close = event => {
         event.preventDefault();
         this.close(event.currentTarget.value);
-    }
+    };
     /**
      * Updates the title displayed in the header.
      * @param value The new value.

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

@@ -30,7 +30,7 @@ export declare class FullScreenToggler extends HTMLElement {
      * @param event The dispatched event.
      * @returns Completes when the full-screen mode has been toggled.
      */
-    toggleFullScreen(event?: Event): Promise<void>;
+    readonly toggleFullScreen: (event?: Event) => Promise<void>;
 }
 /**
  * Declaration merging.

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

@@ -1 +1 @@
-{"version":3,"file":"FullScreenToggler.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/FullScreenToggler.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,WAAW;;IAYjD;;OAEG;;IAaH;;OAEG;IACH,IAAI,MAAM,IAAI,MAAM,CAGnB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAEvB;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;;;OAIG;IACG,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;CAwCpD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,iBAAiB,CAAC;KACxC;CACD"}
+{"version":3,"file":"FullScreenToggler.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/FullScreenToggler.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,WAAW;;IAiBjD;;OAEG;;IAaH;;OAEG;IACH,IAAI,MAAM,IAAI,MAAM,CAGnB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAEvB;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;;;OAIG;IACH,QAAQ,CAAC,gBAAgB,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,OAAO,CAAC,IAAI,CAAC,CAIzD;CAoCF;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,iBAAiB,CAAC;KACxC;CACD"}

package/lib/UI/Components/FullScreenToggler.js

@@ -2,6 +2,10 @@
  * A component for toggling an element to full-screen.
  */
 export class FullScreenToggler extends HTMLElement {
+    /**
+     * The abort controller used to remove the event listeners.
+     */
+    #abortController = new AbortController;
     /**
      * The target element.
      */
@@ -15,7 +19,7 @@ export class FullScreenToggler extends HTMLElement {
      */
     constructor() {
         super();
-        this.addEventListener("click", this.toggleFullScreen.bind(this), { capture: true }); // eslint-disable-line @typescript-eslint/no-misused-promises
+        this.addEventListener("click", this.toggleFullScreen, { capture: true }); // eslint-disable-line @typescript-eslint/no-misused-promises
     }
     /**
      * Registers the component.
@@ -46,29 +50,28 @@ export class FullScreenToggler extends HTMLElement {
      * Method invoked when this component is connected.
      */
     connectedCallback() {
-        document.addEventListener("visibilitychange", this.#onVisibilityChanged);
+        document.addEventListener("visibilitychange", this.#onVisibilityChanged, { signal: this.#abortController.signal });
         this.#element = document.querySelector(this.target) ?? document.body;
-        this.#element.addEventListener("fullscreenchange", this.#onFullScreenChanged);
+        this.#element.addEventListener("fullscreenchange", this.#onFullScreenChanged, { signal: this.#abortController.signal });
     }
     /**
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback() {
-        document.removeEventListener("visibilitychange", this.#onVisibilityChanged);
-        this.#element.removeEventListener("fullscreenchange", this.#onFullScreenChanged);
+        this.#abortController.abort();
     }
     /**
      * Toggles the full-screen mode of the associated element.
      * @param event The dispatched event.
      * @returns Completes when the full-screen mode has been toggled.
      */
-    async toggleFullScreen(event) {
+    toggleFullScreen = async (event) => {
         event?.stopPropagation();
         if (document.fullscreenElement)
             await document.exitFullscreen();
         else
             await this.#element.requestFullscreen();
-    }
+    };
     /**
      * Acquires a new wake lock.
      * @returns Completes when the wake lock has been acquired.

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

@@ -1 +1 @@
-{"version":3,"file":"KeyboardAccelerator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/KeyboardAccelerator.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,qBAAa,mBAAoB,SAAQ,WAAW;;IAcnD;;OAEG;IACH,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,KAAK,EAAE,MAAM,EAEpB;IAED;;OAEG;IACH,IAAI,SAAS,IAAI,MAAM,CAItB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,EAK1B;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAIzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAuB5B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,mBAAmB,CAAC;KAC5C;CACD"}
+{"version":3,"file":"KeyboardAccelerator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/KeyboardAccelerator.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,qBAAa,mBAAoB,SAAQ,WAAW;;IAmBnD;;OAEG;IACH,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,KAAK,EAAE,MAAM,EAEpB;IAED;;OAEG;IACH,IAAI,SAAS,IAAI,MAAM,CAItB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,EAK1B;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAIzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAuB5B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,mBAAmB,CAAC;KAC5C;CACD"}

package/lib/UI/Components/KeyboardAccelerator.js

@@ -3,6 +3,10 @@ import { KeyboardModifiers } from "../KeyboardModifiers.js";
  * Represents a shortcut key associated with an element.
  */
 export class KeyboardAccelerator extends HTMLElement {
+    /**
+     * The abort controller used to remove the event listeners.
+     */
+    #abortController = new AbortController;
     /**
      * The mapping between the modifier names and their values.
      */
@@ -40,13 +44,13 @@ export class KeyboardAccelerator extends HTMLElement {
      * Method invoked when this component is connected.
      */
     connectedCallback() {
-        addEventListener("keyup", this.#activateChildContent, { capture: true });
+        addEventListener("keyup", this.#activateChildContent, { capture: true, signal: this.#abortController.signal });
     }
     /**
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback() {
-        removeEventListener("keyup", this.#activateChildContent, { capture: true });
+        this.#abortController.abort();
     }
     /**
      * Activates the child content when the specified keyboard event designates the same key and modifiers as this keyboard accelerator.

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

@@ -12,6 +12,10 @@ export declare class LoadingIndicator extends HTMLElement {
      */
     get fade(): boolean;
     set fade(value: boolean);
+    /**
+     * Value indicating whether this component is shown.
+     */
+    get isShown(): boolean;
     /**
      * Value indicating whether to initially show this component.
      */

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;;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;IAS3C;;OAEG;IACH,IAAI,IAAI,IAAI;CAaZ;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,OAAO,IAAI,OAAO,CAErB;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;IAS3C;;OAEG;IACH,IAAI,IAAI,IAAI;CAaZ;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

@@ -25,6 +25,12 @@ export class LoadingIndicator extends HTMLElement {
     set fade(value) {
         this.toggleAttribute("fade", value);
     }
+    /**
+     * Value indicating whether this component is shown.
+     */
+    get isShown() {
+        return this.classList.contains("show");
+    }
     /**
      * Value indicating whether to initially show this component.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"MenuActivator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/MenuActivator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;;IAS7C;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAgB5B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}
+{"version":3,"file":"MenuActivator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/MenuActivator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;;IAc7C;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAe5B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}

package/lib/UI/Components/MenuActivator.js

@@ -2,6 +2,10 @@
  * A component that activates the items of a menu, based on the current document URL.
  */
 export class MenuActivator extends HTMLElement {
+    /**
+     * The abort controller used to remove the event listeners.
+     */
+    #abortController = new AbortController;
     /**
      * Registers the component.
      */
@@ -13,15 +17,14 @@ export class MenuActivator extends HTMLElement {
      */
     connectedCallback() {
         this.#update();
-        addEventListener("popstate", this.#update);
-        document.body.addEventListener("htmx:afterRequest", this.#update);
+        addEventListener("popstate", this.#update, { signal: this.#abortController.signal });
+        document.body.addEventListener("htmx:afterRequest", this.#update, { signal: this.#abortController.signal });
     }
     /**
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback() {
-        removeEventListener("popstate", this.#update);
-        document.body.removeEventListener("htmx:afterRequest", this.#update);
+        this.#abortController.abort();
     }
     /**
      * Updates this component.

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

@@ -12,6 +12,10 @@ export declare class OfflineIndicator extends HTMLElement {
      */
     get fade(): boolean;
     set fade(value: boolean);
+    /**
+     * Value indicating whether this component is shown.
+     */
+    get isShown(): boolean;
     /**
      * Value indicating whether to initially show this component.
      */

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;;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"}
+{"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;IAc9C;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAErB;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

@@ -6,6 +6,10 @@ export class OfflineIndicator extends HTMLElement {
      * The list of observed attributes.
      */
     static observedAttributes = ["fade"];
+    /**
+     * The abort controller used to remove the event listeners.
+     */
+    #abortController = new AbortController;
     /**
      * Registers the component.
      */
@@ -21,6 +25,12 @@ export class OfflineIndicator extends HTMLElement {
     set fade(value) {
         this.toggleAttribute("fade", value);
     }
+    /**
+     * Value indicating whether this component is shown.
+     */
+    get isShown() {
+        return this.classList.contains("show");
+    }
     /**
      * Value indicating whether to initially show this component.
      */
@@ -50,7 +60,7 @@ export class OfflineIndicator extends HTMLElement {
      */
     connectedCallback() {
         for (const event of ["online", "offline"])
-            addEventListener(event, this.#updateVisibility);
+            addEventListener(event, this.#updateVisibility, { signal: this.#abortController.signal });
         if (this.open)
             this.show();
         else
@@ -60,8 +70,7 @@ export class OfflineIndicator extends HTMLElement {
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback() {
-        for (const event of ["online", "offline"])
-            removeEventListener(event, this.#updateVisibility);
+        this.#abortController.abort();
     }
     /**
      * Hides this offline indicator.

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

@@ -1 +1 @@
-{"version":3,"file":"TabActivator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/TabActivator.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAE9C;;GAEG;AACH,qBAAa,YAAa,SAAQ,WAAW;IAE5C;;OAEG;;IAeH;;OAEG;IACH,IAAI,cAAc,IAAI,MAAM,CAG3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAE/B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,UAAU,CAAC,OAAO,CAEhC;IAED;;OAEG;IACH,IAAI,WAAW,IAAI,WAAW,CAG7B;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,WAAW,EAEjC;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,CAGvB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,EAE3B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,UAAU,CAAC,WAAW,CAAC,CAElC;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;CAGzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}
+{"version":3,"file":"TabActivator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/TabActivator.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAE9C;;GAEG;AACH,qBAAa,YAAa,SAAQ,WAAW;IAE5C;;OAEG;;IAgBH;;OAEG;IACH,IAAI,cAAc,IAAI,MAAM,CAG3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAE/B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,UAAU,CAAC,OAAO,CAEhC;IAED;;OAEG;IACH,IAAI,WAAW,IAAI,WAAW,CAG7B;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,WAAW,EAEjC;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,CAGvB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,EAE3B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,UAAU,CAAC,WAAW,CAAC,CAElC;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;CAGzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}

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

@@ -23,6 +23,16 @@ export declare class ThemeDropdown extends HTMLElement {
      */
     get appTheme(): AppTheme;
     set appTheme(value: AppTheme);
+    /**
+     * Value indicating whether to store the application theme in a cookie.
+     */
+    get cookie(): boolean;
+    set cookie(value: boolean);
+    /**
+     * The URI for which the associated cookie is valid.
+     */
+    get cookieDomain(): string;
+    set cookieDomain(value: string);
     /**
      * The label of the dropdown menu.
      */
@@ -46,8 +56,9 @@ export declare class ThemeDropdown extends HTMLElement {
     close(): void;
     /**
      * Method invoked when this component is connected.
+     * @returns Completes when this component has been connected.
      */
-    connectedCallback(): void;
+    connectedCallback(): Promise<void>;
     /**
      * Method invoked when this component is disconnected.
      */

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,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;;IAcH;;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;IAS/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"}
+{"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;IAiBxE;;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,MAAM,IAAI,OAAO,CAEpB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAExB;IAED;;OAEG;IACH,IAAI,YAAY,IAAI,MAAM,CAEzB;IACD,IAAI,YAAY,CAAC,KAAK,EAAE,MAAM,EAE7B;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;IAS/F;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;;OAGG;IACG,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC;IAYxC;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;CAwDZ;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

@@ -9,6 +9,10 @@ export class ThemeDropdown extends HTMLElement {
      * The list of observed attributes.
      */
     static observedAttributes = ["alignment", "apptheme", "label"];
+    /**
+     * The abort controller used to remove the event listeners.
+     */
+    #abortController = new AbortController;
     /**
      * The dropdown menu.
      */
@@ -23,7 +27,7 @@ export class ThemeDropdown extends HTMLElement {
     constructor() {
         super();
         for (const button of this.querySelectorAll(".dropdown-menu button"))
-            button.addEventListener("click", this.#setAppTheme.bind(this));
+            button.addEventListener("click", this.#setAppTheme);
     }
     /**
      * Registers the component.
@@ -51,6 +55,24 @@ export class ThemeDropdown extends HTMLElement {
     set appTheme(value) {
         this.setAttribute("apptheme", value);
     }
+    /**
+     * Value indicating whether to store the application theme in a cookie.
+     */
+    get cookie() {
+        return this.hasAttribute("cookie");
+    }
+    set cookie(value) {
+        this.toggleAttribute("cookie", value);
+    }
+    /**
+     * The URI for which the associated cookie is valid.
+     */
+    get cookieDomain() {
+        return (this.getAttribute("cookiedomain") ?? "").trim();
+    }
+    set cookieDomain(value) {
+        this.setAttribute("cookiedomain", value);
+    }
     /**
      * The label of the dropdown menu.
      */
@@ -100,20 +122,26 @@ export class ThemeDropdown extends HTMLElement {
     }
     /**
      * Method invoked when this component is connected.
+     * @returns Completes when this component has been connected.
      */
-    connectedCallback() {
-        const appTheme = localStorage.getItem(this.storageKey);
-        if (appTheme)
-            this.appTheme = appTheme;
+    async connectedCallback() {
         this.#dropdown = new Dropdown(this.querySelector(".dropdown-toggle"));
-        this.#mediaQuery.addEventListener("change", this.#applyToDocument);
+        this.#mediaQuery.addEventListener("change", this.#applyToDocument, { signal: this.#abortController.signal });
+        const cookie = this.cookie ? await cookieStore.get(this.storageKey) : null;
+        if (cookie)
+            this.appTheme = cookie.value;
+        else {
+            const storage = localStorage.getItem(this.storageKey);
+            if (storage)
+                this.appTheme = storage;
+        }
     }
     /**
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback() {
+        this.#abortController.abort();
         this.#dropdown.dispose();
-        this.#mediaQuery.removeEventListener("change", this.#applyToDocument);
     }
     /**
      * Opens the dropdown menu.
@@ -125,7 +153,15 @@ export class ThemeDropdown extends HTMLElement {
      * Saves the current application theme into the local storage.
      */
     save() {
-        localStorage.setItem(this.storageKey, this.appTheme);
+        const { appTheme, cookieDomain } = this;
+        localStorage.setItem(this.storageKey, appTheme);
+        if (this.cookie)
+            void cookieStore.set({
+                domain: cookieDomain ? cookieDomain : null,
+                expires: Date.now() + (365 * 24 * 60 * 60 * 1_000),
+                name: this.storageKey,
+                value: appTheme
+            });
     }
     /**
      * Applies the application theme to the document.
@@ -139,11 +175,11 @@ export class ThemeDropdown extends HTMLElement {
      * Changes the current application theme.
      * @param event The dispatched event.
      */
-    #setAppTheme(event) {
+    #setAppTheme = event => {
         event.preventDefault();
         this.appTheme = event.currentTarget.value;
         this.save();
-    }
+    };
     /**
      * Updates the alignment of the dropdown menu.
      * @param value The new value.

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,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;IAS5B;;OAEG;IACH,IAAI,IAAI,IAAI;CAoGZ;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,WAA0E;IAuC5G;;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;IAM5B;;OAEG;IACH,IAAI,IAAI,IAAI;CAoGZ;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

@@ -12,6 +12,10 @@ export class Toast extends HTMLElement {
      * The time units.
      */
     static #timeUnits = ["second", "minute", "hour"];
+    /**
+     * The abort controller used to remove the event listeners.
+     */
+    #abortController = new AbortController;
     /**
      * The formatter used to format the relative time.
      */
@@ -169,8 +173,8 @@ export class Toast extends HTMLElement {
      */
     connectedCallback() {
         const root = this.firstElementChild;
-        root.addEventListener("hide.bs.toast", this.#stopTimer);
-        root.addEventListener("show.bs.toast", this.#startTimer);
+        root.addEventListener("hide.bs.toast", this.#stopTimer, { signal: this.#abortController.signal });
+        root.addEventListener("show.bs.toast", this.#startTimer, { signal: this.#abortController.signal });
         this.#toast = new BootstrapToast(root);
         if (this.open)
             this.show();
@@ -179,10 +183,8 @@ export class Toast extends HTMLElement {
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback() {
-        const root = this.firstElementChild;
-        root.removeEventListener("hide.bs.toast", () => this.#stopTimer);
-        root.removeEventListener("show.bs.toast", () => this.#startTimer);
         this.#stopTimer();
+        this.#abortController.abort();
         this.#toast.dispose();
     }
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toaster.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAQ,MAAM,gBAAgB,CAAC;AAE/C;;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,CAAC;CACd;AAED;;GAEG;AACH,qBAAa,OAAQ,SAAQ,WAAW;;IAEvC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAgB;IAOlD;;OAEG;;IAcH;;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,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAI1E;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CA4BzB;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;AAE/C;;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,CAAC;CACd;AAED;;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,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAI1E;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CA4BzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,OAAO,CAAC;KAC7B;CACD"}

package/package.json

@@ -7,23 +7,23 @@
 	"name": "@cedx/base",
 	"repository": "cedx/base",
 	"type": "module",
-	"version": "0.29.0",
+	"version": "0.31.0",
 	"devDependencies": {
 		"@playwright/browser-chromium": "^1.55.0",
 		"@types/bootstrap": "^5.2.10",
 		"@types/chai": "^5.2.2",
 		"@types/mocha": "^10.0.10",
-		"@types/node": "^24.3.0",
+		"@types/node": "^24.5.2",
 		"@types/serve-handler": "^6.1.4",
 		"chai": "^6.0.1",
-		"esbuild": "^0.25.9",
-		"globals": "^16.3.0",
+		"esbuild": "^0.25.10",
+		"globals": "^16.4.0",
 		"mocha": "^11.7.2",
 		"playwright": "^1.55.0",
 		"serve-handler": "^6.1.6",
-		"typedoc": "^0.28.12",
+		"typedoc": "^0.28.13",
 		"typescript": "^5.9.2",
-		"typescript-eslint": "^8.42.0"
+		"typescript-eslint": "^8.44.0"
 	},
 	"engines": {
 		"node": ">=24.0.0"

package/src/Client/String.ts

@@ -11,10 +11,11 @@ export function capitalize(value: string, locale: Intl.Locale|string = navigator
 /**
  * Replaces all new lines in the specified value by HTML line breaks.
  * @param value The string to format.
+ * @param options Value indicating whether to use XHTML compatible line breaks.
  * @returns The formatted string.
  */
-export function newLineToBr(value: string): string {
-	return value.split(/\r?\n/g).join("<br>");
+export function newLineToBr(value: string, options: {xhtml?: boolean} = {}): string {
+	return value.split(/\r?\n/g).join(options.xhtml ? "<br />" : "<br>");
 }
 
 /**

package/src/Client/TimeSpan.ts

@@ -11,7 +11,7 @@ export const TimeSpan = Object.freeze({
 	/**
 	 * The number of minutes in 1 day.
 	 */
-	MinutesPerDay: 1_440,
+	MinutesPerDay: 24 * 60,
 
 	/**
 	 * The number of minutes in 1 hour.
@@ -21,12 +21,12 @@ export const TimeSpan = Object.freeze({
 	/**
 	 * The number of seconds in 1 day.
 	 */
-	SecondsPerDay: 86_400,
+	SecondsPerDay: 24 * 60 * 60,
 
 	/**
 	 * The number of seconds in 1 hour.
 	 */
-	SecondsPerHour: 3_600,
+	SecondsPerHour: 60 * 60,
 
 	/**
 	 * The number of seconds in 1 minute.
@@ -36,17 +36,17 @@ export const TimeSpan = Object.freeze({
 	/**
 	 * The number of milliseconds in 1 day.
 	 */
-	MillisecondsPerDay: 86_400_000,
+	MillisecondsPerDay: 24 * 60 * 60 * 1_000,
 
 	/**
 	 * The number of milliseconds in 1 hour.
 	 */
-	MillisecondsPerHour: 3_600_000,
+	MillisecondsPerHour: 60 * 60 * 1_000,
 
 	/**
 	 * The number of milliseconds in 1 minute.
 	 */
-	MillisecondsPerMinute: 60_000,
+	MillisecondsPerMinute: 60 * 1_000,
 
 	/**
 	 * The number of milliseconds in 1 second.

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

@@ -8,7 +8,7 @@ export class BackButton extends HTMLElement {
 	 */
 	constructor() {
 		super();
-		this.addEventListener("click", this.goBack.bind(this), {capture: true});
+		this.addEventListener("click", this.goBack, {capture: true});
 	}
 
 	/**
@@ -33,10 +33,10 @@ export class BackButton extends HTMLElement {
 	 * Moves back in the session history.
 	 * @param event The dispatched event.
 	 */
-	goBack(event?: Event): void {
+	readonly goBack: (event?: Event) => void = event => {
 		event?.stopPropagation();
 		history.go(-this.steps);
-	}
+	};
 }
 
 /**

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

@@ -82,8 +82,8 @@ export class DialogBox extends HTMLElement {
 	constructor() {
 		super();
 		this.firstElementChild!.addEventListener("hide.bs.modal", () => this.#resolve(this.#result));
-		this.querySelector(".btn-close")!.addEventListener("click", this.#close.bind(this));
-		for (const button of this.querySelectorAll(".modal-footer button")) button.addEventListener("click", this.#close.bind(this));
+		this.querySelector(".btn-close")!.addEventListener("click", this.#close);
+		for (const button of this.querySelectorAll(".modal-footer button")) button.addEventListener("click", this.#close);
 	}
 
 	/**
@@ -267,7 +267,7 @@ export class DialogBox extends HTMLElement {
 	show(message: IDialogMessage|null = null): Promise<string> {
 		if (message) {
 			const footer = message.footer ?? document.createDocumentFragment();
-			for (const button of footer.querySelectorAll("button")) button.addEventListener("click", this.#close.bind(this));
+			for (const button of footer.querySelectorAll("button")) button.addEventListener("click", this.#close);
 			this.body = message.body;
 			this.caption = message.caption;
 			this.footer = footer;
@@ -284,10 +284,10 @@ export class DialogBox extends HTMLElement {
 	 * Closes this dialog box.
 	 * @param event The dispatched event.
 	 */
-	#close(event: Event): void {
+	readonly #close: (event: Event) => void = event => {
 		event.preventDefault();
 		this.close((event.currentTarget as HTMLButtonElement).value);
-	}
+	};
 
 	/**
 	 * Updates the title displayed in the header.

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

@@ -3,6 +3,11 @@
  */
 export class FullScreenToggler extends HTMLElement {
 
+	/**
+	 * The abort controller used to remove the event listeners.
+	 */
+	readonly #abortController = new AbortController;
+
 	/**
 	 * The target element.
 	 */
@@ -18,7 +23,7 @@ export class FullScreenToggler extends HTMLElement {
 	 */
 	constructor() {
 		super();
-		this.addEventListener("click", this.toggleFullScreen.bind(this), {capture: true}); // eslint-disable-line @typescript-eslint/no-misused-promises
+		this.addEventListener("click", this.toggleFullScreen, {capture: true}); // eslint-disable-line @typescript-eslint/no-misused-promises
 	}
 
 	/**
@@ -53,17 +58,16 @@ export class FullScreenToggler extends HTMLElement {
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
-		document.addEventListener("visibilitychange", this.#onVisibilityChanged);
+		document.addEventListener("visibilitychange", this.#onVisibilityChanged, {signal: this.#abortController.signal});
 		this.#element = document.querySelector(this.target) ?? document.body;
-		this.#element.addEventListener("fullscreenchange", this.#onFullScreenChanged);
+		this.#element.addEventListener("fullscreenchange", this.#onFullScreenChanged, {signal: this.#abortController.signal});
 	}
 
 	/**
 	 * Method invoked when this component is disconnected.
 	 */
 	disconnectedCallback(): void {
-		document.removeEventListener("visibilitychange", this.#onVisibilityChanged);
-		this.#element.removeEventListener("fullscreenchange", this.#onFullScreenChanged);
+		this.#abortController.abort();
 	}
 
 	/**
@@ -71,11 +75,11 @@ export class FullScreenToggler extends HTMLElement {
 	 * @param event The dispatched event.
 	 * @returns Completes when the full-screen mode has been toggled.
 	 */
-	async toggleFullScreen(event?: Event): Promise<void> {
+	readonly toggleFullScreen: (event?: Event) => Promise<void> = async event => {
 		event?.stopPropagation();
 		if (document.fullscreenElement) await document.exitFullscreen();
 		else await this.#element.requestFullscreen();
-	}
+	};
 
 	/**
 	 * Acquires a new wake lock.

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

@@ -5,6 +5,11 @@ import {KeyboardModifiers} from "../KeyboardModifiers.js";
  */
 export class KeyboardAccelerator extends HTMLElement {
 
+	/**
+	 * The abort controller used to remove the event listeners.
+	 */
+	readonly #abortController = new AbortController;
+
 	/**
 	 * The mapping between the modifier names and their values.
 	 */
@@ -46,14 +51,14 @@ export class KeyboardAccelerator extends HTMLElement {
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
-		addEventListener("keyup", this.#activateChildContent, {capture: true});
+		addEventListener("keyup", this.#activateChildContent, {capture: true, signal: this.#abortController.signal});
 	}
 
 	/**
 	 * Method invoked when this component is disconnected.
 	 */
 	disconnectedCallback(): void {
-		removeEventListener("keyup", this.#activateChildContent, {capture: true});
+		this.#abortController.abort();
 	}
 
 	/**

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

@@ -30,6 +30,13 @@ export class LoadingIndicator extends HTMLElement {
 		this.toggleAttribute("fade", value);
 	}
 
+	/**
+	 * Value indicating whether this component is shown.
+	 */
+	get isShown(): boolean {
+		return this.classList.contains("show");
+	}
+
 	/**
 	 * Value indicating whether to initially show this component.
 	 */

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

@@ -3,6 +3,11 @@
  */
 export class MenuActivator extends HTMLElement {
 
+	/**
+	 * The abort controller used to remove the event listeners.
+	 */
+	readonly #abortController = new AbortController;
+
 	/**
 	 * Registers the component.
 	 */
@@ -15,16 +20,15 @@ export class MenuActivator extends HTMLElement {
 	 */
 	connectedCallback(): void {
 		this.#update();
-		addEventListener("popstate", this.#update);
-		document.body.addEventListener("htmx:afterRequest", this.#update);
+		addEventListener("popstate", this.#update, {signal: this.#abortController.signal});
+		document.body.addEventListener("htmx:afterRequest", this.#update, {signal: this.#abortController.signal});
 	}
 
 	/**
 	 * Method invoked when this component is disconnected.
 	 */
 	disconnectedCallback(): void {
-		removeEventListener("popstate", this.#update);
-		document.body.removeEventListener("htmx:afterRequest", this.#update);
+		this.#abortController.abort();
 	}
 
 	/**

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

@@ -8,6 +8,11 @@ export class OfflineIndicator extends HTMLElement {
 	 */
 	static readonly observedAttributes = ["fade"];
 
+	/**
+	 * The abort controller used to remove the event listeners.
+	 */
+	readonly #abortController = new AbortController;
+
 	/**
 	 * Registers the component.
 	 */
@@ -25,6 +30,13 @@ export class OfflineIndicator extends HTMLElement {
 		this.toggleAttribute("fade", value);
 	}
 
+	/**
+	 * Value indicating whether this component is shown.
+	 */
+	get isShown(): boolean {
+		return this.classList.contains("show");
+	}
+
 	/**
 	 * Value indicating whether to initially show this component.
 	 */
@@ -52,7 +64,7 @@ export class OfflineIndicator extends HTMLElement {
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
-		for (const event of ["online", "offline"]) addEventListener(event, this.#updateVisibility);
+		for (const event of ["online", "offline"]) addEventListener(event, this.#updateVisibility, {signal: this.#abortController.signal});
 		if (this.open) this.show();
 		else this.#updateVisibility();
 	}
@@ -61,7 +73,7 @@ export class OfflineIndicator extends HTMLElement {
 	 * Method invoked when this component is disconnected.
 	 */
 	disconnectedCallback(): void {
-		for (const event of ["online", "offline"]) removeEventListener(event, this.#updateVisibility);
+		this.#abortController.abort();
 	}
 
 	/**

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

@@ -11,6 +11,7 @@ export class TabActivator extends HTMLElement {
 	 */
 	constructor() {
 		super();
+
 		const {tabs} = this;
 		for (let index = 0; index < tabs.length; index++)
 			tabs.item(index).addEventListener("show.bs.tab", () => this.activeTabIndex = index);

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

@@ -12,6 +12,11 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	static readonly observedAttributes = ["alignment", "apptheme", "label"];
 
+	/**
+	 * The abort controller used to remove the event listeners.
+	 */
+	readonly #abortController = new AbortController;
+
 	/**
 	 * The dropdown menu.
 	 */
@@ -27,8 +32,7 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	constructor() {
 		super();
-		for (const button of this.querySelectorAll(".dropdown-menu button"))
-			button.addEventListener("click", this.#setAppTheme.bind(this));
+		for (const button of this.querySelectorAll(".dropdown-menu button")) button.addEventListener("click", this.#setAppTheme);
 	}
 
 	/**
@@ -60,6 +64,26 @@ export class ThemeDropdown extends HTMLElement {
 		this.setAttribute("apptheme", value);
 	}
 
+	/**
+	 * Value indicating whether to store the application theme in a cookie.
+	 */
+	get cookie(): boolean {
+		return this.hasAttribute("cookie");
+	}
+	set cookie(value: boolean) {
+		this.toggleAttribute("cookie", value);
+	}
+
+	/**
+	 * The URI for which the associated cookie is valid.
+	 */
+	get cookieDomain(): string {
+		return (this.getAttribute("cookiedomain") ?? "").trim();
+	}
+	set cookieDomain(value: string) {
+		this.setAttribute("cookiedomain", value);
+	}
+
 	/**
 	 * The label of the dropdown menu.
 	 */
@@ -106,21 +130,26 @@ export class ThemeDropdown extends HTMLElement {
 
 	/**
 	 * Method invoked when this component is connected.
+	 * @returns Completes when this component has been connected.
 	 */
-	connectedCallback(): void {
-		const appTheme = localStorage.getItem(this.storageKey) as AppTheme|null;
-		if (appTheme) this.appTheme = appTheme;
-
+	async connectedCallback(): Promise<void> {
 		this.#dropdown = new Dropdown(this.querySelector(".dropdown-toggle")!);
-		this.#mediaQuery.addEventListener("change", this.#applyToDocument);
+		this.#mediaQuery.addEventListener("change", this.#applyToDocument, {signal: this.#abortController.signal});
+
+		const cookie = this.cookie ? await cookieStore.get(this.storageKey) : null;
+		if (cookie) this.appTheme = cookie.value as AppTheme;
+		else {
+			const storage = localStorage.getItem(this.storageKey);
+			if (storage) this.appTheme = storage as AppTheme;
+		}
 	}
 
 	/**
 	 * Method invoked when this component is disconnected.
 	 */
 	disconnectedCallback(): void {
+		this.#abortController.abort();
 		this.#dropdown.dispose();
-		this.#mediaQuery.removeEventListener("change", this.#applyToDocument);
 	}
 
 	/**
@@ -134,7 +163,15 @@ export class ThemeDropdown extends HTMLElement {
 	 * Saves the current application theme into the local storage.
 	 */
 	save(): void {
-		localStorage.setItem(this.storageKey, this.appTheme);
+		const {appTheme, cookieDomain} = this;
+		localStorage.setItem(this.storageKey, appTheme);
+
+		if (this.cookie) void cookieStore.set({
+			domain: cookieDomain ? cookieDomain : null,
+			expires: Date.now() + (365 * 24 * 60 * 60 * 1_000),
+			name: this.storageKey,
+			value: appTheme
+		});
 	}
 
 	/**
@@ -150,11 +187,11 @@ export class ThemeDropdown extends HTMLElement {
 	 * Changes the current application theme.
 	 * @param event The dispatched event.
 	 */
-	#setAppTheme(event: Event): void {
+	readonly #setAppTheme: (event: Event) => void = event => {
 		event.preventDefault();
 		this.appTheme = (event.currentTarget as HTMLButtonElement).value as AppTheme;
 		this.save();
-	}
+	};
 
 	/**
 	 * Updates the alignment of the dropdown menu.

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

@@ -16,6 +16,11 @@ export class Toast extends HTMLElement {
 	 */
 	static readonly #timeUnits: Intl.RelativeTimeFormatUnit[] = ["second", "minute", "hour"];
 
+	/**
+	 * The abort controller used to remove the event listeners.
+	 */
+	readonly #abortController = new AbortController;
+
 	/**
 	 * The formatter used to format the relative time.
 	 */
@@ -173,8 +178,8 @@ export class Toast extends HTMLElement {
 	 */
 	connectedCallback(): void {
 		const root = this.firstElementChild!;
-		root.addEventListener("hide.bs.toast", this.#stopTimer);
-		root.addEventListener("show.bs.toast", this.#startTimer);
+		root.addEventListener("hide.bs.toast", this.#stopTimer, {signal: this.#abortController.signal});
+		root.addEventListener("show.bs.toast", this.#startTimer, {signal: this.#abortController.signal});
 
 		this.#toast = new BootstrapToast(root);
 		if (this.open) this.show();
@@ -184,11 +189,8 @@ export class Toast extends HTMLElement {
 	 * Method invoked when this component is disconnected.
 	 */
 	disconnectedCallback(): void {
-		const root = this.firstElementChild!;
-		root.removeEventListener("hide.bs.toast", () => this.#stopTimer);
-		root.removeEventListener("show.bs.toast", () => this.#startTimer);
-
 		this.#stopTimer();
+		this.#abortController.abort();
 		this.#toast.dispose();
 	}
 

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

@@ -67,8 +67,7 @@ export class Toaster extends HTMLElement {
 	 */
 	constructor() {
 		super();
-		for (const toast of this.querySelectorAll("toaster-item"))
-			toast.addEventListener("hidden.bs.toast", () => toast.remove());
+		for (const toast of this.querySelectorAll("toaster-item")) toast.addEventListener("hidden.bs.toast", () => toast.remove());
 	}
 
 	/**