@tekkare/romulus 0.1.51 → 0.1.53

package/dist/runtime/components/Drawer.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, toRef } from 'vue'
+import { useRmDialog } from '../composables/useRmDialog'
+
 export interface RmDrawerProps {
   /** Whether the drawer is open */
   modelValue: boolean
@@ -11,6 +13,15 @@ export interface RmDrawerProps {
   overlay?: boolean
   /** Offset from the edge (e.g. '280px' to keep a panel visible) */
   offset?: string
+  /**
+   * Nom accessible du tiroir. A renseigner des que l'en-tete est purement
+   * visuel : sans lui un lecteur d'ecran annonce « dialogue » sans dire lequel.
+   */
+  label?: string
+  /** Id de l'element qui porte le titre visible, quand l'en-tete en a un. */
+  labelledBy?: string
+  /** Libelle du bouton de fermeture, pour les lecteurs d'ecran. */
+  closeLabel?: string
 }
 
 const props = withDefaults(defineProps<RmDrawerProps>(), {
@@ -18,6 +29,9 @@ const props = withDefaults(defineProps<RmDrawerProps>(), {
   side: 'right',
   overlay: true,
   offset: '0px',
+  label: undefined,
+  labelledBy: undefined,
+  closeLabel: 'Fermer',
 })
 
 const emit = defineEmits<{
@@ -28,6 +42,9 @@ function close() {
   emit('update:modelValue', false)
 }
 
+const surface = ref<HTMLElement | null>(null)
+useRmDialog({ open: toRef(props, 'modelValue'), surface, close })
+
 const sizeMap: Record<string, string> = {
   sm: '360px',
   md: '480px',
@@ -52,13 +69,19 @@ const drawerWidth = computed(() => sizeMap[props.size] || props.size)
     <Transition :name="`rm-drawer-slide-${side}`">
       <div
         v-if="modelValue"
+        ref="surface"
         class="rm-drawer"
         :class="[`rm-drawer--${side}`]"
         :style="{ width: drawerWidth, [side]: offset }"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="labelledBy ? undefined : label"
+        :aria-labelledby="labelledBy"
+        tabindex="-1"
       >
         <div class="rm-drawer__header">
           <slot name="header" />
-          <button class="rm-drawer__close" @click="close">
+          <button class="rm-drawer__close" type="button" :aria-label="closeLabel" @click="close">
             <RmIcon name="X" :size="20" />
           </button>
         </div>

package/dist/runtime/components/FilterComplex.vue

@@ -1,5 +1,20 @@
+<!--
+  RmFilterComplex - filtre a selection multiple sur un referentiel long.
+
+  Deux colonnes, cote a cote : a gauche ce qu'on peut ajouter, a droite ce qui
+  est deja retenu. Une liste a cases a cocher obligerait a retrouver ses choix
+  au milieu de deux mille lignes ; ici la selection est toujours lisible d'un
+  coup d'oeil, et se defait la ou elle s'affiche.
+
+  La colonne de gauche peut ouvrir sur des selections toutes faites
+  (`presets`) : sur un referentiel connu, « Big 5 Europe » vaut cinq clics et
+  evite une erreur de composition.
+
+  La pastille, elle, nomme la selection plutot que de la compter : « Pays :
+  France, UK +3 » se lit sans ouvrir le panneau, « Pays (5) » non.
+-->
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import {
   PhCaretDown,
   PhMagnifyingGlass,
@@ -14,10 +29,21 @@ export interface FilterComplexOption {
   value: string
 }
 
+/** Une selection toute faite, proposee en tete de la colonne d'ajout. */
+export interface FilterComplexPreset {
+  label: string
+  values: string[]
+}
+
 const props = withDefaults(defineProps<{
   icon?: Component
   label: string
   options: FilterComplexOption[]
+  /**
+   * Selections rapides. Vides, la section ne sort pas : un intitule
+   * « Selection rapide » suivi de rien se lit comme un chargement en cours.
+   */
+  presets?: FilterComplexPreset[]
   /** Langue du chrome du panneau : titres, recherches, actions. */
   lang?: 'fr' | 'en'
   /**
@@ -29,6 +55,7 @@ const props = withDefaults(defineProps<{
   remote?: boolean
 }>(), {
   icon: undefined,
+  presets: () => [],
   lang: 'en',
   remote: false,
 })
@@ -44,27 +71,60 @@ const isOpen = ref(false)
 const wrapperRef = ref<HTMLElement>()
 const delSearch = ref('')
 
+/**
+ * Saisie de la colonne d'ajout, telle qu'elle est tapee. En mode `remote`,
+ * chaque frappe declencherait une requete : « pembro » en lancerait six, et
+ * l'utilisateur verrait la liste d'origine tant que la derniere n'est pas
+ * revenue, ce qui se lit comme une recherche qui ne marche pas. Le champ reste
+ * donc immediat, et le modele que l'appelant interroge ne bouge qu'une fois la
+ * frappe posee.
+ */
+const REMOTE_DEBOUNCE = 250
+const addInput = ref(addSearch.value)
+let debounce: ReturnType<typeof setTimeout> | undefined
+
+// La saisie peut aussi etre remise a zero de l'exterieur (fermeture du
+// panneau) : le champ suit.
+watch(addSearch, (value) => {
+  if (value !== addInput.value) addInput.value = value
+})
+
+watch(addInput, (value) => {
+  if (!props.remote) {
+    addSearch.value = value
+    return
+  }
+  clearTimeout(debounce)
+  debounce = setTimeout(() => { addSearch.value = value }, REMOTE_DEBOUNCE)
+})
+
 /** Le chrome du panneau, dans les deux langues. */
 const WORDS = {
   fr: {
-    custom: 'Sélection libre',
-    searchAdd: 'Rechercher pour ajouter...',
-    addAll: 'Tout ajouter',
-    current: 'Sélection en cours',
-    clear: 'Effacer',
-    searchSelection: 'Rechercher dans la sélection...',
+    quick: 'Sélection rapide',
+    custom: 'Sélection custom',
+    customAfterPresets: 'Ou sélection custom',
+    searchAdd: 'Rechercher...',
+    addAll: 'Tout sélectionner',
+    current: 'Sélection actuelle',
+    clear: 'Tout effacer',
+    searchSelection: 'Filtrer la sélection...',
     noResult: 'Aucun résultat',
     noSelection: 'Aucune sélection',
+    more: 'valeurs de plus, faites défiler',
   },
   en: {
+    quick: 'Quick selection',
     custom: 'Custom selection',
-    searchAdd: 'Search to add...',
-    addAll: 'Add all',
+    customAfterPresets: 'Or custom selection',
+    searchAdd: 'Search...',
+    addAll: 'Select all',
     current: 'Current selection',
-    clear: 'Clear',
-    searchSelection: 'Search selection...',
+    clear: 'Clear all',
+    searchSelection: 'Filter selection...',
     noResult: 'No results',
     noSelection: 'No selection',
+    more: 'more values, keep scrolling',
   },
 } as const
 
@@ -82,6 +142,32 @@ const filteredAvailable = computed(() => {
   return availableOptions.value.filter(o => o.label.toLowerCase().includes(q))
 })
 
+/**
+ * Rendu par tranches. Un referentiel entier (cinq mille marques) pose autant
+ * de boutons dans le DOM : le panneau mettait plus d'une seconde a s'ouvrir.
+ * On affiche donc les premieres valeurs, et la suite arrive quand on descend.
+ * Rien n'est cache : la recherche, elle, travaille sur la liste complete.
+ */
+const CHUNK = 300
+const shown = ref(CHUNK)
+
+const visibleAvailable = computed(() => filteredAvailable.value.slice(0, shown.value))
+const hiddenCount = computed(() => Math.max(0, filteredAvailable.value.length - shown.value))
+
+// Toute nouvelle liste repart du haut : sinon une recherche affiche encore les
+// tranches ouvertes pour la precedente.
+watch(filteredAvailable, () => { shown.value = CHUNK })
+
+function onListScroll(event: Event) {
+  if (hiddenCount.value === 0) return
+  const el = event.target as HTMLElement
+  // Une hauteur d'ecran avant le bas : la tranche suivante est prete quand on
+  // y arrive.
+  if (el.scrollTop + el.clientHeight >= el.scrollHeight - el.clientHeight) {
+    shown.value += CHUNK
+  }
+}
+
 /**
  * La selection se lit sur `selected`, pas sur `options` : une valeur choisie
  * puis sortie de la liste (recherche suivante, referentiel pagine) doit rester
@@ -100,6 +186,52 @@ const filteredSelected = computed(() => {
   return selectedOptions.value.filter(o => o.label.toLowerCase().includes(q))
 })
 
+/**
+ * Resume porte par la pastille : les premiers noms, puis le compte de ce qui
+ * reste. La pastille occupe une cellule de la barre de filtres, donc une
+ * largeur fixe : on s'arrete des que les noms la depassent, plutot que d'en
+ * poser deux et de couper le second au milieu (« DOLIPRANE, EFF... »). Deux
+ * noms courts tiennent, un nom long passe seul.
+ */
+const SUMMARY_CHARS = 16
+const SUMMARY_NAMES = 2
+
+const summaryNames = computed(() => {
+  const names: string[] = []
+  let width = 0
+
+  for (const option of selectedOptions.value.slice(0, SUMMARY_NAMES)) {
+    const next = width + option.label.length + (names.length ? 2 : 0)
+    // Le premier nom passe quoi qu'il arrive : une pastille qui ne nommerait
+    // que « +5 » ne dirait plus sur quoi la page est filtree.
+    if (names.length && next > SUMMARY_CHARS) break
+    names.push(option.label)
+    width = next
+  }
+
+  return names
+})
+
+const summary = computed(() => summaryNames.value.join(', '))
+const overflow = computed(() => Math.max(0, selected.value.length - summaryNames.value.length))
+
+/** Une selection rapide est active quand elle decrit exactement l'ecran. */
+function isPresetActive(preset: FilterComplexPreset) {
+  return (
+    preset.values.length === selected.value.length &&
+    preset.values.every(value => selected.value.includes(value))
+  )
+}
+
+/**
+ * Une selection rapide remplace la selection : elle nomme un ensemble
+ * (« Big 5 Europe »), elle ne s'ajoute pas au precedent, sinon le libelle de
+ * la pastille ne decrirait plus ce qui est retenu.
+ */
+function applyPreset(preset: FilterComplexPreset) {
+  selected.value = isPresetActive(preset) ? [] : [...preset.values]
+}
+
 function addOption(value: string) {
   selected.value = [...selected.value, value]
 }
@@ -119,6 +251,7 @@ function clearAll() {
 function toggle() {
   isOpen.value = !isOpen.value
   if (!isOpen.value) {
+    addInput.value = ''
     addSearch.value = ''
     delSearch.value = ''
   }
@@ -127,13 +260,17 @@ function toggle() {
 function onClickOutside(e: Event) {
   if (wrapperRef.value && !wrapperRef.value.contains(e.target as Node)) {
     isOpen.value = false
+    addInput.value = ''
     addSearch.value = ''
     delSearch.value = ''
   }
 }
 
 onMounted(() => document.addEventListener('click', onClickOutside))
-onUnmounted(() => document.removeEventListener('click', onClickOutside))
+onUnmounted(() => {
+  clearTimeout(debounce)
+  document.removeEventListener('click', onClickOutside)
+})
 </script>
 
 <template>
@@ -144,10 +281,9 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
       @click="toggle"
     >
       <component :is="icon" v-if="icon" :size="16" class="filter-complex__icon" />
-      <span class="filter-complex__label">{{ label }}</span>
-      <span v-if="isActive" class="filter-complex__badge">
-        {{ selected.length }}
-      </span>
+      <span class="filter-complex__label">{{ label }}<template v-if="isActive"> :</template></span>
+      <span v-if="isActive" class="filter-complex__summary">{{ summary }}</span>
+      <span v-if="overflow > 0" class="filter-complex__badge">+{{ overflow }}</span>
       <PhCaretDown
         :size="12"
         class="filter-complex__caret"
@@ -159,54 +295,84 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
       <div v-if="isOpen" class="filter-complex__panel" @click.stop>
         <!-- Left: Add -->
         <div class="filter-complex__left">
-          <h3 class="filter-complex__title">{{ t.custom }}</h3>
+          <template v-if="presets.length">
+            <h3 class="filter-complex__title">{{ t.quick }}</h3>
+            <div class="filter-complex__presets">
+              <button
+                v-for="preset in presets"
+                :key="preset.label"
+                type="button"
+                class="filter-complex__preset"
+                :class="{ 'is-active': isPresetActive(preset) }"
+                @click="applyPreset(preset)"
+              >
+                {{ preset.label }}
+              </button>
+            </div>
+          </template>
+
+          <div class="filter-complex__head">
+            <h3 class="filter-complex__title">
+              {{ presets.length ? t.customAfterPresets : t.custom }}
+            </h3>
+            <button
+              v-if="filteredAvailable.length > 0"
+              type="button"
+              class="filter-complex__action filter-complex__action--add"
+              @click="addAll"
+            >
+              {{ t.addAll }}
+            </button>
+          </div>
 
           <div class="filter-complex__search">
             <PhMagnifyingGlass :size="14" color="var(--text-muted)" />
             <input
-              v-model="addSearch"
+              v-model="addInput"
               type="text"
               :placeholder="t.searchAdd"
               class="filter-complex__search-input"
             >
             <PhX
-              v-if="addSearch"
+              v-if="addInput"
               :size="12"
               class="filter-complex__search-clear"
-              @click="addSearch = ''"
+              @click="addInput = ''"
             />
           </div>
 
-          <button
-            v-if="filteredAvailable.length > 0"
-            class="filter-complex__action filter-complex__action--add"
-            @click="addAll"
-          >
-            {{ t.addAll }} ({{ filteredAvailable.length }})
-          </button>
-
-          <div class="filter-complex__list">
+          <div class="filter-complex__list" @scroll.passive="onListScroll">
             <button
-              v-for="option in filteredAvailable"
+              v-for="option in visibleAvailable"
               :key="option.value"
               class="filter-complex__item"
               @click="addOption(option.value)"
             >
+              <PhPlusCircle
+                :size="16"
+                weight="fill"
+                class="filter-complex__item-icon filter-complex__item-icon--add"
+              />
               <span class="filter-complex__item-label">{{ option.label }}</span>
-              <PhPlusCircle :size="16" class="filter-complex__item-icon filter-complex__item-icon--add" />
             </button>
             <p v-if="filteredAvailable.length === 0" class="filter-complex__empty">
               {{ t.noResult }}
             </p>
+            <p v-else-if="hiddenCount > 0" class="filter-complex__more">
+              {{ hiddenCount }} {{ t.more }}
+            </p>
           </div>
         </div>
 
         <!-- Right: Selection -->
         <div class="filter-complex__right">
-          <div class="filter-complex__right-header">
-            <h3 class="filter-complex__title">{{ t.current }}</h3>
+          <div class="filter-complex__head">
+            <h3 class="filter-complex__title">
+              {{ t.current }} ({{ selected.length }})
+            </h3>
             <button
               v-if="selected.length > 0"
+              type="button"
               class="filter-complex__action filter-complex__action--clear"
               @click="clearAll"
             >
@@ -237,8 +403,12 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
               class="filter-complex__item"
               @click="removeOption(option.value)"
             >
+              <PhMinusCircle
+                :size="16"
+                weight="fill"
+                class="filter-complex__item-icon filter-complex__item-icon--remove"
+              />
               <span class="filter-complex__item-label">{{ option.label }}</span>
-              <PhMinusCircle :size="16" class="filter-complex__item-icon filter-complex__item-icon--remove" />
             </button>
             <p v-if="selected.length === 0" class="filter-complex__empty">
               {{ t.noSelection }}
@@ -251,5 +421,5 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
 </template>
 
 <style scoped>
-.filter-complex{position:relative}.filter-complex__trigger{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;box-sizing:border-box;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:8px;height:32px;padding:8px;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap;width:193px}.filter-complex__trigger:hover{border-color:var(--border-default)}.filter-complex__icon{color:var(--color-healthcare);flex-shrink:0}.filter-complex__trigger--active{border-color:var(--color-healthcare);box-shadow:0 0 8px 0 rgba(var(--healthcare-rgb),.1)}.filter-complex__label{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.filter-complex__badge{align-items:center;background-color:var(--color-healthcare);border-radius:100px;color:var(--color-text-inverse);display:inline-flex;flex-shrink:0;font-size:11px;font-weight:600;height:18px;justify-content:center;line-height:1;min-width:18px;padding:0 5px}.filter-complex__caret{color:var(--text-muted);flex-shrink:0;transition:transform var(--duration-fast) var(--ease-in-out)}.filter-complex__caret--open{transform:rotate(180deg)}.filter-complex__panel{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:0 4px 24px rgba(var(--shadow-rgb),.1),0 2px 8px rgba(var(--shadow-rgb),.05);display:flex;left:0;max-height:440px;max-width:calc(100vw - 32px);overflow:hidden;position:absolute;top:calc(100% + 4px);width:680px;z-index:50}.filter-complex__left{flex:1 1 60%;flex-direction:column}.filter-complex__left,.filter-complex__right{display:flex;gap:8px;overflow:hidden;padding:20px}.filter-complex__right{background-color:var(--bg-surface-2);border-left:1px solid var(--border-default);flex:1 1 40%;flex-direction:column}.filter-complex__right-header{align-items:center;display:flex;justify-content:space-between}.filter-complex__title{color:var(--text-secondary);font-size:var(--font-14);font-weight:var(--weight-semibold);margin:0}.filter-complex__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;display:flex;gap:8px;padding:6px 8px}.filter-complex__search:focus-within{border-color:var(--color-healthcare)}.filter-complex__search-input{background:transparent;border:none;color:var(--text-secondary);flex:1;font-family:var(--font-sans);font-size:var(--font-14);outline:none}.filter-complex__search-input::-moz-placeholder{color:var(--text-muted)}.filter-complex__search-input::placeholder{color:var(--text-muted)}.filter-complex__search-clear{color:var(--text-muted);cursor:pointer;flex-shrink:0}.filter-complex__search-clear:hover{color:var(--text-secondary)}.filter-complex__action{background:none;border:none;cursor:pointer;font-family:var(--font-sans);font-size:var(--font-14);padding:0;text-align:left;text-decoration:underline}.filter-complex__action--add{color:var(--color-healthcare)}.filter-complex__action--add:hover{color:var(--color-healthcare-active)}.filter-complex__action--clear,.filter-complex__action--clear:hover{color:var(--color-danger)}.filter-complex__list{display:flex;flex:1;flex-direction:column;overflow-y:auto}.filter-complex__list::-webkit-scrollbar{width:4px}.filter-complex__list::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:100px}.filter-complex__list::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.filter-complex__item{align-items:center;background:none;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);gap:8px;padding:6px 8px;text-align:left;transition:background-color var(--duration-fast) var(--ease-in-out)}.filter-complex__item:hover{background-color:var(--bg-surface-2)}.filter-complex__right .filter-complex__item:hover{background-color:var(--bg-surface-3)}.filter-complex__item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter-complex__item-icon{flex-shrink:0;opacity:0;transition:opacity var(--duration-fast) var(--ease-in-out)}.filter-complex__item:hover .filter-complex__item-icon{opacity:1}.filter-complex__item-icon--add{color:var(--color-healthcare)}.filter-complex__item-icon--remove{color:var(--color-danger)}.filter-complex__empty{color:var(--text-muted);font-size:var(--font-14);font-style:italic;padding:8px}.dropdown-enter-active,.dropdown-leave-active{transition:opacity var(--duration-fast) var(--ease-in-out),transform var(--duration-fast) var(--ease-in-out)}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:translateY(-4px)}
+.filter-complex{position:relative}.filter-complex__trigger{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);box-sizing:border-box;color:var(--text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h,32px);max-width:320px;padding:0 12px;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap}.filter-complex__trigger:hover{background:var(--bg-surface-3)}.filter-complex__icon{color:var(--color-primary);flex-shrink:0}.filter-complex__trigger--active{border-color:var(--color-primary)}.filter-complex__label{color:var(--text-muted);flex-shrink:0;font-weight:var(--weight-normal)}.filter-complex__summary{font-weight:var(--weight-semibold);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter-complex__badge{align-items:center;background-color:color-mix(in srgb,var(--color-primary) 10%,transparent);border-radius:var(--radius-pill);color:var(--color-primary);display:inline-flex;flex-shrink:0;font-size:var(--font-12);font-weight:var(--weight-semibold);height:18px;justify-content:center;line-height:1;min-width:18px;padding:0 6px}.filter-complex__caret{color:var(--text-muted);flex-shrink:0;transition:transform var(--duration-fast) var(--ease-in-out)}.filter-complex__caret--open{transform:rotate(180deg)}.filter-complex__panel{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl,12px);box-shadow:0 4px 24px rgba(var(--shadow-rgb),.1),0 2px 8px rgba(var(--shadow-rgb),.05);display:flex;left:0;max-height:460px;max-width:calc(100vw - 32px);overflow:hidden;position:absolute;top:calc(100% + 6px);width:720px;z-index:50}.filter-complex__left,.filter-complex__right{display:flex;flex-direction:column;gap:10px;overflow:hidden;padding:20px}.filter-complex__left{flex:1 1 50%}.filter-complex__right{border-left:1px solid var(--border-default);flex:1 1 50%}.filter-complex__head{align-items:center;display:flex;gap:12px;justify-content:space-between}.filter-complex__title{color:var(--text-primary);font-size:var(--font-14);font-weight:var(--weight-bold);margin:0}.filter-complex__presets{display:flex;flex-wrap:wrap;gap:8px}.filter-complex__preset{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-12);font-weight:var(--weight-medium);height:26px;padding:0 12px;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap}.filter-complex__preset:hover{border-color:var(--color-primary);color:var(--color-primary)}.filter-complex__preset.is-active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.filter-complex__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md,8px);display:flex;gap:8px;padding:7px 10px}.filter-complex__search:focus-within{border-color:var(--color-primary)}.filter-complex__search-input{background:transparent;border:none;color:var(--text-primary);flex:1;font-family:var(--font-sans);font-size:var(--font-14);outline:none}.filter-complex__search-input::-moz-placeholder{color:var(--text-muted)}.filter-complex__search-input::placeholder{color:var(--text-muted)}.filter-complex__search-clear{color:var(--text-muted);cursor:pointer;flex-shrink:0}.filter-complex__search-clear:hover{color:var(--text-secondary)}.filter-complex__action{background:none;border:none;cursor:pointer;font-family:var(--font-sans);font-size:var(--font-12);font-weight:var(--weight-medium);padding:0;text-decoration:underline;white-space:nowrap}.filter-complex__action--add{color:var(--color-primary)}.filter-complex__action--add:hover{color:var(--color-primary-hover)}.filter-complex__action--clear{color:var(--color-danger)}.filter-complex__list{display:flex;flex:1;flex-direction:column;overflow-y:auto}.filter-complex__list::-webkit-scrollbar{width:4px}.filter-complex__list::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:100px}.filter-complex__list::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.filter-complex__item{align-items:center;background:none;border:none;border-radius:var(--radius-md,8px);color:var(--text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);gap:10px;padding:7px 8px;text-align:left;transition:background-color var(--duration-fast) var(--ease-in-out)}.filter-complex__item:hover{background-color:var(--bg-surface-3)}.filter-complex__item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter-complex__item-icon{flex-shrink:0}.filter-complex__item-icon--add{color:var(--color-primary)}.filter-complex__item-icon--remove{color:var(--color-danger)}.filter-complex__more{color:var(--text-muted);font-size:var(--font-12);padding:8px}.filter-complex__empty{color:var(--text-muted);font-size:var(--font-14);font-style:italic;padding:8px}.dropdown-enter-active,.dropdown-leave-active{transition:opacity var(--duration-fast) var(--ease-in-out),transform var(--duration-fast) var(--ease-in-out)}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:translateY(-4px)}
 </style>

package/dist/runtime/components/FilterDropdown.vue

@@ -6,8 +6,20 @@ import type { Component } from 'vue'
 export interface FilterDropdownOption {
   label: string
   value: string
+  /**
+   * Famille a laquelle l'option appartient (« Mensuel », « Trimestriel »).
+   * Les options d'une meme famille se suivent sous un intitule commun : une
+   * liste de douze periodes melangees oblige a lire chaque ligne pour trouver
+   * la maille voulue. Sans `group`, la liste reste plate.
+   */
+  group?: string
 }
 
+/** Une ligne de la liste : un intitule de famille, ou une option. */
+type DropdownRow =
+  | { kind: 'header', key: string, label: string }
+  | { kind: 'option', key: string, option: FilterDropdownOption }
+
 const props = withDefaults(defineProps<{
   icon?: Component
   label: string
@@ -69,6 +81,26 @@ const filteredOptions = computed(() => {
   return props.options.filter(o => o.label.toLowerCase().includes(needle))
 })
 
+/**
+ * La liste affichee : chaque changement de famille pose son intitule. Le
+ * regroupement suit l'ordre donne par l'appelant, il ne trie pas : c'est lui
+ * qui sait dans quel ordre ses mailles se lisent.
+ */
+const rows = computed<DropdownRow[]>(() => {
+  const out: DropdownRow[] = []
+  let current: string | undefined
+
+  filteredOptions.value.forEach((option) => {
+    if (option.group && option.group !== current) {
+      out.push({ kind: 'header', key: `group:${option.group}`, label: option.group })
+    }
+    current = option.group
+    out.push({ kind: 'option', key: option.value, option })
+  })
+
+  return out
+})
+
 function toggle() {
   isOpen.value = !isOpen.value
 }
@@ -168,23 +200,27 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
         <p v-if="hasSearch && filteredOptions.length === 0" class="filter-chip__no-match">
           Aucun résultat
         </p>
-        <button
-          v-for="option in filteredOptions"
-          :key="option.value"
-          class="filter-chip__option"
-          :class="{ 'filter-chip__option--selected': isSelected(option.value) }"
-          @click="toggleOption(option.value)"
-        >
-          <span
-            :class="[
-              multiple ? 'filter-chip__checkbox' : 'filter-chip__radio',
-              isSelected(option.value) && (multiple ? 'filter-chip__checkbox--checked' : 'filter-chip__radio--checked'),
-            ]"
+        <template v-for="row in rows" :key="row.key">
+          <p v-if="row.kind === 'header'" class="filter-chip__section">
+            {{ row.label }}
+          </p>
+          <button
+            v-else
+            class="filter-chip__option"
+            :class="{ 'filter-chip__option--selected': isSelected(row.option.value) }"
+            @click="toggleOption(row.option.value)"
           >
-            <PhCheck v-if="multiple && isSelected(option.value)" :size="10" weight="bold" />
-          </span>
-          <span>{{ option.label }}</span>
-        </button>
+            <span
+              :class="[
+                multiple ? 'filter-chip__checkbox' : 'filter-chip__radio',
+                isSelected(row.option.value) && (multiple ? 'filter-chip__checkbox--checked' : 'filter-chip__radio--checked'),
+              ]"
+            >
+              <PhCheck v-if="multiple && isSelected(row.option.value)" :size="10" weight="bold" />
+            </span>
+            <span>{{ row.option.label }}</span>
+          </button>
+        </template>
         </div>
       </div>
     </Transition>
@@ -192,5 +228,5 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
 </template>
 
 <style scoped>
-.filter-chip-wrapper{position:relative}.filter-chip{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;box-sizing:border-box;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:8px;height:32px;padding:8px;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap;width:193px}.filter-chip:hover{border-color:var(--border-default)}.filter-chip__icon{color:var(--color-healthcare);flex-shrink:0}.filter-chip--active{border-color:var(--color-healthcare);box-shadow:0 0 8px 0 rgba(var(--healthcare-rgb),.1)}.filter-chip__label{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.filter-chip__badge{align-items:center;background-color:var(--color-healthcare);border-radius:100px;color:var(--color-text-inverse);display:inline-flex;flex-shrink:0;font-size:11px;font-weight:600;height:18px;justify-content:center;line-height:1;min-width:18px;padding:0 5px}.filter-chip__caret{color:var(--text-muted);flex-shrink:0;transition:transform var(--duration-fast) var(--ease-in-out)}.filter-chip__caret--open{transform:rotate(180deg)}.filter-chip__dropdown{background-color:var(--color-text-inverse);border:1px solid var(--border-default);border-radius:6px;box-shadow:0 4px 12px rgba(var(--shadow-rgb),.08),0 2px 4px rgba(var(--shadow-rgb),.04);left:0;max-height:300px;max-width:420px;min-width:380px;overflow-y:auto;padding:4px;position:absolute;top:calc(100% + 4px);width:-moz-max-content;width:max-content;z-index:50}.filter-chip__search{align-items:center;background-color:var(--color-text-inverse);border-bottom:1px solid var(--border-soft);color:var(--text-muted);display:flex;gap:6px;margin:-4px -4px 4px;padding:8px;position:sticky;top:-4px;z-index:1}.filter-chip__search input{background:none;border:none;color:var(--text-primary);flex:1;font-family:var(--font-sans);font-size:var(--font-14);min-width:0;outline:none}.filter-chip__search input::-webkit-search-cancel-button{cursor:pointer}.filter-chip__no-match{color:var(--text-muted);margin:0;padding:10px 8px}.filter-chip__no-match,.filter-chip__option{font-family:var(--font-sans);font-size:var(--font-14)}.filter-chip__option{align-items:center;background:none;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:flex;gap:8px;padding:6px 8px;text-align:left;transition:background-color var(--duration-fast) var(--ease-in-out);width:100%}.filter-chip__option:hover{background-color:var(--bg-surface-2)}.filter-chip__option--selected{color:var(--text-primary);font-weight:var(--weight-medium)}.filter-chip__checkbox{align-items:center;border:1.5px solid var(--border-default);border-radius:3px;display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.filter-chip__checkbox--checked{background-color:var(--color-healthcare);border-color:var(--color-healthcare);color:var(--color-text-inverse)}.filter-chip__radio{align-items:center;border:1.5px solid var(--border-default);border-radius:100%;display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.filter-chip__radio--checked{border-color:var(--color-healthcare)}.filter-chip__radio--checked:after{background-color:var(--color-healthcare);border-radius:100%;content:"";height:8px;width:8px}.filter-chip__select-all{align-items:center;background:none;border:none;border-radius:4px;color:var(--color-healthcare);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:500;gap:8px;padding:6px 8px;text-align:left;width:100%}.filter-chip__select-all:hover{background-color:rgba(var(--healthcare-rgb),.04)}.filter-chip__options-group{border-left:1px solid var(--border-default);margin-left:14px;padding-left:6px}.dropdown-enter-active,.dropdown-leave-active{transition:opacity var(--duration-fast) var(--ease-in-out),transform var(--duration-fast) var(--ease-in-out)}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:translateY(-4px)}
+.filter-chip-wrapper{position:relative}.filter-chip{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;box-sizing:border-box;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:8px;height:32px;padding:8px;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap;width:193px}.filter-chip:hover{border-color:var(--border-default)}.filter-chip__icon{color:var(--color-healthcare);flex-shrink:0}.filter-chip--active{border-color:var(--color-healthcare);box-shadow:0 0 8px 0 rgba(var(--healthcare-rgb),.1)}.filter-chip__label{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.filter-chip__badge{align-items:center;background-color:var(--color-healthcare);border-radius:100px;color:var(--color-text-inverse);display:inline-flex;flex-shrink:0;font-size:11px;font-weight:600;height:18px;justify-content:center;line-height:1;min-width:18px;padding:0 5px}.filter-chip__caret{color:var(--text-muted);flex-shrink:0;transition:transform var(--duration-fast) var(--ease-in-out)}.filter-chip__caret--open{transform:rotate(180deg)}.filter-chip__dropdown{background-color:var(--color-text-inverse);border:1px solid var(--border-default);border-radius:6px;box-shadow:0 4px 12px rgba(var(--shadow-rgb),.08),0 2px 4px rgba(var(--shadow-rgb),.04);left:0;max-height:300px;max-width:420px;min-width:380px;overflow-y:auto;padding:4px;position:absolute;top:calc(100% + 4px);width:-moz-max-content;width:max-content;z-index:50}.filter-chip__search{align-items:center;background-color:var(--color-text-inverse);border-bottom:1px solid var(--border-soft);color:var(--text-muted);display:flex;gap:6px;margin:-4px -4px 4px;padding:8px;position:sticky;top:-4px;z-index:1}.filter-chip__search input{background:none;border:none;color:var(--text-primary);flex:1;font-family:var(--font-sans);font-size:var(--font-14);min-width:0;outline:none}.filter-chip__search input::-webkit-search-cancel-button{cursor:pointer}.filter-chip__no-match{font-size:var(--font-14);margin:0;padding:10px 8px}.filter-chip__no-match,.filter-chip__section{color:var(--text-muted);font-family:var(--font-sans)}.filter-chip__section{border-top:1px solid var(--border-default);font-size:var(--font-12);font-weight:var(--weight-bold);letter-spacing:.04em;margin:8px 0 2px;padding:8px 8px 0;text-transform:uppercase}.filter-chip__section:first-child{border-top:none;margin-top:0;padding-top:0}.filter-chip__option{align-items:center;background:none;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);gap:8px;padding:6px 8px;text-align:left;transition:background-color var(--duration-fast) var(--ease-in-out);width:100%}.filter-chip__option:hover{background-color:var(--bg-surface-2)}.filter-chip__option--selected{color:var(--text-primary);font-weight:var(--weight-medium)}.filter-chip__checkbox{align-items:center;border:1.5px solid var(--border-default);border-radius:3px;display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.filter-chip__checkbox--checked{background-color:var(--color-healthcare);border-color:var(--color-healthcare);color:var(--color-text-inverse)}.filter-chip__radio{align-items:center;border:1.5px solid var(--border-default);border-radius:100%;display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.filter-chip__radio--checked{border-color:var(--color-healthcare)}.filter-chip__radio--checked:after{background-color:var(--color-healthcare);border-radius:100%;content:"";height:8px;width:8px}.filter-chip__select-all{align-items:center;background:none;border:none;border-radius:4px;color:var(--color-healthcare);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:500;gap:8px;padding:6px 8px;text-align:left;width:100%}.filter-chip__select-all:hover{background-color:rgba(var(--healthcare-rgb),.04)}.filter-chip__options-group{border-left:1px solid var(--border-default);margin-left:14px;padding-left:6px}.dropdown-enter-active,.dropdown-leave-active{transition:opacity var(--duration-fast) var(--ease-in-out),transform var(--duration-fast) var(--ease-in-out)}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:translateY(-4px)}
 </style>

package/dist/runtime/components/Modal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, toRef } from 'vue'
 import { PhX } from '@phosphor-icons/vue'
+import { useRmDialog } from '../composables/useRmDialog'
 
 export interface RmModalProps {
   /** Whether the modal is open */
@@ -9,11 +10,23 @@ export interface RmModalProps {
   size?: 'sm' | 'md' | 'lg' | 'xl'
   /** Mode: fixed (size is fixed) or free (adapts to content) */
   mode?: 'fixed' | 'free'
+  /**
+   * Nom accessible de la modale. A renseigner des que l'en-tete est purement
+   * visuel : sans lui un lecteur d'ecran annonce « dialogue » sans dire lequel.
+   */
+  label?: string
+  /** Id de l'element qui porte le titre visible, quand l'en-tete en a un. */
+  labelledBy?: string
+  /** Libelle du bouton de fermeture, pour les lecteurs d'ecran. */
+  closeLabel?: string
 }
 
 const props = withDefaults(defineProps<RmModalProps>(), {
   size: 'md',
   mode: 'fixed',
+  label: undefined,
+  labelledBy: undefined,
+  closeLabel: 'Fermer',
 })
 
 const emit = defineEmits<{
@@ -24,6 +37,9 @@ function close() {
   emit('update:modelValue', false)
 }
 
+const surface = ref<HTMLElement | null>(null)
+useRmDialog({ open: toRef(props, 'modelValue'), surface, close })
+
 const sizeMap: Record<string, { width: string; height: string }> = {
   sm: { width: '480px', height: '360px' },
   md: { width: '640px', height: '500px' },
@@ -48,12 +64,21 @@ const modalStyle = computed(() => {
         class="rm-modal-overlay"
         @click.self="close"
       >
-        <div class="rm-modal" :style="modalStyle">
+        <div
+          ref="surface"
+          class="rm-modal"
+          :style="modalStyle"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="labelledBy ? undefined : label"
+          :aria-labelledby="labelledBy"
+          tabindex="-1"
+        >
           <div class="rm-modal__header">
             <div class="rm-modal__header-content">
               <slot name="header" />
             </div>
-            <button class="rm-modal__close" @click="close">
+            <button class="rm-modal__close" type="button" :aria-label="closeLabel" @click="close">
               <PhX :size="20" />
             </button>
           </div>
@@ -76,5 +101,5 @@ const modalStyle = computed(() => {
 </template>
 
 <style scoped>
-.rm-modal-overlay{align-items:center;backdrop-filter:blur(2px);background:rgba(0,0,0,.4);display:flex;inset:0;justify-content:center;position:fixed;z-index:100}.rm-modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.15);display:flex;flex-direction:column;max-height:90vh;max-width:95vw}.rm-modal__header{align-items:flex-start;display:flex;gap:16px;justify-content:space-between;padding:20px 24px 0}.rm-modal__header-content{flex:1;min-width:0}.rm-modal__close{align-items:center;background:none;border:none;border-radius:var(--r-radius-md);color:var(--r-color-gray-400);cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;transition:all var(--r-transition-fast);width:32px}.rm-modal__close:hover{background:var(--r-color-gray-50);color:var(--r-color-gray-700)}.rm-modal__tabs{padding:0}.rm-modal__body{flex:1;overflow-y:auto;padding:24px}.rm-modal__footer{border-top:1px solid var(--r-color-gray-200);padding:16px 24px}.rm-modal-enter-active,.rm-modal-leave-active{transition:opacity .2s ease}.rm-modal-enter-active .rm-modal,.rm-modal-leave-active .rm-modal{transition:transform .2s ease}.rm-modal-enter-from,.rm-modal-leave-to{opacity:0}.rm-modal-enter-from .rm-modal,.rm-modal-leave-to .rm-modal{transform:scale(.95)}
+.rm-modal-overlay{align-items:center;backdrop-filter:blur(2px);background:rgba(0,0,0,.4);display:flex;inset:0;justify-content:center;position:fixed;z-index:100}.rm-modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.15);display:flex;flex-direction:column;max-height:90vh;max-width:95vw}.rm-modal__header{align-items:flex-start;display:flex;gap:16px;justify-content:space-between;padding:20px 24px 0}.rm-modal__header-content{flex:1;min-width:0}.rm-modal__close{align-items:center;background:none;border:none;border-radius:var(--r-radius-md);color:var(--r-color-gray-400);cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;transition:all var(--r-transition-fast);width:32px}.rm-modal__close:hover{background:var(--r-color-gray-50);color:var(--r-color-gray-700)}.rm-modal__tabs{padding:0}.rm-modal__body{flex:1;overflow-y:auto;padding:24px}.rm-modal__footer{border-top:1px solid var(--r-color-gray-200);padding:16px 24px}.rm-modal-enter-active,.rm-modal-leave-active{transition:opacity .2s ease}.rm-modal-enter-active .rm-modal,.rm-modal-leave-active .rm-modal{transition:transform .2s ease}.rm-modal-enter-from,.rm-modal-leave-to{opacity:0}.rm-modal-enter-from .rm-modal,.rm-modal-leave-to .rm-modal{transform:scale(.95)}.rm-modal-leave-active,.rm-modal-leave-to{pointer-events:none}
 </style>