@cedx/base 0.2.0 → 0.3.0

package/ReadMe.md

@@ -1,6 +1,5 @@
 # Belin.io Base
-![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![NuGet](https://badgen.net/nuget/v/Belin.Base) ![License](https://badgen.net/badge/license/MIT/blue) ![Downloads](https://badgen.net/nuget/dt/Belin.Base)  
-![Node.js](https://badgen.net/npm/node/@cedx/base) ![npm](https://badgen.net/npm/v/@cedx/base) ![License](https://badgen.net/npm/license/@cedx/base) ![Downloads](https://badgen.net/npm/dt/@cedx/base)
+![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![Version](https://badgen.net/badge/project/v0.3.0/blue) ![Licence](https://badgen.net/badge/licence/MIT/blue)
 
 Base library by [Cédric Belin](https://belin.io), full stack developer,
 implemented in [C#](https://learn.microsoft.com/en-us/dotnet/csharp) and [TypeScript](https://www.typescriptlang.org).

package/lib/Html/AppTheme.d.ts

@@ -21,14 +21,14 @@ export declare const AppTheme: Readonly<{
 export type AppTheme = typeof AppTheme[keyof typeof AppTheme];
 /**
  * Gets the icon corresponding to the specified theme.
- * @param theme The theme mode.
+ * @param theme The application theme.
  * @returns The icon corresponding to the specified theme.
  */
-export declare function themeIcon(theme: AppTheme): string;
+export declare function getIcon(theme: AppTheme): string;
 /**
  * Gets the label corresponding to the specified theme.
- * @param theme The theme mode.
+ * @param theme The application theme.
  * @returns The label corresponding to the specified theme.
  */
-export declare function themeLabel(theme: AppTheme): string;
+export declare function getLabel(theme: AppTheme): string;
 //# sourceMappingURL=AppTheme.d.ts.map

package/lib/Html/AppTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppTheme.d.ts","sourceRoot":"","sources":["../../src/Client/Html/AppTheme.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,QAAQ;IAEpB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;AAE9D;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,CAMjD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,CAMlD"}
+{"version":3,"file":"AppTheme.d.ts","sourceRoot":"","sources":["../../src/Client/Html/AppTheme.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,QAAQ;IAEpB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;AAE9D;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,CAM/C;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,CAMhD"}

package/lib/Html/AppTheme.js

@@ -17,10 +17,10 @@ export const AppTheme = Object.freeze({
 });
 /**
  * Gets the icon corresponding to the specified theme.
- * @param theme The theme mode.
+ * @param theme The application theme.
  * @returns The icon corresponding to the specified theme.
  */
-export function themeIcon(theme) {
+export function getIcon(theme) {
     switch (theme) {
         case AppTheme.Dark: return "dark_mode";
         case AppTheme.Light: return "light_mode";
@@ -29,10 +29,10 @@ export function themeIcon(theme) {
 }
 /**
  * Gets the label corresponding to the specified theme.
- * @param theme The theme mode.
+ * @param theme The application theme.
  * @returns The label corresponding to the specified theme.
  */
-export function themeLabel(theme) {
+export function getLabel(theme) {
     switch (theme) {
         case AppTheme.Dark: return "Sombre";
         case AppTheme.Light: return "Clair";

package/lib/UI/LoadingIndicator.d.ts

@@ -4,10 +4,6 @@ import type { ILoadingIndicator } from "#Abstractions/ILoadingIndicator.js";
  */
 export declare class LoadingIndicator extends HTMLElement implements ILoadingIndicator {
     #private;
-    /**
-     * Creates a new loading indicator.
-     */
-    constructor();
     /**
      * Starts the loading indicator.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingIndicator.d.ts","sourceRoot":"","sources":["../../src/Client/UI/LoadingIndicator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,oCAAoC,CAAC;AAE1E;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAY,YAAW,iBAAiB;;IAO7E;;OAEG;;IAcH;;OAEG;IACH,KAAK,IAAI,IAAI;IAMb;;;OAGG;IACH,IAAI,CAAC,OAAO,GAAE;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAM,GAAG,IAAI;CAQ3C;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/LoadingIndicator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,oCAAoC,CAAC;AAE1E;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAY,YAAW,iBAAiB;;IAc7E;;OAEG;IACH,KAAK,IAAI,IAAI;IAMb;;;OAGG;IACH,IAAI,CAAC,OAAO,GAAE;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAM,GAAG,IAAI;CAQ3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,gBAAgB,CAAC;KACtC;CACD"}

package/lib/UI/LoadingIndicator.js

@@ -6,14 +6,6 @@ export class LoadingIndicator extends HTMLElement {
      * The number of concurrent HTTP requests.
      */
     #requestCount = 0;
-    /**
-     * Creates a new loading indicator.
-     */
-    constructor() {
-        super();
-        this.hidden = true;
-        this.attachShadow({ mode: "open" }).appendChild(document.createElement("slot"));
-    }
     /**
      * Registers the component.
      */

package/lib/UI/MenuActivator.d.ts

@@ -2,10 +2,7 @@
  * A component that activates the items of a menu based on the current document URL.
  */
 export declare class MenuActivator extends HTMLElement {
-    /**
-     * Creates a new menu activator.
-     */
-    constructor();
+    #private;
     /**
      * Method invoked when this component is connected.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"MenuActivator.d.ts","sourceRoot":"","sources":["../../src/Client/UI/MenuActivator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;IAE7C;;OAEG;;IAaH;;OAEG;IACH,iBAAiB,IAAI,IAAI;CASzB;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/MenuActivator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;;IAc7C;;OAEG;IACH,iBAAiB,IAAI,IAAI;CAQzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}

package/lib/UI/MenuActivator.js

@@ -3,12 +3,9 @@
  */
 export class MenuActivator extends HTMLElement {
     /**
-     * Creates a new menu activator.
+     * The root element.
      */
-    constructor() {
-        super();
-        this.attachShadow({ mode: "open" }).appendChild(document.createElement("slot"));
-    }
+    #root = this.firstElementChild;
     /**
      * Registers the component.
      */
@@ -19,14 +16,12 @@ export class MenuActivator extends HTMLElement {
      * Method invoked when this component is connected.
      */
     connectedCallback() {
-        const menu = this.shadowRoot.querySelector("slot").assignedElements().at(0);
-        if (menu)
-            for (const anchor of menu.getElementsByTagName("a"))
-                if (anchor.href != location.href)
-                    anchor.classList.remove("active");
-                else {
-                    anchor.classList.add("active");
-                    anchor.closest(".nav-item.dropdown")?.querySelector(".nav-link")?.classList.add("active");
-                }
+        for (const anchor of this.#root.getElementsByTagName("a"))
+            if (anchor.href != location.href)
+                anchor.classList.remove("active");
+            else {
+                anchor.classList.add("active");
+                anchor.closest(".nav-item.dropdown")?.querySelector(".nav-link")?.classList.add("active");
+            }
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"OfflineIndicator.d.ts","sourceRoot":"","sources":["../../src/Client/UI/OfflineIndicator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;IAEhD;;OAEG;;IAcH;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAIzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;OAEG;IACH,WAAW,IAAI,IAAI;CAGnB;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/OfflineIndicator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;IAEhD;;OAEG;;IAaH;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAIzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;OAEG;IACH,WAAW,IAAI,IAAI;CAGnB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,gBAAgB,CAAC;KACtC;CACD"}

package/lib/UI/OfflineIndicator.js

@@ -8,7 +8,6 @@ export class OfflineIndicator extends HTMLElement {
     constructor() {
         super();
         this.hidden = navigator.onLine;
-        this.attachShadow({ mode: "open" }).appendChild(document.createElement("slot"));
     }
     /**
      * Registers the component.

package/lib/UI/ThemeDropdown.d.ts

@@ -1,36 +1,12 @@
-import { AppTheme } from "#Html/AppTheme.js";
-import { MenuAlignment } from "#Html/MenuAlignment.js";
-import { LitElement, type TemplateResult } from "lit";
 /**
- * A dropdown menu for switching the color mode.
+ * A dropdown menu for switching the application theme.
  */
-export declare class ThemeDropdown extends LitElement {
+export declare class ThemeDropdown extends HTMLElement {
     #private;
-    /**
-     * The alignment of the dropdown menu.
-     */
-    alignment: MenuAlignment;
-    /**
-     * The label of the dropdown menu.
-     */
-    label: string;
-    /**
-     * The key of the storage entry providing the saved theme.
-     */
-    storageKey: string;
-    /**
-     * The current application theme.
-     */
-    private appTheme;
     /**
      * Creates a new theme dropdown.
      */
     constructor();
-    /**
-     * The current theme mode.
-     */
-    get theme(): AppTheme;
-    set theme(value: AppTheme);
     /**
      * Method invoked when this component is connected.
      */
@@ -43,16 +19,6 @@ export declare class ThemeDropdown extends LitElement {
      * Handles the events.
      */
     handleEvent(): void;
-    /**
-     * Returns the node into which this component should render.
-     * @returns The node into which this component should render.
-     */
-    protected createRenderRoot(): DocumentFragment | HTMLElement;
-    /**
-     * Renders this component.
-     * @returns The view template.
-     */
-    protected render(): TemplateResult;
 }
 /**
  * Declaration merging.

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeDropdown.d.ts","sourceRoot":"","sources":["../../src/Client/UI/ThemeDropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAwB,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAO,UAAU,EAAE,KAAK,cAAc,EAAC,MAAM,KAAK,CAAC;AAK1D;;GAEG;AACH,qBACa,aAAc,SAAQ,UAAU;;IAE5C;;OAEG;IACS,SAAS,EAAE,aAAa,CAAqB;IAEzD;;OAEG;IACS,KAAK,SAAM;IAEvB;;OAEG;IACS,UAAU,SAAc;IAEpC;;OAEG;IACM,OAAO,CAAC,QAAQ,CAAW;IAOpC;;OAEG;;IAOH;;OAEG;IACH,IAAI,KAAK,IAAI,QAAQ,CAA0B;IAC/C,IAAI,KAAK,CAAC,KAAK,EAAE,QAAQ,EAGxB;IAED;;OAEG;IACM,iBAAiB,IAAI,IAAI;IAMlC;;OAEG;IACM,oBAAoB,IAAI,IAAI;IAKrC;;OAEG;IACH,WAAW,IAAI,IAAI;IAInB;;;OAGG;cACgB,gBAAgB,IAAI,gBAAgB,GAAC,WAAW;IAInE;;;OAGG;cACgB,MAAM,IAAI,cAAc;CA4B3C;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/ThemeDropdown.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;;IAsB7C;;OAEG;;IAeH;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;OAEG;IACH,WAAW,IAAI,IAAI;CA2BnB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}

package/lib/UI/ThemeDropdown.js

@@ -1,64 +1,52 @@
-import { __decorate } from "tslib";
-import { AppTheme, themeIcon, themeLabel } from "#Html/AppTheme.js";
-import { MenuAlignment } from "#Html/MenuAlignment.js";
-import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { when } from "lit/directives/when.js";
+import { AppTheme, getIcon } from "#Html/AppTheme.js";
 /**
- * A dropdown menu for switching the color mode.
+ * A dropdown menu for switching the application theme.
  */
-let ThemeDropdown = class ThemeDropdown extends LitElement {
+export class ThemeDropdown extends HTMLElement {
     /**
-     * The media query used to check the system theme.
+     * The media query used to check the application theme.
      */
-    #mediaQuery;
+    #mediaQuery = matchMedia("(prefers-color-scheme: dark)");
+    /**
+     * The root element.
+     */
+    #root = this.firstElementChild;
+    /**
+     * The key of the storage entry providing the saved theme mode.
+     */
+    #storageKey = this.getAttribute("storageKey") ?? "AppTheme";
+    /**
+     * The current application theme.
+     */
+    #theme;
     /**
      * Creates a new theme dropdown.
      */
     constructor() {
         super();
-        /**
-         * The alignment of the dropdown menu.
-         */
-        this.alignment = MenuAlignment.End;
-        /**
-         * The label of the dropdown menu.
-         */
-        this.label = "";
-        /**
-         * The key of the storage entry providing the saved theme.
-         */
-        this.storageKey = "AppTheme";
-        /**
-         * The media query used to check the system theme.
-         */
-        this.#mediaQuery = matchMedia("(prefers-color-scheme: dark)");
-        const theme = localStorage.getItem(this.storageKey);
-        this.appTheme = Object.values(AppTheme).includes(theme) ? theme : AppTheme.System;
+        const theme = localStorage.getItem(this.#storageKey);
+        this.#theme = Object.values(AppTheme).includes(theme) ? theme : AppTheme.System;
+        for (const button of this.#root.querySelectorAll("button"))
+            button.addEventListener("click", this.#setTheme.bind(this));
     }
     /**
-     * The current theme mode.
+     * Registers the component.
      */
-    get theme() { return this.appTheme; }
-    set theme(value) {
-        localStorage.setItem(this.storageKey, this.appTheme = value);
-        this.#applyTheme();
+    static {
+        customElements.define("theme-dropdown", this);
     }
     /**
      * Method invoked when this component is connected.
      */
     connectedCallback() {
-        super.connectedCallback();
-        this.#applyTheme();
         this.#mediaQuery.addEventListener("change", this);
+        this.#applyTheme();
     }
     /**
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback() {
         this.#mediaQuery.removeEventListener("change", this);
-        super.disconnectedCallback();
     }
     /**
      * Handles the events.
@@ -66,58 +54,25 @@ let ThemeDropdown = class ThemeDropdown extends LitElement {
     handleEvent() {
         this.#applyTheme();
     }
-    /**
-     * Returns the node into which this component should render.
-     * @returns The node into which this component should render.
-     */
-    createRenderRoot() {
-        return this;
-    }
-    /**
-     * Renders this component.
-     * @returns The view template.
-     */
-    render() {
-        return html `
-			<li class="nav-item dropdown">
-				<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" href="#">
-					<i class="icon icon-fill">${themeIcon(this.appTheme)}</i>
-					${when(this.label, () => html `<span class="ms-1">${this.label}</span>`)}
-				</a>
-				<ul class="dropdown-menu ${classMap({ "dropdown-menu-end": this.alignment == MenuAlignment.End })}">
-					${Object.values(AppTheme).map(value => html `
-						<li>
-							<button class="dropdown-item d-flex align-items-center justify-content-between" @click=${() => this.theme = value}>
-								<span><i class="icon icon-fill me-1">${themeIcon(value)}</i> ${themeLabel(value)}</span>
-								${when(value == this.appTheme, () => html `<i class="icon ms-2">check</i>`)}
-							</button>
-						</li>
-					`)}
-				</ul>
-			</li>
-		`;
-    }
     /**
      * Applies the theme to the document.
      */
     #applyTheme() {
-        const theme = this.appTheme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : this.appTheme;
+        const theme = this.#theme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : this.#theme;
         document.documentElement.dataset.bsTheme = theme.toLowerCase();
+        this.#root.querySelector(".dropdown-toggle > .icon").textContent = getIcon(this.#theme);
+        const checkIcon = this.#root.querySelector(".dropdown-item > .icon");
+        checkIcon.remove();
+        const activeButton = this.#root.querySelector(`button[data-theme="${this.#theme}"]`);
+        activeButton.appendChild(checkIcon);
+    }
+    /**
+     * Changes the current theme.
+     * @param event The dispatched event.
+     */
+    #setTheme(event) {
+        const button = event.target.closest("button");
+        localStorage.setItem(this.#storageKey, this.#theme = button.dataset.theme);
+        this.#applyTheme();
     }
-};
-__decorate([
-    property()
-], ThemeDropdown.prototype, "alignment", void 0);
-__decorate([
-    property()
-], ThemeDropdown.prototype, "label", void 0);
-__decorate([
-    property()
-], ThemeDropdown.prototype, "storageKey", void 0);
-__decorate([
-    state()
-], ThemeDropdown.prototype, "appTheme", void 0);
-ThemeDropdown = __decorate([
-    customElement("theme-dropdown")
-], ThemeDropdown);
-export { ThemeDropdown };
+}

package/package.json

@@ -7,13 +7,13 @@
 	"name": "@cedx/base",
 	"repository": "cedx/base",
 	"type": "module",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"devDependencies": {
 		"@playwright/browser-chromium": "^1.54.2",
 		"@types/bootstrap": "^5.2.10",
 		"@types/chai": "^5.2.2",
 		"@types/mocha": "^10.0.10",
-		"@types/node": "^24.2.0",
+		"@types/node": "^24.2.1",
 		"@types/serve-handler": "^6.1.4",
 		"chai": "^5.2.1",
 		"esbuild": "^0.25.8",
@@ -51,7 +51,6 @@
 	],
 	"peerDependencies": {
 		"bootstrap": ">=5.3.0",
-		"lit": ">=3.3.0",
 		"tslib": ">=2.8.0"
 	},
 	"publishConfig": {

package/src/Client/Html/AppTheme.ts

@@ -26,10 +26,10 @@ export type AppTheme = typeof AppTheme[keyof typeof AppTheme];
 
 /**
  * Gets the icon corresponding to the specified theme.
- * @param theme The theme mode.
+ * @param theme The application theme.
  * @returns The icon corresponding to the specified theme.
  */
-export function themeIcon(theme: AppTheme): string {
+export function getIcon(theme: AppTheme): string {
 	switch (theme) {
 		case AppTheme.Dark: return "dark_mode";
 		case AppTheme.Light: return "light_mode";
@@ -39,10 +39,10 @@ export function themeIcon(theme: AppTheme): string {
 
 /**
  * Gets the label corresponding to the specified theme.
- * @param theme The theme mode.
+ * @param theme The application theme.
  * @returns The label corresponding to the specified theme.
  */
-export function themeLabel(theme: AppTheme): string {
+export function getLabel(theme: AppTheme): string {
 	switch (theme) {
 		case AppTheme.Dark: return "Sombre";
 		case AppTheme.Light: return "Clair";

package/src/Client/Html/ViewportScroller.ts

@@ -44,7 +44,7 @@ export class ViewportScroller {
 			this.#scrollOffset += Number.isNaN(navbarHeight) ? 0 : navbarHeight;
 		}
 
-		const actionBar: HTMLElement|null = document.body.querySelector("action-bar");
+		const actionBar = document.body.querySelector<HTMLElement>("action-bar");
 		return this.#scrollOffset + (actionBar?.offsetHeight ?? 0);
 	}
 

package/src/Client/UI/LoadingIndicator.ts

@@ -10,15 +10,6 @@ export class LoadingIndicator extends HTMLElement implements ILoadingIndicator {
 	 */
 	#requestCount = 0;
 
-	/**
-	 * Creates a new loading indicator.
-	 */
-	constructor() {
-		super();
-		this.hidden = true;
-		this.attachShadow({mode: "open"}).appendChild(document.createElement("slot"));
-	}
-
 	/**
 	 * Registers the component.
 	 */

package/src/Client/UI/MenuActivator.ts

@@ -4,12 +4,9 @@
 export class MenuActivator extends HTMLElement {
 
 	/**
-	 * Creates a new menu activator.
+	 * The root element.
 	 */
-	constructor() {
-		super();
-		this.attachShadow({mode: "open"}).appendChild(document.createElement("slot"));
-	}
+	readonly #root = this.firstElementChild!;
 
 	/**
 	 * Registers the component.
@@ -22,8 +19,7 @@ export class MenuActivator extends HTMLElement {
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
-		const menu = this.shadowRoot!.querySelector("slot")!.assignedElements().at(0);
-		if (menu) for (const anchor of menu.getElementsByTagName("a"))
+		for (const anchor of this.#root.getElementsByTagName("a"))
 			if (anchor.href != location.href) anchor.classList.remove("active");
 			else {
 				anchor.classList.add("active");

package/src/Client/UI/OfflineIndicator.ts

@@ -9,7 +9,6 @@ export class OfflineIndicator extends HTMLElement {
 	constructor() {
 		super();
 		this.hidden = navigator.onLine;
-		this.attachShadow({mode: "open"}).appendChild(document.createElement("slot"));
 	}
 
 	/**

package/src/Client/UI/ThemeDropdown.ts

@@ -1,74 +1,60 @@
-import {AppTheme, themeIcon, themeLabel} from "#Html/AppTheme.js";
-import {MenuAlignment} from "#Html/MenuAlignment.js";
-import {html, LitElement, type TemplateResult} from "lit";
-import {customElement, property, state} from "lit/decorators.js";
-import {classMap} from "lit/directives/class-map.js";
-import {when} from "lit/directives/when.js";
+import {AppTheme, getIcon} from "#Html/AppTheme.js";
 
 /**
- * A dropdown menu for switching the color mode.
+ * A dropdown menu for switching the application theme.
  */
-@customElement("theme-dropdown")
-export class ThemeDropdown extends LitElement {
+export class ThemeDropdown extends HTMLElement {
 
 	/**
-	 * The alignment of the dropdown menu.
+	 * The media query used to check the application theme.
 	 */
-	@property() alignment: MenuAlignment = MenuAlignment.End;
+	readonly #mediaQuery = matchMedia("(prefers-color-scheme: dark)");
 
 	/**
-	 * The label of the dropdown menu.
+	 * The root element.
 	 */
-	@property() label = "";
+	readonly #root = this.firstElementChild!;
 
 	/**
-	 * The key of the storage entry providing the saved theme.
+	 * The key of the storage entry providing the saved theme mode.
 	 */
-	@property() storageKey = "AppTheme";
+	readonly #storageKey = this.getAttribute("storageKey") ?? "AppTheme";
 
 	/**
 	 * The current application theme.
 	 */
-	@state() private appTheme: AppTheme;
-
-	/**
-	 * The media query used to check the system theme.
-	 */
-	readonly #mediaQuery = matchMedia("(prefers-color-scheme: dark)");
+	#theme: AppTheme;
 
 	/**
 	 * Creates a new theme dropdown.
 	 */
 	constructor() {
 		super();
-		const theme = localStorage.getItem(this.storageKey) as AppTheme;
-		this.appTheme = Object.values(AppTheme).includes(theme) ? theme : AppTheme.System;
+		const theme = localStorage.getItem(this.#storageKey) as AppTheme;
+		this.#theme = Object.values(AppTheme).includes(theme) ? theme : AppTheme.System;
+		for (const button of this.#root.querySelectorAll("button")) button.addEventListener("click", this.#setTheme.bind(this));
 	}
 
 	/**
-	 * The current theme mode.
+	 * Registers the component.
 	 */
-	get theme(): AppTheme { return this.appTheme; }
-	set theme(value: AppTheme) {
-		localStorage.setItem(this.storageKey, this.appTheme = value);
-		this.#applyTheme();
+	static {
+		customElements.define("theme-dropdown", this);
 	}
 
 	/**
 	 * Method invoked when this component is connected.
 	 */
-	override connectedCallback(): void {
-		super.connectedCallback();
-		this.#applyTheme();
+	connectedCallback(): void {
 		this.#mediaQuery.addEventListener("change", this);
+		this.#applyTheme();
 	}
 
 	/**
 	 * Method invoked when this component is disconnected.
 	 */
-	override disconnectedCallback(): void {
+	disconnectedCallback(): void {
 		this.#mediaQuery.removeEventListener("change", this);
-		super.disconnectedCallback();
 	}
 
 	/**
@@ -79,44 +65,27 @@ export class ThemeDropdown extends LitElement {
 	}
 
 	/**
-	 * Returns the node into which this component should render.
-	 * @returns The node into which this component should render.
+	 * Applies the theme to the document.
 	 */
-	protected override createRenderRoot(): DocumentFragment|HTMLElement {
-		return this;
-	}
+	#applyTheme(): void {
+		const theme = this.#theme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : this.#theme;
+		document.documentElement.dataset.bsTheme = theme.toLowerCase();
+		this.#root.querySelector(".dropdown-toggle > .icon")!.textContent = getIcon(this.#theme);
 
-	/**
-	 * Renders this component.
-	 * @returns The view template.
-	 */
-	protected override render(): TemplateResult {
-		return html`
-			<li class="nav-item dropdown">
-				<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" href="#">
-					<i class="icon icon-fill">${themeIcon(this.appTheme)}</i>
-					${when(this.label, () => html`<span class="ms-1">${this.label}</span>`)}
-				</a>
-				<ul class="dropdown-menu ${classMap({"dropdown-menu-end": this.alignment == MenuAlignment.End})}">
-					${Object.values(AppTheme).map(value => html`
-						<li>
-							<button class="dropdown-item d-flex align-items-center justify-content-between" @click=${() => this.theme = value}>
-								<span><i class="icon icon-fill me-1">${themeIcon(value)}</i> ${themeLabel(value)}</span>
-								${when(value == this.appTheme, () => html`<i class="icon ms-2">check</i>`)}
-							</button>
-						</li>
-					`)}
-				</ul>
-			</li>
-		`;
+		const checkIcon = this.#root.querySelector(".dropdown-item > .icon")!;
+		checkIcon.remove();
+		const activeButton = this.#root.querySelector(`button[data-theme="${this.#theme}"]`)!
+		activeButton.appendChild(checkIcon);
 	}
 
 	/**
-	 * Applies the theme to the document.
+	 * Changes the current theme.
+	 * @param event The dispatched event.
 	 */
-	#applyTheme(): void {
-		const theme = this.appTheme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : this.appTheme;
-		document.documentElement.dataset.bsTheme = theme.toLowerCase();
+	#setTheme(event: Event): void {
+		const button = (event.target as HTMLElement).closest("button")!;
+		localStorage.setItem(this.#storageKey, this.#theme = button.dataset.theme as AppTheme);
+		this.#applyTheme();
 	}
 }