humalis 1.1.0 → 1.2.0

package/dist/analyse/niveaux.js

@@ -14,6 +14,8 @@ export function niveauxDesSousTitres(instructions, parent = 1) {
                 else
                     dernier = instruction.niveau;
             }
+            else if (instruction.type === 'Bloc' && instruction.genre === 'section')
+                niveauxDeLaSection(instruction.corps, dernier);
             else if (instruction.type === 'Bloc')
                 niveauxDesSousTitres(instruction.corps, dernier);
             else {
@@ -31,3 +33,35 @@ export function niveauxDesSousTitres(instructions, parent = 1) {
     };
     parcourir(instructions);
 }
+/** Les sous-titres d'un arbre d'instructions, dans l'ordre de lecture. */
+function sousTitres(instructions, vus = []) {
+    for (const instruction of instructions) {
+        if (instruction.type === 'Element' && instruction.element === 'soustitre')
+            vus.push(instruction);
+        if (instruction.type === 'Evenement')
+            continue;
+        for (const cle of ['corps', 'alors', 'sinon']) {
+            const suite = instruction[cle];
+            if (Array.isArray(suite))
+                sousTitres(suite, vus);
+        }
+        if (instruction.type === 'Selon')
+            for (const cas of instruction.cas)
+                sousTitres(cas.corps, vus);
+    }
+    return vus;
+}
+/** Une « section » : son premier sous-titre la titre, les autres descendent d'un niveau au moins. */
+function niveauxDeLaSection(corps, parent) {
+    const tous = sousTitres(corps);
+    const automatiques = new Set(tous.filter((t) => t.niveau === undefined));
+    niveauxDesSousTitres(corps, parent);
+    const [premier, ...autres] = tous;
+    if (!premier)
+        return;
+    const sousLaSection = Math.min((premier.niveau ?? 2) + 1, 6);
+    for (const titre of autres) {
+        if (automatiques.has(titre) && (titre.niveau ?? 2) < sousLaSection)
+            titre.niveau = sousLaSection;
+    }
+}

package/dist/cibles/mobile/projet.js

@@ -913,6 +913,9 @@ function styles(formulaires = false, blocs = false, theme, codes = []) {
                     `colonne: { gap: 12 },`,
                     `grille: { gap: 16 },`,
                     `menu: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 12 },`,
+                    // « menu vertical » : une colonne ; « menu repliable » n'a pas de style propre sur le téléphone.
+                    `menuVertical: { flexDirection: 'column', flexWrap: 'nowrap', alignItems: 'stretch' },`,
+                    `menuRepliable: {},`,
                 ]
                 : []),
         ];

package/dist/cibles/statique/page.js

@@ -930,7 +930,7 @@ ${prise}${code}}
                     }
                     const balise = BALISES_BLOC[noeud.genre] ?? 'div';
                     // « menu repliable » : le bouton « Menu » en premier enfant (l'écouteur est dans humalis.js).
-                    const bouton = estRepliable(noeud) ? `creer('button', { type: 'button', class: 'humalis-menu-bouton', 'aria-expanded': 'false' }, 'Menu'), ` : '';
+                    const bouton = estRepliable(noeud) ? `creer('button', { type: 'button', class: 'humalis-menu-bouton', 'aria-expanded': 'false', 'aria-label': 'Menu' }, creer('span', { class: 'humalis-menu-icone', 'aria-hidden': 'true' })), ` : '';
                     this.ecrireGroupe(e, noeud.corps, `creer('${balise}', { class: ${chaine(classesDuBloc(noeud))} }, ${bouton}...`, '),');
                     // « arrive en bas de » ce bloc : la sentinelle observée et le vrai bouton « Voir plus », tant que la condition est vraie.
                     const bas = noeud.id !== undefined ? this.basDesBlocs.get(noeud.id) : undefined;
@@ -1212,7 +1212,7 @@ ${prise}${code}}
                     const balise = BALISES_BLOC[noeud.genre] ?? 'div';
                     lignes.push(`<${balise}${attributs([['class', classesDuBloc(noeud)]])}>`);
                     if (estRepliable(noeud))
-                        lignes.push('<button type="button" class="humalis-menu-bouton" aria-expanded="false">Menu</button>');
+                        lignes.push('<button type="button" class="humalis-menu-bouton" aria-expanded="false" aria-label="Menu"><span class="humalis-menu-icone" aria-hidden="true"></span></button>');
                     this.ecrireGroupeHtml(noeud.corps, env, lignes);
                     lignes.push(`</${balise}>`);
                     const bas = noeud.id !== undefined ? this.basDesBlocs.get(noeud.id) : undefined;

package/dist/cibles/statique/projet.js

@@ -1153,4 +1153,19 @@ document.addEventListener('click', (evenement) => {
   menu.toggleAttribute('data-ouvert', ouvrir);
   menu.querySelector(':scope > .humalis-menu-bouton')?.setAttribute('aria-expanded', String(ouvrir));
 });
+// Un clic à côté d'un menu ouvert, ou la touche Échap, le referme.
+const fermerLesMenus = (garder) => {
+  for (const menu of document.querySelectorAll('.humalis-menu-repliable[data-ouvert]')) {
+    if (garder && menu.contains(garder)) continue;
+    menu.removeAttribute('data-ouvert');
+    menu.querySelector(':scope > .humalis-menu-bouton')?.setAttribute('aria-expanded', 'false');
+  }
+};
+document.addEventListener('click', (evenement) => fermerLesMenus(evenement.target instanceof Node ? evenement.target : null), true);
+document.addEventListener('keydown', (evenement) => {
+  if (evenement.key !== 'Escape') return;
+  const ouvert = document.querySelector('.humalis-menu-repliable[data-ouvert] > .humalis-menu-bouton');
+  fermerLesMenus(null);
+  ouvert?.focus();
+});
 `;

package/dist/cibles/web/css-ecran.js

@@ -53,9 +53,18 @@ export function cssEcran(codes) {
         regles.push('.humalis-aller-au-contenu { position: absolute; left: 0.5rem; top: -4rem; z-index: 1000; padding: 0.5rem 1rem; border-radius: 0.5rem; background: Canvas; color: CanvasText; }');
         regles.push('.humalis-aller-au-contenu:focus { top: 0.5rem; }');
     }
+    // « menu vertical » : les liens en colonne, qui ne passent jamais sur une deuxième colonne
+    // (un sommaire de hauteur limitée défile au lieu de s'étaler).
+    if (codes.some((c) => c.includes('humalis-menu-vertical')))
+        regles.push('.humalis-menu-vertical { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }');
     // « menu repliable » : sur un petit écran, les liens attendent le bouton « Menu ».
     if (codes.some((c) => c.includes('humalis-menu-repliable'))) {
         regles.push('.humalis-menu-bouton { display: none; }');
+        // L'icône burger : trois traits (le trait du milieu et ses deux ombres), une croix quand le menu est ouvert.
+        regles.push('.humalis-menu-bouton { align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; }');
+        regles.push('.humalis-menu-icone { position: relative; display: block; width: 1.125rem; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }');
+        regles.push('.humalis-menu-bouton[aria-expanded="true"] .humalis-menu-icone { box-shadow: none; transform: rotate(45deg); }');
+        regles.push('.humalis-menu-bouton[aria-expanded="true"] .humalis-menu-icone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; transform: rotate(-90deg); }');
         regles.push('@media (max-width: 720px) { .humalis-menu-repliable { flex-direction: column; align-items: stretch; } .humalis-menu-bouton { display: inline-flex; align-self: flex-start; } .humalis-menu-repliable:not([data-ouvert]) > :not(.humalis-menu-bouton) { display: none; } }');
     }
     if (codes.some((c) => /humalis-pied\b/.test(c)))

package/dist/cibles/web/ecran.js

@@ -157,7 +157,7 @@ export const RENDU_WEB = {
             const balise = genre === 'section' ? 'section' : genre === 'menu' ? 'nav' : 'div';
             // « menu repliable » : le bouton « Menu » du petit écran (src/humalis/menu.ts).
             const repliable = options.some((o) => o.nom === 'menu' && o.valeur === 'repliable');
-            return `<${balise} className="${toutes.join(' ')}"${ancre !== undefined ? ` id=${JSON.stringify(ancre)}` : ''}${repliable ? ' onClick={menuRepliable}' : ''}>${repliable ? '<button type="button" className="humalis-menu-bouton" aria-expanded="false">Menu</button>' : ''}`;
+            return `<${balise} className="${toutes.join(' ')}"${ancre !== undefined ? ` id=${JSON.stringify(ancre)}` : ''}${repliable ? ' onClick={menuRepliable}' : ''}>${repliable ? '<button type="button" className="humalis-menu-bouton" aria-expanded="false" aria-label="Menu"><span className="humalis-menu-icone" aria-hidden="true"></span></button>' : ''}`;
         },
         fermer: (genre) => (genre === 'section' ? '</section>' : genre === 'menu' ? '</nav>' : '</div>'),
     },

package/dist/cibles/web/interactions.js

@@ -1086,5 +1086,19 @@ export function menuRepliable(evenement: { target: EventTarget; currentTarget: E
   if (!ouvrir && cible.closest('.humalis-menu-bouton, a') === null) return;
   menu.toggleAttribute('data-ouvert', ouvrir);
   bouton?.setAttribute('aria-expanded', String(ouvrir));
+  if (!ouvrir) return;
+  // Ouvert : un clic à côté, ou la touche Échap, le referme (et Échap rend le focus au bouton).
+  const fermer = (e: Event) => {
+    if (e instanceof KeyboardEvent ? e.key !== 'Escape' : menu.contains(e.target as Node)) return;
+    menu.removeAttribute('data-ouvert');
+    bouton?.setAttribute('aria-expanded', 'false');
+    if (e instanceof KeyboardEvent) (bouton as HTMLElement | null)?.focus();
+    document.removeEventListener('click', fermer, true);
+    document.removeEventListener('keydown', fermer);
+  };
+  setTimeout(() => {
+    document.addEventListener('click', fermer, true);
+    document.addEventListener('keydown', fermer);
+  });
 }
 `;

package/dist/cibles/web/projet.js

@@ -584,7 +584,9 @@ export function Defilement() {
   const { pathname, hash } = useLocation();
   useEffect(() => {
     if (!hash) {
+      // La fenêtre, et la racine si le CSS du site en fait la zone qui défile (en-tête fixe au-dessus).
       window.scrollTo(0, 0);
+      document.getElementById('racine')?.scrollTo(0, 0);
       return;
     }
     const id = decodeURIComponent(hash.slice(1));