@cedx/base 0.12.0 → 0.13.1

package/ReadMe.md

@@ -1,5 +1,5 @@
 # Belin.io Base
-![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![Version](https://badgen.net/badge/project/v0.12.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.13.1/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/UI/Components/Toast.d.ts

@@ -1,6 +1,6 @@
 import { Context } from "@cedx/base/UI/Context.js";
 /**
- * Manages the notification messages.
+ * Represents a notification.
  */
 export declare class Toast extends HTMLElement {
     #private;
@@ -14,7 +14,7 @@ export declare class Toast extends HTMLElement {
     get animation(): boolean;
     set animation(value: boolean);
     /**
-     * Value indicating whether to automatically hide the notification.
+     * Value indicating whether to automatically hide the toast.
      */
     get autoHide(): boolean;
     set autoHide(value: boolean);
@@ -34,7 +34,7 @@ export declare class Toast extends HTMLElement {
     get culture(): Intl.Locale;
     set culture(value: Intl.Locale);
     /**
-     * The delay, in milliseconds, to hide the notification.
+     * The delay, in milliseconds, to hide the toast.
      */
     get delay(): number;
     set delay(value: number);
@@ -71,4 +71,15 @@ export declare class Toast extends HTMLElement {
      */
     show(): void;
 }
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "toaster-item": Toast;
+    }
+}
 //# sourceMappingURL=Toast.d.ts.map

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,EAAU,MAAM,0BAA0B,CAAC;AAG1D;;GAEG;AACH,qBAAa,KAAM,SAAQ,WAAW;;IAErC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAA6C;IAuC/E;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAGrB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,CAGzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,WAAW,IAAI,MAAM,CAExB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAkB/F;;OAEG;IACH,iBAAiB,IAAI,IAAI;IASzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;CA+DZ"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toast.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAiB,MAAM,0BAA0B,CAAC;AAGjE;;GAEG;AACH,qBAAa,KAAM,SAAQ,WAAW;;IAErC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAA6C;IAuC/E;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAGrB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,CAGzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,WAAW,IAAI,MAAM,CAExB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAU/F;;OAEG;IACH,iBAAiB,IAAI,IAAI;IASzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;CA+DZ;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

@@ -1,8 +1,8 @@
 import { Duration } from "@cedx/base/Duration.js";
-import { Context, getIcon } from "@cedx/base/UI/Context.js";
+import { Context, getIcon, toCss } from "@cedx/base/UI/Context.js";
 import { Toast as BootstrapToast } from "bootstrap";
 /**
- * Manages the notification messages.
+ * Represents a notification.
  */
 export class Toast extends HTMLElement {
     /**
@@ -52,7 +52,7 @@ export class Toast extends HTMLElement {
             this.removeAttribute("animation");
     }
     /**
-     * Value indicating whether to automatically hide the notification.
+     * Value indicating whether to automatically hide the toast.
      */
     get autoHide() {
         return this.hasAttribute("autohide");
@@ -93,7 +93,7 @@ export class Toast extends HTMLElement {
         this.setAttribute("culture", value.toString());
     }
     /**
-     * The delay, in milliseconds, to hide the notification.
+     * The delay, in milliseconds, to hide the toast.
      */
     get delay() {
         const value = Number(this.getAttribute("delay"));
@@ -202,10 +202,10 @@ export class Toast extends HTMLElement {
     #updateContext(value) {
         const contexts = Object.values(Context);
         let { classList } = this.#header;
-        classList.remove(...contexts.map(context => `toast-header-${context}`));
+        classList.remove(...contexts.map(context => `toast-header-${toCss(context)}`));
         classList.add(`toast-header-${value}`);
         ({ classList } = this.#header.querySelector(".icon"));
-        classList.remove(...contexts.map(context => `text-${context}`));
+        classList.remove(...contexts.map(context => `text-${toCss(context)}`));
         classList.add(`text-${value}`);
     }
     /**

package/lib/UI/Context.d.ts

@@ -5,19 +5,19 @@ export declare const Context: Readonly<{
     /**
      * A danger.
      */
-    Danger: "danger";
+    Danger: "Danger";
     /**
      * A warning.
      */
-    Warning: "warning";
+    Warning: "Warning";
     /**
      * An information.
      */
-    Info: "info";
+    Info: "Info";
     /**
      * A success.
      */
-    Success: "success";
+    Success: "Success";
 }>;
 /**
  * Defines contextual modifiers.
@@ -29,4 +29,10 @@ export type Context = typeof Context[keyof typeof Context];
  * @returns The icon corresponding to the specified context.
  */
 export declare function getIcon(context: Context): string;
+/**
+ * Returns the CSS representation of the specified context.
+ * @param context The context.
+ * @returns The CSS representation of the specified context.
+ */
+export declare function toCss(context: Context): string;
 //# sourceMappingURL=Context.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Context.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,OAAO;IAEnB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;AAE3D;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAOhD"}
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Context.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,OAAO;IAEnB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;AAE3D;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAOhD;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAE9C"}

package/lib/UI/Context.js

@@ -5,19 +5,19 @@ export const Context = Object.freeze({
     /**
      * A danger.
      */
-    Danger: "danger",
+    Danger: "Danger",
     /**
      * A warning.
      */
-    Warning: "warning",
+    Warning: "Warning",
     /**
      * An information.
      */
-    Info: "info",
+    Info: "Info",
     /**
      * A success.
      */
-    Success: "success"
+    Success: "Success"
 });
 /**
  * Gets the icon corresponding to the specified context.
@@ -32,3 +32,11 @@ export function getIcon(context) {
         default: return "info";
     }
 }
+/**
+ * Returns the CSS representation of the specified context.
+ * @param context The context.
+ * @returns The CSS representation of the specified context.
+ */
+export function toCss(context) {
+    return context.toLowerCase();
+}

package/lib/UI/Position.d.ts

@@ -1,11 +1,11 @@
 /**
- * Defines the placement of an element.
+ * Defines the position of an element.
  */
 export declare const Position: Readonly<{
     /**
      * Top left.
      */
-    TopLeft: "TopLeft";
+    TopStart: "TopStart";
     /**
      * Top center.
      */
@@ -13,11 +13,11 @@ export declare const Position: Readonly<{
     /**
      * Top right.
      */
-    TopRight: "TopRight";
+    TopEnd: "TopEnd";
     /**
      * Middle left.
      */
-    MiddleLeft: "MiddleLeft";
+    MiddleStart: "MiddleStart";
     /**
      * Middle center.
      */
@@ -25,11 +25,11 @@ export declare const Position: Readonly<{
     /**
      * Middle right.
      */
-    MiddleRight: "MiddleRight";
+    MiddleEnd: "MiddleEnd";
     /**
      * Bottom left.
      */
-    BottomLeft: "BottomLeft";
+    BottomStart: "BottomStart";
     /**
      * Bottom center.
      */
@@ -37,10 +37,16 @@ export declare const Position: Readonly<{
     /**
      * Bottom right.
      */
-    BottomRight: "BottomRight";
+    BottomEnd: "BottomEnd";
 }>;
 /**
  * Defines the placement of an element.
  */
 export type Position = typeof Position[keyof typeof Position];
+/**
+ * Returns the CSS representation of the specified position.
+ * @param position The position.
+ * @returns The CSS representation of the specified position.
+ */
+export declare function toCss(position: Position): string;
 //# sourceMappingURL=Position.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Position.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Position.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,QAAQ;IAEpB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"Position.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Position.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,QAAQ;IAEpB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;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,KAAK,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAYhD"}

package/lib/UI/Position.js

@@ -1,11 +1,11 @@
 /**
- * Defines the placement of an element.
+ * Defines the position of an element.
  */
 export const Position = Object.freeze({
     /**
      * Top left.
      */
-    TopLeft: "TopLeft",
+    TopStart: "TopStart",
     /**
      * Top center.
      */
@@ -13,11 +13,11 @@ export const Position = Object.freeze({
     /**
      * Top right.
      */
-    TopRight: "TopRight",
+    TopEnd: "TopEnd",
     /**
      * Middle left.
      */
-    MiddleLeft: "MiddleLeft",
+    MiddleStart: "MiddleStart",
     /**
      * Middle center.
      */
@@ -25,11 +25,11 @@ export const Position = Object.freeze({
     /**
      * Middle right.
      */
-    MiddleRight: "MiddleRight",
+    MiddleEnd: "MiddleEnd",
     /**
      * Bottom left.
      */
-    BottomLeft: "BottomLeft",
+    BottomStart: "BottomStart",
     /**
      * Bottom center.
      */
@@ -37,5 +37,23 @@ export const Position = Object.freeze({
     /**
      * Bottom right.
      */
-    BottomRight: "BottomRight"
+    BottomEnd: "BottomEnd"
 });
+/**
+ * Returns the CSS representation of the specified position.
+ * @param position The position.
+ * @returns The CSS representation of the specified position.
+ */
+export function toCss(position) {
+    switch (position) {
+        case Position.TopCenter: return "top-0 start-50 translate-middle-x";
+        case Position.TopEnd: return "top-0 end-0";
+        case Position.MiddleStart: return "top-50 start-0 translate-middle-y";
+        case Position.MiddleCenter: return "top-50 start-50 translate-middle";
+        case Position.MiddleEnd: return "top-50 end-0 translate-middle-y";
+        case Position.BottomStart: return "bottom-0 start-0";
+        case Position.BottomCenter: return "bottom-0 start-50 translate-middle-x";
+        case Position.BottomEnd: return "bottom-0 end-0";
+        default: return "top-0 start-0";
+    }
+}

package/lib/UI/Size.d.ts

@@ -1,34 +1,40 @@
 /**
- * Defines the size of a component.
+ * Defines the size of an element.
  */
 export declare const Size: Readonly<{
     /**
      * An extra small size.
      */
-    ExtraSmall: "xs";
+    ExtraSmall: "ExtraSmall";
     /**
      * A small size.
      */
-    Small: "sm";
+    Small: "Small";
     /**
      * A medium size.
      */
-    Medium: "md";
+    Medium: "Medium";
     /**
      * A large size.
      */
-    Large: "lg";
+    Large: "Large";
     /**
      * An extra large size.
      */
-    ExtraLarge: "xl";
+    ExtraLarge: "ExtraLarge";
     /**
      * An extra extra large size.
      */
-    ExtraExtraLarge: "xxl";
+    ExtraExtraLarge: "ExtraExtraLarge";
 }>;
 /**
- * Defines the size of a component.
+ * Defines the size of an element.
  */
 export type Size = typeof Size[keyof typeof Size];
+/**
+ * Returns the CSS representation of the specified size.
+ * @param size The size.
+ * @returns The CSS representation of the specified size.
+ */
+export declare function toCss(size: Size): string;
 //# sourceMappingURL=Size.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Size.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Size.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,IAAI;IAEhB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,MAAM,OAAO,IAAI,CAAC,CAAC"}
+{"version":3,"file":"Size.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Size.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,IAAI;IAEhB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,MAAM,OAAO,IAAI,CAAC,CAAC;AAElD;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CASxC"}

package/lib/UI/Size.js

@@ -1,29 +1,44 @@
 /**
- * Defines the size of a component.
+ * Defines the size of an element.
  */
 export const Size = Object.freeze({
     /**
      * An extra small size.
      */
-    ExtraSmall: "xs",
+    ExtraSmall: "ExtraSmall",
     /**
      * A small size.
      */
-    Small: "sm",
+    Small: "Small",
     /**
      * A medium size.
      */
-    Medium: "md",
+    Medium: "Medium",
     /**
      * A large size.
      */
-    Large: "lg",
+    Large: "Large",
     /**
      * An extra large size.
      */
-    ExtraLarge: "xl",
+    ExtraLarge: "ExtraLarge",
     /**
      * An extra extra large size.
      */
-    ExtraExtraLarge: "xxl"
+    ExtraExtraLarge: "ExtraExtraLarge"
 });
+/**
+ * Returns the CSS representation of the specified size.
+ * @param size The size.
+ * @returns The CSS representation of the specified size.
+ */
+export function toCss(size) {
+    switch (size) {
+        case Size.ExtraSmall: return "xs";
+        case Size.Small: return "sm";
+        case Size.Large: return "lg";
+        case Size.ExtraLarge: return "xl";
+        case Size.ExtraExtraLarge: return "xxl";
+        default: return "md";
+    }
+}

package/lib/UI/Variant.d.ts

@@ -5,22 +5,28 @@ export declare const Variant: Readonly<{
     /**
      * A dark variant.
      */
-    Dark: "dark";
+    Dark: "Dark";
     /**
      * A light variant.
      */
-    Light: "light";
+    Light: "Light";
     /**
      * A primary variant.
      */
-    Primary: "primary";
+    Primary: "Primary";
     /**
      * A secondary variant.
      */
-    Secondary: "secondary";
+    Secondary: "Secondary";
 }>;
 /**
  * Defines tone variants.
  */
 export type Variant = typeof Variant[keyof typeof Variant];
+/**
+ * Returns the CSS representation of the specified variant.
+ * @param variant The variant.
+ * @returns The CSS representation of the specified variant.
+ */
+export declare function toCss(variant: Variant): string;
 //# sourceMappingURL=Variant.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Variant.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Variant.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,OAAO;IAEnB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC"}
+{"version":3,"file":"Variant.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Variant.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,OAAO;IAEnB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;AAE3D;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAE9C"}

package/lib/UI/Variant.js

@@ -5,17 +5,25 @@ export const Variant = Object.freeze({
     /**
      * A dark variant.
      */
-    Dark: "dark",
+    Dark: "Dark",
     /**
      * A light variant.
      */
-    Light: "light",
+    Light: "Light",
     /**
      * A primary variant.
      */
-    Primary: "primary",
+    Primary: "Primary",
     /**
      * A secondary variant.
      */
-    Secondary: "secondary"
+    Secondary: "Secondary"
 });
+/**
+ * Returns the CSS representation of the specified variant.
+ * @param variant The variant.
+ * @returns The CSS representation of the specified variant.
+ */
+export function toCss(variant) {
+    return variant.toLowerCase();
+}

package/package.json

@@ -7,7 +7,7 @@
 	"name": "@cedx/base",
 	"repository": "cedx/base",
 	"type": "module",
-	"version": "0.12.0",
+	"version": "0.13.1",
 	"devDependencies": {
 		"@playwright/browser-chromium": "^1.55.0",
 		"@types/bootstrap": "^5.2.10",

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

@@ -1,9 +1,9 @@
 import {Duration} from "@cedx/base/Duration.js";
-import {Context, getIcon} from "@cedx/base/UI/Context.js";
+import {Context, getIcon, toCss} from "@cedx/base/UI/Context.js";
 import {Toast as BootstrapToast} from "bootstrap";
 
 /**
- * Manages the notification messages.
+ * Represents a notification.
  */
 export class Toast extends HTMLElement {
 
@@ -61,7 +61,7 @@ export class Toast extends HTMLElement {
 	}
 
 	/**
-	 * Value indicating whether to automatically hide the notification.
+	 * Value indicating whether to automatically hide the toast.
 	 */
 	get autoHide(): boolean {
 		return this.hasAttribute("autohide");
@@ -104,7 +104,7 @@ export class Toast extends HTMLElement {
 	}
 
 	/**
-	 * The delay, in milliseconds, to hide the notification.
+	 * The delay, in milliseconds, to hide the toast.
 	 */
 	get delay(): number {
 		const value = Number(this.getAttribute("delay"));
@@ -140,18 +140,10 @@ export class Toast extends HTMLElement {
 	 */
 	attributeChangedCallback(attribute: string, oldValue: string|null, newValue: string|null): void {
 		if (newValue != oldValue) switch (attribute) {
-			case "caption":
-				this.#updateCaption(newValue ?? "");
-				break;
-			case "context":
-				this.#updateContext(Object.values(Context).includes(newValue as Context) ? newValue as Context : Context.Info);
-				break;
-			case "culture":
-				this.#formatter = new Intl.RelativeTimeFormat((newValue ?? "").trim() || navigator.language, {style: "long"});
-				break;
-			case "icon":
-				this.#updateIcon(newValue ?? "")
-				break;
+			case "caption": this.#updateCaption(newValue ?? ""); break;
+			case "context": this.#updateContext(Object.values(Context).includes(newValue as Context) ? newValue as Context : Context.Info); break;
+			case "culture": this.#formatter = new Intl.RelativeTimeFormat((newValue ?? "").trim() || navigator.language, {style: "long"}); break;
+			case "icon": this.#updateIcon(newValue ?? ""); break;
 			// No default
 		}
 	}
@@ -226,11 +218,11 @@ export class Toast extends HTMLElement {
 		const contexts = Object.values(Context);
 
 		let {classList} = this.#header;
-		classList.remove(...contexts.map(context => `toast-header-${context}`));
+		classList.remove(...contexts.map(context => `toast-header-${toCss(context)}`));
 		classList.add(`toast-header-${value}`);
 
 		({classList} = this.#header.querySelector(".icon")!);
-		classList.remove(...contexts.map(context => `text-${context}`));
+		classList.remove(...contexts.map(context => `text-${toCss(context)}`));
 		classList.add(`text-${value}`);
 	}
 
@@ -250,3 +242,16 @@ export class Toast extends HTMLElement {
 		this.#header.querySelector(".icon")!.textContent = value.trim() || getIcon(Context.Info);
 	}
 }
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"toaster-item": Toast;
+	}
+}

package/src/Client/UI/Context.ts

@@ -6,22 +6,22 @@ export const Context = Object.freeze({
 	/**
 	 * A danger.
 	 */
-	Danger: "danger",
+	Danger: "Danger",
 
 	/**
 	 * A warning.
 	 */
-	Warning: "warning",
+	Warning: "Warning",
 
 	/**
 	 * An information.
 	 */
-	Info: "info",
+	Info: "Info",
 
 	/**
 	 * A success.
 	 */
-	Success: "success"
+	Success: "Success"
 });
 
 /**
@@ -42,3 +42,12 @@ export function getIcon(context: Context): string {
 		default: return "info";
 	}
 }
+
+/**
+ * Returns the CSS representation of the specified context.
+ * @param context The context.
+ * @returns The CSS representation of the specified context.
+ */
+export function toCss(context: Context): string {
+	return context.toLowerCase();
+}

package/src/Client/UI/Position.ts

@@ -1,12 +1,12 @@
 /**
- * Defines the placement of an element.
+ * Defines the position of an element.
  */
 export const Position = Object.freeze({
 
 	/**
 	 * Top left.
 	 */
-	TopLeft: "TopLeft",
+	TopStart: "TopStart",
 
 	/**
 	 * Top center.
@@ -16,12 +16,12 @@ export const Position = Object.freeze({
 	/**
 	 * Top right.
 	 */
-	TopRight: "TopRight",
+	TopEnd: "TopEnd",
 
 	/**
 	 * Middle left.
 	 */
-	MiddleLeft: "MiddleLeft",
+	MiddleStart: "MiddleStart",
 
 	/**
 	 * Middle center.
@@ -31,12 +31,12 @@ export const Position = Object.freeze({
 	/**
 	 * Middle right.
 	 */
-	MiddleRight: "MiddleRight",
+	MiddleEnd: "MiddleEnd",
 
 	/**
 	 * Bottom left.
 	 */
-	BottomLeft: "BottomLeft",
+	BottomStart: "BottomStart",
 
 	/**
 	 * Bottom center.
@@ -46,10 +46,29 @@ export const Position = Object.freeze({
 	/**
 	 * Bottom right.
 	 */
-	BottomRight: "BottomRight"
+	BottomEnd: "BottomEnd"
 });
 
 /**
  * Defines the placement of an element.
  */
 export type Position = typeof Position[keyof typeof Position];
+
+/**
+ * Returns the CSS representation of the specified position.
+ * @param position The position.
+ * @returns The CSS representation of the specified position.
+ */
+export function toCss(position: Position): string {
+	switch (position) {
+		case Position.TopCenter: return "top-0 start-50 translate-middle-x";
+		case Position.TopEnd: return "top-0 end-0";
+		case Position.MiddleStart: return "top-50 start-0 translate-middle-y";
+		case Position.MiddleCenter: return "top-50 start-50 translate-middle";
+		case Position.MiddleEnd: return "top-50 end-0 translate-middle-y";
+		case Position.BottomStart: return "bottom-0 start-0";
+		case Position.BottomCenter: return "bottom-0 start-50 translate-middle-x";
+		case Position.BottomEnd: return "bottom-0 end-0";
+		default: return "top-0 start-0";
+	}
+}

package/src/Client/UI/Size.ts

@@ -1,40 +1,56 @@
 /**
- * Defines the size of a component.
+ * Defines the size of an element.
  */
 export const Size = Object.freeze({
 
 	/**
 	 * An extra small size.
 	 */
-	ExtraSmall: "xs",
+	ExtraSmall: "ExtraSmall",
 
 	/**
 	 * A small size.
 	 */
-	Small: "sm",
+	Small: "Small",
 
 	/**
 	 * A medium size.
 	 */
-	Medium: "md",
+	Medium: "Medium",
 
 	/**
 	 * A large size.
 	 */
-	Large: "lg",
+	Large: "Large",
 
 	/**
 	 * An extra large size.
 	 */
-	ExtraLarge: "xl",
+	ExtraLarge: "ExtraLarge",
 
 	/**
 	 * An extra extra large size.
 	 */
-	ExtraExtraLarge: "xxl"
+	ExtraExtraLarge: "ExtraExtraLarge"
 });
 
 /**
- * Defines the size of a component.
+ * Defines the size of an element.
  */
 export type Size = typeof Size[keyof typeof Size];
+
+/**
+ * Returns the CSS representation of the specified size.
+ * @param size The size.
+ * @returns The CSS representation of the specified size.
+ */
+export function toCss(size: Size): string {
+	switch (size) {
+		case Size.ExtraSmall: return "xs";
+		case Size.Small: return "sm";
+		case Size.Large: return "lg";
+		case Size.ExtraLarge: return "xl";
+		case Size.ExtraExtraLarge: return "xxl";
+		default: return "md";
+	}
+}

package/src/Client/UI/Variant.ts

@@ -6,25 +6,34 @@ export const Variant = Object.freeze({
 	/**
 	 * A dark variant.
 	 */
-	Dark: "dark",
+	Dark: "Dark",
 
 	/**
 	 * A light variant.
 	 */
-	Light: "light",
+	Light: "Light",
 
 	/**
 	 * A primary variant.
 	 */
-	Primary: "primary",
+	Primary: "Primary",
 
 	/**
 	 * A secondary variant.
 	 */
-	Secondary: "secondary"
+	Secondary: "Secondary"
 });
 
 /**
  * Defines tone variants.
  */
 export type Variant = typeof Variant[keyof typeof Variant];
+
+/**
+ * Returns the CSS representation of the specified variant.
+ * @param variant The variant.
+ * @returns The CSS representation of the specified variant.
+ */
+export function toCss(variant: Variant): string {
+	return variant.toLowerCase();
+}

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

@@ -1,242 +0,0 @@
-import {Context, getIcon} from "../Context.js";
-import {Variant} from "../Variant.js";
-
-/**
- * Specifies the return value of a message box.
- */
-export const MessageBoxResult = Object.freeze({
-
-	/**
-	 * The message box does not return any value.
-	 */
-	None: "",
-
-	/**
-	 * The return value of the message box is "OK".
-	 */
-	OK: "OK",
-
-	/**
-	 * The return value of the message box is "Cancel".
-	 */
-	Cancel: "Cancel"
-});
-
-/**
- * Specifies the return value of a message box.
- */
-export type MessageBoxResult = typeof MessageBoxResult[keyof typeof MessageBoxResult];
-
-/**
- * Displays a message window, also known as dialog box, which presents a message to the user.
- */
-export class MessageBox extends HTMLElement {
-
-	/**
-	 * Value indicating whether to vertically center this message box.
-	 */
-	@property({type: Boolean}) centered = false;
-
-	/**
-	 * The buttons displayed in the footer.
-	 */
-	@state() private buttons: MessageBoxButton[] = [];
-
-	/**
-	 * The title displayed in the header.
-	 */
-	@state() private caption = "";
-
-	/**
-	 * The message displayed in the body.
-	 */
-	@state() private content: TemplateResult = html``;
-
-	/**
-	 * A contextual modifier.
-	 */
-	@state() private context: Context|null = null;
-
-	/**
-	 * The icon displayed next to the body.
-	 */
-	@state() private icon = "";
-
-	/**
-	 * The root element.
-	 */
-	@query("dialog", true) private readonly root!: HTMLDialogElement;
-
-	/**
-	 * The function invoked to return the dialog box result.
-	 */
-	#resolve: (value: string) => void = () => { /* Noop */ };
-
-	/**
-	 * Opens an alert dialog with the specified message and an "OK" button.
-	 * @param caption The title displayed in the header.
-	 * @param message The message to show.
-	 * @param options The message box options.
-	 * @returns Resolves with the value of the clicked button.
-	 */
-	alert(caption: string, message: TemplateResult, options: MessageBoxOptions = {}): Promise<string> {
-		const context = options.context ?? Context.Warning;
-		return this.show(message, {
-			buttons: options.buttons ?? [{label: "OK", value: MessageBoxResult.OK}],
-			caption,
-			context,
-			icon: options.icon ?? getIcon(context)
-		});
-	}
-
-	/**
-	 * Closes the message box.
-	 * @param result The message box result.
-	 */
-	close(result: MessageBoxResult = MessageBoxResult.None): void {
-		this.root.close(result);
-	}
-
-	/**
-	 * Opens a confirmation dialog with the specified message and two buttons, "OK" and "Cancel".
-	 * @param caption The title displayed in the header.
-	 * @param message The message to show.
-	 * @param options The message box options.
-	 * @returns Resolves with the value of the clicked button.
-	 */
-	confirm(caption: string, message: TemplateResult, options: MessageBoxOptions = {}): Promise<string> {
-		const context = options.context ?? Context.Warning;
-		return this.show(message, {
-			caption,
-			context,
-			icon: options.icon ?? getIcon(context),
-			buttons: options.buttons ?? [
-				{label: "OK", value: MessageBoxResult.OK},
-				{label: "Annuler", value: MessageBoxResult.Cancel, variant: Variant.Secondary}
-			]
-		});
-	}
-
-	/**
-	 * Opens a modal dialog with the specified message and options.
-	 * @param message The message to show.
-	 * @param options The message box options.
-	 * @returns Resolves with the value of the clicked button.
-	 */
-	show(message: TemplateResult, options: MessageBoxOptions = {}): Promise<string> {
-		this.buttons = options.buttons ?? [];
-		this.caption = options.caption ?? "";
-		this.content = message;
-		this.context = options.context ?? null;
-		this.icon = options.icon ?? "";
-
-		this.root.returnValue = MessageBoxResult.None;
-		this.root.showModal();
-		this.root.querySelector<HTMLButtonElement>(".btn-close")?.blur();
-
-		const {promise, resolve} = Promise.withResolvers<string>();
-		this.#resolve = resolve;
-		return promise;
-	}
-
-	/**
-	 * Renders this component.
-	 * @returns The view template.
-	 */
-	protected override render(): TemplateResult {
-		const centered = classMap({"modal-dialog-centered": this.centered});
-		return html`
-			<dialog class="modal modal-dialog modal-dialog-scrollable ${centered}" @click=${this.#onDialogClick} @close=${this.#onDialogClose}>
-				<form class="modal-content" method="dialog">
-					<div class="modal-header user-select-none">
-						${when(this.caption, () => html`<h1 class="modal-title fs-5">${this.caption}</h1>`)}
-						<button class="btn-close"></button>
-					</div>
-					<div class="modal-body d-flex">
-						${when(this.icon, () => html`
-							<i class="icon icon-fill fs-1 fw-semibold me-2 ${classMap({[`text-${this.context}`]: this.context ?? ""})}">${this.icon}</i>
-						`)}
-						<div class="flex-grow-1">${this.content}</div>
-					</div>
-					${when(this.buttons.length, () => html`
-						<div class="modal-footer user-select-none">
-							${this.buttons.map(button => html`
-								<button class="btn btn-${button.variant ?? Variant.Primary}" value=${button.value ?? MessageBoxResult.None}>
-									${when(button.icon, () => html`<i class="icon icon-fill ${classMap({"me-1": button.label ?? ""})}">${button.icon}</i>`)}
-									${button.label}
-								</button>
-							`)}
-						</div>
-					`)}
-				</form>
-			</dialog>
-		`;
-	}
-
-	/**
-	 * Handles the `click` event.
-	 * @param event The dispatched event.
-	 */
-	#onDialogClick(event: Event): void {
-		if (event.target == this.root) this.close();
-	}
-
-	/**
-	 * Handles the `close` event.
-	 */
-	#onDialogClose(): void {
-		this.#resolve(this.root.returnValue);
-	}
-}
-
-/**
- * A message box button.
- */
-export type MessageBoxButton = Partial<{
-
-	/**
-	 * The button icon.
-	 */
-	icon: string;
-
-	/**
-	 * The button label.
-	 */
-	label: string;
-
-	/**
-	 * The button value.
-	 */
-	value: string;
-
-	/**
-	 * A tone variant.
-	 */
-	variant: Context|Variant;
-}>;
-
-/**
- * Defines the options of a {@link MessageBox} instance.
- */
-export type MessageBoxOptions = Partial<{
-
-	/**
-	 * The buttons displayed in the footer.
-	 */
-	buttons: MessageBoxButton[];
-
-	/**
-	 * The title displayed in the header.
-	 */
-	caption: string;
-
-	/**
-	 * A contextual modifier.
-	 */
-	context: Context;
-
-	/**
-	 * The icon displayed next to the body.
-	 */
-	icon: string;
-}>;