@tekkare/romulus 0.1.201 → 0.1.203

package/dist/module.json

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

package/dist/runtime/components/DropdownSelect.vue

@@ -29,6 +29,7 @@
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { PhCaretDown, PhCaretUpDown, PhCheckCircle, PhCircle, PhMagnifyingGlass } from '@phosphor-icons/vue'
 import { rmPanelOpened, rmPanelRegister } from '../utils/panels'
+import { useRmFloating } from '../composables/useRmFloating'
 
 const props = withDefaults(defineProps<{
   /** Intitule pose au-dessus du champ. */
@@ -98,6 +99,16 @@ const searchTerm = ref('')
 const activeIndex = ref(-1)
 const rootRef = ref<HTMLElement>()
 const searchRef = ref<HTMLInputElement>()
+const panelRef = ref<HTMLElement>()
+
+/**
+ * Le panneau sort par un `Teleport` et se place sur la fenetre (cf.
+ * `useRmFloating`) : pose dans le champ, il etait coupe par toute carte a
+ * debordement cache. Il bascule au-dessus du champ quand la place manque
+ * dessous, ce qui couvre aussi le selecteur pose en bas d'une modale.
+ */
+const floating = useRmFloating(rootRef, panelRef, { matchWidth: true })
+const panelStyle = floating.style
 
 /** Cette option est-elle montree sans etre prenable ? */
 function isDisabled(option: string): boolean {
@@ -124,50 +135,21 @@ function close() {
   isOpen.value = false
   activeIndex.value = -1
   document.removeEventListener('click', onDocumentClick)
+  floating.close()
 }
 
 function onDocumentClick(event: MouseEvent) {
-  if (!rootRef.value?.contains(event.target as Node)) close()
-}
-
-/**
- * Le panneau s'ouvre vers le haut quand il n'y a pas la place en dessous.
- *
- * Dans une modale, un selecteur pose en bas de formulaire deroulait sa liste
- * hors du cadre visible et forcait un defilement pour lire ses propres
- * options. La place se mesure sur le cadre defilant le plus proche, pas sur
- * la fenetre : c'est lui qui coupe.
- */
-const dropUp = ref(false)
-
-function scrollParent(node: HTMLElement | null): HTMLElement | null {
-  let current = node?.parentElement ?? null
-  while (current) {
-    const overflow = getComputedStyle(current).overflowY
-    if (overflow === 'auto' || overflow === 'scroll') return current
-    current = current.parentElement
-  }
-  return null
-}
-
-function placePanel() {
-  const field = rootRef.value
-  if (!field) return
-  const rect = field.getBoundingClientRect()
-  const frame = scrollParent(field)?.getBoundingClientRect()
-  const bottom = frame ? frame.bottom : window.innerHeight
-  const top = frame ? frame.top : 0
-  // 320 : la hauteur qu'une liste de quelques options occupe en pratique.
-  const needed = 320
-  dropUp.value = rect.bottom + needed > bottom && rect.top - top > needed
+  const target = event.target as Node
+  if (rootRef.value?.contains(target) || panelRef.value?.contains(target)) return
+  close()
 }
 
 async function toggle() {
   if (props.disabled) return
   if (isOpen.value) return close()
 
-  placePanel()
   isOpen.value = true
+  floating.open()
   rmPanelOpened(close)
   searchTerm.value = ''
   activeIndex.value = props.options.indexOf(selected.value ?? '')
@@ -238,11 +220,14 @@ onUnmounted(() => {
       <component :is="sortIcon ? PhCaretUpDown : PhCaretDown" :size="16" />
     </button>
 
+    <Teleport to="body" :disabled="!isOpen">
     <div
       v-show="isOpen"
+      ref="panelRef"
       class="rm-dsel__panel"
-      :class="{ 'rm-dsel__panel--up': dropUp }"
+      :style="panelStyle"
       @click.stop
+      @keydown="onKeydown"
     >
       <div v-if="search" class="rm-dsel__search">
         <PhMagnifyingGlass :size="16" />
@@ -289,9 +274,10 @@ onUnmounted(() => {
         </li>
       </ul>
     </div>
+    </Teleport>
   </div>
 </template>
 
 <style scoped>
-.rm-dsel{align-items:stretch;display:flex;flex-direction:column;gap:var(--space-4);position:relative;width:196px}.rm-dsel__label{color:var(--text-secondary);font-size:var(--font-12,12px);line-height:14px}.rm-dsel__field{align-items:center;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);box-sizing:border-box;color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:700;gap:var(--space-4);line-height:16px;padding:var(--space-12);text-align:left;width:100%}.rm-dsel__field:hover:not(.is-disabled){border-color:rgba(var(--brand-rgb),.3)}.rm-dsel__field.is-open{border-color:var(--color-primary)}.rm-dsel__field.is-disabled{background:var(--bg-surface-2);color:var(--text-muted);cursor:not-allowed}.rm-dsel__field:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-dsel__value-slot{display:block;flex:1;min-width:0}.rm-dsel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-dsel__value.is-empty{color:var(--text-muted);font-style:italic;font-weight:400}.rm-dsel__field :deep(svg){color:var(--text-secondary);flex-shrink:0}.rm-dsel__panel{background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-lg,12px);box-shadow:var(--r-shadow-lg,0 8px 24px rgba(0,0,0,.12));box-sizing:border-box;display:flex;flex-direction:column;left:0;margin-top:8px;max-height:500px;max-width:min(480px,calc(100vw - 32px));min-width:max(230px,100%);padding:var(--space-16);position:absolute;top:100%;width:-moz-max-content;width:max-content;z-index:12}.rm-dsel__panel--up{bottom:100%;margin-bottom:8px;margin-top:0;top:auto}.rm-dsel__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md,8px);display:flex;gap:var(--space-8);padding:var(--space-8) var(--space-12)}.rm-dsel__search :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-dsel__search-input{background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:var(--font-14,14px);width:100%}.rm-dsel__search-input::-moz-placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-dsel__search-input::placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-dsel__search-input:focus-visible{outline:none}.rm-dsel__loading{display:flex;flex-direction:column;gap:var(--space-10);padding-top:var(--space-8)}.rm-dsel__sr{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.rm-dsel__state{color:var(--text-secondary);font-size:var(--font-14,14px);font-style:italic;padding-top:var(--space-16);text-align:center}.rm-dsel__list{display:flex;flex-direction:column;list-style:none;margin:0;min-height:10px;overflow-y:auto;padding:0}.rm-dsel__list:not(:only-child){margin-top:16px}.rm-dsel__option.is-disabled{color:var(--text-muted);cursor:not-allowed}.rm-dsel__option{align-items:flex-start;border-radius:var(--radius-sm,4px);cursor:pointer;display:flex;flex-shrink:0;font-size:var(--font-14,14px);gap:var(--space-8);line-height:160%;margin:4px 0;min-height:24px;padding:var(--space-2) var(--space-4)}.rm-dsel__option :deep(svg){color:var(--text-muted);flex-shrink:0;margin-top:3px}.rm-dsel__option.is-active{background:rgba(var(--brand-rgb),.05)}.rm-dsel__option.is-selected{font-weight:700}.rm-dsel__option.is-active :deep(svg),.rm-dsel__option.is-selected :deep(svg){color:var(--color-primary)}
+.rm-dsel{align-items:stretch;display:flex;flex-direction:column;gap:var(--space-4);position:relative;width:196px}.rm-dsel__label{color:var(--text-secondary);font-size:var(--font-12,12px);line-height:14px}.rm-dsel__field{align-items:center;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);box-sizing:border-box;color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:700;gap:var(--space-4);line-height:16px;padding:var(--space-12);text-align:left;width:100%}.rm-dsel__field:hover:not(.is-disabled){border-color:rgba(var(--brand-rgb),.3)}.rm-dsel__field.is-open{border-color:var(--color-primary)}.rm-dsel__field.is-disabled{background:var(--bg-surface-2);color:var(--text-muted);cursor:not-allowed}.rm-dsel__field:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-dsel__value-slot{display:block;flex:1;min-width:0}.rm-dsel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-dsel__value.is-empty{color:var(--text-muted);font-style:italic;font-weight:400}.rm-dsel__field :deep(svg){color:var(--text-secondary);flex-shrink:0}.rm-dsel__panel{border:1.5px solid var(--border-default);border-radius:var(--radius-lg,12px);box-shadow:var(--r-shadow-lg,0 8px 24px rgba(0,0,0,.12));box-sizing:border-box;flex-direction:column;max-height:500px;max-width:min(480px,calc(100vw - 32px));min-width:230px;padding:var(--space-16);position:fixed;width:-moz-max-content;width:max-content;z-index:var(--z-popover,1000)}.rm-dsel__panel,.rm-dsel__search{background:var(--bg-surface);display:flex}.rm-dsel__search{align-items:center;border:1px solid var(--border-default);border-radius:var(--radius-md,8px);gap:var(--space-8);padding:var(--space-8) var(--space-12)}.rm-dsel__search :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-dsel__search-input{background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:var(--font-14,14px);width:100%}.rm-dsel__search-input::-moz-placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-dsel__search-input::placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-dsel__search-input:focus-visible{outline:none}.rm-dsel__loading{display:flex;flex-direction:column;gap:var(--space-10);padding-top:var(--space-8)}.rm-dsel__sr{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.rm-dsel__state{color:var(--text-secondary);font-size:var(--font-14,14px);font-style:italic;padding-top:var(--space-16);text-align:center}.rm-dsel__list{display:flex;flex-direction:column;list-style:none;margin:0;min-height:10px;overflow-y:auto;padding:0}.rm-dsel__list:not(:only-child){margin-top:16px}.rm-dsel__option.is-disabled{color:var(--text-muted);cursor:not-allowed}.rm-dsel__option{align-items:flex-start;border-radius:var(--radius-sm,4px);cursor:pointer;display:flex;flex-shrink:0;font-size:var(--font-14,14px);gap:var(--space-8);line-height:160%;margin:4px 0;min-height:24px;padding:var(--space-2) var(--space-4)}.rm-dsel__option :deep(svg){color:var(--text-muted);flex-shrink:0;margin-top:3px}.rm-dsel__option.is-active{background:rgba(var(--brand-rgb),.05)}.rm-dsel__option.is-selected{font-weight:700}.rm-dsel__option.is-active :deep(svg),.rm-dsel__option.is-selected :deep(svg){color:var(--color-primary)}
 </style>

package/dist/runtime/components/MultipleSelect.vue

@@ -27,6 +27,7 @@
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { PhCaretDown, PhCheckSquare, PhInfo, PhMagnifyingGlass, PhSquare } from '@phosphor-icons/vue'
 import { rmPanelOpened, rmPanelRegister } from '../utils/panels'
+import { useRmFloating } from '../composables/useRmFloating'
 
 const props = withDefaults(defineProps<{
   /** Intitule pose au-dessus du champ. */
@@ -89,6 +90,15 @@ const t = computed(() => WORDS[props.lang])
 const isOpen = ref(false)
 const searchTerm = ref('')
 const rootRef = ref<HTMLElement>()
+const panelRef = ref<HTMLElement>()
+
+/**
+ * Le panneau sort par un `Teleport` et se place sur la fenetre (cf.
+ * `useRmFloating`) : pose dans le champ, il etait coupe par toute carte a
+ * debordement cache.
+ */
+const floating = useRmFloating(rootRef, panelRef, { matchWidth: true })
+const panelStyle = floating.style
 const searchRef = ref<HTMLInputElement>()
 
 // Tout cocher d'entree, une fois : refaire la selection a chaque arrivee
@@ -124,11 +134,14 @@ function close() {
   if (!isOpen.value) return
   isOpen.value = false
   document.removeEventListener('click', onDocumentClick)
+  floating.close()
   emit('close')
 }
 
 function onDocumentClick(event: MouseEvent) {
-  if (!rootRef.value?.contains(event.target as Node)) close()
+  const target = event.target as Node
+  if (rootRef.value?.contains(target) || panelRef.value?.contains(target)) return
+  close()
 }
 
 async function toggle() {
@@ -136,6 +149,7 @@ async function toggle() {
   if (isOpen.value) return close()
 
   isOpen.value = true
+  floating.open()
   rmPanelOpened(close)
   searchTerm.value = ''
   document.addEventListener('click', onDocumentClick)
@@ -200,7 +214,15 @@ onUnmounted(() => {
       <PhCaretDown :size="16" />
     </button>
 
-    <div v-show="isOpen" class="rm-msel__panel" @click.stop>
+    <Teleport to="body" :disabled="!isOpen">
+    <div
+      v-show="isOpen"
+      ref="panelRef"
+      class="rm-msel__panel"
+      :style="panelStyle"
+      @click.stop
+      @keydown.escape="close"
+    >
       <div v-if="search" class="rm-msel__search">
         <PhMagnifyingGlass :size="16" />
         <input
@@ -260,9 +282,10 @@ onUnmounted(() => {
         </div>
       </div>
     </div>
+    </Teleport>
   </div>
 </template>
 
 <style scoped>
-.rm-msel{align-items:stretch;flex-direction:column;position:relative;width:196px}.rm-msel,.rm-msel__label{display:flex;gap:var(--space-4)}.rm-msel__label{align-items:center;color:var(--text-secondary);font-size:var(--font-12,12px);line-height:14px}.rm-msel__info{background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;padding:0}.rm-msel__field{align-items:center;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);box-sizing:border-box;color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:700;gap:var(--space-4);line-height:16px;padding:var(--space-12);text-align:left;width:100%}.rm-msel__field:hover:not(.is-disabled){border-color:rgba(var(--brand-rgb),.3)}.rm-msel__field.is-open{border-color:var(--color-primary)}.rm-msel__field.is-disabled{background:var(--bg-surface-2);color:var(--text-muted);cursor:not-allowed}.rm-msel__field:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-msel__value-slot{display:block;flex:1;min-width:0}.rm-msel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-msel__value.is-empty{color:var(--text-muted);font-style:italic;font-weight:400}.rm-msel__field :deep(svg){color:var(--text-secondary);flex-shrink:0}.rm-msel__count{align-items:center;background:rgba(var(--brand-rgb),.1);border-radius:50%;color:var(--color-primary);display:flex;flex-shrink:0;font-size:var(--font-12,12px);font-weight:600;height:20px;justify-content:center;width:20px}.rm-msel__panel{border:1.5px solid var(--border-default);border-radius:var(--radius-lg,12px);box-shadow:var(--r-shadow-lg,0 8px 24px rgba(0,0,0,.12));box-sizing:border-box;flex-direction:column;left:0;margin-top:8px;max-height:500px;max-width:320px;min-width:230px;padding:var(--space-16);position:absolute;top:100%;z-index:12}.rm-msel__panel,.rm-msel__search{background:var(--bg-surface);display:flex}.rm-msel__search{align-items:center;border:1px solid var(--border-default);border-radius:var(--radius-md,8px);gap:var(--space-8);padding:var(--space-8) var(--space-12)}.rm-msel__search :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-msel__search-input{background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:var(--font-14,14px);width:100%}.rm-msel__search-input::-moz-placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-msel__search-input::placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-msel__search-input:focus-visible{outline:none}.rm-msel__loading{display:flex;flex-direction:column;gap:var(--space-10);padding-top:var(--space-8)}.rm-msel__sr{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.rm-msel__state{color:var(--text-secondary);font-size:var(--font-14,14px);font-style:italic;padding-top:var(--space-16);text-align:center}.rm-msel__list{display:flex;flex-direction:column;min-height:10px;overflow-y:auto}.rm-msel__list:not(:only-child){margin-top:16px}.rm-msel__indent{margin-left:16px}.rm-msel__option{align-items:center;background:none;border:none;border-radius:var(--radius-sm,4px);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);gap:var(--space-8);line-height:160%;margin:4px 0;min-height:24px;padding:var(--space-2) var(--space-4);text-align:left;width:100%}.rm-msel__option :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-msel__option:hover{background:rgba(var(--brand-rgb),.05)}.rm-msel__option:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.rm-msel__option.is-checked{font-weight:700}.rm-msel__option.is-checked :deep(svg),.rm-msel__option:hover :deep(svg){color:var(--color-primary)}
+.rm-msel{align-items:stretch;flex-direction:column;position:relative;width:196px}.rm-msel,.rm-msel__label{display:flex;gap:var(--space-4)}.rm-msel__label{align-items:center;color:var(--text-secondary);font-size:var(--font-12,12px);line-height:14px}.rm-msel__info{background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;padding:0}.rm-msel__field{align-items:center;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);box-sizing:border-box;color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:700;gap:var(--space-4);line-height:16px;padding:var(--space-12);text-align:left;width:100%}.rm-msel__field:hover:not(.is-disabled){border-color:rgba(var(--brand-rgb),.3)}.rm-msel__field.is-open{border-color:var(--color-primary)}.rm-msel__field.is-disabled{background:var(--bg-surface-2);color:var(--text-muted);cursor:not-allowed}.rm-msel__field:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-msel__value-slot{display:block;flex:1;min-width:0}.rm-msel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-msel__value.is-empty{color:var(--text-muted);font-style:italic;font-weight:400}.rm-msel__field :deep(svg){color:var(--text-secondary);flex-shrink:0}.rm-msel__count{align-items:center;background:rgba(var(--brand-rgb),.1);border-radius:50%;color:var(--color-primary);display:flex;flex-shrink:0;font-size:var(--font-12,12px);font-weight:600;height:20px;justify-content:center;width:20px}.rm-msel__panel{border:1.5px solid var(--border-default);border-radius:var(--radius-lg,12px);box-shadow:var(--r-shadow-lg,0 8px 24px rgba(0,0,0,.12));box-sizing:border-box;flex-direction:column;max-height:500px;max-width:320px;min-width:230px;padding:var(--space-16);position:fixed;z-index:var(--z-popover,1000)}.rm-msel__panel,.rm-msel__search{background:var(--bg-surface);display:flex}.rm-msel__search{align-items:center;border:1px solid var(--border-default);border-radius:var(--radius-md,8px);gap:var(--space-8);padding:var(--space-8) var(--space-12)}.rm-msel__search :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-msel__search-input{background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:var(--font-14,14px);width:100%}.rm-msel__search-input::-moz-placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-msel__search-input::placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-msel__search-input:focus-visible{outline:none}.rm-msel__loading{display:flex;flex-direction:column;gap:var(--space-10);padding-top:var(--space-8)}.rm-msel__sr{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.rm-msel__state{color:var(--text-secondary);font-size:var(--font-14,14px);font-style:italic;padding-top:var(--space-16);text-align:center}.rm-msel__list{display:flex;flex-direction:column;min-height:10px;overflow-y:auto}.rm-msel__list:not(:only-child){margin-top:16px}.rm-msel__indent{margin-left:16px}.rm-msel__option{align-items:center;background:none;border:none;border-radius:var(--radius-sm,4px);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);gap:var(--space-8);line-height:160%;margin:4px 0;min-height:24px;padding:var(--space-2) var(--space-4);text-align:left;width:100%}.rm-msel__option :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-msel__option:hover{background:rgba(var(--brand-rgb),.05)}.rm-msel__option:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.rm-msel__option.is-checked{font-weight:700}.rm-msel__option.is-checked :deep(svg),.rm-msel__option:hover :deep(svg){color:var(--color-primary)}
 </style>

package/dist/runtime/components/ResultCard.vue

@@ -38,8 +38,11 @@ withDefaults(
     count?: number | string | null
     /** Libelle sous le chiffre (« avis », « produits »). */
     countLabel?: string
-    /** Precision sous le libelle (« dont 2 acces precoce »). */
-    countExtra?: string
+    /**
+     * Precision sous le libelle (« dont 2 acces precoce »). Un tableau pose
+     * une ligne par entree, les vides sont sautees.
+     */
+    countExtra?: string | string[]
     /** Rappel en bas de la zone de droite (« Voir les 5 avis »). Une fleche est ajoutee. */
     moreLabel?: string
     /** Curseur main et surbrillance au survol : la carte est un lien. */
@@ -113,7 +116,11 @@ withDefaults(
       <div v-if="count !== null && count !== undefined" class="rm-rcard__count">
         <p class="rm-rcard__count-value">{{ count }}</p>
         <p v-if="countLabel" class="rm-rcard__count-label">{{ countLabel }}</p>
-        <p v-if="countExtra" class="rm-rcard__count-extra">{{ countExtra }}</p>
+        <p
+          v-for="(line, i) in [countExtra].flat().filter(Boolean)"
+          :key="i"
+          class="rm-rcard__count-extra"
+        >{{ line }}</p>
       </div>
 
       <div class="rm-rcard__main">
@@ -128,5 +135,5 @@ withDefaults(
 </template>
 
 <style scoped>
-.rm-rcard{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-2xl);color:var(--text-primary);display:block;font-family:var(--font-sans);overflow:hidden;transition:border-color var(--duration-fast) linear,box-shadow var(--duration-fast) linear;width:100%}.rm-rcard--clickable{cursor:pointer}.rm-rcard--clickable:hover{border-color:color-mix(in srgb,var(--color-primary) 35%,var(--border-default));box-shadow:var(--shadow-md)}.rm-rcard__head{align-items:flex-start;display:flex;gap:var(--space-16);padding:var(--space-20) var(--space-24) 0}.rm-rcard__identity{flex:1 1 auto;min-width:0}.rm-rcard__title{font-size:var(--font-18);font-weight:800;letter-spacing:.01em;margin:0}.rm-rcard__subtitle{color:var(--text-muted);font-size:var(--font-14);margin-top:4px;overflow-wrap:anywhere}.rm-rcard__actions{align-items:center;display:flex;flex:0 0 auto;gap:var(--space-8)}.rm-rcard__body{align-items:stretch;display:flex;gap:var(--space-24);padding:var(--space-16) var(--space-24) var(--space-20)}.rm-rcard__count{align-items:center;border-right:1px solid var(--border-default);display:flex;flex:0 0 128px;flex-direction:column;gap:var(--space-2);justify-content:center;padding-right:var(--space-24);text-align:center}.rm-rcard__count-value{color:var(--color-primary);font-size:var(--font-32);font-weight:var(--weight-bold);line-height:1.1;margin:0}.rm-rcard__count-label{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-semibold);letter-spacing:.08em;margin:0;text-transform:uppercase}.rm-rcard__count-extra{color:var(--color-primary);font-size:var(--font-13);line-height:1.3;margin:6px 0 0}.rm-rcard__main{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--space-6);min-width:0}.rm-rcard__meta{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-8)}.rm-rcard__more{color:var(--color-primary);font-size:var(--font-14);font-weight:var(--weight-semibold);margin:4px 0 0}.rm-rcard__footer{background:var(--bg-surface-2);border-top:1px solid var(--border-default);font-size:var(--font-13);padding:var(--space-12) var(--space-24)}.rm-rcard :deep(.rm-rcard__label){align-items:center;color:var(--text-secondary);display:inline-flex;font-size:var(--font-12);font-weight:var(--weight-bold);gap:var(--space-4);letter-spacing:.06em;text-transform:uppercase}.rm-rcard :deep(.rm-rcard__ref){background:var(--bg-surface-3);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:Courier New,monospace;font-size:var(--font-12);padding:var(--space-2) var(--space-8)}.rm-rcard :deep(.rm-rcard__lead){font-size:15px;font-weight:var(--weight-bold);margin:0}.rm-rcard :deep(.rm-rcard__text){font-size:15px;margin:0}.rm-rcard :deep(.rm-rcard__desc){color:var(--text-secondary);font-size:var(--font-14);line-height:1.5;margin:0}.rm-rcard :deep(.rm-rcard__clamp){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.rm-rcard--dense{border-radius:var(--radius-xl)}.rm-rcard--dense .rm-rcard__head{gap:var(--space-12);padding:var(--space-12) var(--space-16) 0}.rm-rcard--dense .rm-rcard__title{font-size:15px}.rm-rcard--dense .rm-rcard__subtitle{font-size:var(--font-13);margin-top:2px}.rm-rcard--dense .rm-rcard__body{gap:var(--space-16);padding:var(--space-8) var(--space-16) var(--space-12)}.rm-rcard--dense .rm-rcard__count{flex-basis:104px;padding-right:var(--space-16)}.rm-rcard--dense .rm-rcard__count-value{font-size:var(--font-24)}.rm-rcard--dense .rm-rcard__count-label{font-size:var(--font-11)}.rm-rcard--dense .rm-rcard__main{gap:var(--space-4)}.rm-rcard--dense .rm-rcard__count-extra,.rm-rcard--dense .rm-rcard__footer,.rm-rcard--dense .rm-rcard__main>:not(.rm-rcard__meta,.rm-rcard__lead){display:none}.rm-rcard--dense :deep(.rm-rcard__lead){display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.rm-rcard--dense .rm-rcard__body{align-items:center}.rm-rcard--dense :deep(.rm-rcard__lead),.rm-rcard--dense :deep(.rm-rcard__text){font-size:var(--font-14)}.rm-rcard--dense :deep(.rm-rcard__desc){font-size:var(--font-13)}
+.rm-rcard{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-2xl);color:var(--text-primary);display:block;font-family:var(--font-sans);overflow:hidden;transition:border-color var(--duration-fast) linear,box-shadow var(--duration-fast) linear;width:100%}.rm-rcard--clickable{cursor:pointer}.rm-rcard--clickable:hover{border-color:color-mix(in srgb,var(--color-primary) 35%,var(--border-default));box-shadow:var(--shadow-md)}.rm-rcard__head{align-items:flex-start;display:flex;gap:var(--space-16);padding:var(--space-20) var(--space-24) 0}.rm-rcard__identity{flex:1 1 auto;min-width:0}.rm-rcard__title{font-size:var(--font-18);font-weight:800;letter-spacing:.01em;margin:0}.rm-rcard__subtitle{color:var(--text-muted);font-size:var(--font-14);margin-top:4px;overflow-wrap:anywhere}.rm-rcard__actions{align-items:center;display:flex;flex:0 0 auto;gap:var(--space-8)}.rm-rcard__body{align-items:stretch;display:flex;gap:var(--space-24);padding:var(--space-16) var(--space-24) var(--space-20)}.rm-rcard__count{align-items:center;border-right:1px solid var(--border-default);display:flex;flex:0 0 128px;flex-direction:column;gap:var(--space-2);justify-content:center;padding-right:var(--space-24);text-align:center}.rm-rcard__count-value{color:var(--color-primary);font-size:var(--font-32);font-weight:var(--weight-bold);line-height:1.1;margin:0}.rm-rcard__count-label{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-semibold);letter-spacing:.08em;margin:0;text-transform:uppercase}.rm-rcard__count-extra{color:var(--color-primary);font-size:var(--font-13);line-height:1.3;margin:6px 0 0}.rm-rcard__count-extra+.rm-rcard__count-extra{margin-top:2px}.rm-rcard__main{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--space-6);min-width:0}.rm-rcard__meta{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-8)}.rm-rcard__more{color:var(--color-primary);font-size:var(--font-14);font-weight:var(--weight-semibold);margin:4px 0 0}.rm-rcard__footer{background:var(--bg-surface-2);border-top:1px solid var(--border-default);font-size:var(--font-13);padding:var(--space-12) var(--space-24)}.rm-rcard :deep(.rm-rcard__label){align-items:center;color:var(--text-secondary);display:inline-flex;font-size:var(--font-12);font-weight:var(--weight-bold);gap:var(--space-4);letter-spacing:.06em;text-transform:uppercase}.rm-rcard :deep(.rm-rcard__ref){background:var(--bg-surface-3);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:Courier New,monospace;font-size:var(--font-12);padding:var(--space-2) var(--space-8)}.rm-rcard :deep(.rm-rcard__lead){font-size:15px;font-weight:var(--weight-bold);margin:0}.rm-rcard :deep(.rm-rcard__text){font-size:15px;margin:0}.rm-rcard :deep(.rm-rcard__desc){color:var(--text-secondary);font-size:var(--font-14);line-height:1.5;margin:0}.rm-rcard :deep(.rm-rcard__clamp){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.rm-rcard--dense{border-radius:var(--radius-xl)}.rm-rcard--dense .rm-rcard__head{gap:var(--space-12);padding:var(--space-12) var(--space-16) 0}.rm-rcard--dense .rm-rcard__title{font-size:15px}.rm-rcard--dense .rm-rcard__subtitle{font-size:var(--font-13);margin-top:2px}.rm-rcard--dense .rm-rcard__body{gap:var(--space-16);padding:var(--space-8) var(--space-16) var(--space-12)}.rm-rcard--dense .rm-rcard__count{flex-basis:104px;padding-right:var(--space-16)}.rm-rcard--dense .rm-rcard__count-value{font-size:var(--font-24)}.rm-rcard--dense .rm-rcard__count-label{font-size:var(--font-11)}.rm-rcard--dense .rm-rcard__main{gap:var(--space-4)}.rm-rcard--dense .rm-rcard__count-extra,.rm-rcard--dense .rm-rcard__footer,.rm-rcard--dense .rm-rcard__main>:not(.rm-rcard__meta,.rm-rcard__lead){display:none}.rm-rcard--dense :deep(.rm-rcard__lead){display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.rm-rcard--dense .rm-rcard__body{align-items:center}.rm-rcard--dense :deep(.rm-rcard__lead),.rm-rcard--dense :deep(.rm-rcard__text){font-size:var(--font-14)}.rm-rcard--dense :deep(.rm-rcard__desc){font-size:var(--font-13)}
 </style>

package/dist/runtime/components/SavedViewCard.vue

@@ -380,6 +380,7 @@ function onCardClick() {
                 class="rm-view__pill-tip"
                 dir="top"
                 full
+                max-width="320px"
                 :disabled="!clipped[`${index}-${pillIndex}`]"
               >
                 <span class="rm-view__pill-v" :data-pill="`${index}-${pillIndex}`">
@@ -419,5 +420,5 @@ function onCardClick() {
 </template>
 
 <style scoped>
-.rm-view{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);padding:14px 18px;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.rm-view:not(.rm-view--active):hover{background:var(--bg-hover);border-color:var(--color-accent-soft)}.rm-view--active{border-color:var(--color-secondary);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.08);cursor:default}.rm-view__strip{align-items:center;background:var(--bg-hover);border-bottom:1px solid var(--border-soft);border-radius:7px 7px 0 0;color:var(--color-secondary);display:flex;flex-wrap:wrap;font-size:var(--font-11);font-weight:var(--weight-bold);gap:var(--space-8);letter-spacing:.06em;margin:-14px -18px var(--space-12);padding:var(--space-8) var(--space-16);text-transform:uppercase}.rm-view__strip-mark{align-items:center;display:inline-flex;gap:var(--space-6);white-space:nowrap}.rm-view__head{align-items:center;display:flex;gap:var(--space-10)}.rm-view__icon{align-items:center;border-radius:var(--radius-md);display:inline-flex;flex:0 0 auto;height:34px;justify-content:center;width:34px}.rm-view__icon--primary{background:var(--bg-hover);color:var(--color-secondary)}.rm-view__icon--success{background:var(--color-success-bg);color:var(--color-success)}.rm-view__icon--warning{background:var(--color-warning-bg);color:var(--color-warning)}.rm-view__icon--danger{background:var(--color-danger-bg);color:var(--color-danger)}.rm-view__icon--info{background:var(--color-info-bg);color:var(--color-info)}.rm-view__star{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:inline-flex;flex:0 0 auto;height:28px;justify-content:center;padding:0;width:28px}.rm-view__star:hover{background:var(--bg-hover)}.rm-view__star--on,.rm-view__star:hover{color:var(--color-warning)}.rm-view__title,.rm-view__title-edit{flex:1;font-size:var(--font-16);font-weight:var(--weight-bold);min-width:0}.rm-view__title-edit{background:var(--bg-surface);border:1px solid var(--color-secondary);border-radius:var(--radius-md);color:var(--text-primary);font-family:inherit;outline:none;padding:var(--space-2) var(--space-8)}.rm-view__title-edit:focus{box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12)}.rm-view__actions{align-items:center;display:flex;gap:var(--space-8)}.rm-view__badge{align-items:center;background:var(--color-success-bg);border-radius:var(--radius-pill);color:var(--color-success);display:inline-flex;font-size:var(--font-10);font-weight:var(--weight-bold);gap:var(--space-4);letter-spacing:.06em;padding:3px var(--space-8);text-transform:uppercase}.rm-view__menu-wrap{position:relative}.rm-view__more{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:inline-flex;height:28px;justify-content:center;padding:0;width:28px}.rm-view__more:hover{background:var(--bg-hover);color:var(--text-primary)}.rm-view__menu-shade{inset:0;position:fixed;z-index:60}.rm-view__menu{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;min-width:200px;padding:var(--space-4);position:absolute;right:0;top:calc(100% + 6px);z-index:61}.rm-view__menu-item{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-13);gap:var(--space-8);padding:var(--space-8) var(--space-12);text-align:left;width:100%}.rm-view__menu-item:hover{background:var(--bg-hover);color:var(--color-secondary)}.rm-view__menu-item--danger{color:var(--color-danger)}.rm-view__menu-item--danger:hover{background:var(--color-danger-bg);color:var(--color-danger)}.rm-view__desc{color:var(--text-secondary);font-size:var(--font-13);margin:var(--space-8) 0 var(--space-12)}.rm-view__config{background:var(--bg-surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-6);margin:10px 0 var(--space-12);padding:var(--space-10) 14px}.rm-view__row{align-items:flex-start;display:flex;flex-wrap:wrap;font-size:var(--font-12);gap:14px}.rm-view__row-key{color:var(--text-muted);display:inline-flex;flex-shrink:0;font-size:var(--font-10);font-weight:var(--weight-semibold);letter-spacing:.04em;min-width:96px;padding-top:var(--space-4);text-transform:uppercase}.rm-view__row-key,.rm-view__row-val{align-items:center;gap:var(--space-6)}.rm-view__row-val{color:var(--text-primary);display:flex;flex:1 1 200px;flex-wrap:wrap;padding:var(--space-2) 0}.rm-view__pill{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);display:inline-flex;font-size:var(--font-12);gap:var(--space-4);padding:5px var(--space-10)}.rm-view__pill-k{color:var(--color-primary);font-weight:var(--weight-semibold)}.rm-view__pill-tip{min-width:0}.rm-view__pill-tip :deep(.rm-tooltip__bubble){max-width:320px}.rm-view__pill-v{display:-webkit-box;-webkit-box-orient:vertical;color:var(--text-primary);font-weight:var(--weight-medium);-webkit-line-clamp:3;overflow:hidden}.rm-view__foot{border-top:1px solid var(--border-soft);color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:var(--font-11);gap:var(--space-16);padding-top:var(--space-10)}.rm-view__foot span{align-items:center;display:inline-flex;gap:var(--space-4)}.rm-view__confirm{align-items:center;background:var(--color-danger-bg);border:1px solid var(--color-danger);border-radius:var(--radius-md);color:var(--color-danger);display:flex;flex-wrap:wrap;font-size:var(--font-13);gap:var(--space-12);margin-top:var(--space-12);padding:var(--space-8) var(--space-12)}.rm-view__confirm>span{align-items:center;display:inline-flex;flex:1 1 220px;gap:var(--space-8)}.rm-view__confirm-actions{display:flex;flex-shrink:0;gap:var(--space-8)}
+.rm-view{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);padding:14px 18px;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.rm-view:not(.rm-view--active):hover{background:var(--bg-hover);border-color:var(--color-accent-soft)}.rm-view--active{border-color:var(--color-secondary);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.08);cursor:default}.rm-view__strip{align-items:center;background:var(--bg-hover);border-bottom:1px solid var(--border-soft);border-radius:7px 7px 0 0;color:var(--color-secondary);display:flex;flex-wrap:wrap;font-size:var(--font-11);font-weight:var(--weight-bold);gap:var(--space-8);letter-spacing:.06em;margin:-14px -18px var(--space-12);padding:var(--space-8) var(--space-16);text-transform:uppercase}.rm-view__strip-mark{align-items:center;display:inline-flex;gap:var(--space-6);white-space:nowrap}.rm-view__head{align-items:center;display:flex;gap:var(--space-10)}.rm-view__icon{align-items:center;border-radius:var(--radius-md);display:inline-flex;flex:0 0 auto;height:34px;justify-content:center;width:34px}.rm-view__icon--primary{background:var(--bg-hover);color:var(--color-secondary)}.rm-view__icon--success{background:var(--color-success-bg);color:var(--color-success)}.rm-view__icon--warning{background:var(--color-warning-bg);color:var(--color-warning)}.rm-view__icon--danger{background:var(--color-danger-bg);color:var(--color-danger)}.rm-view__icon--info{background:var(--color-info-bg);color:var(--color-info)}.rm-view__star{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:inline-flex;flex:0 0 auto;height:28px;justify-content:center;padding:0;width:28px}.rm-view__star:hover{background:var(--bg-hover)}.rm-view__star--on,.rm-view__star:hover{color:var(--color-warning)}.rm-view__title,.rm-view__title-edit{flex:1;font-size:var(--font-16);font-weight:var(--weight-bold);min-width:0}.rm-view__title-edit{background:var(--bg-surface);border:1px solid var(--color-secondary);border-radius:var(--radius-md);color:var(--text-primary);font-family:inherit;outline:none;padding:var(--space-2) var(--space-8)}.rm-view__title-edit:focus{box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12)}.rm-view__actions{align-items:center;display:flex;gap:var(--space-8)}.rm-view__badge{align-items:center;background:var(--color-success-bg);border-radius:var(--radius-pill);color:var(--color-success);display:inline-flex;font-size:var(--font-10);font-weight:var(--weight-bold);gap:var(--space-4);letter-spacing:.06em;padding:3px var(--space-8);text-transform:uppercase}.rm-view__menu-wrap{position:relative}.rm-view__more{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:inline-flex;height:28px;justify-content:center;padding:0;width:28px}.rm-view__more:hover{background:var(--bg-hover);color:var(--text-primary)}.rm-view__menu-shade{inset:0;position:fixed;z-index:60}.rm-view__menu{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;min-width:200px;padding:var(--space-4);position:absolute;right:0;top:calc(100% + 6px);z-index:61}.rm-view__menu-item{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-13);gap:var(--space-8);padding:var(--space-8) var(--space-12);text-align:left;width:100%}.rm-view__menu-item:hover{background:var(--bg-hover);color:var(--color-secondary)}.rm-view__menu-item--danger{color:var(--color-danger)}.rm-view__menu-item--danger:hover{background:var(--color-danger-bg);color:var(--color-danger)}.rm-view__desc{color:var(--text-secondary);font-size:var(--font-13);margin:var(--space-8) 0 var(--space-12)}.rm-view__config{background:var(--bg-surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-6);margin:10px 0 var(--space-12);padding:var(--space-10) 14px}.rm-view__row{align-items:flex-start;display:flex;flex-wrap:wrap;font-size:var(--font-12);gap:14px}.rm-view__row-key{color:var(--text-muted);display:inline-flex;flex-shrink:0;font-size:var(--font-10);font-weight:var(--weight-semibold);letter-spacing:.04em;min-width:96px;padding-top:var(--space-4);text-transform:uppercase}.rm-view__row-key,.rm-view__row-val{align-items:center;gap:var(--space-6)}.rm-view__row-val{color:var(--text-primary);display:flex;flex:1 1 200px;flex-wrap:wrap;padding:var(--space-2) 0}.rm-view__pill{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);display:inline-flex;font-size:var(--font-12);gap:var(--space-4);padding:5px var(--space-10)}.rm-view__pill-k{color:var(--color-primary);font-weight:var(--weight-semibold)}.rm-view__pill-tip{min-width:0}.rm-view__pill-v{display:-webkit-box;-webkit-box-orient:vertical;color:var(--text-primary);font-weight:var(--weight-medium);-webkit-line-clamp:3;overflow:hidden}.rm-view__foot{border-top:1px solid var(--border-soft);color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:var(--font-11);gap:var(--space-16);padding-top:var(--space-10)}.rm-view__foot span{align-items:center;display:inline-flex;gap:var(--space-4)}.rm-view__confirm{align-items:center;background:var(--color-danger-bg);border:1px solid var(--color-danger);border-radius:var(--radius-md);color:var(--color-danger);display:flex;flex-wrap:wrap;font-size:var(--font-13);gap:var(--space-12);margin-top:var(--space-12);padding:var(--space-8) var(--space-12)}.rm-view__confirm>span{align-items:center;display:inline-flex;flex:1 1 220px;gap:var(--space-8)}.rm-view__confirm-actions{display:flex;flex-shrink:0;gap:var(--space-8)}
 </style>

package/dist/runtime/components/Tooltip.vue

@@ -14,11 +14,20 @@
 
   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.
+
+  La bulle sort par un `Teleport` et se place sur la fenetre (cf.
+  `useRmFloating`) : posee dans l'element, elle etait coupee par toute carte a
+  debordement cache, un tableau a hauteur bornee ou un tiroir. Le `Teleport`
+  ne s'active que pendant qu'elle se montre. Le survol passe donc par des
+  evenements plutot que par `:hover` : la bulle n'est plus une enfant de
+  l'element dans le DOM. Elle reste ouverte quand le pointeur passe de
+  l'element a elle, pour qu'un lien pose dedans reste cliquable.
 -->
 <script setup lang="ts">
-import { useId } from 'vue'
+import { onBeforeUnmount, ref, useId } from 'vue'
+import { useRmFloating } from '../composables/useRmFloating'
 
-withDefaults(defineProps<{
+const props = 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. */
@@ -34,34 +43,84 @@ withDefaults(defineProps<{
    * lire.
    */
   full?: boolean
+  /**
+   * Largeur maximale de la bulle (220px par defaut). Une prop et non un
+   * `:deep()` chez l'appelant : sortie par le `Teleport`, la bulle n'est plus
+   * sous l'element dans le DOM et aucun selecteur descendant ne l'atteint.
+   */
+  maxWidth?: string
 }>(), {
   text: '',
   dir: 'top',
   disabled: false,
   full: false,
+  maxWidth: undefined,
 })
 
 const id = `rm-tooltip-${useId()}`
+
+const rootRef = ref<HTMLElement>()
+const bubbleRef = ref<HTMLElement>()
+const visible = ref(false)
+const floating = useRmFloating(rootRef, bubbleRef, {
+  kind: 'bubble',
+  side: props.dir,
+  offset: props.dir === 'top' || props.dir === 'bottom' ? 6 : 8,
+})
+
+let hideId: ReturnType<typeof setTimeout> | undefined
+
+function show() {
+  if (props.disabled) return
+  clearTimeout(hideId)
+  visible.value = true
+  floating.open()
+}
+
+/** Un court delai laisse au pointeur le temps de passer de l'element a la bulle. */
+function hide() {
+  clearTimeout(hideId)
+  hideId = setTimeout(() => {
+    visible.value = false
+    floating.close()
+  }, 80)
+}
+
+onBeforeUnmount(() => clearTimeout(hideId))
 </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">
+  <span
+    ref="rootRef"
+    class="rm-tooltip"
+    :aria-describedby="disabled ? undefined : id"
+    @mouseenter="show"
+    @mouseleave="hide"
+    @focusin="show"
+    @focusout="hide"
+  >
     <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>
+    <Teleport to="body" :disabled="!visible">
+      <span
+        v-if="!disabled"
+        :id="id"
+        ref="bubbleRef"
+        role="tooltip"
+        class="rm-tooltip__bubble"
+        :class="{ 'rm-tooltip__bubble--full': full, 'is-visible': visible }"
+        :style="[visible ? floating.style.value : {}, maxWidth ? { maxWidth } : {}]"
+        @mouseenter="show"
+        @mouseleave="hide"
+      >
+        <slot name="content">{{ text }}</slot>
+      </span>
+    </Teleport>
   </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:var(--space-4) var(--space-12);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%)}
+.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:var(--space-4) var(--space-12);position:fixed;text-align:left;white-space:pre-line;width:-moz-max-content;width:max-content;z-index:calc(var(--z-popover, 1000) + 1);-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__bubble.is-visible{opacity:1;visibility:visible}
 </style>

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

@@ -0,0 +1,43 @@
+/**
+ * Placement d'une couche flottante (panneau de select, bulle d'aide) sur la
+ * fenetre plutot que dans son conteneur.
+ *
+ * Posee en `position: absolute` a cote de son champ, une couche flottante est
+ * coupee par le premier ancetre qui masque son debordement : une `RmCard` ou
+ * une `RmTableCard` (qui cachent le leur pour que la table suive les coins
+ * arrondis), un tableau a hauteur bornee, un tiroir. Aucun reglage d'`overflow`
+ * chez l'appelant ne la rattrape sans casser autre chose.
+ *
+ * La regle du design system est donc la suivante : TOUTE couche flottante sort
+ * par un `<Teleport to="body">` et se place en `position: fixed` par ce
+ * composable. Le `Teleport` se desactive tant que la couche est fermee
+ * (`:disabled="!open"`) : une page de cinq cents bulles d'aide ne pose pas
+ * cinq cents noeuds dans `body`, seule celle qu'on lit y passe.
+ *
+ * Le composable suit le champ tant que la couche est ouverte : posee sur la
+ * fenetre, elle resterait sinon la ou le champ etait avant que la page (ou un
+ * tiroir) ne defile.
+ */
+import { type Ref } from 'vue';
+export interface RmFloatingOptions {
+    /**
+     * `panel` : sous le champ, calee a gauche, et bascule au-dessus quand la
+     * place manque dessous (un panneau de select). `bubble` : centree sur le
+     * champ, du cote `side` (une bulle d'aide).
+     */
+    kind?: 'panel' | 'bubble';
+    /** Cote ou sort une bulle. Ignore pour un panneau. */
+    side?: 'bottom' | 'top' | 'left' | 'right';
+    /** Ecart entre le champ et la couche, en pixels. */
+    offset?: number;
+    /** La couche fait au moins la largeur du champ (panneau de select). */
+    matchWidth?: boolean;
+    /** Hauteur qu'une liste occupe en pratique : en dessous, la couche bascule. */
+    needed?: number;
+}
+export declare function useRmFloating(anchor: Ref<HTMLElement | undefined>, floating: Ref<HTMLElement | undefined>, options?: RmFloatingOptions): {
+    style: Ref<Record<string, string>, Record<string, string>>;
+    place: () => void;
+    open: () => Promise<void>;
+    close: () => void;
+};

package/dist/runtime/composables/useRmFloating.js

@@ -0,0 +1,61 @@
+import { nextTick, onBeforeUnmount, ref } from "vue";
+const GAP = 8;
+export function useRmFloating(anchor, floating, options = {}) {
+  const { kind = "panel", side = "top", offset = GAP, matchWidth = false, needed = 320 } = options;
+  const style = ref({});
+  let tracking = false;
+  function place() {
+    const rect = anchor.value?.getBoundingClientRect();
+    if (!rect) return;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const width = floating.value?.offsetWidth ?? 0;
+    if (kind === "panel") {
+      const below = vh - rect.bottom - offset - GAP;
+      const above = rect.top - offset - GAP;
+      const flip = below < needed && above > below;
+      const left = Math.max(GAP, Math.min(rect.left, vw - width - GAP));
+      style.value = {
+        position: "fixed",
+        left: `${left}px`,
+        maxHeight: `${Math.max(160, Math.min(500, flip ? above : below))}px`,
+        ...matchWidth ? { minWidth: `max(230px, ${rect.width}px)` } : {},
+        ...flip ? { bottom: `${vh - rect.top + offset}px` } : { top: `${rect.bottom + offset}px` }
+      };
+      return;
+    }
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    const clampX = (x) => Math.max(GAP + width / 2, Math.min(x, vw - GAP - width / 2));
+    const placements = {
+      top: { left: clampX(cx), top: rect.top - offset, transform: "translate(-50%, -100%)" },
+      bottom: { left: clampX(cx), top: rect.bottom + offset, transform: "translateX(-50%)" },
+      right: { left: rect.right + offset, top: cy, transform: "translateY(-50%)" },
+      left: { left: rect.left - offset, top: cy, transform: "translate(-100%, -50%)" }
+    };
+    const p = placements[side];
+    style.value = {
+      position: "fixed",
+      left: `${p.left}px`,
+      top: `${p.top}px`,
+      transform: p.transform
+    };
+  }
+  async function open() {
+    place();
+    await nextTick();
+    place();
+    if (tracking) return;
+    tracking = true;
+    window.addEventListener("scroll", place, true);
+    window.addEventListener("resize", place);
+  }
+  function close() {
+    if (!tracking) return;
+    tracking = false;
+    window.removeEventListener("scroll", place, true);
+    window.removeEventListener("resize", place);
+  }
+  onBeforeUnmount(close);
+  return { style, place, open, close };
+}

package/package.json

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