Définition de l'apparence d'un document AriaML

L'apparence dans AriaML permet de regrouper les ressources de styles dans un conteneur <g>. Cela permet de les dissocier des métadonnées de page (stockées en JSON-LD) et offre la possibilité de rendre tout ou partie de l'apparence dynamique d'un contexte de navigation fluide à un autre via l'attribut nav-slot. De plus, AriaML permet un meilleur découplage entre sémantique et apparence grâce aux classes volatiles.

1. L'élément de groupement `<g>`

L'élément <g> (Group) est le conteneur structurel universel. Il sert à organiser les ressources et à définir des périmètres thématiques.

Rôle Implicite : none. Il n'a aucune valeur sémantique par défaut.
Comportement Visuel : display: contents. Il ne génère pas de boîte de rendu et n'affecte pas le layout.
Mutation Sémantique : Si l'élément reçoit un attribut de labellisation (aria-label, aria-labelledby), son rôle devient group.
Attributs Spécifiques :
theme : Définit l'identifiant du thème pour tous les descendants.
media-theme : Indication pour aider la selection automatique du thème.
media : Conditionne l'activation du groupe via une Media Query.
nav-slot : Identifie le bloc pour les opérations de remplacement dynamique.

2. L'élément `<style>` étendu

Dans AriaML, <style> est le vecteur unique pour le CSS, les données d'icônes et les classes dynamiques.

2.1 Attributs de Pilotage

theme : Identifiant de rattachement thématique. Prévaut sur l'héritage du parent si situé hors d'un conflit.
media-theme : Indication pour aider la selection automatique du thème.
src : URL d'une ressource externe (CSS ou JSON).
preload : Instruction de mise en cache prioritaire.
media : Conditionne l'application de la ressource.

2.2 Types de Données (`type`)

Styles : text/css (par défaut).
Classes Volatiles : volatile-classes+json ou application/volatile-classes+json.
Icônes Système : icons+json ou application/icons+json.

3. Groupements et Hiérarchie Thématique

3.1 Groupement Neutre

L'élément <g> sans theme structure le document sans briser la chaîne d'héritage thématique des parents.

3.2 Groupement Thématique

L'élément <g theme="A"> définit une autorité thématique sur ses descendants.

Héritage : Les balises <style> descendantes héritent du thème "A".
Règle d'Unicité : Il est interdit de définir un attribut theme différent à l'intérieur d'un groupement thématique établi.
Arbitrage des Conflits : Toute ressource discordante est invalidée (état disabled).

3.3 Sélection automatique (Auto-Theme)

En l'absence de préférence utilisateur enregistrée, l'attribut media associé à un attribut theme (sur un élément <g> ou <style>) sert à déterminer le thème par défaut. Le moteur de rendu active le premier thème dont la Media Query correspond à l'environnement système.

4. Classes Volatiles (Mutable States)

Les classes volatiles injectent des utility classes sans modifier la structure sémantique.

Format : Objet JSON { "sélecteur": "classes" }.
Cycle de vie : L'application est liée à l'activation du nœud. Si le thème ou la condition media change, le moteur retire automatiquement les classes injectées par la ressource devenue inactive.

5. Pilotage de l'interface (Viewport & Browser Color)

Les paramètres système sont gérés par CSS via l'extraction des variables calculées sur l'élément racine <aria-ml> :

--browser-color : Définit la couleur de l'interface du navigateur (barre d'adresse, etc.).
--viewport : Définit la configuration de la surface d'affichage.

6. Compatibilité HTML côté serveur

AriaML assure la rétrocompatibilité et l'indexation par les moteurs de recherche :

Le serveur peut livrer un document avec les classes volatiles déjà appliquées et les icônes présentes dans le <head>.
Le moteur client est idempotent : il synchronise l'état final et nettoie les injections serveur si le thème change.

Exemple de structure type (Auto-sélection)

HTML

<aria-ml>
  <g id="static">
      <style type="icons+json" preload>
        [{
            "rel": "icon",
            "href": "https://flavi1.github.io/aria-ml/src/icon/32.png",
            "sizes": "32x32"
        },
        {
            "rel": "icon",
            "href": "https://flavi1.github.io/aria-ml/src/icon/300.png",
            "sizes": "192x192 300x300"
        }]
      </style>
      <style src="css/style.css"></style>
  </g>
  <g nav-slot="appearance">

    <g theme="dark" media-theme="(prefers-color-scheme: dark)">
      <style>aria-ml { --browser-color: #0f172a; --viewport: "width=device-width, initial-scale=1" }</style>
      <style type="volatile-classes+json">
        { "main": "bg-slate-900 text-white" }
      </style>
    </g>

    <g theme="light" media-theme="(prefers-color-scheme: light)">
      <style>aria-ml { --browser-color: #ffffff; }</style>
      <style type="volatile-classes+json">
        { "main": "bg-white text-black" }
      </style>
    </g>

  </g>
</aria-ml>