@rotomeca/design-system 0.0.0-stage → 1.0.1

package/dist/components/atoms/tooltip/tooltip.d.ts

@@ -0,0 +1,47 @@
+import type { Placement } from '../../../core/scripts/utils/floating';
+import { BaseElementInternal } from '../../base/BaseElementInternal';
+export { RotomecaTooltip };
+/**
+ * Infobulle autour d'un déclencheur : un texte court, non interactif, qui nomme ou précise.
+ *
+ * @remarks
+ * À utiliser pour nommer un bouton icône ou afficher un raccourci clavier. Pour une aide « ? »
+ * autonome, utiliser `rds-helper`. Le texte est aussi posé en `aria-description` sur le déclencheur
+ * (`aria-describedby` ne traverse pas le Shadow DOM). L'infobulle passe dans le top layer (Popover API).
+ *
+ * | Attribut | Valeurs | Rôle |
+ * | --- | --- | --- |
+ * | `text` | texte | Contenu de l'infobulle (slot `content` pour du HTML court). |
+ * | `placement` | `top` (défaut) · `bottom` · `left` · `right` | Côté préféré, retourné si besoin. |
+ *
+ * Animation : fondu + zoom léger ; délai d'apparition 400 ms au survol, immédiat au focus.
+ *
+ * @slot - Déclencheur (un seul élément focalisable).
+ * @slot content - HTML court à la place de `text`.
+ * @csspart tooltip - La bulle.
+ *
+ * @example
+ * ```html
+ * <rds-tooltip text="Enregistrer (Ctrl+S)">
+ *   <rds-icon-button icon="download" label="Enregistrer"></rds-icon-button>
+ * </rds-tooltip>
+ * ```
+ */
+declare class RotomecaTooltip extends BaseElementInternal {
+    #private;
+    /** Côté préféré : `top` (défaut), `bottom`, `left` ou `right`. */
+    accessor placement: Placement;
+    static observedAttributes: string[];
+    /** Contenu texte de l'infobulle. */
+    get text(): string;
+    set text(value: string);
+    /** Affiche l'infobulle immédiatement. */
+    show(): void;
+    /** Masque l'infobulle. */
+    hide(): void;
+    protected build(): void;
+    protected onConnect(): void;
+    protected update(): void;
+    protected slotChanged(): void;
+}
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/atoms/tooltip/tooltip.js

@@ -0,0 +1,145 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@rotomeca/ds-jsx/jsx-runtime";
+import { Attr, Define } from '../../../core/scripts/decorators';
+import { TAG_TOOLTIP } from '../../../core/scripts/utils/tags';
+import { TipController } from '../../../core/scripts/utils/tip';
+import { BaseElementInternal } from '../../base/BaseElementInternal';
+import style from './tooltip.less';
+export { RotomecaTooltip };
+const TEMPLATE = (_jsxs(_Fragment, { children: [_jsx("slot", { id: "trigger" }), _jsxs("div", { class: "tip", id: "tip", role: "tooltip", part: "tooltip", children: [_jsx("span", { id: "text" }), _jsx("slot", { name: "content" })] })] }));
+/**
+ * Infobulle autour d'un déclencheur : un texte court, non interactif, qui nomme ou précise.
+ *
+ * @remarks
+ * À utiliser pour nommer un bouton icône ou afficher un raccourci clavier. Pour une aide « ? »
+ * autonome, utiliser `rds-helper`. Le texte est aussi posé en `aria-description` sur le déclencheur
+ * (`aria-describedby` ne traverse pas le Shadow DOM). L'infobulle passe dans le top layer (Popover API).
+ *
+ * | Attribut | Valeurs | Rôle |
+ * | --- | --- | --- |
+ * | `text` | texte | Contenu de l'infobulle (slot `content` pour du HTML court). |
+ * | `placement` | `top` (défaut) · `bottom` · `left` · `right` | Côté préféré, retourné si besoin. |
+ *
+ * Animation : fondu + zoom léger ; délai d'apparition 400 ms au survol, immédiat au focus.
+ *
+ * @slot - Déclencheur (un seul élément focalisable).
+ * @slot content - HTML court à la place de `text`.
+ * @csspart tooltip - La bulle.
+ *
+ * @example
+ * ```html
+ * <rds-tooltip text="Enregistrer (Ctrl+S)">
+ *   <rds-icon-button icon="download" label="Enregistrer"></rds-icon-button>
+ * </rds-tooltip>
+ * ```
+ */
+let RotomecaTooltip = (() => {
+    let _classDecorators = [Define({ tag: TAG_TOOLTIP, template: TEMPLATE, styles: style })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = BaseElementInternal;
+    let _placement_decorators;
+    let _placement_initializers = [];
+    let _placement_extraInitializers = [];
+    var RotomecaTooltip = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _placement_decorators = [Attr()];
+            __esDecorate(this, null, _placement_decorators, { kind: "accessor", name: "placement", static: false, private: false, access: { has: obj => "placement" in obj, get: obj => obj.placement, set: (obj, value) => { obj.placement = value; } }, metadata: _metadata }, _placement_initializers, _placement_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            RotomecaTooltip = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #placement_accessor_storage = __runInitializers(this, _placement_initializers, 'top');
+        /** Côté préféré : `top` (défaut), `bottom`, `left` ou `right`. */
+        get placement() { return this.#placement_accessor_storage; }
+        set placement(value) { this.#placement_accessor_storage = value; }
+        static observedAttributes = ['text'];
+        #_controller = (__runInitializers(this, _placement_extraInitializers), null);
+        #_described = null;
+        /** Contenu texte de l'infobulle. */
+        get text() {
+            return this.stringAttribute('text');
+        }
+        set text(value) {
+            this.setStringAttribute('text', value || null);
+        }
+        /** Affiche l'infobulle immédiatement. */
+        show() {
+            this.#_controller?.open(0);
+        }
+        /** Masque l'infobulle. */
+        hide() {
+            this.#_controller?.close(0);
+        }
+        build() {
+            this.#_controller = new TipController(this, this.require('#tip'), () => this.#_trigger() ?? this, () => this.placement);
+        }
+        onConnect() {
+            this.#_controller?.connect(this.resources);
+        }
+        update() {
+            const text = this.text;
+            this.require('#text').textContent = text;
+            const trigger = this.#_trigger();
+            if (this.#_described && this.#_described !== trigger) {
+                this.#_described.removeAttribute('aria-description');
+                this.#_described = null;
+            }
+            // Le déclencheur est en light DOM : la description passe par `aria-description`.
+            if (trigger) {
+                if (text)
+                    trigger.setAttribute('aria-description', text);
+                else
+                    trigger.removeAttribute('aria-description');
+                this.#_described = trigger;
+            }
+        }
+        slotChanged() {
+            this.requestUpdate('slot');
+        }
+        #_trigger() {
+            return this.require('#trigger').assignedElements()[0] ?? null;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return RotomecaTooltip = _classThis;
+})();
+//# sourceMappingURL=tooltip.js.map

package/dist/components/base/BaseElement.d.ts

@@ -0,0 +1,416 @@
+import { ResourceScope, type Cleanup } from './ResourceScope';
+/**
+ * Changement d'un attribut observé, agrégé entre deux mises à jour.
+ */
+export interface AttributeChange {
+    /** Valeur de l'attribut avant le premier changement du lot (`null` si absent). */
+    readonly oldValue: string | null;
+    /** Dernière valeur de l'attribut (`null` si supprimé). */
+    readonly newValue: string | null;
+}
+/**
+ * Changements d'attributs d'un lot de mise à jour, indexés par nom d'attribut.
+ */
+export type Changes = ReadonlyMap<string, AttributeChange>;
+/**
+ * Contexte transmis aux hooks {@link BaseElement.update} et {@link BaseElement.afterUpdate}.
+ */
+export interface UpdateContext {
+    /** Attributs modifiés depuis la mise à jour précédente. */
+    readonly attributes: Changes;
+    /** Raisons ayant déclenché la mise à jour (ex. `connect`, `attribute`, `manual`). */
+    readonly reasons: ReadonlySet<string>;
+}
+/** Source de style : CSS déjà compilé, ou feuille déjà construite. */
+export type StyleSource = string | CSSStyleSheet;
+/** Hook exécuté à chaque connexion, dans la portée de ressources de celle-ci. */
+export type ConnectHook = (scope: ResourceScope) => void;
+/**
+ * Enregistre un hook exécuté à chaque connexion de l'élément, après {@link BaseElement.onConnect}.
+ *
+ * @remarks
+ * À appeler pendant la construction (ex. initialiseur de décorateur) : un hook ajouté sur un
+ * élément déjà connecté n'est exécuté qu'à la connexion suivante.
+ * Les ressources acquises via la portée reçue sont libérées à la déconnexion.
+ *
+ * @param element - Élément concerné.
+ * @param hook - Fonction appelée avec la portée de la connexion courante.
+ */
+export declare function addConnectHook(element: BaseElement, hook: ConnectHook): void;
+/**
+ * Base autonome pour Chromium/Electron moderne. Aucun rendu implicite par `innerHTML`.
+ *
+ * @remarks
+ * Surcharger les hooks protégés, pas les callbacks natifs.
+ * Les hooks `build`/`update`/`connect` sont synchrones ; utiliser {@link BaseElement.connectionSignal}
+ * pour l'asynchrone.
+ */
+export declare abstract class BaseElement extends HTMLElement {
+    #private;
+    /** Nom de la balise utilisé par défaut par {@link BaseElement.define}. */
+    static tagName: string;
+    /** Options du Shadow DOM, ou `null` pour travailler en Light DOM. */
+    static shadowOptions: ShadowRootInit | null;
+    /** Attributs observés par `attributeChangedCallback`. */
+    static observedAttributes: string[];
+    /** Propriétés publiques à récupérer si assignées avant `customElements.define()`. */
+    static upgradeProperties: readonly string[];
+    /** CSS déjà compilé ; LESS doit être compilé avant d'arriver ici. Shadow DOM seulement. */
+    static styles: readonly StyleSource[];
+    /** Gabarit cloné dans la racine lors de la première connexion. */
+    static template: HTMLTemplateElement | null;
+    /** `true` si le rendu doit être reconstruit en entier à chaque mise à jour (voir `@UpdateAll`). */
+    static updateAll: boolean;
+    /**
+     * Crée l'élément et attache le Shadow DOM selon {@link BaseElement.shadowOptions}.
+     *
+     * @remarks
+     * Aucun hook virtuel n'est appelé ici : les champs des classes dérivées ne sont pas encore initialisés.
+     */
+    constructor();
+    /** Racine de rendu : le shadow root, ou l'élément lui-même en Light DOM. */
+    get renderRoot(): ShadowRoot | this;
+    /** `true` une fois le DOM initial construit (`build` terminé). */
+    get initialized(): boolean;
+    /**
+     * Promesse du lot de mise à jour courant.
+     *
+     * @returns `true` : lot terminé ; `false` : interrompu par déconnexion ou erreur.
+     * Ce n'est pas une garantie de paint.
+     */
+    get updateComplete(): Promise<boolean>;
+    /**
+     * Portée des ressources de la connexion courante.
+     *
+     * @throws {Error} Si l'élément n'est pas connecté.
+     */
+    protected get resources(): ResourceScope;
+    /**
+     * Signal annulé à la déconnexion, utile pour les opérations asynchrones.
+     *
+     * @throws {Error} Si l'élément n'est pas connecté.
+     */
+    protected get connectionSignal(): AbortSignal;
+    /**
+     * Callback natif de connexion : initialise l'élément au premier appel,
+     * puis déclenche {@link BaseElement.onConnect} et une première mise à jour.
+     */
+    connectedCallback(): void;
+    /**
+     * Callback natif de déconnexion : appelle {@link BaseElement.onDisconnect}
+     * puis libère toutes les ressources de la connexion.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Callback natif d'adoption par un autre document.
+     * Les ressources dépendant du document sont recréées à la prochaine connexion.
+     *
+     * @param oldDocument - Document d'origine.
+     * @param newDocument - Document d'accueil.
+     */
+    adoptedCallback(oldDocument: Document, newDocument: Document): void;
+    /**
+     * Callback natif de changement d'attribut. Agrège le changement et planifie une mise à jour.
+     *
+     * @param name - Nom de l'attribut modifié.
+     * @param oldValue - Ancienne valeur (`null` si absent).
+     * @param newValue - Nouvelle valeur (`null` si supprimé).
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Demande une mise à jour, regroupée en microtâche avec les demandes voisines.
+     *
+     * @remarks
+     * Les changements hors DOM restent en attente jusqu'à la prochaine connexion.
+     *
+     * @param reason - Raison de la mise à jour, transmise dans {@link UpdateContext.reasons}.
+     * @returns La promesse du lot, équivalente à {@link BaseElement.updateComplete}.
+     */
+    requestUpdate(reason?: string): Promise<boolean>;
+    /**
+     * Initialisation DOM unique. Pas de listeners de connexion ici.
+     *
+     * @param _root - Racine de rendu.
+     */
+    protected build(_root: ShadowRoot | this): void;
+    /** Appelé à chaque connexion, après l'initialisation. */
+    protected onConnect(): void;
+    /** Appelé à chaque déconnexion, avant la libération des ressources. */
+    protected onDisconnect(): void;
+    /**
+     * Appelé quand l'élément est adopté par un autre document.
+     *
+     * @param _oldDocument - Document d'origine.
+     * @param _newDocument - Document d'accueil.
+     */
+    protected onAdopt(_oldDocument: Document, _newDocument: Document): void;
+    /**
+     * Met à jour le rendu à partir de l'état courant.
+     *
+     * @param _context - Attributs modifiés et raisons de la mise à jour.
+     */
+    protected update(_context: UpdateContext): void;
+    /**
+     * Appelé après {@link BaseElement.update} si l'élément est toujours connecté.
+     *
+     * @param _context - Attributs modifiés et raisons de la mise à jour.
+     */
+    protected afterUpdate(_context: UpdateContext): void;
+    /**
+     * Réaction synchrone optionnelle après construction (ex. valeur de formulaire).
+     *
+     * @remarks
+     * Le rendu visuel reste dans {@link BaseElement.update}. Attention aux réflexions récursives.
+     *
+     * @param _name - Nom de l'attribut modifié.
+     * @param _oldValue - Ancienne valeur.
+     * @param _newValue - Nouvelle valeur.
+     */
+    protected attributeChanged(_name: string, _oldValue: string | null, _newValue: string | null): void;
+    /**
+     * Appelé quand le contenu assigné à un slot change.
+     *
+     * @param _slot - Slot concerné.
+     */
+    protected slotChanged(_slot: HTMLSlotElement): void;
+    /**
+     * Traite une erreur survenue pendant le cycle de vie. Journalise par défaut.
+     *
+     * @param error - Erreur interceptée.
+     * @param phase - Phase concernée (`connect`, `update`, `cleanup`, etc.).
+     */
+    protected onError(error: unknown, phase: string): void;
+    /** Relit tous les slots : utile après un ajout dynamique de slots vides. */
+    refreshSlots(): void;
+    /**
+     * Retourne les éléments assignés à un slot de la racine.
+     *
+     * @param name - Nom du slot (slot par défaut si vide).
+     * @param flatten - Aplatit les slots imbriqués.
+     * @returns Les éléments assignés, ou un tableau vide si le slot n'existe pas.
+     */
+    assignedElements(name?: string, flatten?: boolean): Element[];
+    /**
+     * Recherche un élément dans la racine de rendu.
+     *
+     * @typeParam T - Type de l'élément attendu.
+     * @param selector - Sélecteur CSS.
+     * @returns L'élément trouvé, ou `null`.
+     */
+    query<T extends Element = HTMLElement>(selector: string): T | null;
+    /**
+     * Recherche tous les éléments correspondants dans la racine de rendu.
+     *
+     * @typeParam T - Type des éléments attendus.
+     * @param selector - Sélecteur CSS.
+     * @returns Les éléments trouvés.
+     */
+    queryAll<T extends Element = HTMLElement>(selector: string): T[];
+    /**
+     * Comme {@link BaseElement.query}, mais lève une erreur si l'élément est absent.
+     *
+     * @typeParam T - Type de l'élément attendu.
+     * @param selector - Sélecteur CSS.
+     * @returns L'élément trouvé.
+     * @throws {Error} Si aucun élément ne correspond au sélecteur.
+     */
+    require<T extends Element = HTMLElement>(selector: string): T;
+    /**
+     * Applique {@link BaseElement.styles} à la racine de rendu.
+     *
+     * @remarks
+     * Partage les feuilles entre instances du même constructeur ET du même document.
+     * Sans effet en Light DOM (charger explicitement une feuille globale préfixée).
+     */
+    refreshStyles(): void;
+    /**
+     * Récupère une propriété assignée avant l'upgrade de l'élément, pour qu'elle passe par l'accesseur.
+     *
+     * @remarks
+     * Appeler avant l'usage initial d'une propriété réactive. Ne pas déclarer de champ homonyme.
+     *
+     * @param name - Nom de la propriété.
+     * @throws {Error} Si la propriété n'est pas configurable.
+     */
+    protected upgradeProperty(name: string): void;
+    /**
+     * Lit une donnée libre associée à l'instance.
+     *
+     * @typeParam T - Type attendu de la donnée.
+     * @param name - Clé de la donnée.
+     * @returns La valeur, ou `undefined` si absente.
+     */
+    getData<T = unknown>(name: string | symbol): T | undefined;
+    /**
+     * Enregistre une donnée libre associée à l'instance.
+     *
+     * @typeParam T - Type de la donnée.
+     * @param name - Clé de la donnée.
+     * @param value - Valeur à stocker.
+     * @returns L'instance, pour chaîner les appels.
+     */
+    setData<T>(name: string | symbol, value: T): this;
+    /**
+     * Indique si une donnée libre existe.
+     *
+     * @param name - Clé de la donnée.
+     */
+    hasData(name: string | symbol): boolean;
+    /**
+     * Supprime une donnée libre.
+     *
+     * @param name - Clé de la donnée.
+     * @returns `true` si la donnée existait.
+     */
+    deleteData(name: string | symbol): boolean;
+    /** Supprime toutes les données libres. */
+    clearData(): void;
+    /**
+     * Lit un attribut sous forme de chaîne.
+     *
+     * @param name - Nom de l'attribut.
+     * @param fallback - Valeur si l'attribut est absent.
+     */
+    stringAttribute(name: string, fallback?: string): string;
+    /**
+     * Lit un attribut sous forme de nombre.
+     *
+     * @param name - Nom de l'attribut.
+     * @param fallback - Valeur si l'attribut est absent, vide ou non numérique.
+     */
+    numberAttribute(name: string, fallback?: number): number;
+    /**
+     * Lit un attribut booléen HTML.
+     *
+     * @param name - Nom de l'attribut.
+     * @returns `true` si l'attribut est présent.
+     */
+    booleanAttribute(name: string): boolean;
+    /**
+     * Écrit un attribut sous forme de chaîne, ou le supprime pour `null`/`undefined`.
+     * N'écrit pas si la valeur est inchangée.
+     *
+     * @param name - Nom de l'attribut.
+     * @param value - Valeur à écrire.
+     * @returns L'instance, pour chaîner les appels.
+     */
+    setStringAttribute(name: string, value: string | number | null | undefined): this;
+    /**
+     * Ajoute ou retire un attribut booléen HTML.
+     *
+     * @param name - Nom de l'attribut.
+     * @param value - `true` pour l'ajouter, `false` pour le retirer.
+     * @returns L'instance, pour chaîner les appels.
+     */
+    setBooleanAttribute(name: string, value: boolean): this;
+    /**
+     * Définit une propriété CSS en ligne, ou la supprime pour `null`.
+     *
+     * @param name - Nom de la propriété (ex. `--couleur`).
+     * @param value - Valeur, ou `null` pour supprimer.
+     * @param priority - Priorité de la déclaration.
+     * @returns L'instance, pour chaîner les appels.
+     */
+    setCSSProperty(name: string, value: string | null, priority?: '' | 'important'): this;
+    /**
+     * Lit une propriété CSS en ligne.
+     *
+     * @param name - Nom de la propriété.
+     */
+    getCSSProperty(name: string): string;
+    /**
+     * Lit la valeur calculée d'une propriété CSS.
+     *
+     * @param name - Nom de la propriété.
+     * @returns La valeur sans espaces superflus, ou `''` si l'élément n'a pas de fenêtre.
+     */
+    getComputedCSSProperty(name: string): string;
+    /**
+     * Ajoute des classes ; les noms séparés par des espaces sont acceptés.
+     *
+     * @param names - Noms de classes.
+     * @returns L'instance, pour chaîner les appels.
+     */
+    addClass(...names: string[]): this;
+    /**
+     * Retire des classes ; les noms séparés par des espaces sont acceptés.
+     *
+     * @param names - Noms de classes.
+     * @returns L'instance, pour chaîner les appels.
+     */
+    removeClass(...names: string[]): this;
+    /**
+     * Bascule une classe.
+     *
+     * @param name - Nom de la classe.
+     * @param force - Force l'ajout (`true`) ou le retrait (`false`).
+     * @returns L'instance, pour chaîner les appels.
+     */
+    toggleClass(name: string, force?: boolean): this;
+    /**
+     * Émet un événement public (`bubbles` et `composed` par défaut).
+     *
+     * @typeParam T - Type du `detail` de l'événement.
+     * @param type - Nom de l'événement.
+     * @param detail - Données transmises dans `event.detail`.
+     * @param options - Options de l'événement, hors `detail`.
+     * @returns `false` si un événement cancelable a été annulé.
+     */
+    emit<T>(type: string, detail: T, options?: Omit<CustomEventInit<T>, 'detail'>): boolean;
+    /**
+     * Délègue un événement à un sélecteur via `composedPath` ; un shadow root fermé reste opaque.
+     *
+     * @param type - Type d'événement écouté.
+     * @param selector - Sélecteur CSS de l'élément ciblé.
+     * @param callback - Appelé avec l'événement et l'élément correspondant.
+     * @param target - Cible de l'écouteur (la racine de rendu par défaut).
+     * @returns Une fonction de nettoyage retirant l'écouteur.
+     */
+    protected delegate(type: string, selector: string, callback: (event: Event, matched: Element) => void, target?: EventTarget): Cleanup;
+    /**
+     * Observe les mutations du DOM ; l'observateur est déconnecté avec la connexion.
+     *
+     * @param target - Noeud observé.
+     * @param callback - Appelé à chaque lot de mutations tant que l'élément est connecté.
+     * @param options - Options du `MutationObserver`.
+     * @returns L'observateur créé.
+     */
+    protected observeMutations(target: Node, callback: MutationCallback, options: MutationObserverInit): MutationObserver;
+    /**
+     * Observe le redimensionnement d'un élément ; l'observateur est déconnecté avec la connexion.
+     *
+     * @param target - Élément observé.
+     * @param callback - Appelé à chaque redimensionnement tant que l'élément est connecté.
+     * @returns L'observateur créé.
+     */
+    protected observeResize(target: Element, callback: ResizeObserverCallback): ResizeObserver;
+    /**
+     * Observe l'intersection d'un élément ; l'observateur est déconnecté avec la connexion.
+     *
+     * @param target - Élément observé.
+     * @param callback - Appelé à chaque changement d'intersection tant que l'élément est connecté.
+     * @param options - Options de l'`IntersectionObserver`.
+     * @returns L'observateur créé.
+     */
+    protected observeIntersection(target: Element, callback: IntersectionObserverCallback, options?: IntersectionObserverInit): IntersectionObserver;
+    /**
+     * Surveille une media query. Le callback est appelé immédiatement, puis à chaque changement.
+     *
+     * @param query - Media query à surveiller.
+     * @param callback - Reçoit `true` quand la media query correspond.
+     * @returns Une fonction de nettoyage retirant l'écouteur.
+     */
+    protected watchMedia(query: string, callback: (matches: boolean) => void): Cleanup;
+    /**
+     * Enregistre l'élément dans un registre de custom elements.
+     *
+     * @remarks
+     * Définition idempotente pour le même constructeur, erreur sur une collision de nom.
+     *
+     * @param tag - Nom de la balise (par défaut {@link BaseElement.tagName}).
+     * @param registry - Registre cible (par défaut `customElements`).
+     * @throws {Error} Si aucun nom de balise n'est fourni, ou si le nom est déjà pris par une autre classe.
+     */
+    static define(this: typeof BaseElement, tag?: string, registry?: CustomElementRegistry): void;
+}
+//# sourceMappingURL=BaseElement.d.ts.map