@tekkare/romulus 0.1.57 → 0.1.59

package/dist/module.json

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

package/dist/runtime/components/ChaptersNav.vue

@@ -0,0 +1,146 @@
+<!--
+  RmChaptersNav - sommaire d'une page longue, qui suit la lecture.
+
+  Reprend `arg-chapters-nav` d'Auriga : liste collante a gauche, trait de
+  couleur qui se deplace sur le chapitre en cours. Trois choses changent.
+
+  Le chapitre courant vient d'un `IntersectionObserver` et non d'un ecouteur de
+  defilement qui relisait `getBoundingClientRect()` de chaque ancre a chaque
+  pixel. Sur une page a quinze chapitres, ce calcul tournait des centaines de
+  fois par seconde.
+
+  Le trait se cale sur la position reelle de l'entree active, mesuree dans le
+  DOM. Auriga la calculait en dur (`(22 + 16) * index`) : un intitule qui
+  passait sur deux lignes decalait le trait de toutes les entrees suivantes.
+
+  Le decalage du haut est une prop. Auriga allait lire `#arg_header` dans la
+  page, ce qui liait le composant a un identifiant d'application.
+-->
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+export interface RmChapter {
+  /** Intitule affiche. */
+  label: string
+  /** `id` de la section visee dans la page. */
+  value: string
+}
+
+const props = withDefaults(defineProps<{
+  chapters: RmChapter[]
+  /** Titre du sommaire. Absent, la liste sort seule. */
+  title?: string
+  /**
+   * Hauteur du chrome fixe en haut de page, en pixels : ce dont il faut
+   * remonter pour qu'un chapitre ne se cale pas derriere l'en-tete.
+   */
+  offset?: number
+}>(), {
+  title: '',
+  offset: 0,
+})
+
+const emit = defineEmits<{ select: [value: string] }>()
+
+const activeValue = defineModel<string>({ default: '' })
+
+const listRef = ref<HTMLElement>()
+const itemRefs = ref<HTMLElement[]>([])
+const barTop = ref(0)
+const barHeight = ref(0)
+
+const activeIndex = computed(() =>
+  props.chapters.findIndex(chapter => chapter.value === activeValue.value),
+)
+
+/** Cale le trait sur l'entree active, telle qu'elle est reellement posee. */
+async function placeBar() {
+  await nextTick()
+  const item = itemRefs.value[activeIndex.value]
+  if (!item || !listRef.value) return
+  barTop.value = item.offsetTop
+  barHeight.value = item.offsetHeight
+}
+
+watch(activeValue, placeBar)
+watch(() => props.chapters, placeBar, { deep: true })
+
+let observer: IntersectionObserver | undefined
+
+function observe() {
+  observer?.disconnect()
+  if (typeof IntersectionObserver === 'undefined') return
+
+  observer = new IntersectionObserver(
+    (entries) => {
+      // La section la plus haute encore visible fait le chapitre courant :
+      // pendant un defilement rapide plusieurs sections se croisent, et la
+      // derniere entree recue n'est pas celle qu'on lit.
+      const visible = entries
+        .filter(entry => entry.isIntersecting)
+        .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0]
+      if (visible) activeValue.value = visible.target.id
+    },
+    // La ligne de declenchement est juste sous le chrome fixe.
+    { rootMargin: `-${props.offset}px 0px -60% 0px`, threshold: 0 },
+  )
+
+  for (const chapter of props.chapters) {
+    const section = document.getElementById(chapter.value)
+    if (section) observer.observe(section)
+  }
+}
+
+function select(chapter: RmChapter) {
+  activeValue.value = chapter.value
+  emit('select', chapter.value)
+  const section = document.getElementById(chapter.value)
+  if (!section) return
+  window.scrollTo({
+    top: section.getBoundingClientRect().top + window.scrollY - props.offset,
+    behavior: 'smooth',
+  })
+}
+
+onMounted(() => {
+  observe()
+  placeBar()
+})
+onBeforeUnmount(() => observer?.disconnect())
+watch(() => props.chapters, observe, { deep: true })
+</script>
+
+<template>
+  <nav class="rm-chapters" :aria-label="title || undefined">
+    <p v-if="title" class="rm-chapters__title">{{ title }}</p>
+
+    <ul ref="listRef" class="rm-chapters__list">
+      <li
+        v-for="(chapter, index) in chapters"
+        :key="chapter.value"
+        ref="itemRefs"
+        class="rm-chapters__item"
+      >
+        <button
+          type="button"
+          class="rm-chapters__link"
+          :class="{ 'is-active': index === activeIndex }"
+          :aria-current="index === activeIndex ? 'true' : undefined"
+          @click="select(chapter)"
+        >
+          {{ chapter.label }}
+        </button>
+      </li>
+
+      <span
+        v-show="activeIndex >= 0"
+        class="rm-chapters__bar"
+        :style="{ transform: `translateY(${barTop}px)`, height: `${barHeight}px` }"
+      />
+    </ul>
+  </nav>
+</template>
+
+<style scoped>
+.rm-chapters{align-self:stretch;flex:0 0 auto;width:auto}.rm-chapters__title{color:var(--text-primary);font-size:var(--font-14,14px);font-weight:700;line-height:1.6;margin-bottom:8px}.rm-chapters__list{border-left:2px solid var(--border-default);display:flex;flex-direction:column;gap:16px;list-style:none;margin:0;padding:0 0 0 8px;position:relative}.rm-chapters__item{align-items:center;display:flex;padding:0}.rm-chapters__link{background:none;border:none;color:var(--text-primary);cursor:pointer;font-size:var(--font-14,14px);font-weight:400;line-height:1.6;padding:0;text-align:left}.rm-chapters__link.is-active,.rm-chapters__link:hover{color:var(--color-primary)}.rm-chapters__bar{background:var(--color-primary);left:-2px;position:absolute;top:0;transition:transform var(--duration-base,.3s) var(--ease-in-out,ease);width:2px}
+</style>

package/dist/runtime/components/Checkbox.vue

@@ -0,0 +1,69 @@
+<!--
+  RmCheckbox - case a cocher encadree, avec son intitule.
+
+  Reprend `arg-checkbox` d'Auriga : meme boite bordee, meme icone carree qui
+  se remplit, meme bulle d'aide optionnelle a droite. Trois choses changent.
+
+  C'est un vrai `<input type="checkbox">` visuellement masque, dans un
+  `<label>`. Auriga posait un `<div tabindex="0">` avec un `@click` : la barre
+  d'espace ne cochait rien et le lecteur d'ecran n'annoncait ni role ni etat.
+
+  L'etat est un `v-model` plutot qu'une copie interne de `defaultSelect` :
+  une case dont le parent refuse le changement revenait, chez Auriga, dans
+  l'etat coche malgre le refus.
+
+  Le masque `paint(squircle)` saute. Il demandait un worklet CSS charge a la
+  main, ne marchait que sur Chrome, et un `border-radius` donne le meme angle.
+-->
+<script setup lang="ts">
+withDefaults(defineProps<{
+  /** Intitule pose a cote de la case. */
+  label: string
+  /** Intitule du champ, au-dessus de la boite. Absent, rien ne sort. */
+  fieldLabel?: string
+  /** Bulle d'aide, sortie par une icone a droite. */
+  tooltip?: string
+  tooltipDir?: 'top' | 'right' | 'bottom' | 'left'
+  disabled?: boolean
+}>(), {
+  fieldLabel: '',
+  tooltip: '',
+  tooltipDir: 'top',
+  disabled: false,
+})
+
+const checked = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <div class="rm-checkbox">
+    <p v-if="fieldLabel" class="rm-checkbox__field-label">{{ fieldLabel }}</p>
+
+    <div class="rm-checkbox__wrap">
+      <label class="rm-checkbox__box" :class="{ 'is-disabled': disabled }">
+        <input
+          v-model="checked"
+          type="checkbox"
+          class="rm-checkbox__input"
+          :disabled="disabled"
+        >
+        <span class="rm-checkbox__icon" :class="{ 'is-checked': checked }">
+          <RmIcon
+            :name="checked ? 'CheckSquare' : 'Square'"
+            :weight="checked ? 'fill' : 'regular'"
+            :size="20"
+          />
+        </span>
+        <span class="rm-checkbox__label">{{ label }}</span>
+      </label>
+
+      <RmTooltip v-if="tooltip" :text="tooltip" :dir="tooltipDir" class="rm-checkbox__help">
+        <RmIcon name="Question" :size="16" />
+      </RmTooltip>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-checkbox__field-label{color:var(--text-secondary);font-size:var(--font-12,12px);font-weight:600;margin-bottom:6px}.rm-checkbox__wrap{position:relative}.rm-checkbox__box,.rm-checkbox__wrap{align-items:center;display:flex;gap:8px}.rm-checkbox__box{background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);color:var(--text-primary);cursor:pointer;flex:1;font-size:var(--font-14,14px);font-weight:600;min-height:40px;padding:0 12px;transition:border-color var(--duration-fast,.15s) var(--ease-out,ease)}.rm-checkbox__box:hover:not(.is-disabled){border-color:var(--color-primary)}.rm-checkbox__box:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.1)}.rm-checkbox__box.is-disabled{color:var(--text-muted);cursor:not-allowed}.rm-checkbox__input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.rm-checkbox__icon{color:var(--text-muted);display:flex;flex-shrink:0}.rm-checkbox__icon.is-checked{color:var(--color-primary)}.rm-checkbox__box.is-disabled .rm-checkbox__icon{color:var(--border-default)}.rm-checkbox__label{min-width:0}.rm-checkbox__help{color:var(--text-muted)}
+</style>

package/dist/runtime/components/CircleAmount.vue

@@ -0,0 +1,27 @@
+<!--
+  RmCircleAmount - compte pose a cote d'un intitule (« Filtres 3 »).
+
+  Reprend `arg-circle-amount` d'Auriga, meme pastille bordee. Ce n'est pas un
+  RmBadge : le badge nomme un statut et porte toujours du texte, celui-ci ne
+  porte qu'un nombre et disparait quand il vaut zero, parce qu'un « 0 » affiche
+  se lit comme un filtre pose sur rien.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  amount: number | string
+  /** Garde la pastille visible a zero, pour un compteur qui doit tenir sa place. */
+  showZero?: boolean
+}>(), { showZero: false })
+
+const visible = computed(() => props.showZero || Number(props.amount) !== 0)
+</script>
+
+<template>
+  <span v-if="visible" class="rm-circle-amount">{{ amount }}</span>
+</template>
+
+<style scoped>
+.rm-circle-amount{align-items:center;border:1px solid var(--border-default);border-radius:var(--radius-pill,999px);color:var(--text-primary);display:inline-flex;font-size:var(--font-12,12px);font-weight:700;justify-content:center;line-height:normal;padding:2px 8px}
+</style>

package/dist/runtime/components/Divider.vue

@@ -0,0 +1,33 @@
+<!--
+  RmDivider - trait de separation.
+
+  Remplace `arg-line-break` d'Auriga, qui posait un `<hr>` et rien d'autre.
+  Deux ajouts : le sens vertical, pour separer deux blocs cote a cote sans
+  bricoler une bordure, et `decorative` qui retire le trait de l'arbre
+  d'accessibilite quand il ne separe rien de reel (un `<hr>` est annonce comme
+  une rupture thematique par un lecteur d'ecran, ce qui n'a aucun sens quand il
+  ne sert qu'a poser une ligne dans une carte).
+-->
+<script setup lang="ts">
+withDefaults(defineProps<{
+  vertical?: boolean
+  /** Trait purement graphique : il sort de l'arbre d'accessibilite. */
+  decorative?: boolean
+}>(), {
+  vertical: false,
+  decorative: true,
+})
+</script>
+
+<template>
+  <hr
+    class="rm-divider"
+    :class="{ 'rm-divider--vertical': vertical }"
+    :role="decorative ? 'none' : 'separator'"
+    :aria-orientation="!decorative && vertical ? 'vertical' : undefined"
+  >
+</template>
+
+<style scoped>
+.rm-divider{background:var(--border-default);border:0;height:1px;margin:0}.rm-divider--vertical{align-self:stretch;height:auto;width:1px}
+</style>

package/dist/runtime/components/Emoji.vue

@@ -0,0 +1,52 @@
+<!--
+  RmEmoji - un emoji a la bonne taille, nomme plutot que colle dans le code.
+
+  Reprend `arg-emoji` d'Auriga et ses trois entrees. Deux choses changent.
+
+  Le rendu passe par du texte, pas par `v-html` : le composant d'Auriga
+  injectait une entite HTML, ce qui ouvre la porte a n'importe quel balisage
+  des que le nom vient d'une donnee.
+
+  Un nom inconnu ne rend plus le vide : la valeur passe telle quelle, si bien
+  qu'un emoji absent de la table s'ecrit directement sans toucher au paquet.
+
+  L'emoji porte `role="img"` et un intitule, sinon un lecteur d'ecran lit le
+  nom Unicode complet au milieu d'une phrase.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/** Les emojis nommes du design system. Un nom absent passe tel quel. */
+const EMOJIS: Record<string, string> = {
+  Lightbulb: '💡',
+  Pin: '📍',
+  Television: '📺',
+}
+
+const props = withDefaults(defineProps<{
+  /** Nom de la table, ou l'emoji lui-meme. */
+  name: string
+  size?: number
+  /** Intitule lu a voix haute. Absent, l'emoji est purement decoratif. */
+  alt?: string
+}>(), {
+  size: 20,
+  alt: '',
+})
+
+const glyph = computed(() => EMOJIS[props.name] ?? props.name)
+</script>
+
+<template>
+  <span
+    class="rm-emoji"
+    :style="{ fontSize: `${size}px` }"
+    :role="alt ? 'img' : undefined"
+    :aria-label="alt || undefined"
+    :aria-hidden="alt ? undefined : 'true'"
+  >{{ glyph }}</span>
+</template>
+
+<style scoped>
+.rm-emoji{display:inline-block;line-height:1}
+</style>

package/dist/runtime/components/FilterBar.vue

@@ -260,5 +260,5 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.rm-fbar{margin-inline:calc((min(var(--oip-content-max, 100%), 100%) - var(--oip-main-w, 100%))/2);position:sticky;width:var(--oip-main-w,100%);z-index:91;--rm-fbar-field-h:32px;backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);display:flex;flex-direction:column;font-family:var(--font-sans)}.rm-fbar__views{align-items:center;display:flex;flex:0 0 auto}.rm-fbar__views:empty{display:none}.rm-fbar__row{align-items:flex-start;display:flex;gap:12px;padding-block:8px;padding-inline:max(32px,(100% - var(--oip-content-max,100%))/2 + 32px)}.rm-fbar--open .rm-fbar__row:not(:has(~.rm-fbar__rail-row)){border-bottom:1px solid var(--border-default)}.rm-fbar__toggle :deep(p),.rm-fbar__toggle :deep(span){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-fbar__toggle{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;display:flex;flex:0 0 auto;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h);justify-content:center;padding:0 14px}.rm-fbar__toggle:hover{background:var(--bg-surface-3)}.rm-fbar__toggle.is-active,.rm-fbar__toggle.is-active:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.rm-fbar__toggle.is-active .rm-fbar__badge{background:var(--color-text-inverse);color:var(--color-primary)}.rm-fbar__badge{align-items:center;background:var(--color-primary);border-radius:16px;color:var(--color-text-inverse);display:inline-flex;font-size:var(--font-11);font-weight:var(--weight-bold);justify-content:center;min-width:18px;padding:0 5px}.rm-fbar__view{align-items:center;display:flex;flex:0 0 auto}.rm-fbar__advanced{align-items:center;background:none;border:none;border-left:1px solid var(--border-default);color:var(--color-primary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-medium);height:var(--rm-fbar-field-h);padding:0 0 0 12px;position:absolute;right:14px;text-decoration-line:underline;top:0;white-space:nowrap;z-index:2}.rm-fbar__advanced.is-active,.rm-fbar__advanced:hover{color:var(--color-primary-hover,var(--color-primary));text-decoration-thickness:2px}.rm-fbar__rail-row{display:flex;padding-bottom:8px;padding-inline:max(32px,(100% - var(--oip-content-max,100%))/2 + 32px)}.rm-fbar--open .rm-fbar__rail-row{border-bottom:1px solid var(--border-default)}.rm-fbar__rail{align-items:center;display:flex;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}.rm-fbar__rail:empty{display:none}.rm-fbar__search{align-items:center;display:flex;flex:1 1 auto;gap:8px;min-width:0;position:relative}.rm-fbar__search:empty{display:none}.rm-fbar__search :deep(.search-bar-wrapper){flex:1 1 auto;min-width:0}.rm-fbar__search :deep(.search-bar){display:flex;width:100%}.rm-fbar__search :deep(.filters_input_search){border-radius:var(--radius-pill);box-sizing:border-box;height:auto;min-height:var(--rm-fbar-field-h);padding-right:calc(var(--rm-fbar-advanced-w, 0px) + 12px);width:100%}.rm-fbar__search :deep(.research_tags:not(:has(*))){display:none}.rm-fbar__search :deep(.select_shortcut){box-sizing:border-box;font-size:var(--font-11);height:24px;padding-block:0}.rm-fbar__search :deep(.select_shortcut:hover){background:var(--bg-surface-3)!important;border-color:var(--border-default)!important;color:inherit!important}.rm-fbar__search :deep(.select_shortcut:hover svg){color:inherit!important}.rm-fbar__search :deep(.remove_search_section){border-left:none;border-radius:0 var(--radius-pill) var(--radius-pill) 0}.rm-fbar__search :deep(.remove_search_section:hover){background:transparent!important}.rm-fbar__search :deep(.remove_search_section:hover svg){color:var(--text-primary)!important}.rm-fbar__search :deep(.filters_input_search.no_bottom){border-bottom:1.5px solid var(--color-primary)!important;border-radius:var(--radius-pill)}.rm-fbar__search :deep(.search_suggestions){border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);left:0;padding:6px;right:0;top:calc(100% + 6px);width:auto}.rm-fbar__search :deep(.sugg_container>*){border-radius:var(--radius-lg)}.rm-fbar__search :deep(.sugg_container>.selected){background:color-mix(in srgb,var(--color-primary) 6%,transparent)!important}.rm-fbar__panel{--rm-filter-col:224px;--rm-fbar-panel-field-h:40px;align-items:end;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(0,var(--rm-filter-col)));justify-content:center;padding-block:16px 20px;padding-inline:56px}.rm-fbar__panel--wide{align-items:stretch;display:flex;flex-direction:column;gap:12px}.rm-fbar__filters{display:contents}.rm-fbar__filters :deep(.filter-chip),.rm-fbar__filters :deep(.filter-complex__trigger),.rm-fbar__filters :deep(.rm-number__box){border-radius:var(--radius-lg);height:var(--rm-fbar-panel-field-h);width:100%}.rm-fbar__panel-head{align-items:baseline;display:flex;gap:16px;grid-column:1/-1;width:100%}.rm-fbar__customize{grid-column:1/-1}.rm-fbar__panel :deep(.filters_row_break){grid-column:1/-1}.rm-fbar__panel-title{font-size:var(--font-18);font-weight:800;margin:0}.rm-fbar__action{background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);padding:0;text-decoration-line:underline}.rm-fbar__action--save{color:var(--color-primary)}.rm-fbar__action--clear{color:var(--text-secondary)}
+.rm-fbar{margin-inline:calc((min(var(--oip-content-max, 100%), 100%) - var(--oip-main-w, 100%))/2);position:sticky;width:var(--oip-main-w,100%);z-index:91;--rm-fbar-field-h:32px;backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);display:flex;flex-direction:column;font-family:var(--font-sans)}.rm-fbar__views{align-items:center;display:flex;flex:0 0 auto}.rm-fbar__views:empty{display:none}.rm-fbar__row{align-items:flex-start;display:flex;gap:12px;padding-block:8px;padding-inline:max(32px,(100% - var(--oip-content-max,100%))/2 + 32px)}.rm-fbar--open .rm-fbar__row:not(:has(~.rm-fbar__rail-row)){border-bottom:1px solid var(--border-default)}.rm-fbar__toggle :deep(p),.rm-fbar__toggle :deep(span){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-fbar__toggle{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;display:flex;flex:0 0 auto;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h);justify-content:center;padding:0 14px}.rm-fbar__toggle:hover{background:var(--bg-surface-3)}.rm-fbar__toggle.is-active,.rm-fbar__toggle.is-active:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.rm-fbar__toggle.is-active .rm-fbar__badge{background:var(--color-text-inverse);color:var(--color-primary)}.rm-fbar__badge{align-items:center;background:var(--color-primary);border-radius:16px;color:var(--color-text-inverse);display:inline-flex;font-size:var(--font-11);font-weight:var(--weight-bold);justify-content:center;min-width:18px;padding:0 5px}.rm-fbar__view{align-items:center;display:flex;flex:0 0 auto}.rm-fbar__advanced{align-items:center;background:none;border:none;border-left:1px solid var(--border-default);color:var(--color-primary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-medium);height:var(--rm-fbar-field-h);padding:0 0 0 12px;position:absolute;right:14px;text-decoration-line:underline;top:0;white-space:nowrap;z-index:2}.rm-fbar__advanced.is-active,.rm-fbar__advanced:hover{color:var(--color-primary-hover,var(--color-primary));text-decoration-thickness:2px}.rm-fbar__rail-row{display:flex;padding-bottom:8px;padding-inline:max(32px,(100% - var(--oip-content-max,100%))/2 + 32px)}.rm-fbar--open .rm-fbar__rail-row{border-bottom:1px solid var(--border-default)}.rm-fbar__rail{align-items:center;display:flex;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}.rm-fbar__rail:empty{display:none}.rm-fbar__search{align-items:center;display:flex;flex:1 1 auto;gap:8px;min-width:0;position:relative}.rm-fbar__search:empty{display:none}.rm-fbar__search :deep(.search-bar-wrapper){flex:1 1 auto;min-width:0}.rm-fbar__search :deep(.search-bar){background:var(--bg-surface);box-sizing:border-box;display:flex;height:var(--rm-fbar-field-h);width:100%}.rm-fbar__search :deep(.filters_input_search){border-radius:var(--radius-pill);box-sizing:border-box;height:auto;min-height:var(--rm-fbar-field-h);padding-right:calc(var(--rm-fbar-advanced-w, 0px) + 12px);width:100%}.rm-fbar__search :deep(.research_tags:not(:has(*))){display:none}.rm-fbar__search :deep(.select_shortcut){box-sizing:border-box;font-size:var(--font-11);height:24px;padding-block:0}.rm-fbar__search :deep(.select_shortcut:hover){background:var(--bg-surface-3)!important;border-color:var(--border-default)!important;color:inherit!important}.rm-fbar__search :deep(.select_shortcut:hover svg){color:inherit!important}.rm-fbar__search :deep(.remove_search_section){border-left:none;border-radius:0 var(--radius-pill) var(--radius-pill) 0}.rm-fbar__search :deep(.remove_search_section:hover){background:transparent!important}.rm-fbar__search :deep(.remove_search_section:hover svg){color:var(--text-primary)!important}.rm-fbar__search :deep(.filters_input_search.no_bottom){border-bottom:1.5px solid var(--color-primary)!important;border-radius:var(--radius-pill)}.rm-fbar__search :deep(.search_suggestions){border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);left:0;padding:6px;right:0;top:calc(100% + 6px);width:auto}.rm-fbar__search :deep(.sugg_container>*){border-radius:var(--radius-lg)}.rm-fbar__search :deep(.sugg_container>.selected){background:color-mix(in srgb,var(--color-primary) 6%,transparent)!important}.rm-fbar__panel{--rm-filter-col:224px;--rm-fbar-panel-field-h:40px;align-items:end;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(0,var(--rm-filter-col)));justify-content:center;padding-block:16px 20px;padding-inline:56px}.rm-fbar__panel--wide{align-items:stretch;display:flex;flex-direction:column;gap:12px}.rm-fbar__filters{display:contents}.rm-fbar__filters :deep(.filter-chip),.rm-fbar__filters :deep(.filter-complex__trigger),.rm-fbar__filters :deep(.rm-number__box){border-radius:var(--radius-lg);height:var(--rm-fbar-panel-field-h);width:100%}.rm-fbar__panel-head{align-items:baseline;display:flex;gap:16px;grid-column:1/-1;width:100%}.rm-fbar__customize{grid-column:1/-1}.rm-fbar__panel :deep(.filters_row_break){grid-column:1/-1}.rm-fbar__panel-title{font-size:var(--font-18);font-weight:800;margin:0}.rm-fbar__action{background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);padding:0;text-decoration-line:underline}.rm-fbar__action--save{color:var(--color-primary)}.rm-fbar__action--clear{color:var(--text-secondary)}
 </style>

package/dist/runtime/components/LangSelect.vue

@@ -0,0 +1,103 @@
+<!--
+  RmLangSelect - choix de la langue, drapeau puis nom.
+
+  Reprend `arg-lang-select` d'Auriga : la langue courante s'affiche, le clic
+  deroule les autres. Trois choses changent.
+
+  C'est un `<button aria-expanded>` suivi d'une liste `role="listbox"`, et
+  Echap referme. Auriga posait un `<div @click>` sans role ni etat, injoignable
+  au clavier.
+
+  La langue courante est un `v-model` sur l'iso, plus une copie interne : une
+  langue changee par la route ou par un autre menu se refletait mal.
+
+  `collapsed` remplace le `sidebarOpen` a trois etats (`true`, `false`, `null`)
+  d'Auriga, qui melangeait « barre repliee » et « pas dans une barre » dans la
+  meme valeur.
+-->
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+
+export interface RmLang {
+  /** Code ISO du pays, pour le drapeau (`fr`, `gb`...). */
+  iso: string
+  /** Nom affiche. */
+  title: string
+}
+
+const props = withDefaults(defineProps<{
+  langs: RmLang[]
+  /** Barre laterale repliee : le drapeau seul, sans le nom. */
+  collapsed?: boolean
+  /** Intitule du bouton pour les technologies d'assistance. */
+  label?: string
+}>(), {
+  collapsed: false,
+  label: 'Langue',
+})
+
+const selected = defineModel<string>({ default: '' })
+
+const isOpen = ref(false)
+const wrapperRef = ref<HTMLElement>()
+
+const current = computed(() => props.langs.find(lang => lang.iso === selected.value))
+const others = computed(() => props.langs.filter(lang => lang.iso !== selected.value))
+
+function pick(lang: RmLang) {
+  selected.value = lang.iso
+  isOpen.value = false
+}
+
+function onClickOutside(event: Event) {
+  if (wrapperRef.value && !wrapperRef.value.contains(event.target as Node)) isOpen.value = false
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && isOpen.value) isOpen.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('click', onClickOutside)
+  document.addEventListener('keydown', onKeydown)
+})
+onUnmounted(() => {
+  document.removeEventListener('click', onClickOutside)
+  document.removeEventListener('keydown', onKeydown)
+})
+</script>
+
+<template>
+  <div v-if="current" ref="wrapperRef" class="rm-lang">
+    <button
+      type="button"
+      class="rm-lang__current"
+      :aria-label="label"
+      :aria-expanded="isOpen"
+      @click="isOpen = !isOpen"
+    >
+      <RmFlag :code="current.iso" :height="18" :title="current.title" />
+      <span v-if="!collapsed" class="rm-lang__name">{{ current.title }}</span>
+      <RmIcon
+        v-if="!collapsed"
+        name="CaretDown"
+        :size="14"
+        class="rm-lang__caret"
+        :class="{ 'is-open': isOpen }"
+      />
+    </button>
+
+    <ul v-if="isOpen && others.length > 0" class="rm-lang__list" role="listbox" :aria-label="label">
+      <li v-for="lang in others" :key="lang.iso" role="option" :aria-selected="false">
+        <button type="button" class="rm-lang__option" @click="pick(lang)">
+          <RmFlag :code="lang.iso" :height="18" :title="lang.title" />
+          <span v-if="!collapsed">{{ lang.title }}</span>
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.rm-lang{position:relative}.rm-lang__current,.rm-lang__option{align-items:center;background:none;border:none;border-radius:var(--radius-md,8px);color:var(--text-primary);cursor:pointer;display:flex;font-size:var(--font-14,14px);gap:8px;padding:6px 8px;width:100%}.rm-lang__current:hover,.rm-lang__option:hover{background:var(--bg-hover)}.rm-lang__name{flex:1;text-align:left}.rm-lang__caret{color:var(--text-muted);transition:transform var(--duration-fast,.15s) var(--ease-in-out,ease)}.rm-lang__caret.is-open{transform:rotate(180deg)}.rm-lang__list{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md,8px);bottom:calc(100% + 4px);box-shadow:0 4px 16px rgba(var(--shadow-rgb),.1);left:0;list-style:none;margin:0;min-width:100%;padding:4px;position:absolute;z-index:50}
+</style>

package/dist/runtime/components/Switch.vue

@@ -0,0 +1,63 @@
+<!--
+  RmSwitch - bascule entre deux etats nommes.
+
+  Reprend `arg-switch` d'Auriga : les deux intitules encadrent la bascule, et
+  celui qui vaut est le seul en couleur pleine. Ce n'est pas une case a cocher
+  deguisee : les deux etats ont un nom, aucun n'est « rien ».
+
+  Trois choses changent. C'est un `<button role="switch">` porteur de
+  `aria-checked` : le `<div tabindex="0">` d'Auriga n'annoncait ni role ni
+  etat, et ne repondait pas a la barre d'espace.
+
+  L'etat est un `v-model` plutot qu'une copie interne : la bascule d'Auriga
+  avancait toute seule, meme quand le parent refusait le changement.
+
+  Le masque `paint(squircle)` saute, avec le worklet CSS qu'il fallait charger
+  a la main et qui ne peignait que sur Chrome. Un `border-radius` suffit.
+-->
+<script setup lang="ts">
+withDefaults(defineProps<{
+  /** Intitule de l'etat actif, a gauche. */
+  activeText: string
+  /** Intitule de l'etat inactif, a droite. */
+  inactiveText: string
+  /** Intitule du champ, au-dessus. Absent, rien ne sort. */
+  label?: string
+  disabled?: boolean
+}>(), {
+  label: '',
+  disabled: false,
+})
+
+const active = defineModel<boolean>({ default: true })
+
+function toggle() {
+  active.value = !active.value
+}
+</script>
+
+<template>
+  <div class="rm-switch">
+    <p v-if="label" class="rm-switch__label">{{ label }}</p>
+
+    <button
+      type="button"
+      role="switch"
+      class="rm-switch__control"
+      :aria-checked="active"
+      :aria-label="label || undefined"
+      :disabled="disabled"
+      @click="toggle"
+    >
+      <span class="rm-switch__text" :class="{ 'is-on': active }">{{ activeText }}</span>
+      <span class="rm-switch__track">
+        <span class="rm-switch__knob" :class="{ 'is-right': !active }" />
+      </span>
+      <span class="rm-switch__text" :class="{ 'is-on': !active }">{{ inactiveText }}</span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.rm-switch__label{color:var(--text-secondary);font-size:var(--font-12,12px);font-weight:600;margin-bottom:6px}.rm-switch__control{align-items:center;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);cursor:pointer;display:flex;gap:10px;padding:10px 16px;width:-moz-fit-content;width:fit-content}.rm-switch__control:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.1);outline:none}.rm-switch__control:disabled{cursor:not-allowed;opacity:.6}.rm-switch__text{color:var(--text-muted);font-size:var(--font-14,14px);font-weight:600;line-height:16px;transition:color var(--duration-fast,.15s) var(--ease-out,ease)}.rm-switch__text.is-on{color:var(--text-primary)}.rm-switch__track{background:var(--color-primary);border-radius:var(--radius-pill,999px);flex-shrink:0;height:18px;position:relative;width:36px}.rm-switch__knob{background:var(--r-color-white);border-radius:50%;height:14px;left:2px;position:absolute;top:50%;transform:translateY(-50%);transition:left var(--duration-fast,.15s) var(--ease-out,ease);width:14px}.rm-switch__knob.is-right{left:20px}
+</style>

package/dist/runtime/components/Tooltip.vue

@@ -0,0 +1,67 @@
+<!--
+  RmTooltip - bulle d'aide au survol d'un element.
+
+  Reprend `arg-tooltip` d'Auriga : meme bulle sombre, memes quatre directions.
+  Trois choses changent.
+
+  La bulle est un vrai `role="tooltip"` relie au contenu par
+  `aria-describedby` : au clavier et au lecteur d'ecran, une bulle qui n'existe
+  qu'au `:hover` CSS n'est jamais lue. Elle sort donc aussi au focus.
+
+  Elle se centre par `translateX(-50%)` au lieu du `margin-left: -72px` en dur
+  d'Auriga, qui decalait la bulle des que le texte n'atteignait pas la largeur
+  maximale.
+
+  Le texte passe par un slot nomme plutot que par une prop : un lien ou une
+  mise en forme dans une bulle n'obligent plus a sortir du composant.
+-->
+<script setup lang="ts">
+import { useId } from 'vue'
+
+withDefaults(defineProps<{
+  /** Texte de la bulle. Ignore si le slot `content` est fourni. */
+  text?: string
+  /** Cote ou la bulle sort, par rapport a l'element survole. */
+  dir?: 'top' | 'right' | 'bottom' | 'left'
+  /**
+   * Neutralise la bulle sans retirer le composant : un intitule tronque n'a
+   * besoin de son texte complet que lorsqu'il est effectivement coupe.
+   */
+  disabled?: boolean
+  /**
+   * Laisse la bulle s'etendre sur toute sa hauteur. Par defaut elle s'arrete a
+   * quatre lignes : une bulle plus haute recouvre ce qu'on est en train de
+   * lire.
+   */
+  full?: boolean
+}>(), {
+  text: '',
+  dir: 'top',
+  disabled: false,
+  full: false,
+})
+
+const id = `rm-tooltip-${useId()}`
+</script>
+
+<template>
+  <!-- `aria-describedby` est pose en permanence : un lecteur d'ecran lit la
+       bulle a l'arrivee sur l'element, sans attendre un survol qu'il ne fait
+       pas. C'est le CSS seul qui la montre a l'oeil. -->
+  <span class="rm-tooltip" :aria-describedby="disabled ? undefined : id">
+    <slot />
+    <span
+      v-if="!disabled"
+      :id="id"
+      role="tooltip"
+      class="rm-tooltip__bubble"
+      :class="[`rm-tooltip__bubble--${dir}`, { 'rm-tooltip__bubble--full': full }]"
+    >
+      <slot name="content">{{ text }}</slot>
+    </span>
+  </span>
+</template>
+
+<style scoped>
+.rm-tooltip{display:inline-flex;position:relative;width:-moz-fit-content;width:fit-content}.rm-tooltip__bubble{background:var(--r-color-gray-900);border-radius:var(--radius-sm,4px);color:var(--r-color-white);display:-webkit-box;font-size:var(--font-13,13px);font-weight:400;-webkit-line-clamp:4;line-height:1.6;max-width:220px;padding:4px 12px;position:absolute;text-align:left;white-space:pre-line;width:-moz-max-content;width:max-content;z-index:60;-webkit-box-orient:vertical;opacity:0;overflow:hidden;transition:opacity var(--duration-fast,.15s) var(--ease-out,ease);visibility:hidden}.rm-tooltip__bubble--full{display:block;overflow:visible}.rm-tooltip:focus-within .rm-tooltip__bubble,.rm-tooltip:hover .rm-tooltip__bubble{opacity:1;visibility:visible}.rm-tooltip__bubble--top{bottom:calc(100% + 6px);left:50%;transform:translateX(-50%)}.rm-tooltip__bubble--bottom{left:50%;top:calc(100% + 6px);transform:translateX(-50%)}.rm-tooltip__bubble--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.rm-tooltip__bubble--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}
+</style>

package/dist/runtime/components/TrendIndicator.vue

@@ -0,0 +1,49 @@
+<!--
+  RmTrendIndicator - pastille de tendance, une fleche montante ou descendante.
+
+  Reprend `arg-trend-indicator` d'Auriga : meme pastille ronde a fond teinte,
+  memes fleches diagonales. Deux choses changent.
+
+  Le sens n'est jamais porte par la seule couleur : la fleche pointe en haut ou
+  en bas, et la pastille porte un `title` lisible par un lecteur d'ecran. Chez
+  Auriga, un daltonien lisait deux ronds identiques.
+
+  `semantic` remplace `isGreenAndRed`, nomme a l'envers de ce qu'il fait : une
+  hausse n'est bonne que dans certains tableaux (des ventes, pas des ruptures),
+  d'ou la teinte neutre par defaut et le vert/rouge sur demande.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  /** Sens de la tendance. */
+  up?: boolean
+  /** Vert pour une hausse, rouge pour une baisse. Sinon, teinte de marque. */
+  semantic?: boolean
+  /** Lu par les technologies d'assistance. */
+  title?: string
+}>(), {
+  up: true,
+  semantic: false,
+  title: '',
+})
+
+const color = computed(() => {
+  if (!props.semantic) return props.up ? 'var(--color-primary)' : 'var(--color-secondary)'
+  return props.up ? 'var(--color-success)' : 'var(--color-danger)'
+})
+</script>
+
+<template>
+  <span
+    class="rm-trend"
+    :class="[up ? 'rm-trend--up' : 'rm-trend--down', { 'rm-trend--semantic': semantic }]"
+    :title="title || undefined"
+  >
+    <RmIcon :name="up ? 'ArrowUpRight' : 'ArrowDownRight'" :size="16" :color="color" />
+  </span>
+</template>
+
+<style scoped>
+.rm-trend{align-items:center;border-radius:50%;display:inline-flex;height:24px;justify-content:center;width:24px}.rm-trend--up{background:rgba(var(--brand-rgb),.1)}.rm-trend--down{background:color-mix(in srgb,var(--color-secondary) 12%,transparent)}.rm-trend--semantic.rm-trend--up{background:var(--color-success-bg)}.rm-trend--semantic.rm-trend--down{background:var(--color-danger-bg)}
+</style>

package/package.json

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