@tekkare/romulus 0.1.88 → 0.1.90

package/dist/module.json

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

package/dist/runtime/components/A11yPanel.vue

@@ -0,0 +1,194 @@
+<!--
+  RmA11yPanel - les reglages d'accessibilite, en rangees.
+
+  Porte le panneau « Accessibilite » du design system (`reference.html`) :
+  une rangee par reglage, chacune avec son icone, son intitule, une phrase
+  qui dit ce qu'elle change, et sa commande. La phrase n'est pas decorative :
+  « Simuler le daltonisme » et « Palette des charts » se ressemblent au point
+  de se confondre, et rien dans leur nom ne dit que l'un est un outil de test
+  et l'autre un reglage de confort.
+
+  Le panneau ne conserve aucun etat. Tout vit dans les classes de `body`,
+  posees par `useRomulusTheme`, et c'est ce qui permet a une preference
+  restauree au demarrage, ou a une bascule declenchee ailleurs (la bascule
+  jour / nuit du rail), d'etre reprise sans rien a synchroniser.
+
+  Trois reglages absents du panneau, alors que le composable les expose :
+
+  - La taille du texte et la densite d'affichage, tant que le CSS ne les
+    suit pas hors des composants Romulus. Les poser ferait une commande qui
+    change trois titres et laisse le reste de l'ecran en place, ce qui se lit
+    comme une panne.
+  - Le mode jour / nuit, qui a sa bascule a demeure (`RmThemeToggle`) :
+    l'enterrer dans un panneau qu'il faut ouvrir serait un recul.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { RmCvdMode } from '../composables/useTheme'
+import { useRomulusTheme } from '../composables/useTheme'
+
+const props = withDefaults(defineProps<{
+  lang?: 'fr' | 'en'
+  /** Chapeau du panneau. Vide, rien ne sort. */
+  description?: string
+}>(), {
+  lang: 'fr',
+  description: undefined,
+})
+
+const {
+  cvd, chartPalette, chartDecal, highContrast, reduceMotion,
+  setCvd, setChartPalette, setChartDecal, setHighContrast, setReduceMotion, reset,
+} = useRomulusTheme()
+
+const WORDS = {
+  fr: {
+    intro: "Adaptez l'affichage à votre besoin. Les changements s'appliquent en temps réel à tout le dashboard et sont mémorisés pour vos prochaines sessions.",
+    cvd: 'Simuler le daltonisme',
+    cvdDesc: 'Affiche les charts à travers un filtre simulant la perception d\'un daltonien. Outil de test pour vérifier que vos visualisations restent lisibles.',
+    cvdNone: 'Aucun',
+    palette: 'Palette des charts',
+    paletteDesc: 'Default = palette Tekkare violet. CVD-safe = Okabe-Ito, scientifiquement validée pour les 3 types de daltonisme. Les charts se rechargent automatiquement avec la nouvelle palette.',
+    paletteDefault: 'Default Tekkare',
+    paletteCvd: 'CVD-safe Okabe-Ito',
+    decal: 'Patterns sur charts',
+    decalDesc: 'Ajoute un motif (hachures, points, lignes) sur chaque série, en plus de la couleur. Permet de distinguer les séries même en noir et blanc ou en daltonisme total.',
+    contrast: 'Contraste élevé',
+    contrastDesc: 'Renforce les couleurs de texte, épaissit les bordures, supprime les transparences.',
+    motion: 'Réduire les animations',
+    motionDesc: 'Désactive toutes les transitions et animations (troubles vestibulaires, ou simple préférence).',
+    reset: 'Réinitialiser tout',
+  },
+  en: {
+    intro: 'Adjust the display to suit you. Changes apply across the dashboard right away and are remembered for your next sessions.',
+    cvd: 'Simulate colour blindness',
+    cvdDesc: 'Shows charts through a filter simulating colour-blind perception. A test tool to check your visualisations stay readable.',
+    cvdNone: 'None',
+    palette: 'Chart palette',
+    paletteDesc: 'Default = Tekkare purple palette. CVD-safe = Okabe-Ito, scientifically validated for the 3 types of colour blindness. Charts reload automatically with the new palette.',
+    paletteDefault: 'Default Tekkare',
+    paletteCvd: 'CVD-safe Okabe-Ito',
+    decal: 'Chart patterns',
+    decalDesc: 'Adds a pattern (hatching, dots, lines) to each series, on top of colour. Series stay distinct in black and white, or with total colour blindness.',
+    contrast: 'High contrast',
+    contrastDesc: 'Strengthens text colours, thickens borders, removes transparency.',
+    motion: 'Reduce animations',
+    motionDesc: 'Turns off every transition and animation (vestibular disorders, or plain preference).',
+    reset: 'Reset everything',
+  },
+} as const
+
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+/* Les quatre simulations gardent leur nom court, le meme en francais et en
+   anglais : ce sont les noms des deficiences, pas des libelles a traduire. */
+const cvdOptions = computed(() => [
+  { value: 'none', label: T.value.cvdNone },
+  { value: 'deutera', label: 'Deutéra' },
+  { value: 'protan', label: 'Protan' },
+  { value: 'tritan', label: 'Tritan' },
+  { value: 'mono', label: 'Mono' },
+])
+
+const paletteOptions = computed(() => [
+  { value: 'default', label: T.value.paletteDefault },
+  { value: 'cvdSafe', label: T.value.paletteCvd },
+])
+
+/*
+  Les refs du composable sont en lecture seule : la commande passe par le
+  setter, seul endroit qui pose la classe et enregistre la preference. Les
+  proxys inscriptibles ci-dessous laissent quand meme utiliser `v-model`, qui
+  est la forme attendue des composants de saisie.
+*/
+const cvdModel = computed({
+  get: () => cvd.value as string,
+  set: (value: string) => setCvd(value as RmCvdMode),
+})
+
+const paletteModel = computed({
+  get: () => chartPalette.value as string,
+  set: (value: string) => setChartPalette(value === 'cvdSafe' ? 'cvdSafe' : 'default'),
+})
+
+const decalModel = computed({
+  get: () => chartDecal.value,
+  set: setChartDecal,
+})
+
+const contrastModel = computed({
+  get: () => highContrast.value,
+  set: setHighContrast,
+})
+
+const motionModel = computed({
+  get: () => reduceMotion.value,
+  set: setReduceMotion,
+})
+</script>
+
+<template>
+  <div class="rm-a11y">
+    <p class="rm-a11y__intro">{{ description ?? T.intro }}</p>
+
+    <div class="rm-a11y__row">
+      <div class="rm-a11y__head">
+        <span class="rm-a11y__label"><i class="ph ph-eye" />{{ T.cvd }}</span>
+      </div>
+      <p class="rm-a11y__desc">{{ T.cvdDesc }}</p>
+      <RmSegmented
+        v-model="cvdModel"
+        :options="cvdOptions"
+        :aria-label="T.cvd"
+        variant="soft"
+        block
+      />
+    </div>
+
+    <div class="rm-a11y__row">
+      <div class="rm-a11y__head">
+        <span class="rm-a11y__label"><i class="ph ph-palette" />{{ T.palette }}</span>
+      </div>
+      <p class="rm-a11y__desc">{{ T.paletteDesc }}</p>
+      <RmSegmented
+        v-model="paletteModel"
+        :options="paletteOptions"
+        :aria-label="T.palette"
+        variant="soft"
+        block
+      />
+    </div>
+
+    <div class="rm-a11y__row">
+      <div class="rm-a11y__head">
+        <span class="rm-a11y__label"><i class="ph ph-squares-four" />{{ T.decal }}</span>
+        <RmToggle v-model="decalModel" :label="T.decal" />
+      </div>
+      <p class="rm-a11y__desc rm-a11y__desc--last">{{ T.decalDesc }}</p>
+    </div>
+
+    <div class="rm-a11y__row">
+      <div class="rm-a11y__head">
+        <span class="rm-a11y__label"><i class="ph ph-circle-half" />{{ T.contrast }}</span>
+        <RmToggle v-model="contrastModel" :label="T.contrast" />
+      </div>
+      <p class="rm-a11y__desc rm-a11y__desc--last">{{ T.contrastDesc }}</p>
+    </div>
+
+    <div class="rm-a11y__row">
+      <div class="rm-a11y__head">
+        <span class="rm-a11y__label"><i class="ph ph-pause" />{{ T.motion }}</span>
+        <RmToggle v-model="motionModel" :label="T.motion" />
+      </div>
+      <p class="rm-a11y__desc rm-a11y__desc--last">{{ T.motionDesc }}</p>
+    </div>
+
+    <button class="rm-a11y__reset" type="button" @click="reset()">
+      <i class="ph ph-arrow-counter-clockwise" />{{ T.reset }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.rm-a11y{font-family:var(--font-sans);width:100%}.rm-a11y__intro{color:var(--text-secondary);font-size:var(--font-13);line-height:1.5;margin:0 0 18px}.rm-a11y__row{border-bottom:1px solid var(--border-soft);padding:14px 0}.rm-a11y__row:last-of-type{border-bottom:none}.rm-a11y__head{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:8px}.rm-a11y__label{align-items:center;color:var(--text-primary);display:inline-flex;font-size:var(--font-13);font-weight:600;gap:8px}.rm-a11y__label i{color:var(--color-primary);font-size:16px}.rm-a11y__desc{color:var(--text-muted);font-size:var(--font-12);line-height:1.5;margin:0 0 10px}.rm-a11y__desc--last{margin-bottom:0}.rm-a11y__reset{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-13);font-weight:600;gap:6px;justify-content:center;margin-top:14px;padding:10px 14px;transition:background var(--duration-fast) var(--ease-in-out),color var(--duration-fast) var(--ease-in-out),border-color var(--duration-fast) var(--ease-in-out);width:100%}.rm-a11y__reset:hover{background:var(--color-danger-bg);border-color:var(--color-danger);color:var(--color-danger)}.rm-a11y__reset:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
+</style>

package/dist/runtime/components/SearchBar.vue

@@ -5,6 +5,12 @@ import { PhMagnifyingGlass, PhX } from '@phosphor-icons/vue'
 export interface SearchSuggestion {
   label: string
   field?: string
+  /**
+   * Icone Phosphor posee devant la suggestion, a la place de la loupe. Elle
+   * dit de quel champ la valeur vient (une marque, une molecule, un
+   * laboratoire) : sans elle, dix suggestions se ressemblent toutes.
+   */
+  icon?: string
 }
 
 const model = defineModel<string>({ default: '' })
@@ -22,6 +28,22 @@ const props = withDefaults(defineProps<{
   haveAdvanced?: boolean
   /** Libelle du lien, pour les pages qui ne sont pas en anglais. */
   advancedLabel?: string
+  /**
+   * Met en evidence la part saisie dans chaque suggestion. Le composant la
+   * decoupe lui-meme a partir du texte tape : la page n'a pas a fabriquer du
+   * HTML, et la couleur reste celle du theme.
+   */
+  highlightMatch?: boolean
+  /**
+   * Les suggestions sont en cours de chargement. La liste s'ouvre sur une
+   * ligne d'attente plutot que de rester fermee : une recherche qui met une
+   * seconde a repondre ne doit pas se lire comme une recherche sans resultat.
+   */
+  loading?: boolean
+  /** Ligne affichee pendant le chargement des suggestions. */
+  loadingText?: string
+  /** Ligne affichee quand la recherche ne ramene aucune suggestion. */
+  emptyText?: string
 }>(), {
   advancedActive: false,
   advancedCount: 0,
@@ -29,6 +51,10 @@ const props = withDefaults(defineProps<{
   placeholder: 'Search...',
   haveAdvanced: true,
   advancedLabel: 'Advanced search',
+  highlightMatch: false,
+  loading: false,
+  loadingText: 'Searching…',
+  emptyText: '',
 })
 
 const emit = defineEmits<{
@@ -72,6 +98,23 @@ function clearSearch() {
   emit('search', '')
 }
 
+/**
+ * Le libelle decoupe autour de la part saisie : avant, la correspondance,
+ * apres. Un `v-html` ferait le meme rendu, mais poserait du HTML fabrique par
+ * la page dans la liste ; trois morceaux de texte ne le posent pas.
+ */
+function parts(label: string) {
+  const query = model.value.trim()
+  if (!props.highlightMatch || !query) return [{ text: label, match: false }]
+  const at = label.toLowerCase().indexOf(query.toLowerCase())
+  if (at < 0) return [{ text: label, match: false }]
+  return [
+    { text: label.slice(0, at), match: false },
+    { text: label.slice(at, at + query.length), match: true },
+    { text: label.slice(at + query.length), match: false },
+  ].filter(part => part.text)
+}
+
 function onClickOutside(e: Event) {
   if (barRef.value && !barRef.value.contains(e.target as Node)) {
     showSuggestions.value = false
@@ -113,22 +156,39 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
     </div>
 
     <Transition name="suggestions">
-      <div v-if="showSuggestions && suggestions.length > 0" class="search-bar__suggestions">
-        <button
-          v-for="(sugg, i) in suggestions"
-          :key="i"
-          class="search-bar__suggestion"
-          @click="selectSuggestion(sugg)"
-        >
-          <PhMagnifyingGlass :size="14" class="search-bar__suggestion-icon" />
-          <span class="search-bar__suggestion-label">{{ sugg.label }}</span>
-          <span v-if="sugg.field" class="search-bar__suggestion-field">{{ sugg.field.split('.').pop() }}</span>
-        </button>
+      <div v-if="showSuggestions && (suggestions.length > 0 || loading || emptyText)" class="search-bar__suggestions">
+        <p v-if="loading" class="search-bar__suggestion-note">{{ loadingText }}</p>
+        <template v-else-if="suggestions.length > 0">
+          <button
+            v-for="(sugg, i) in suggestions"
+            :key="i"
+            class="search-bar__suggestion"
+            @click="selectSuggestion(sugg)"
+          >
+            <RmIcon
+              v-if="sugg.icon"
+              class="search-bar__suggestion-icon"
+              :name="sugg.icon"
+              :size="14"
+              color="var(--text-muted)"
+            />
+            <PhMagnifyingGlass v-else :size="14" class="search-bar__suggestion-icon" />
+            <span class="search-bar__suggestion-label">
+              <span
+                v-for="(part, index) in parts(sugg.label)"
+                :key="index"
+                :class="{ 'search-bar__suggestion-match': part.match }"
+              >{{ part.text }}</span>
+            </span>
+            <span v-if="sugg.field" class="search-bar__suggestion-field">{{ sugg.field.split('.').pop() }}</span>
+          </button>
+        </template>
+        <p v-else class="search-bar__suggestion-note">{{ emptyText }}</p>
       </div>
     </Transition>
   </div>
 </template>
 
 <style scoped>
-.search-bar-wrapper{position:relative}.search-bar{align-items:center;border:1px solid var(--border-default);border-radius:var(--radius-pill);display:inline-flex;gap:var(--space-8);height:32px;min-width:200px;padding:var(--space-4) var(--space-12);transition:border-color var(--duration-fast) var(--ease-in-out)}.search-bar:focus-within{border-color:var(--color-secondary);box-shadow:var(--shadow-focus)}.search-bar__icon{color:var(--text-muted);flex-shrink:0}.search-bar__input{background:transparent;border:none;color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--font-14);outline:none;width:100%}.search-bar__input::-moz-placeholder{color:var(--text-muted)}.search-bar__input::placeholder{color:var(--text-muted)}.search-bar__clear{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;height:18px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:18px}.search-bar__clear,.search-bar__clear:hover{background:var(--border-default);color:var(--text-secondary)}.search-bar__advanced{background:none;border:none;border-left:1px solid var(--border-default);color:var(--text-secondary);cursor:pointer;flex-shrink:0;font-family:var(--font-sans);font-size:var(--font-14);padding:0 0 0 var(--space-8);text-decoration:underline;transition:color var(--duration-fast) var(--ease-in-out);white-space:nowrap}.search-bar__advanced:hover{color:var(--color-healthcare)}.search-bar--advanced-active{border-color:var(--color-healthcare)}.search-bar__advanced--active{color:var(--color-healthcare);font-weight:500}.search-bar__advanced-badge{align-items:center;background-color:var(--color-healthcare);border-radius:100px;color:var(--color-text-inverse);display:inline-flex;font-size:10px;font-weight:600;height:16px;justify-content:center;line-height:1;min-width:16px;padding:0 4px}.search-bar__suggestions{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:0 4px 12px rgba(var(--shadow-rgb),.08);left:0;max-height:280px;overflow-y:auto;padding:4px;position:absolute;right:0;top:calc(100% + 4px);z-index:50}.search-bar__suggestion{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:8px 10px;text-align:left;transition:background-color var(--duration-fast) var(--ease-in-out);width:100%}.search-bar__suggestion:hover{background-color:var(--bg-surface-2)}.search-bar__suggestion-icon{color:var(--text-muted);flex-shrink:0}.search-bar__suggestion-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-bar__suggestion-field{background:var(--bg-surface-2);border-radius:3px;color:var(--text-muted);flex-shrink:0;font-size:11px;padding:1px 6px}.suggestions-enter-active,.suggestions-leave-active{transition:opacity var(--duration-fast) var(--ease-in-out),transform var(--duration-fast) var(--ease-in-out)}.suggestions-enter-from,.suggestions-leave-to{opacity:0;transform:translateY(-4px)}
+.search-bar__suggestion-match{color:var(--color-secondary);font-weight:var(--weight-bold)}.search-bar__suggestion-note{color:var(--text-muted);font-size:var(--font-13);margin:0;padding:var(--space-8) var(--space-12)}.search-bar-wrapper{position:relative}.search-bar{align-items:center;border:1px solid var(--border-default);border-radius:var(--radius-pill);display:inline-flex;gap:var(--space-8);height:32px;min-width:200px;padding:var(--space-4) var(--space-12);transition:border-color var(--duration-fast) var(--ease-in-out)}.search-bar:focus-within{border-color:var(--color-secondary);box-shadow:var(--shadow-focus)}.search-bar__icon{color:var(--text-muted);flex-shrink:0}.search-bar__input{background:transparent;border:none;color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--font-14);outline:none;width:100%}.search-bar__input::-moz-placeholder{color:var(--text-muted)}.search-bar__input::placeholder{color:var(--text-muted)}.search-bar__clear{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;height:18px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:18px}.search-bar__clear,.search-bar__clear:hover{background:var(--border-default);color:var(--text-secondary)}.search-bar__advanced{background:none;border:none;border-left:1px solid var(--border-default);color:var(--text-secondary);cursor:pointer;flex-shrink:0;font-family:var(--font-sans);font-size:var(--font-14);padding:0 0 0 var(--space-8);text-decoration:underline;transition:color var(--duration-fast) var(--ease-in-out);white-space:nowrap}.search-bar__advanced:hover{color:var(--color-healthcare)}.search-bar--advanced-active{border-color:var(--color-healthcare)}.search-bar__advanced--active{color:var(--color-healthcare);font-weight:500}.search-bar__advanced-badge{align-items:center;background-color:var(--color-healthcare);border-radius:100px;color:var(--color-text-inverse);display:inline-flex;font-size:10px;font-weight:600;height:16px;justify-content:center;line-height:1;min-width:16px;padding:0 4px}.search-bar__suggestions{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:0 4px 12px rgba(var(--shadow-rgb),.08);left:0;max-height:280px;overflow-y:auto;padding:4px;position:absolute;right:0;top:calc(100% + 4px);z-index:50}.search-bar__suggestion{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:8px 10px;text-align:left;transition:background-color var(--duration-fast) var(--ease-in-out);width:100%}.search-bar__suggestion:hover{background-color:var(--bg-surface-2)}.search-bar__suggestion-icon{color:var(--text-muted);flex-shrink:0}.search-bar__suggestion-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-bar__suggestion-field{background:var(--bg-surface-2);border-radius:3px;color:var(--text-muted);flex-shrink:0;font-size:11px;padding:1px 6px}.suggestions-enter-active,.suggestions-leave-active{transition:opacity var(--duration-fast) var(--ease-in-out),transform var(--duration-fast) var(--ease-in-out)}.suggestions-enter-from,.suggestions-leave-to{opacity:0;transform:translateY(-4px)}
 </style>

package/dist/runtime/components/Segmented.vue

@@ -43,8 +43,14 @@ const props = withDefaults(defineProps<{
    * surface, bord arrondi complet, hauteur de rangee) : c'est la forme a
    * utiliser quand le rail se pose SUR la barre, a cote de « Filtres », et non
    * dans le panneau. `default` garde le rail voile des panneaux et des cartes.
+   *
+   * `soft` inverse le pave : creux clair, pave de surface, libelle actif en
+   * violet au lieu de blanc sur violet. C'est la forme des reglages, la ou le
+   * rail occupe toute la largeur d'un panneau et se repete d'une rangee a
+   * l'autre : un pave plein par rangee ferait une colonne de blocs colores,
+   * et l'oeil ne saurait plus lequel est le reglage qu'on vient de changer.
    */
-  variant?: 'default' | 'pill'
+  variant?: 'default' | 'pill' | 'soft'
   ariaLabel?: string
 }>(), {
   size: 'md',
@@ -168,5 +174,5 @@ watch(() => [model.value, items.value.length, props.block], remeasure)
 </template>
 
 <style scoped>
-.rm-seg{background:color-mix(in srgb,var(--color-primary) 5%,var(--bg-surface));border:1px solid var(--border-default);border-radius:var(--radius-lg);display:inline-flex;flex-wrap:wrap;font-family:var(--font-sans);gap:2px;max-width:100%;padding:3px;position:relative}.rm-seg--block{display:flex;width:100%}.rm-seg--block .rm-seg__option{flex:1}.rm-seg__thumb{background:var(--color-primary);border-radius:var(--radius-md);left:0;position:absolute;top:0;transition:transform var(--duration-base) var(--ease-in-out),width var(--duration-base) var(--ease-in-out),height var(--duration-base) var(--ease-in-out);z-index:0}.rm-seg__option{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:var(--radius-md);box-shadow:none;color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-weight:500;gap:6px;justify-content:center;margin:0;position:relative;transition:color var(--duration-fast) var(--ease-in-out);white-space:nowrap;z-index:1}.rm-seg--md .rm-seg__option{font-size:14px;line-height:20px;padding:5px 12px}.rm-seg--sm .rm-seg__option{font-size:13px;line-height:18px;padding:3px 10px}.rm-seg__option i{font-size:16px;line-height:1}.rm-seg__option:hover:not(:disabled):not(.rm-seg__option--active){color:var(--color-primary)}.rm-seg__option--active{color:#fff;font-weight:600}.rm-seg__option:disabled{color:var(--text-muted);cursor:not-allowed;opacity:.6}.rm-seg__option:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.rm-seg--pill{background:var(--bg-surface);border-radius:var(--radius-pill);flex-wrap:nowrap;gap:0;overflow-x:auto;padding:2px;scrollbar-width:none}.rm-seg--pill::-webkit-scrollbar{display:none}.rm-seg--pill .rm-seg__option,.rm-seg--pill .rm-seg__thumb{border-radius:var(--radius-pill)}.rm-seg--pill .rm-seg__option{font-size:var(--font-14);height:26px;line-height:26px;padding:0 14px}.rm-seg--pill.rm-seg--sm .rm-seg__option{font-size:var(--font-13);height:24px;line-height:24px;padding:0 12px}.rm-seg--pill .rm-seg__option--sep:before{left:0}.rm-seg__option--sep:before{background:var(--border-default);content:"";height:60%;left:-2px;position:absolute;top:20%;width:1px}@media (prefers-reduced-motion:reduce){.rm-seg__thumb{transition:none}}
+.rm-seg{background:color-mix(in srgb,var(--color-primary) 5%,var(--bg-surface));border:1px solid var(--border-default);border-radius:var(--radius-lg);display:inline-flex;flex-wrap:wrap;font-family:var(--font-sans);gap:2px;max-width:100%;padding:3px;position:relative}.rm-seg--block{display:flex;width:100%}.rm-seg--block .rm-seg__option{flex:1}.rm-seg__thumb{background:var(--color-primary);border-radius:var(--radius-md);left:0;position:absolute;top:0;transition:transform var(--duration-base) var(--ease-in-out),width var(--duration-base) var(--ease-in-out),height var(--duration-base) var(--ease-in-out);z-index:0}.rm-seg__option{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:var(--radius-md);box-shadow:none;color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-weight:500;gap:6px;justify-content:center;margin:0;position:relative;transition:color var(--duration-fast) var(--ease-in-out);white-space:nowrap;z-index:1}.rm-seg--md .rm-seg__option{font-size:14px;line-height:20px;padding:5px 12px}.rm-seg--sm .rm-seg__option{font-size:13px;line-height:18px;padding:3px 10px}.rm-seg__option i{font-size:16px;line-height:1}.rm-seg__option:hover:not(:disabled):not(.rm-seg__option--active){color:var(--color-primary)}.rm-seg__option--active{color:#fff;font-weight:600}.rm-seg__option:disabled{color:var(--text-muted);cursor:not-allowed;opacity:.6}.rm-seg__option:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.rm-seg--pill{background:var(--bg-surface);border-radius:var(--radius-pill);flex-wrap:nowrap;gap:0;overflow-x:auto;padding:2px;scrollbar-width:none}.rm-seg--pill::-webkit-scrollbar{display:none}.rm-seg--pill .rm-seg__option,.rm-seg--pill .rm-seg__thumb{border-radius:var(--radius-pill)}.rm-seg--pill .rm-seg__option{font-size:var(--font-14);height:26px;line-height:26px;padding:0 14px}.rm-seg--pill.rm-seg--sm .rm-seg__option{font-size:var(--font-13);height:24px;line-height:24px;padding:0 12px}.rm-seg--soft{background:var(--bg-surface-3);border-radius:var(--radius-pill);box-shadow:inset 0 1px 2px rgba(30,41,59,.04);gap:0;padding:3px}.rm-seg--soft .rm-seg__thumb{background:var(--bg-surface);border-radius:var(--radius-pill);box-shadow:var(--shadow-sm)}.rm-seg--soft .rm-seg__option{border-radius:var(--radius-pill);color:var(--text-muted);font-size:var(--font-12);padding:7px 10px}.rm-seg--soft .rm-seg__option:hover:not(:disabled):not(.rm-seg__option--active){color:var(--text-primary)}.rm-seg--soft .rm-seg__option--active{color:var(--color-secondary);font-weight:600}.rm-seg--soft .rm-seg__option--sep:before{display:none}.rm-seg--pill .rm-seg__option--sep:before{left:0}.rm-seg__option--sep:before{background:var(--border-default);content:"";height:60%;left:-2px;position:absolute;top:20%;width:1px}@media (prefers-reduced-motion:reduce){.rm-seg__thumb{transition:none}}
 </style>

package/dist/runtime/components/Toggle.vue

@@ -0,0 +1,47 @@
+<!--
+  RmToggle - bascule simple, allumee ou eteinte.
+
+  Reprend le `.a11y-switch` du design system : une pastille de 40x22 posee au
+  bout d'une rangee de reglage, dont le libelle est le texte de la rangee.
+
+  A ne pas confondre avec `RmSwitch`, qui encadre la bascule de deux intitules
+  parce que ses deux etats ont un nom (« Volumes » / « Valeurs »). Ici un seul
+  etat est nomme, l'autre est son absence : « Contraste eleve » est actif ou
+  ne l'est pas, et lui inventer un intitule contraire (« Contraste normal »)
+  ferait lire deux reglages la ou il n'y en a qu'un.
+
+  Le libelle n'est pas rendu par le composant : dans le panneau il vit dans
+  l'en-tete de la rangee, avec son icone, et le rappeler ici le dirait deux
+  fois a un lecteur d'ecran. `label` sert donc de nom accessible seul, et il
+  est obligatoire : une bascule sans nom ne s'annonce pas.
+-->
+<script setup lang="ts">
+withDefaults(defineProps<{
+  /** Nom accessible de la bascule. Non affiche. */
+  label: string
+  disabled?: boolean
+}>(), {
+  disabled: false,
+})
+
+const on = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <button
+    class="rm-toggle"
+    :class="{ 'rm-toggle--on': on }"
+    type="button"
+    role="switch"
+    :aria-checked="on"
+    :aria-label="label"
+    :disabled="disabled"
+    @click="on = !on"
+  >
+    <span class="rm-toggle__knob" aria-hidden="true" />
+  </button>
+</template>
+
+<style scoped>
+.rm-toggle{background:var(--border-default);border:none;border-radius:var(--radius-pill);cursor:pointer;flex-shrink:0;height:22px;padding:0;position:relative;transition:background var(--duration-fast) var(--ease-in-out);width:40px}.rm-toggle--on{background:var(--color-primary)}.rm-toggle:disabled{cursor:not-allowed;opacity:.6}.rm-toggle:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-toggle__knob{background:var(--bg-surface);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.15);height:18px;left:2px;position:absolute;top:2px;transition:transform var(--duration-fast) var(--ease-in-out);width:18px}.rm-toggle--on .rm-toggle__knob{transform:translateX(18px)}@media (prefers-reduced-motion:reduce){.rm-toggle,.rm-toggle__knob{transition:none}}
+</style>

package/dist/runtime/composables/useTheme.d.ts

@@ -2,10 +2,19 @@ export type RmCvdMode = 'none' | 'deutera' | 'protan' | 'tritan' | 'mono';
 export type RmChartPalette = 'default' | 'cvdSafe';
 export type RmTextScale = 'normal' | 'large' | 'xl';
 /**
- * Mode nuit enregistre au dernier passage. Lu par le plugin de demarrage, qui
- * pose la classe avant le premier rendu.
+ * Pose sur `body` les classes enregistrees au dernier passage.
+ *
+ * Appelee par le plugin de demarrage, avant le premier rendu. Le composable
+ * ne peut pas s'en charger : il ne lit `body` qu'au montage d'un composant,
+ * et l'ecran s'afficherait donc en clair, en taille standard, sans contraste
+ * renforce, avant de basculer — exactement le saut que ces reglages sont la
+ * pour eviter, et le plus penible pour qui a besoin du contraste.
+ *
+ * Ne passe pas par les setters a dessein : la garde de transitions n'a rien a
+ * neutraliser avant le premier rendu, et reecrire les preferences qu'on vient
+ * de lire n'apporte rien.
  */
-export declare function rmSavedNight(): boolean;
+export declare function rmApplySavedPrefs(): void;
 export declare function useRomulusTheme(): {
     night: Readonly<import("vue").Ref<boolean, boolean>>;
     highContrast: Readonly<import("vue").Ref<boolean, boolean>>;

package/dist/runtime/composables/useTheme.js

@@ -24,11 +24,23 @@ function writePref(key, value) {
   } catch {
   }
 }
-export function rmSavedNight() {
-  return readPrefs().night === true;
-}
 const PALETTE_CLASS = "pal-cvd-safe";
 const DECAL_CLASS = "chart-decal";
+export function rmApplySavedPrefs() {
+  const prefs = readPrefs();
+  const { classList } = document.body;
+  const add = (value, allowed) => {
+    if (typeof value === "string" && allowed.includes(value)) classList.add(value);
+  };
+  classList.toggle("night", prefs.night === true);
+  classList.toggle("high-contrast", prefs["high-contrast"] === true);
+  classList.toggle("reduce-motion", prefs["reduce-motion"] === true);
+  classList.toggle(DECAL_CLASS, prefs.decal === true);
+  classList.toggle(PALETTE_CLASS, prefs.palette === "pal-cvdSafe");
+  classList.toggle("density-compact", prefs.density === "density-compact");
+  add(prefs.text, Object.values(TEXT_CLASSES));
+  add(prefs.cvd, Object.values(CVD_CLASSES));
+}
 export function useRomulusTheme() {
   const night = ref(false);
   const highContrast = ref(false);
@@ -47,34 +59,41 @@ export function useRomulusTheme() {
   const setHighContrast = (value) => apply(() => {
     highContrast.value = value;
     document.body.classList.toggle("high-contrast", value);
+    writePref("high-contrast", value);
   });
   const setReduceMotion = (value) => apply(() => {
     reduceMotion.value = value;
     document.body.classList.toggle("reduce-motion", value);
+    writePref("reduce-motion", value);
   });
   const setCompact = (value) => apply(() => {
     compact.value = value;
     document.body.classList.toggle("density-compact", value);
+    writePref("density", value ? "density-compact" : "density-default");
   });
   const setCvd = (mode) => apply(() => {
     cvd.value = mode;
     const { body } = document;
     Object.values(CVD_CLASSES).forEach((c) => body.classList.remove(c));
     if (mode !== "none") body.classList.add(CVD_CLASSES[mode]);
+    writePref("cvd", mode === "none" ? "cvd-none" : CVD_CLASSES[mode]);
   });
   const setTextScale = (scale) => apply(() => {
     textScale.value = scale;
     const { body } = document;
     Object.values(TEXT_CLASSES).forEach((c) => body.classList.remove(c));
     if (scale !== "normal") body.classList.add(TEXT_CLASSES[scale]);
+    writePref("text", scale === "normal" ? "text-default" : TEXT_CLASSES[scale]);
   });
   const setChartPalette = (palette) => apply(() => {
     chartPalette.value = palette;
     document.body.classList.toggle(PALETTE_CLASS, palette === "cvdSafe");
+    writePref("palette", palette === "cvdSafe" ? "pal-cvdSafe" : "pal-default");
   });
   const setChartDecal = (value) => apply(() => {
     chartDecal.value = value;
     document.body.classList.toggle(DECAL_CLASS, value);
+    writePref("decal", value);
   });
   const reset = () => apply(() => {
     const { body } = document;
@@ -86,7 +105,6 @@ export function useRomulusTheme() {
     textScale.value = "normal";
     chartPalette.value = "default";
     chartDecal.value = false;
-    writePref("night", false);
     body.classList.remove(
       "night",
       "high-contrast",
@@ -97,6 +115,10 @@ export function useRomulusTheme() {
       ...Object.values(CVD_CLASSES),
       ...Object.values(TEXT_CLASSES)
     );
+    try {
+      localStorage.removeItem(STORE_KEY);
+    } catch {
+    }
   });
   onMounted(() => {
     const list = document.body.classList;

package/dist/runtime/plugins/theme.client.js

@@ -1,5 +1,5 @@
 import { defineNuxtPlugin } from "#app";
-import { rmSavedNight } from "../composables/useTheme.js";
+import { rmApplySavedPrefs } from "../composables/useTheme.js";
 export default defineNuxtPlugin(() => {
-  if (rmSavedNight()) document.body.classList.add("night");
+  rmApplySavedPrefs();
 });

package/package.json

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