@tekkare/romulus 0.1.67 → 0.1.69

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.66",
+  "version": "0.1.68",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/AppSidebar.vue

@@ -0,0 +1,126 @@
+<!--
+  RmAppSidebar - barre laterale repliable, composee en slots.
+
+  Reprend `arg-sidebar` d'Auriga : 200px depliee, 54px repliee, bouton retour
+  a l'accueil, titre de l'app, corps defilant (slot `menu`) et pied colle en bas
+  (slot `footer`). Se replie seule sous 1000px de large.
+
+  Laquelle des barres du paquet prendre :
+  - celle-ci quand la page compose son menu en balises (`RmMenuItem`,
+    `RmSubMenu`) et doit glisser ses propres blocs entre les entrees ;
+  - `RmSidebar` quand le menu tient dans une simple liste d'entrees ;
+  - `RmSidebarLeft` pour le chrome du portail, decrit par une prop `sections` ;
+  - `RmSidebarRight` pour le rail d'icones.
+
+  Trois choses changent par rapport a Auriga. Les libelles du chrome sont dans
+  le composant plutot que charges depuis des JSON de locale : un composant qui
+  va chercher un fichier au montage affiche une bulle vide le temps du premier
+  rendu.
+
+  Le retour a l'accueil est un vrai `<a href>` : le `window.location.href`
+  d'Auriga privait du clic milieu et du survol qui montre la cible.
+
+  L'etat replie est un `v-model`, si bien qu'une page peut le poser elle-meme.
+-->
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted } from 'vue'
+
+const props = withDefaults(defineProps<{
+  /** Nom de l'app, en titre. Absent, le slot `title` prend la place. */
+  name?: string
+  /** Code ISO 3166-1 alpha-2 pose devant le nom. */
+  appIso?: string
+  /** Cible du bouton accueil. `null` retire le bouton. */
+  homeLink?: string | null
+  lang?: 'fr' | 'en'
+  /** Largeur en dessous de laquelle la barre se replie seule. */
+  breakpoint?: number
+}>(), {
+  name: '',
+  appIso: undefined,
+  homeLink: '/',
+  lang: 'fr',
+  breakpoint: 1000,
+})
+
+const emit = defineEmits<{ sidebarChange: [open: boolean] }>()
+
+const open = defineModel<boolean>('open', { default: true })
+
+const WORDS = {
+  fr: { home: 'Accueil', toggle: 'Replier ou déplier la barre' },
+  en: { home: 'Home', toggle: 'Collapse or expand the sidebar' },
+} as const
+
+const t = computed(() => WORDS[props.lang])
+
+/**
+ * Sous le seuil, la barre depliee mange la moitie de l'ecran : elle se replie
+ * seule, et se laisse rouvrir a la main ensuite.
+ */
+function handleResize() {
+  const next = window.innerWidth >= props.breakpoint
+  if (next === open.value) return
+  open.value = next
+  emit('sidebarChange', next)
+}
+
+function toggle() {
+  open.value = !open.value
+  emit('sidebarChange', open.value)
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+  handleResize()
+})
+onUnmounted(() => window.removeEventListener('resize', handleResize))
+</script>
+
+<template>
+  <div id="rm-app-sidebar" class="rm-asb" :class="{ 'rm-asb--open': open }">
+    <div
+      class="rm-asb__head"
+      :class="[
+        open ? 'rm-asb__head--full' : 'rm-asb__head--small',
+        { 'rm-asb__head--end': open && homeLink === null },
+      ]"
+    >
+      <a v-if="homeLink !== null" :href="homeLink" class="rm-asb__home">
+        <RmTooltip :text="t.home" :disabled="open" dir="right" class="rm-asb__mark">
+          <RmIcon name="House" :size="20" color="var(--color-primary)" />
+        </RmTooltip>
+        <span v-if="open">{{ t.home }}</span>
+      </a>
+
+      <button type="button" class="rm-asb__toggle" :aria-expanded="open" @click="toggle">
+        <RmTooltip :text="t.toggle" :disabled="open" dir="right" class="rm-asb__mark">
+          <RmIcon name="Sidebar" :size="20" color="var(--color-primary)" />
+        </RmTooltip>
+        <span class="rm-sr-only">{{ t.toggle }}</span>
+      </button>
+    </div>
+
+    <h1 v-show="open" class="rm-asb__title">
+      <slot v-if="!name" name="title" />
+      <span v-else class="rm-asb__name">
+        <RmFlag v-if="appIso" :code="appIso" :height="16" />
+        <span>{{ name }}</span>
+      </span>
+    </h1>
+
+    <div class="rm-asb__body">
+      <div class="rm-asb__content">
+        <slot name="menu" />
+      </div>
+    </div>
+
+    <div class="rm-asb__footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.rm-asb{align-items:flex-start;background:var(--bg-surface-2);border-right:1px solid var(--border-default);box-sizing:border-box;display:flex;flex-direction:column;gap:16px;height:100vh;left:0;padding:16px 8px;position:fixed;top:0;transition:width .3s ease;width:54px;z-index:98}.rm-asb--open{width:200px}.rm-asb__head{align-items:center;display:flex}.rm-asb__head--full{align-self:stretch;justify-content:space-between}.rm-asb__head--end{justify-content:flex-end}.rm-asb__head--small{flex-direction:column;gap:4px}.rm-asb__home,.rm-asb__toggle{align-items:center;background:transparent;border:none;border-radius:var(--radius-sm,4px);color:var(--color-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);gap:6px;height:32px;line-height:1.6;padding:6px;text-decoration:none}.rm-asb__toggle{align-self:flex-end;justify-content:center}.rm-asb__home:hover,.rm-asb__toggle:hover{background:var(--bg-hover)}.rm-asb__home:focus-visible,.rm-asb__toggle:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-asb__mark{display:flex}.rm-asb__title{align-self:stretch;font-size:20px;font-weight:900;line-height:normal;margin:0 0 16px;padding:0 8px}.rm-asb__name,.rm-asb__title{align-items:center;display:flex;gap:8px}.rm-asb__body{gap:16px;overflow:hidden;width:100%}.rm-asb__body,.rm-asb__content{display:flex;flex:1;flex-direction:column;min-height:0}.rm-asb__content{gap:8px;overflow-y:auto;scrollbar-width:thin}.rm-asb__content::-webkit-scrollbar{height:5px;width:5px}.rm-asb__content::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:var(--radius-xl,12px)}.rm-asb__footer{width:100%}
+</style>

package/dist/runtime/components/MenuItem.vue

@@ -0,0 +1,78 @@
+<!--
+  RmMenuItem - entree de navigation d'une barre laterale.
+
+  Reprend `arg-menu-item` d'Auriga : icone ou drapeau, intitule qui disparait
+  quand la barre est repliee, bulle a droite qui prend le relais dans ce cas,
+  et squelette scintillant pendant le chargement.
+
+  A poser dans `RmSidebar`, qui transmet son etat replie. Pour un menu a
+  sections depliables, c'est `RmAccordionMenu`.
+
+  Deux choses changent. L'entree en chargement porte `aria-busy` et un intitule
+  masque : chez Auriga, c'etait une barre grise muette, que le lecteur d'ecran
+  sautait sans rien dire.
+
+  Le drapeau passe par `RmFlag` plutot que par l'emoji, qui ne se ligature pas
+  sous Windows.
+-->
+<script setup lang="ts">
+withDefaults(defineProps<{
+  to: string
+  label: string
+  /** Icone Phosphor sans le prefixe "Ph". A defaut, `countryIso`. */
+  icon?: string
+  /** Code ISO 3166-1 alpha-2, pour une entree qui designe un pays. */
+  countryIso?: string
+  /** Barre depliee : l'intitule sort et la bulle se tait. */
+  sidebarOpen?: boolean
+  newTab?: boolean
+  /** Entree pas encore prete : squelette a la place du contenu. */
+  loading?: boolean
+}>(), {
+  icon: undefined,
+  countryIso: undefined,
+  sidebarOpen: true,
+  newTab: false,
+  loading: false,
+})
+
+const emit = defineEmits<{ clickLink: [payload: { label: string, to: string }] }>()
+</script>
+
+<template>
+  <NuxtLink
+    :to="to"
+    class="rm-menu-item"
+    :class="{ 'rm-menu-item--loading': loading }"
+    active-class="is-active"
+    :target="newTab ? '_blank' : '_self'"
+    :aria-busy="loading ? 'true' : undefined"
+    @click="emit('clickLink', { label, to })"
+  >
+    <template v-if="loading">
+      <span class="rm-menu-item__skeleton" aria-hidden="true" />
+      <span class="rm-sr-only">{{ label }}</span>
+    </template>
+
+    <template v-else>
+      <!-- Repliee, la barre ne montre que l'icone : la bulle porte alors le
+           nom, sinon l'entree n'est identifiable qu'a l'essai. -->
+      <RmTooltip
+        :text="label"
+        :disabled="sidebarOpen"
+        dir="right"
+        class="rm-menu-item__mark"
+        :class="{ 'rm-menu-item__mark--grow': !sidebarOpen }"
+      >
+        <RmIcon v-if="icon" :name="icon" :size="20" />
+        <RmFlag v-else-if="countryIso" :code="countryIso" :height="16" />
+      </RmTooltip>
+
+      <span v-show="sidebarOpen" class="rm-menu-item__label">{{ label }}</span>
+    </template>
+  </NuxtLink>
+</template>
+
+<style scoped>
+.rm-sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.rm-menu-item{align-items:center;align-self:stretch;border-radius:var(--radius-sm,4px);color:var(--text-primary);display:flex;font-size:var(--font-14,14px);gap:8px;line-height:1.6;padding:8px;text-decoration:none}.rm-menu-item--loading{height:36px;padding:0}.rm-menu-item :deep(svg){color:var(--text-secondary)}.rm-menu-item:hover:not(.is-active){background:var(--bg-hover)}.rm-menu-item.is-active{background:rgba(var(--brand-rgb),.1)}.rm-menu-item.is-active :deep(svg),.rm-menu-item:hover:not(.is-active) :deep(svg){color:var(--color-primary)}.rm-menu-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.rm-menu-item__mark{display:flex}.rm-menu-item__mark--grow{flex:1 1 100%}.rm-menu-item__label{min-width:0}.rm-menu-item__skeleton{background:var(--bg-surface-2);border-radius:var(--radius-sm,4px);height:100%;overflow:hidden;position:relative;width:100%}.rm-menu-item__skeleton:after{animation:rm-menu-item-shimmer 1.5s infinite;background:linear-gradient(90deg,rgba(var(--brand-rgb),0) 0,rgba(var(--brand-rgb),.08) 50%,rgba(var(--brand-rgb),0) 100%);content:"";height:100%;left:-100%;position:absolute;top:0;width:100%}@keyframes rm-menu-item-shimmer{to{left:100%}}@media (prefers-reduced-motion:reduce){.rm-menu-item__skeleton:after{animation:none}}
+</style>

package/dist/runtime/components/MenuLink.vue

@@ -0,0 +1,68 @@
+<!--
+  RmMenuLink - lien secondaire d'une barre laterale, ou action.
+
+  Reprend `arg-menu-link` d'Auriga : meme rangee que `RmMenuItem` mais sans
+  etat actif, pour ce qui vit au pied de la barre (aide, contact, deconnexion).
+  `action` en fait un bouton qui emet `click` au lieu de naviguer.
+
+  Une chose change : la branche action est un vrai `<button>`. Le `<div @click>`
+  d'Auriga n'etait ni atteignable au clavier ni annonce comme actionnable, ce
+  qui coupait la deconnexion a qui navigue sans souris.
+-->
+<script setup lang="ts">
+withDefaults(defineProps<{
+  label: string
+  /** Icone Phosphor sans le prefixe "Ph". */
+  icon: string
+  to?: string
+  /** Barre depliee : l'intitule sort et la bulle se tait. */
+  sidebarOpen?: boolean
+  /** Bouton d'action plutot que lien de navigation. */
+  action?: boolean
+  newTab?: boolean
+}>(), {
+  to: '/',
+  sidebarOpen: true,
+  action: false,
+  newTab: false,
+})
+
+const emit = defineEmits<{ click: [] }>()
+</script>
+
+<template>
+  <NuxtLink
+    v-if="!action"
+    :to="to"
+    class="rm-menu-link"
+    :target="newTab ? '_blank' : '_self'"
+  >
+    <RmTooltip
+      :text="label"
+      :disabled="sidebarOpen"
+      dir="right"
+      class="rm-menu-link__mark"
+      :class="{ 'rm-menu-link__mark--grow': !sidebarOpen }"
+    >
+      <RmIcon :name="icon" :size="20" />
+    </RmTooltip>
+    <span v-show="sidebarOpen">{{ label }}</span>
+  </NuxtLink>
+
+  <button v-else type="button" class="rm-menu-link" @click="emit('click')">
+    <RmTooltip
+      :text="label"
+      :disabled="sidebarOpen"
+      dir="right"
+      class="rm-menu-link__mark"
+      :class="{ 'rm-menu-link__mark--grow': !sidebarOpen }"
+    >
+      <RmIcon :name="icon" :size="20" />
+    </RmTooltip>
+    <span v-show="sidebarOpen">{{ label }}</span>
+  </button>
+</template>
+
+<style scoped>
+.rm-menu-link{align-items:center;align-self:stretch;background:none;border:none;border-radius:var(--radius-sm,4px);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);gap:8px;line-height:1.6;margin:8px 0;padding:8px;text-align:left;text-decoration:none;text-transform:capitalize;width:100%}.rm-menu-link :deep(svg){color:var(--text-secondary)}.rm-menu-link:hover{background:var(--bg-hover)}.rm-menu-link:hover :deep(svg){color:var(--color-primary)}.rm-menu-link:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.rm-menu-link__mark{display:flex}.rm-menu-link__mark--grow{flex:1 1 100%}
+</style>

package/dist/runtime/components/SubMenu.vue

@@ -0,0 +1,69 @@
+<!--
+  RmSubMenu - groupe repliable dans une barre laterale.
+
+  Reprend `arg-sub-menu` d'Auriga : un intitule, un chevron qui pivote, et les
+  entrees en dessous. Repliee, la barre ne garde que le chevron, la bulle porte
+  alors le nom du groupe.
+
+  A poser dans `RmSidebar`, autour de `RmMenuItem`. Pour un menu entier decrit
+  en donnees plutot qu'en balises, c'est `RmAccordionMenu`.
+
+  Deux choses changent : le bouton porte `aria-expanded`, et l'ouverture est un
+  `v-model` optionnel. Chez Auriga l'etat etait interne et lu une seule fois au
+  montage : une page qui voulait ouvrir un groupe apres coup ne pouvait pas.
+-->
+<script setup lang="ts">
+withDefaults(defineProps<{
+  label: string
+  /** Icone Phosphor devant l'intitule. A defaut, `flagIso`. */
+  icon?: string
+  /** Code ISO 3166-1 alpha-2, pour un groupe qui designe un pays. */
+  flagIso?: string
+  /** Barre depliee : l'intitule sort et la bulle se tait. */
+  sidebarOpen?: boolean
+}>(), {
+  icon: undefined,
+  flagIso: undefined,
+  sidebarOpen: true,
+})
+
+/** Groupe ouvert. Ouvert par defaut : un menu tout replie cache la navigation. */
+const open = defineModel<boolean>('open', { default: true })
+</script>
+
+<template>
+  <div class="rm-submenu" :class="{ 'rm-submenu--collapsed': !sidebarOpen }">
+    <button
+      type="button"
+      class="rm-submenu__head"
+      :aria-expanded="open"
+      @click="open = !open"
+    >
+      <span v-if="sidebarOpen" class="rm-submenu__title">
+        <RmIcon v-if="icon" :name="icon" :size="12" :class="{ 'is-open': open }" />
+        <RmFlag v-else-if="flagIso" :code="flagIso" :height="12" />
+        <span>{{ label }}</span>
+      </span>
+
+      <RmTooltip
+        :text="label"
+        :disabled="sidebarOpen"
+        dir="right"
+        class="rm-submenu__caret-slot"
+        :class="{ 'rm-submenu__caret-slot--grow': !sidebarOpen }"
+      >
+        <span class="rm-submenu__caret" :class="{ 'is-open': open }">
+          <RmIcon name="CaretDown" :size="12" />
+        </span>
+      </RmTooltip>
+    </button>
+
+    <div v-show="open" class="rm-submenu__body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-submenu{align-items:flex-start;flex-direction:column;gap:8px}.rm-submenu,.rm-submenu__head{align-self:stretch;display:flex;width:100%}.rm-submenu__head{align-items:center;background:none;border:none;color:var(--text-primary);cursor:pointer;font-family:inherit;font-size:var(--font-14,14px);font-weight:700;gap:10px;justify-content:space-between;line-height:normal;padding:3px 8px 6px}.rm-submenu__head:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.rm-submenu__title{align-items:center;display:flex;gap:4px}.rm-submenu__title :deep(svg){color:var(--text-secondary)}.rm-submenu__title :deep(svg.is-open){color:var(--color-primary)}.rm-submenu__caret-slot{display:flex}.rm-submenu__caret-slot--grow{flex:1 1 100%}.rm-submenu__caret{color:var(--text-secondary);display:flex;transition:transform .3s ease}.rm-submenu__caret.is-open{color:var(--color-primary);transform:rotate(180deg)}.rm-submenu__body{display:flex;flex-direction:column;gap:8px;width:100%}
+</style>

package/dist/runtime/components/Toolbar.vue

@@ -0,0 +1,78 @@
+<!--
+  RmToolbar - rail vertical d'icones, colle a droite de l'analyse.
+
+  Reprend `arg-toolbar` d'Auriga : une icone par volet (astuces, sources,
+  info), pastille rouge sur « Sources » quand la page en compte. Le clic ouvre
+  `RmToolbarContent` sur le volet demande.
+
+  Deux choses changent. Les icones sont des `<button>` porteurs de
+  `aria-label` : les `<div @click>` d'Auriga n'etaient ni atteignables au
+  clavier ni annonces, et un rail d'icones sans texte est deja le pire cas pour
+  un lecteur d'ecran.
+
+  La pastille de compte porte son nombre en toutes lettres dans l'intitule
+  (« Sources, 4 »), au lieu d'un chiffre rouge que rien n'explique.
+-->
+<script setup lang="ts">
+export interface RmToolbarItem {
+  /** Nom du volet, qui sert aussi de cle de slot dans RmToolbarContent. */
+  name: string
+  /** Icone Phosphor sans le prefixe "Ph". */
+  icon: string
+  /** Volet a ouvrir si different de `name`. */
+  openSlot?: string
+  /** Compte affiche en pastille. */
+  size?: number
+}
+
+const props = withDefaults(defineProps<{
+  items?: RmToolbarItem[]
+  /** Nombre de sources de la page, en pastille sur le volet « Sources ». */
+  sourceAmount?: number
+}>(), {
+  items: () => [
+    { name: 'Tips', icon: 'Lightbulb' },
+    { name: 'Sources', icon: 'Database' },
+    { name: 'Info', icon: 'Info' },
+  ],
+  sourceAmount: 0,
+})
+
+const emit = defineEmits<{ openToolbar: [payload: { open: boolean, menu: string }] }>()
+
+function countOf(item: RmToolbarItem) {
+  return item.name === 'Sources' ? props.sourceAmount : (item.size ?? 0)
+}
+
+function open(item: RmToolbarItem) {
+  const wanted = item.openSlot ?? item.name
+  // Un `openSlot` qui ne designe aucun volet ouvrirait le tiroir sur du vide :
+  // on retombe alors sur le premier.
+  const exists = props.items.some(el => el.name === wanted)
+  emit('openToolbar', { open: true, menu: exists ? wanted : props.items[0]?.name })
+}
+</script>
+
+<template>
+  <div class="rm-toolbar">
+    <button
+      v-for="(item, index) in items"
+      :key="index"
+      type="button"
+      class="rm-toolbar__item"
+      :aria-label="countOf(item) > 0 ? `${item.name}, ${countOf(item)}` : item.name"
+      @click="open(item)"
+    >
+      <RmTooltip :text="item.name" dir="left" class="rm-toolbar__mark">
+        <RmIcon :name="item.icon" :size="20" />
+        <span v-if="countOf(item) > 0" class="rm-toolbar__count" aria-hidden="true">
+          {{ countOf(item) }}
+        </span>
+      </RmTooltip>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.rm-toolbar{align-items:flex-start;border:1px solid var(--border-default);border-radius:var(--radius-md,8px);display:inline-flex;flex-direction:column;gap:4px;padding:4px}.rm-toolbar__item{align-items:center;background:none;border:none;border-radius:var(--radius-sm,4px);cursor:pointer;display:flex;gap:8px;justify-content:flex-end;padding:10px}.rm-toolbar__item:hover{background:var(--bg-hover)}.rm-toolbar__item:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.rm-toolbar__mark{display:flex;position:relative}.rm-toolbar__count{align-items:center;background:var(--color-danger);border-radius:var(--radius-pill,30px);color:var(--color-text-inverse);display:flex;font-size:var(--font-10,10px);font-weight:900;height:16px;justify-content:center;line-height:normal;position:absolute;right:-5px;top:-5px;width:16px}
+</style>

package/dist/runtime/components/ToolbarContent.vue

@@ -0,0 +1,94 @@
+<!--
+  RmToolbarContent - le tiroir qu'ouvre `RmToolbar`.
+
+  Reprend `arg-toolbar-content` d'Auriga : un tiroir a droite, coupe en deux,
+  la colonne des volets a gauche et le contenu du volet actif a droite. Un slot
+  par volet, nomme comme lui.
+
+  Trois choses changent. Le tiroir est `RmDrawer`, qui piege le focus et rend
+  Echap : le tiroir d'Auriga laissait le focus derriere lui, dans la page
+  masquee.
+
+  Les volets sont des `<button>` dans un `role="tablist"`, avec
+  `aria-selected` : les `<div @click>` d'Auriga n'annoncaient ni role ni etat
+  actif.
+
+  Les volets inactifs sont retires du DOM plutot que caches en `display: none`.
+  Chez Auriga, un lecteur d'ecran lisait les trois volets a la suite comme s'ils
+  etaient tous a l'ecran.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { RmToolbarItem } from './Toolbar.vue'
+
+const props = withDefaults(defineProps<{
+  items?: RmToolbarItem[]
+  /** Nombre de sources de la page, en pastille sur le volet « Sources ». */
+  sourceAmount?: number
+  lang?: 'fr' | 'en'
+}>(), {
+  items: () => [
+    { name: 'Tips', icon: 'Lightbulb' },
+    { name: 'Sources', icon: 'Database' },
+    { name: 'Info', icon: 'Info' },
+  ],
+  sourceAmount: 0,
+  lang: 'fr',
+})
+
+const open = defineModel<boolean>('open', { default: false })
+/** Volet ouvert, par son `name`. */
+const menu = defineModel<string>('menu', { default: '' })
+
+const WORDS = { fr: { close: 'Fermer' }, en: { close: 'Close' } } as const
+const t = computed(() => WORDS[props.lang])
+
+const active = computed(() => menu.value || props.items[0]?.name || '')
+
+function countOf(item: RmToolbarItem) {
+  return item.name === 'Sources' ? props.sourceAmount : (item.size ?? 0)
+}
+
+/** « SourcesDetail » se lit « Sources Detail ». */
+function labelOf(name: string) {
+  return name.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, s => s.toUpperCase())
+}
+</script>
+
+<template>
+  <RmDrawer v-model="open" side="right" size="620px" :close-label="t.close">
+    <div class="rm-tbc">
+      <div class="rm-tbc__rail" role="tablist" aria-orientation="vertical">
+        <button type="button" class="rm-tbc__close" @click="open = false">
+          <RmIcon name="X" :size="16" />
+          <span>{{ t.close }}</span>
+        </button>
+
+        <button
+          v-for="(item, index) in items"
+          :key="index"
+          type="button"
+          role="tab"
+          class="rm-tbc__tab"
+          :class="{ 'is-active': active === item.name }"
+          :aria-selected="active === item.name"
+          @click="menu = item.name"
+        >
+          <span class="rm-tbc__tab-left">
+            <RmIcon :name="item.icon" :size="20" />
+            <span>{{ labelOf(item.name) }}</span>
+          </span>
+          <span v-if="countOf(item) > 0" class="rm-tbc__count">{{ countOf(item) }}</span>
+        </button>
+      </div>
+
+      <div class="rm-tbc__panel" role="tabpanel">
+        <slot :name="active" />
+      </div>
+    </div>
+  </RmDrawer>
+</template>
+
+<style scoped>
+.rm-tbc{height:100%}.rm-tbc,.rm-tbc__rail{align-items:flex-start;display:flex}.rm-tbc__rail{align-self:stretch;background:var(--bg-surface-2);flex-direction:column;gap:16px;padding:24px 0;width:160px}.rm-tbc__close{align-items:center;background:var(--bg-surface-3);border:none;border-radius:var(--radius-md,8px);color:var(--text-secondary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);gap:6px;line-height:1.6;margin:0 16px;padding:6px 12px 6px 8px}.rm-tbc__close:hover{background:var(--bg-hover)}.rm-tbc__tab{align-items:center;align-self:stretch;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:500;gap:4px;justify-content:space-between;line-height:normal;padding:0 16px 4px}.rm-tbc__tab.is-active{border-bottom-color:var(--color-primary);color:var(--text-primary)}.rm-tbc__tab.is-active :deep(svg){color:var(--color-primary)}.rm-tbc__tab:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.rm-tbc__tab-left{align-items:center;display:flex;gap:4px}.rm-tbc__count{align-items:center;background:var(--color-danger);border-radius:var(--radius-pill,30px);color:var(--color-text-inverse);display:flex;font-size:var(--font-10,10px);font-weight:900;height:16px;justify-content:center;line-height:normal;width:16px}.rm-tbc__panel{align-items:flex-start;align-self:stretch;background:var(--bg-surface);border-left:1px solid var(--border-default);display:flex;flex:1;flex-direction:column;gap:24px;min-width:0;overflow-y:auto;padding:24px;scrollbar-width:thin}.rm-tbc__panel::-webkit-scrollbar{height:5px;width:5px}.rm-tbc__panel::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:var(--radius-xl,12px)}
+</style>

package/dist/runtime/components/ToolbarSources.vue

@@ -0,0 +1,70 @@
+<!--
+  RmToolbarSources - le volet « Sources » du tiroir d'outils.
+
+  Reprend `arg-toolbar-sources` d'Auriga : la mention legale de licence Open
+  Data, puis la liste des sources posee par l'appelant dans le slot `sources`.
+
+  La mention n'est pas decorative. Les jeux ouverts que le portail rediffuse
+  imposent de citer la licence et de signaler les donnees retraitees : elle
+  reste donc dans le composant, pas dans chaque page, ou elle finirait par
+  manquer sur celles qu'on oublie.
+
+  Les libelles vivent dans le composant plutot que dans des JSON de locale
+  charges au montage, qui laissaient le volet vide le temps du premier rendu.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  lang?: 'fr' | 'en'
+  /** Ajoute la mention sur les donnees retraitees. */
+  showCopy?: boolean
+}>(), {
+  lang: 'fr',
+  showCopy: false,
+})
+
+const WORDS = {
+  fr: {
+    title: 'Sources',
+    comply: 'Les données rediffusées ici respectent la',
+    license: 'Licence Open Data 2.0',
+    list: 'et la liste des sources ci-dessous.',
+    copy: 'Certaines données ont été retraitées pour les besoins de l\'analyse.',
+    href: 'https://rcd-media.com/tekkare/documents/Licence+Open+Data+2.0.pdf',
+  },
+  en: {
+    title: 'Sources',
+    comply: 'The data redistributed here complies with the',
+    license: 'Open Data License 2.0',
+    list: 'and the list of sources below.',
+    copy: 'Some data has been reprocessed for the purposes of the analysis.',
+    href: 'https://rcd-media.com/tekkare/documents/Open+Licence+2.0.pdf',
+  },
+} as const
+
+const t = computed(() => WORDS[props.lang])
+</script>
+
+<template>
+  <div class="rm-tbs">
+    <p class="rm-tbs__title">{{ t.title }}</p>
+
+    <div class="rm-tbs__legal">
+      <p>
+        {{ t.comply }}
+        <a :href="t.href" target="_blank" rel="noopener" class="rm-tbs__link">{{ t.license }}</a>,
+        {{ t.list }}
+      </p>
+      <p v-if="showCopy">{{ t.copy }}</p>
+    </div>
+
+    <div class="rm-tbs__list">
+      <slot name="sources" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-tbs{align-self:stretch;display:flex;flex-direction:column;gap:16px}.rm-tbs__title{color:var(--text-primary);font-size:var(--font-18,18px);font-weight:800;margin:0}.rm-tbs__legal{color:var(--text-secondary);display:flex;flex-direction:column;font-size:var(--font-12,12px);gap:8px;line-height:1.6}.rm-tbs__legal p{margin:0}.rm-tbs__link{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px}.rm-tbs__list{align-self:stretch;display:flex;flex-direction:column;gap:12px}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.67",
+  "version": "0.1.69",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",