@tekkare/romulus 0.1.118 → 0.1.120

package/dist/module.json

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

package/dist/runtime/components/AlertForm.vue

@@ -112,8 +112,8 @@ const FR = {
   kindProduct: 'Une marque',
   kindProductHint: 'Une à {max} marques, suivies partout : prix, avis HAS, indications, ANSM, PUT, MITM, Journal officiel.',
   brands: 'Marques surveillées',
-  brandsSearch: 'Rechercher une marque, une molécule, une classe ATC',
-  brandsHint: 'Cherchez une marque et ajoutez-la. L’alerte couvre tout le hub pour chacune.',
+  brandsSearch: 'Rechercher',
+  brandsHint: 'Cherchez par marque, molécule, classe ATC ou laboratoire. L’alerte couvre tout le hub pour chaque marque retenue.',
   brandsRequired: 'Choisissez au moins une marque.',
   brandsTooMany: 'Une alerte suit {max} marques au maximum.',
   productFields: 'Tous les champs sont suivis : une alerte de marque ne se restreint pas, elle rapporte tout ce qui bouge.',
@@ -154,7 +154,7 @@ const FR = {
   reseed: 'Changer les champs suivis repart d’une nouvelle référence : vous ne serez prévenu que de ce qui bouge ensuite.',
   cancel: 'Annuler',
   baseline:
-    'À la création, la référence est capturée sans rien signaler : vous ne serez prévenu que de ce qui bouge ensuite.',
+    'L’alerte commence par relever l’état actuel, sans rien signaler. Restez quelques instants sur la page : elle passe à « Active » dans le panneau une fois ce relevé fait, et vous préviendra ensuite de ce qui bouge.',
   scope: 'éléments dans la vue actuellement',
 }
 
@@ -165,8 +165,8 @@ const EN = {
   kindProduct: 'A brand',
   kindProductHint: 'One to {max} brands, watched everywhere: prices, HAS opinions, indications, ANSM, PUT, MITM, official journal.',
   brands: 'Watched brands',
-  brandsSearch: 'Search a brand, a molecule, an ATC class',
-  brandsHint: 'Search a brand and add it. The alert covers the whole hub for each one.',
+  brandsSearch: 'Search',
+  brandsHint: 'Search by brand, molecule, ATC class or company. The alert covers the whole hub for each brand kept.',
   brandsRequired: 'Pick at least one brand.',
   brandsTooMany: 'An alert watches at most {max} brands.',
   productFields: 'Every field is watched: a brand alert does not narrow down, it reports whatever moves.',
@@ -207,7 +207,7 @@ const EN = {
   reseed: 'Changing the watched fields restarts from a new baseline: you are only told about what moves afterwards.',
   cancel: 'Cancel',
   baseline:
-    'On creation the baseline is captured silently: you are only told about what moves afterwards.',
+    'The alert starts by recording the current state, without reporting anything. Stay on the page a moment: it turns “Active” in the panel once that record is taken, and will then tell you what moves.',
   scope: 'items in the view right now',
 }
 
@@ -446,6 +446,7 @@ function submit() {
         :label="T.brandsSearch"
         :options="brandOptions.map((brand) => ({ label: brand, value: brand }))"
         remote
+        panel-width="100%"
         :lang="lang"
       />
       <p v-if="brands.length > maxBrands" class="rm-alert-form__error">
@@ -502,7 +503,7 @@ function submit() {
         :key="entry.key"
         :model-value="triggers.includes(entry.key as any)"
         :label="entry.label"
-        :tooltip="entry.hint"
+        :description="entry.hint"
         @update:model-value="toggleTrigger(entry.key as RmAlertTrigger)"
       />
     </fieldset>
@@ -532,13 +533,16 @@ function submit() {
     <fieldset class="rm-alert-form__group">
       <legend class="rm-alert-form__label">{{ T.channels }}</legend>
       <RmCheckbox :model-value="true" :label="T.inApp" disabled />
-      <RmCheckbox v-model="emailOn" :label="T.email" />
 
-      <div v-if="emailOn" class="rm-alert-form__nested">
-        <p class="rm-alert-form__label">{{ T.cadence }}</p>
-        <p class="rm-alert-form__hint">{{ T.cadenceHint }}</p>
+      <!-- La case et sa frequence sur une meme rangee : le choix du canal et
+           celui de son rythme se lisent ensemble, et la frequence n'a aucun
+           sens sans la case. -->
+      <div class="rm-alert-form__channel">
+        <RmCheckbox v-model="emailOn" :label="T.email" />
         <RmDropdownSelect
+          v-if="emailOn"
           label=""
+          class="rm-alert-form__cadence"
           :options="cadenceOptions.map((option) => option.label)"
           :model-value="cadenceLabel"
           @update:model-value="
@@ -547,6 +551,7 @@ function submit() {
           "
         />
       </div>
+      <p v-if="emailOn" class="rm-alert-form__hint">{{ T.cadenceHint }}</p>
     </fieldset>
 
     <p
@@ -572,5 +577,5 @@ function submit() {
 </template>
 
 <style scoped>
-.rm-alert-form{display:flex;flex-direction:column;gap:18px}.rm-alert-form__label{color:var(--rm-text,#111827);font-size:13px;font-weight:600;margin:0 0 2px;padding:0}.rm-alert-form__group{border:0;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}.rm-alert-form__view-name{align-items:center;color:var(--rm-text,#111827);display:flex;flex-wrap:wrap;font-size:14px;gap:6px;margin:0}.rm-alert-form__count{color:var(--rm-text-soft,#9ca3af);font-size:11.5px}.rm-alert-form__hint{color:var(--rm-text-soft,#9ca3af);font-size:12px;line-height:1.45;margin:0 0 4px}.rm-alert-form__error{color:var(--rm-danger,#b91c1c);font-size:12px;margin:0}.rm-alert-form__nested{display:flex;flex-direction:column;gap:6px;padding-left:26px}.rm-alert-form__baseline{align-items:flex-start;background:var(--rm-surface-muted,#f9fafb);border-radius:8px;color:var(--rm-text-soft,#4b5563);display:flex;font-size:12.5px;gap:8px;line-height:1.45;margin:0;padding:10px 12px}.rm-alert-form__actions{display:flex;gap:8px;justify-content:flex-end}
+.rm-alert-form{display:flex;flex-direction:column;gap:18px}.rm-alert-form__label{color:var(--rm-text,#111827);font-size:13px;font-weight:600;margin:0 0 2px;padding:0}.rm-alert-form__group{border:0;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}.rm-alert-form__view-name{align-items:center;color:var(--rm-text,#111827);display:flex;flex-wrap:wrap;font-size:14px;gap:6px;margin:0}.rm-alert-form__count{color:var(--rm-text-soft,#9ca3af);font-size:11.5px}.rm-alert-form__hint{color:var(--rm-text-soft,#9ca3af);font-size:12px;line-height:1.45;margin:0 0 4px}.rm-alert-form__error{color:var(--rm-danger,#b91c1c);font-size:12px;margin:0}.rm-alert-form__channel{align-items:center;display:flex;flex-wrap:wrap;gap:12px}.rm-alert-form__cadence{flex:1 1 240px;min-width:240px}.rm-alert-form__nested{display:flex;flex-direction:column;gap:6px;padding-left:26px}.rm-alert-form__baseline{align-items:flex-start;background:var(--rm-surface-muted,#f9fafb);border-radius:8px;color:var(--rm-text-soft,#4b5563);display:flex;font-size:12.5px;gap:8px;line-height:1.45;margin:0;padding:10px 12px}.rm-alert-form__actions{display:flex;gap:8px;justify-content:flex-end}
 </style>

package/dist/runtime/components/Checkbox.vue

@@ -21,12 +21,22 @@ withDefaults(defineProps<{
   label: string
   /** Intitule du champ, au-dessus de la boite. Absent, rien ne sort. */
   fieldLabel?: string
+  /**
+   * Explication posee sous l'intitule, en petit.
+   *
+   * A preferer a `tooltip` des que l'explication aide a CHOISIR : une bulle
+   * au survol se decouvre par hasard, ne s'atteint pas au doigt, et dans une
+   * liste de cases a cocher elle oblige a survoler chaque ligne pour
+   * comprendre laquelle prendre.
+   */
+  description?: string
   /** Bulle d'aide, sortie par une icone a droite. */
   tooltip?: string
   tooltipDir?: 'top' | 'right' | 'bottom' | 'left'
   disabled?: boolean
 }>(), {
   fieldLabel: '',
+  description: '',
   tooltip: '',
   tooltipDir: 'top',
   disabled: false,
@@ -54,7 +64,10 @@ const checked = defineModel<boolean>({ default: false })
             :size="20"
           />
         </span>
-        <span class="rm-checkbox__label">{{ label }}</span>
+        <span class="rm-checkbox__text">
+          <span class="rm-checkbox__label">{{ label }}</span>
+          <span v-if="description" class="rm-checkbox__desc">{{ description }}</span>
+        </span>
       </label>
 
       <RmTooltip v-if="tooltip" :text="tooltip" :dir="tooltipDir" class="rm-checkbox__help">
@@ -65,5 +78,5 @@ const checked = defineModel<boolean>({ default: false })
 </template>
 
 <style scoped>
-.rm-checkbox__field-label{color:var(--text-secondary);font-size:var(--font-12,12px);font-weight:600;margin-bottom:6px}.rm-checkbox__wrap{position:relative}.rm-checkbox__box,.rm-checkbox__wrap{align-items:center;display:flex;gap:var(--space-8)}.rm-checkbox__box{background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);color:var(--text-primary);cursor:pointer;flex:1;font-size:var(--font-14,14px);font-weight:600;min-height:40px;padding:0 var(--space-12);transition:border-color var(--duration-fast,.15s) var(--ease-out,ease)}.rm-checkbox__box:hover:not(.is-disabled){border-color:var(--color-primary)}.rm-checkbox__box:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.1)}.rm-checkbox__box.is-disabled{color:var(--text-muted);cursor:not-allowed}.rm-checkbox__input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.rm-checkbox__icon{color:var(--text-muted);display:flex;flex-shrink:0}.rm-checkbox__icon.is-checked{color:var(--color-primary)}.rm-checkbox__box.is-disabled .rm-checkbox__icon{color:var(--border-default)}.rm-checkbox__label{min-width:0}.rm-checkbox__help{color:var(--text-muted)}
+.rm-checkbox__field-label{color:var(--text-secondary);font-size:var(--font-12,12px);font-weight:600;margin-bottom:6px}.rm-checkbox__wrap{position:relative}.rm-checkbox__box,.rm-checkbox__wrap{align-items:center;display:flex;gap:var(--space-8)}.rm-checkbox__box{background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);color:var(--text-primary);cursor:pointer;flex:1;font-size:var(--font-14,14px);font-weight:600;min-height:40px;padding:0 var(--space-12);transition:border-color var(--duration-fast,.15s) var(--ease-out,ease)}.rm-checkbox__box:hover:not(.is-disabled){border-color:var(--color-primary)}.rm-checkbox__box:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.1)}.rm-checkbox__box.is-disabled{color:var(--text-muted);cursor:not-allowed}.rm-checkbox__input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.rm-checkbox__icon{color:var(--text-muted);display:flex;flex-shrink:0}.rm-checkbox__icon.is-checked{color:var(--color-primary)}.rm-checkbox__box.is-disabled .rm-checkbox__icon{color:var(--border-default)}.rm-checkbox__text{display:flex;flex-direction:column;gap:2px;min-width:0}.rm-checkbox__label{min-width:0}.rm-checkbox__desc{font-size:var(--font-12);font-weight:400;line-height:1.4}.rm-checkbox__desc,.rm-checkbox__help{color:var(--text-muted)}
 </style>

package/dist/runtime/components/DropdownSelect.vue

@@ -117,10 +117,43 @@ 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
+}
+
 async function toggle() {
   if (props.disabled) return
   if (isOpen.value) return close()
 
+  placePanel()
   isOpen.value = true
   rmPanelOpened(close)
   searchTerm.value = ''
@@ -191,7 +224,12 @@ onUnmounted(() => {
       <component :is="sortIcon ? PhCaretUpDown : PhCaretDown" :size="16" />
     </button>
 
-    <div v-show="isOpen" class="rm-dsel__panel" @click.stop>
+    <div
+      v-show="isOpen"
+      class="rm-dsel__panel"
+      :class="{ 'rm-dsel__panel--up': dropUp }"
+      @click.stop
+    >
       <div v-if="search" class="rm-dsel__search">
         <PhMagnifyingGlass :size="16" />
         <input
@@ -236,5 +274,5 @@ onUnmounted(() => {
 </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{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-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{align-items:center;border-radius:var(--radius-sm,4px);cursor:pointer;display:flex;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}.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--up{bottom:100%;margin-bottom:8px;margin-top:0;top:auto}.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;left:0;margin-top:8px;max-height:500px;max-width:420px;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,.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{align-items:center;border-radius:var(--radius-sm,4px);cursor:pointer;display:flex;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}.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/FilterComplex.vue

@@ -54,11 +54,18 @@ const props = withDefaults(defineProps<{
    * cent premieres valeurs laisse croire que le reste n'existe pas).
    */
   remote?: boolean
+  /**
+   * Largeur du panneau. Les 720px par defaut valent pour une page ; dans une
+   * modale ou un panneau de rail, ils debordent du cadre et le contenu se
+   * fait couper.
+   */
+  panelWidth?: string
 }>(), {
   icon: undefined,
   presets: () => [],
   lang: 'en',
   remote: false,
+  panelWidth: '720px',
 })
 
 const selected = defineModel<string[]>({ default: () => [] })
@@ -308,7 +315,11 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="wrapperRef" class="filter-complex">
+  <div
+    ref="wrapperRef"
+    class="filter-complex"
+    :style="{ '--rm-fcx-panel-w': panelWidth }"
+  >
     <button
       class="filter-complex__trigger"
       :class="{ 'filter-complex__trigger--active': isActive }"
@@ -455,5 +466,5 @@ onUnmounted(() => {
 </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: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:var(--space-6);height:var(--rm-fbar-field-h,32px);max-width:320px;padding:0 var(--space-12);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 var(--space-6)}.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:var(--space-10);overflow:hidden;padding:var(--space-20)}.filter-complex__left{flex:1 1 50%}.filter-complex__right{border-left:1px solid var(--border-default);flex:1 1 50%}@media (max-width:767px){.filter-complex__panel{border:none;border-radius:0;flex-direction:column;inset:0;left:0;max-height:none;max-width:none;position:fixed;top:0;width:100%;z-index:100}.filter-complex__left,.filter-complex__right{flex:1 1 50%;min-height:0}.filter-complex__right{border-left:none;border-top:1px solid var(--border-default)}}.filter-complex__head{align-items:center;display:flex;gap:var(--space-12);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:var(--space-8)}.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 var(--space-12);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:var(--space-8);padding:7px var(--space-10)}.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__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:var(--space-10);padding:7px var(--space-8);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{font-size:var(--font-12)}.filter-complex__empty,.filter-complex__more{color:var(--text-muted);padding:var(--space-8)}.filter-complex__empty{font-size:var(--font-14);font-style:italic}.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:var(--space-6);height:var(--rm-fbar-field-h,32px);max-width:320px;padding:0 var(--space-12);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 var(--space-6)}.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:var(--rm-fcx-panel-w,720px);z-index:50}.filter-complex__left,.filter-complex__right{display:flex;flex-direction:column;gap:var(--space-10);overflow:hidden;padding:var(--space-20)}.filter-complex__left{flex:1 1 50%}.filter-complex__right{border-left:1px solid var(--border-default);flex:1 1 50%}@media (max-width:767px){.filter-complex__panel{border:none;border-radius:0;flex-direction:column;inset:0;left:0;max-height:none;max-width:none;position:fixed;top:0;width:100%;z-index:100}.filter-complex__left,.filter-complex__right{flex:1 1 50%;min-height:0}.filter-complex__right{border-left:none;border-top:1px solid var(--border-default)}}.filter-complex__head{align-items:center;display:flex;gap:var(--space-12);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:var(--space-8)}.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 var(--space-12);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:var(--space-8);padding:7px var(--space-10)}.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__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:var(--space-10);padding:7px var(--space-8);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{font-size:var(--font-12)}.filter-complex__empty,.filter-complex__more{color:var(--text-muted);padding:var(--space-8)}.filter-complex__empty{font-size:var(--font-14);font-style:italic}.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/package.json

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