v3 : modules d'ordre et de titre — l'interface, restes mineurs (L11, C25–C27)

Chaque section du lecteur finit par l'ordre de ses articles (inertie 2) : ses
articles numérotés, son vote déplié, « Proposer un autre ordre » — une liste où
l'on clique un article puis sa place, ses flèches, ou le clavier. Le titre du
document (inertie 4) se vote et se propose sous le titre, « traduction à
revoir » quand il a changé. Les deux sont dans la liste des propositions, le
panier et la chaîne Ğ1 ; un nouvel article se propose dans une section, à sa fin.
La liste du groupe compte les propositions ouvertes des modules.

Restes mineurs : la participation ramenée se dit en deux temps (la mesure, puis
ce que le groupe demande), les lignes « habituelle » des réglages resserrées, le
sélecteur d'inertie se parcourt aux flèches (le cran actuel atteignable, jamais
choisi), la marque « seed a minima » porte le vrai nombre de votes.

Contrôles : C25 (ordre, dont la chaîne et le téléphone), C26 (titre), C27
(participation ramenée) ; C3, C17 (41 modules), C20 mis à jour.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/lib/components/UnitBlock.svelte

@@ -14,6 +14,11 @@
     actions = true,
     voteFor = null,
     voteOpen = false,
+    votes = 0,
+    module = false,
+    proposeLabel,
+    meta,
+    content,
     fold,
     onaction,
   }: {
@@ -27,34 +32,53 @@
     /** The version « Le vote » unfolds, and whether it is unfolded. */
     voteFor?: string | null;
     voteOpen?: boolean;
+    /** The votes on the version in force, shown next to the seed mark. */
+    votes?: number;
+    /** A module (ADR 0009): quieter than an article, its own words to propose. */
+    module?: boolean;
+    proposeLabel?: string;
+    /** What the header adds after the title (a count, a level). */
+    meta?: Snippet;
+    /** In place of the text, for a module. */
+    content?: Snippet;
     /** The vote, unfolded under the text. */
     fold?: Snippet;
     onaction: (action: 'vote' | 'proposals' | 'propose') => void;
   } = $props();
 </script>
 
-<article class="unit {mark}" class:selected class:unfolded={voteOpen}>
+<!-- A module is not an article of the text: a group named by its title. -->
+<svelte:element
+  this={module ? 'div' : 'article'}
+  class="unit {mark}"
+  class:module
+  class:selected
+  class:unfolded={voteOpen}
+  role={module ? 'group' : undefined}
+  aria-label={module ? text.title : undefined}
+>
   <header>
     <h2 class="eyebrow">{text.title}</h2>
+    {@render meta?.()}
     {#if mark !== 'unchanged'}<span class="tag {mark === 'removed' ? 'ochre' : 'moss'}">{t(`doc.mark.${mark}`)}</span>{/if}
     {#if text.stale}<span class="tag ochre">{t('doc.lang.stale')}</span>{:else if text.missing}<span class="tag">{t('doc.lang.missing')}</span>{/if}
   </header>
-  <Prose text={text.body} />
+  {#if content}{@render content()}{:else}<Prose text={text.body} />{/if}
   {#if actions}
     <footer class="actions">
       <span class="status faint">
-        {#if seedMinimal}<span title={t('doc.seed.long')}>{t('doc.seed')} · 0 vote</span>
+        {#if seedMinimal}<span title={t('doc.seed.long')}>{i18n.plural('doc.seed.votes', votes)}</span>
         {:else if enteredAt}{t('doc.adopted', { date: i18n.date(enteredAt) })}{/if}
       </span>
       <span class="links">
         <button type="button" class:on={voteOpen} aria-expanded={voteOpen} aria-controls={voteFor ? `vote-${voteFor}` : undefined} onclick={() => onaction('vote')}>{t('doc.action.vote')}</button>
-        <button type="button" onclick={() => onaction('proposals')}>{t('doc.action.proposals')}{#if rivals > 0} · {rivals}{/if}</button>
-        <button type="button" onclick={() => onaction('propose')}>{t('doc.action.propose')}</button>
+        <button type="button" onclick={() => onaction('proposals')}>{t('doc.action.proposals')}{#if rivals > 0}{` · ${rivals}`}{/if}</button>
+        <button type="button" onclick={() => onaction('propose')}>{proposeLabel ?? t('doc.action.propose')}</button>
       </span>
     </footer>
   {/if}
   {#if voteOpen && fold}{@render fold()}{/if}
-</article>
+</svelte:element>
 
 <style>
   .unit {
@@ -74,6 +98,19 @@
     background: var(--surface);
     box-shadow: var(--shadow);
   }
+  /* A module closes its section: set apart, quieter than the articles. */
+  .unit.module {
+    margin-top: 0.9rem;
+    margin-bottom: 1.4rem;
+    padding-block: 0.85rem 0.6rem;
+    background: var(--water-wash);
+  }
+  .unit.module:hover,
+  .unit.module:focus-within,
+  .unit.module.selected,
+  .unit.module.unfolded {
+    background: var(--surface);
+  }
   header {
     display: flex;
     flex-wrap: wrap;