@m3e/core 1.0.0-rc.1

package/dist/src/shared/tokens/TypescaleToken.d.ts

@@ -0,0 +1,220 @@
+/** Design tokens that control typescale. */
+export declare const TypescaleToken: {
+    /** Standard typescale variant. */
+    readonly standard: {
+        /** Short, important text or numerals. */
+        readonly display: {
+            readonly large: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly medium: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly small: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+        };
+        /** Short, high-emphasis text on smaller screens. */
+        readonly headline: {
+            readonly large: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly medium: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly small: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+        };
+        /** Medium-emphasis text that remains relatively short. */
+        readonly title: {
+            readonly large: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly medium: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly small: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+        };
+        /** Longer passages of text. */
+        readonly body: {
+            readonly large: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly medium: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly small: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+        };
+        /** Smaller, utilitarian text. */
+        readonly label: {
+            readonly large: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly medium: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly small: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+        };
+    };
+    /** Emphasized typescale variant. */
+    readonly emphasized: {
+        /** Short, important text or numerals. */
+        readonly display: {
+            readonly large: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly medium: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly small: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+        };
+        /** Short, high-emphasis text on smaller screens. */
+        readonly headline: {
+            readonly large: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly medium: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly small: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+        };
+        /** Medium-emphasis text that remains relatively short. */
+        readonly title: {
+            readonly large: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly medium: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly small: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+        };
+        /** Longer passages of text. */
+        readonly body: {
+            readonly large: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly medium: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly small: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+        };
+        /** Smaller, utilitarian text. */
+        readonly label: {
+            readonly large: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly medium: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+            readonly small: {
+                readonly fontSize: import("lit").CSSResult;
+                readonly fontWeight: import("lit").CSSResult;
+                readonly lineHeight: import("lit").CSSResult;
+                readonly tracking: import("lit").CSSResult;
+            };
+        };
+    };
+};
+//# sourceMappingURL=TypescaleToken.d.ts.map

package/dist/src/shared/tokens/TypescaleToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypescaleToken.d.ts","sourceRoot":"","sources":["../../../../src/shared/tokens/TypescaleToken.ts"],"names":[],"mappings":"AAEA,4CAA4C;AAC5C,eAAO,MAAM,cAAc;IACzB,kCAAkC;;QAEhC,yCAAyC;;;;;;;;;;;;;;;;;;;;;QAsBzC,oDAAoD;;;;;;;;;;;;;;;;;;;;;QAsBpD,0DAA0D;;;;;;;;;;;;;;;;;;;;;QAsB1D,+BAA+B;;;;;;;;;;;;;;;;;;;;;QAsB/B,iCAAiC;;;;;;;;;;;;;;;;;;;;;;IAuBnC,oCAAoC;;QAElC,yCAAyC;;;;;;;;;;;;;;;;;;;;;QAsBzC,oDAAoD;;;;;;;;;;;;;;;;;;;;;QAsBpD,0DAA0D;;;;;;;;;;;;;;;;;;;;;QAsB1D,+BAA+B;;;;;;;;;;;;;;;;;;;;;QAsB/B,iCAAiC;;;;;;;;;;;;;;;;;;;;;;CAsB3B,CAAC"}

package/dist/src/shared/tokens/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DesignToken";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/shared/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/shared/tokens/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/src/shared/utils/getTextContent.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Gets the text content of a given node, including slotted content.
+ * @param {Node} node The node for which to get text content.
+ * @param {boolean} [trim = false] A value indicating whether to trim content.
+ * @returns {string} The text content of `node`.
+ */
+export declare function getTextContent(node: Node, trim?: boolean): string;
+//# sourceMappingURL=getTextContent.d.ts.map

package/dist/src/shared/utils/getTextContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTextContent.d.ts","sourceRoot":"","sources":["../../../../src/shared/utils/getTextContent.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,GAAE,OAAe,GAAG,MAAM,CAwBxE"}

package/dist/src/shared/utils/guid.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Generates a new globally unique identifier (GUID).
+ * @returns {string} A new globally unique identifier.
+ */
+export declare function guid(): string;
+//# sourceMappingURL=guid.d.ts.map

package/dist/src/shared/utils/guid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"guid.d.ts","sourceRoot":"","sources":["../../../../src/shared/utils/guid.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,IAAI,IAAI,MAAM,CAM7B"}

package/dist/src/shared/utils/hasAssignedNodes.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Determines whether a slot has any assigned nodes.
+ * @param {HTMLSlotElement} slot The slot to test.
+ * @returns {boolean} Whether `slot` has any assigned nodes.
+ */
+export declare function hasAssignedNodes(slot: HTMLSlotElement): boolean;
+//# sourceMappingURL=hasAssignedNodes.d.ts.map

package/dist/src/shared/utils/hasAssignedNodes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hasAssignedNodes.d.ts","sourceRoot":"","sources":["../../../../src/shared/utils/hasAssignedNodes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,eAAe,GAAG,OAAO,CAE/D"}

package/dist/src/shared/utils/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./getTextContent";
+export * from "./guid";
+export * from "./hasAssignedNodes";
+export * from "./prefersReducedMotion";
+export * from "./scrollIntoViewIfNeeded";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/shared/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/shared/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC"}

package/dist/src/shared/utils/prefersReducedMotion.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Determines whether reduced motion is preferred.
+ * @returns {boolean} Whether reduced motion is preferred.
+ */
+export declare function prefersReducedMotion(): boolean;
+//# sourceMappingURL=prefersReducedMotion.d.ts.map

package/dist/src/shared/utils/prefersReducedMotion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefersReducedMotion.d.ts","sourceRoot":"","sources":["../../../../src/shared/utils/prefersReducedMotion.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,CAE9C"}

package/dist/src/shared/utils/scrollIntoViewIfNeeded.d.ts

@@ -0,0 +1,8 @@
+/**
+ * If needed, scrolls an element into view within a given scroll container.
+ * @param {HTMLElement} element The element to scroll into view.
+ * @param {HTMLElement} scrollContainer The scrollable container.
+ * @param {ScrollBehavior} [behavior="auto"] The scroll behavior.
+ */
+export declare function scrollIntoViewIfNeeded(element: HTMLElement, scrollContainer: HTMLElement, behavior?: ScrollBehavior): void;
+//# sourceMappingURL=scrollIntoViewIfNeeded.d.ts.map

package/dist/src/shared/utils/scrollIntoViewIfNeeded.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollIntoViewIfNeeded.d.ts","sourceRoot":"","sources":["../../../../src/shared/utils/scrollIntoViewIfNeeded.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,WAAW,EACpB,eAAe,EAAE,WAAW,EAC5B,QAAQ,GAAE,cAAuB,GAChC,IAAI,CAON"}

package/eslint.config.mjs

@@ -0,0 +1,21 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+
+export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
+  languageOptions: {
+    parserOptions: {
+      project: true,
+      tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
+    },
+  },
+  rules: {
+    "@typescript-eslint/no-explicit-any": [
+      "error",
+      {
+        ignoreRestArgs: true,
+      },
+    ],
+  },
+});

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@m3e/core",
+  "version": "1.0.0-rc.1",
+  "description": "Core for M3E",
+  "author": "matraic <matraic@yahoo.com>",
+  "license": "MIT",
+  "homepage": "https://matraic.github.io/m3e/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/matraic/m3e.git"
+  },
+  "keywords": [
+    "material design",
+    "web components",
+    "a11y",
+    "anchoring",
+    "bidi",
+    "controllers",
+    "decorators",
+    "layout",
+    "mixins",
+    "platform",
+    "primitives",
+    "tokens",
+    "utils"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "browser": "dist/index.min.js",
+  "unpkg": "dist/index.min.js",
+  "types": "dist/src/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./a11y": {
+      "types": "./dist/src/a11y/index.d.ts",
+      "default": "./dist/a11y.js"
+    },
+    "./anchoring": {
+      "types": "./dist/src/anchoring/index.d.ts",
+      "default": "./dist/anchoring.js"
+    },
+    "./bidi": {
+      "types": "./dist/src/bidi/index.d.ts",
+      "default": "./dist/bidi.js"
+    },
+    "./layout": {
+      "types": "./dist/src/layout/index.d.ts",
+      "default": "./dist/layout.js"
+    },
+    "./platform": {
+      "types": "./dist/src/platform/index.d.ts",
+      "default": "./dist/platform.js"
+    }
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "cem": "cem analyze --config cem.config.mjs",
+    "lint": "npx eslint ./src",
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.6.13",
+    "composed-offset-position": "^0.0.6"
+  },
+  "peerDependencies": {
+    "lit": "^3.3.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@eslint/js": "^9.30.1",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "12.1.0",
+    "custom-element-vs-code-integration": "^1.5.0",
+    "eslint": "^9.32.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.44.2",
+    "tslib": "^2.8.1",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "^8.38.0"
+  },
+  "customElements": "dist/custom-elements.json"
+}

package/rollup.config.js

@@ -0,0 +1,132 @@
+import resolve from "@rollup/plugin-node-resolve";
+import terser from "@rollup/plugin-terser";
+import typescript from "@rollup/plugin-typescript";
+
+const banner = `/**
+ * @license MIT
+ * Copyright (c) 2025 matraic
+ * See LICENSE file in the project root for full license text.
+ */`;
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: "dist/index.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+      },
+      {
+        file: "dist/index.min.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+        plugins: [terser({ mangle: true })],
+      },
+    ],
+    external: ["lit"],
+    plugins: [resolve(), typescript()],
+  },
+  {
+    input: "src/a11y/index.ts",
+    output: [
+      {
+        file: "dist/a11y.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+      },
+      {
+        file: "dist/a11y.min.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+        plugins: [terser({ mangle: true })],
+      },
+    ],
+    external: ["lit"],
+    plugins: [resolve(), typescript()],
+  },
+  {
+    input: "src/anchoring/index.ts",
+    output: [
+      {
+        file: "dist/anchoring.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+      },
+      {
+        file: "dist/anchoring.min.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+        plugins: [terser({ mangle: true })],
+      },
+    ],
+    external: ["lit"],
+    plugins: [resolve(), typescript()],
+  },
+  {
+    input: "src/bidi/index.ts",
+    output: [
+      {
+        file: "dist/bidi.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+      },
+      {
+        file: "dist/bidi.min.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+        plugins: [terser({ mangle: true })],
+      },
+    ],
+    external: ["lit"],
+    plugins: [resolve(), typescript()],
+  },
+  {
+    input: "src/layout/index.ts",
+    output: [
+      {
+        file: "dist/layout.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+      },
+      {
+        file: "dist/layout.min.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+        plugins: [terser({ mangle: true })],
+      },
+    ],
+    external: ["lit"],
+    plugins: [resolve(), typescript()],
+  },
+  {
+    input: "src/platform/index.ts",
+    output: [
+      {
+        file: "dist/platform.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+      },
+      {
+        file: "dist/platform.min.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+        plugins: [terser({ mangle: true })],
+      },
+    ],
+    external: ["lit"],
+    plugins: [resolve(), typescript()],
+  },
+];

package/src/a11y/AriaDescriber.ts

@@ -0,0 +1,130 @@
+/**
+ * Adapted from Angular Material CDK ARIA Describer
+ * Source: https://github.com/angular/components/blob/main/src/cdk/a11y/aria-describer/aria-describer.ts
+ *
+ * @license MIT
+ * Copyright (c) 2025 Google LLC
+ * See LICENSE file in the project root for full license text.
+ */
+
+import { isServer } from "lit";
+
+import { addAriaReferencedId, removeAriaReferencedId } from "./aria-reference";
+import { visuallyHide } from "./visuallyHide";
+
+/** Utility for generating visually hidden elements that convey descriptive messages using `aria-describedby`. */
+export class M3eAriaDescriber {
+  /** @private */ static #nextId = 0;
+  /** @private */ static #messageContainers = new Map<
+    ParentNode,
+    {
+      containerElement: HTMLElement;
+      messageRegistry: Map<string, { messageElement: Element; count: number }>;
+    }
+  >();
+
+  /**
+   * Adds an `aria-describedby` reference to a hidden element that contains the message.
+   * @param {Element} element The element for which to provide a visually hidden description.
+   * @param {string} message The message used to describe `element`.
+   * @param {string} [role="tooltip"] The ARIA role of the message.
+   */
+  static describe(element: Element, message: string, role: string = "tooltip"): void {
+    if (isServer) {
+      return;
+    }
+
+    const rootNode = element.getRootNode() as ParentNode;
+    if (!(rootNode instanceof ShadowRoot || rootNode instanceof Document)) {
+      return;
+    }
+
+    let container = this.#messageContainers.get(rootNode);
+    if (!container) {
+      container = {
+        containerElement: this.#createMessageContainer(),
+        messageRegistry: new Map<string, { messageElement: Element; count: number }>(),
+      };
+
+      // Append to body if document, otherwise, append as a child of shadow root.
+      (rootNode instanceof Document ? rootNode.body : rootNode).appendChild(container.containerElement);
+      this.#messageContainers.set(rootNode, container);
+    }
+
+    const key = `${role}:${message}`;
+    let entry = container.messageRegistry.get(key);
+    if (!entry) {
+      entry = { messageElement: this.#createMessageElement(message, role), count: 0 };
+      container.containerElement.appendChild(entry.messageElement);
+      container.messageRegistry.set(key, entry);
+    }
+
+    entry.count++;
+
+    addAriaReferencedId(element, "aria-describedby", entry.messageElement.id);
+  }
+
+  /**
+   * Removes an `aria-describedby` reference to a hidden element that contains the message.
+   * @param {Element} element The element from which to remove a visually hidden description.
+   * @param {string} message The message used to describe `element`.
+   * @param {string} [role="tooltip"] The ARIA role of the message.
+   */
+  static removeDescription(element: Element, message: string, role: string = "tooltip"): void {
+    if (isServer) {
+      return;
+    }
+
+    const rootNode = element.getRootNode() as ParentNode;
+    const container = this.#messageContainers.get(rootNode);
+    if (!container) {
+      return;
+    }
+
+    const key = `${role}:${message}`;
+    const entry = container.messageRegistry.get(key);
+    if (!entry) {
+      return;
+    }
+
+    entry.count--;
+    removeAriaReferencedId(element, "aria-describedby", entry.messageElement.id);
+
+    // If there are no more elements referencing the message, remove it from the DOM.
+    if (entry.count <= 0) {
+      entry.messageElement.remove();
+      container.messageRegistry.delete(key);
+    }
+
+    // If there are no more registered messages, remove the container from the DOM.
+    if (container.messageRegistry.size == 0) {
+      container.containerElement?.remove();
+      this.#messageContainers.delete(rootNode);
+    }
+  }
+
+  /** @private */
+  static #createMessageContainer(): HTMLElement {
+    const messageContainer = document.createElement("div");
+    messageContainer.classList.add("m3e-describedby-message-container");
+    visuallyHide(messageContainer.style);
+    return messageContainer;
+  }
+
+  /** @private */
+  static #createMessageElement(message: string, role: string): HTMLElement {
+    const messageElement = document.createElement("span");
+    messageElement.id = `m3e-describedby-message-${this.#nextId++}`;
+    messageElement.role = role;
+    messageElement.ariaAtomic = "true";
+    messageElement.innerText = message.trim();
+    return messageElement;
+  }
+}
+
+declare global {
+  /** Utility for generating visually hidden elements that convey descriptive messages using `aria-describedby`. */
+  var M3eAriaDescriber: M3eAriaDescriber;
+}
+
+globalThis.M3eAriaDescriber = M3eAriaDescriber;