@tekkare/romulus 0.1.94 → 0.1.96

package/dist/runtime/components/TermsGate.vue

@@ -0,0 +1,307 @@
+<!--
+  RmTermsGate - conditions d'utilisation a accepter avant d'entrer.
+
+  Surface bloquante posee une fois dans l'application. Elle parait a la
+  premiere connexion, puis a chaque nouvelle version publiee, et ne se ferme
+  que par l'acceptation ou le refus. Le refus n'est pas une fermeture : il
+  emet `declined`, a l'application de deconnecter.
+
+  Elle ne sait ni s'authentifier ni appeler un serveur : l'application fournit
+  son propre client par `api`, ce qui laisse le composant hors de toute
+  plomberie d'authentification et permet de le monter dans n'importe quel
+  portail.
+
+  Les pages `/auth` sont sautees expres : l'accueil de premiere connexion y
+  vit deja, et deux ecrans bloquants se superposeraient.
+
+  ORIGINE AURIGA
+  --------------
+  Remplace `<arg-terms-gate>` (`argTermsGate.vue`). Les props et les
+  evenements gardent leur nom, `lang` est nouveau :
+
+  | Auriga     | Romulus    | Note                                       |
+  |------------|------------|--------------------------------------------|
+  | `api`      | `api`      | meme contrat : `get()` et `accept(id)`     |
+  | `enabled`  | `enabled`  | inchange                                   |
+  | -          | `lang`     | Auriga n'ecrivait qu'en anglais            |
+  | `@accepted`| `@accepted`| meme charge `{ version }`                  |
+  | `@declined`| `@declined`| inchange                                   |
+
+  Repris a l'occasion : les couleurs viennent des tokens et non des variables
+  Auriga (`--primary`, `--darkest`, `--white`), `--z-modal` remplace le `1000`
+  en dur, la carte est un vrai `role="dialog"` avec piege a focus, et le
+  bouton de refus n'est plus un `<button>` nu sans etat visible.
+-->
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRoute } from '#app'
+import { useRmDialog } from '../composables/useRmDialog'
+
+/** Une version publiee des conditions, telle que l'API la rend. */
+export interface RmTermsVersion {
+  id: string
+  version: string
+  title: string | null
+  url: string
+  summary: string | null
+  publishedAt: string
+}
+
+/** Ce que l'application doit savoir faire pour alimenter la porte. */
+export interface RmTermsApi {
+  get: () => Promise<{
+    current: RmTermsVersion | null
+    accepted: boolean
+    previouslyAccepted?: boolean
+  }>
+  accept: (termsVersionId: string) => Promise<unknown>
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** Client de l'application. Voir `RmTermsApi`. */
+    api: RmTermsApi
+    /** Ne consulter l'API qu'une fois le lecteur authentifie. */
+    enabled?: boolean
+    lang?: 'fr' | 'en'
+  }>(),
+  { enabled: true, lang: 'fr' },
+)
+
+const emit = defineEmits<{
+  accepted: [payload: { version: string }]
+  declined: []
+}>()
+
+const WORDS = {
+  fr: {
+    eyebrow: 'Conditions d’utilisation',
+    eyebrowUpdated: 'Conditions d’utilisation mises à jour',
+    title: 'Avant de continuer',
+    titleUpdated: 'Merci de relire les nouvelles conditions',
+    intro: 'Merci de lire et d’accepter nos conditions d’utilisation pour commencer à utiliser la plateforme.',
+    introUpdated: 'Nos conditions d’utilisation ont changé. Merci de lire et d’accepter la nouvelle version pour continuer à utiliser la plateforme.',
+    fallbackTitle: 'Conditions d’utilisation',
+    version: 'Version',
+    read: 'Lire le document complet',
+    check: 'J’ai lu et j’accepte les conditions d’utilisation.',
+    accept: 'Accepter et continuer',
+    saving: 'Enregistrement…',
+    decline: 'Refuser et se déconnecter',
+    stale: 'Une version plus récente vient d’être publiée. Rechargement…',
+    failed: 'Impossible d’enregistrer votre acceptation. Merci de réessayer.',
+  },
+  en: {
+    eyebrow: 'Terms of use',
+    eyebrowUpdated: 'Terms of use updated',
+    title: 'Before you continue',
+    titleUpdated: 'Please review the new terms',
+    intro: 'Please read and accept our terms of use to start using the platform.',
+    introUpdated: 'Our terms of use have changed. Please read and accept the new version to keep using the platform.',
+    fallbackTitle: 'Terms of use',
+    version: 'Version',
+    read: 'Read the full document',
+    check: 'I have read and I accept the terms of use.',
+    accept: 'Accept and continue',
+    saving: 'Saving…',
+    decline: 'Decline and sign out',
+    stale: 'A newer version was just published. Reloading…',
+    failed: 'Could not record your acceptance. Please try again.',
+  },
+} as const
+
+const t = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+/** Par onglet : une fois accepte, ne pas rappeler l'API a chaque navigation. */
+const CACHE_KEY = 'terms_accepted'
+
+/** Les pages d'authentification ont leurs propres ecrans bloquants. */
+const IGNORED_PREFIX = '/auth'
+
+const route = useRoute()
+const open = ref(false)
+const terms = ref<RmTermsVersion | null>(null)
+const updated = ref(false)
+const checked = ref(false)
+const saving = ref(false)
+const error = ref('')
+const surface = ref<HTMLElement | null>(null)
+
+// Le piege a focus et le retour du focus a la fermeture viennent de la, mais
+// pas `Escape` : une porte qui se ferme sur une touche ne bloque rien.
+useRmDialog({ open, surface, close: () => {} })
+
+const publishedLabel = computed(() => {
+  if (!terms.value?.publishedAt) return ''
+  const date = new Date(terms.value.publishedAt)
+  return Number.isNaN(date.getTime())
+    ? ''
+    : date.toLocaleDateString(props.lang === 'fr' ? 'fr-FR' : 'en-GB')
+})
+
+function cache(value: boolean) {
+  try {
+    if (value) sessionStorage.setItem(CACHE_KEY, '1')
+    else sessionStorage.removeItem(CACHE_KEY)
+  }
+  catch {
+    // navigation privee ou stockage coupe : on redemandera au prochain passage
+  }
+}
+
+function cached() {
+  try {
+    return !!sessionStorage.getItem(CACHE_KEY)
+  }
+  catch {
+    return false
+  }
+}
+
+async function check() {
+  if (!import.meta.client || !props.enabled || open.value || cached()) return
+  if (route.path.startsWith(IGNORED_PREFIX)) return
+  try {
+    const status = await props.api.get()
+    if (status?.accepted) {
+      cache(true)
+      return
+    }
+    // Rien de publie : personne n'est arrete.
+    if (!status?.current) return
+    terms.value = status.current
+    updated.value = !!status.previouslyAccepted
+    open.value = true
+  }
+  catch {
+    // Au mieux : une panne passagere de l'API ne doit pas enfermer le lecteur
+  }
+}
+
+async function accept() {
+  if (!terms.value || !checked.value) return
+  error.value = ''
+  saving.value = true
+  try {
+    await props.api.accept(terms.value.id)
+    cache(true)
+    open.value = false
+    emit('accepted', { version: terms.value.version })
+  }
+  catch (e: any) {
+    const code = e?.statusCode || e?.response?.status
+    if (code === 409) {
+      // Une version plus recente est arrivee pendant que la porte etait ouverte
+      error.value = t.value.stale
+      setTimeout(() => window.location.reload(), 1200)
+    }
+    else {
+      error.value = e?.data?.message || t.value.failed
+    }
+  }
+  finally {
+    saving.value = false
+  }
+}
+
+function decline() {
+  cache(false)
+  emit('declined')
+}
+
+// Rien ne doit defiler derriere une surface qui bloque l'application.
+let previousOverflow = ''
+watch(open, (value) => {
+  if (!import.meta.client) return
+  if (value) {
+    previousOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+  }
+  else {
+    document.body.style.overflow = previousOverflow
+  }
+})
+
+watch(() => props.enabled, check)
+watch(() => route.path, check)
+onMounted(check)
+onBeforeUnmount(() => {
+  if (import.meta.client && open.value) document.body.style.overflow = previousOverflow
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="open" class="rm-terms-gate">
+      <div
+        ref="surface"
+        class="rm-terms-gate__card"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="rm-terms-gate-title"
+      >
+        <span class="rm-terms-gate__eyebrow">
+          {{ updated ? t.eyebrowUpdated : t.eyebrow }}
+        </span>
+
+        <h2 id="rm-terms-gate-title" class="rm-terms-gate__title">
+          {{ updated ? t.titleUpdated : t.title }}
+        </h2>
+
+        <p class="rm-terms-gate__intro">
+          {{ updated ? t.introUpdated : t.intro }}
+        </p>
+
+        <div class="rm-terms-gate__doc">
+          <div class="rm-terms-gate__doc-head">
+            <strong>{{ terms?.title || t.fallbackTitle }}</strong>
+            <span class="rm-terms-gate__version">
+              {{ t.version }} {{ terms?.version
+              }}<template v-if="publishedLabel">, {{ publishedLabel }}</template>
+            </span>
+          </div>
+          <p v-if="terms?.summary" class="rm-terms-gate__summary">{{ terms.summary }}</p>
+          <a
+            v-if="terms?.url"
+            :href="terms.url"
+            target="_blank"
+            rel="noopener"
+            class="rm-terms-gate__link"
+          >
+            {{ t.read }}
+            <RmIcon name="ArrowSquareOut" :size="14" color="var(--color-primary)" />
+          </a>
+        </div>
+
+        <label class="rm-terms-gate__check">
+          <input v-model="checked" type="checkbox" :disabled="saving">
+          <span>{{ t.check }}</span>
+        </label>
+
+        <!-- `alert` et non `status` : l'echec arrete l'action en cours, il doit
+             couper ce que le lecteur d'ecran est en train de dire. -->
+        <p v-if="error" class="rm-terms-gate__error" role="alert">{{ error }}</p>
+
+        <RmButton
+          variant="primary"
+          block
+          :disabled="!checked || saving"
+          :loading="saving"
+          @click="accept"
+        >
+          {{ saving ? t.saving : t.accept }}
+        </RmButton>
+
+        <div class="rm-terms-gate__decline">
+          <RmButton variant="text" block :disabled="saving" @click="decline">
+            {{ t.decline }}
+          </RmButton>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.rm-terms-gate{align-items:center;backdrop-filter:blur(12px);background:rgba(0,0,0,.6);display:flex;inset:0;justify-content:center;padding:var(--space-24);position:fixed;z-index:var(--z-modal)}.rm-terms-gate__card{background:var(--bg-surface);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);font-family:var(--font-sans);max-height:calc(100vh - 48px);max-width:480px;overflow-y:auto;padding:var(--space-24);width:100%}.rm-terms-gate__eyebrow{color:var(--color-primary);display:inline-block;font-size:var(--font-13);font-weight:600;margin-bottom:var(--space-8)}.rm-terms-gate__title{color:var(--text-primary);font-size:var(--font-18);font-weight:700;margin:0 0 var(--space-8)}.rm-terms-gate__intro{color:var(--text-secondary);font-size:var(--font-14);line-height:1.6;margin:0 0 var(--space-20)}.rm-terms-gate__doc{border:1px solid var(--border-default);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-8);margin-bottom:var(--space-16);padding:var(--space-16)}.rm-terms-gate__doc-head{color:var(--text-primary);display:flex;flex-direction:column;font-size:var(--font-14);gap:var(--space-2)}.rm-terms-gate__version{color:var(--text-muted);font-size:var(--font-12);font-weight:400}.rm-terms-gate__summary{color:var(--text-secondary);font-size:var(--font-14);line-height:1.6;margin:0;white-space:pre-line}.rm-terms-gate__link{align-items:center;color:var(--color-primary);display:inline-flex;font-size:var(--font-14);font-weight:600;gap:var(--space-6);text-decoration:none}.rm-terms-gate__link:hover{text-decoration:underline}.rm-terms-gate__check{align-items:flex-start;color:var(--text-primary);cursor:pointer;display:flex;font-size:var(--font-14);gap:var(--space-8);line-height:1.5;margin-bottom:var(--space-16)}.rm-terms-gate__check input{accent-color:var(--color-primary);cursor:pointer;flex-shrink:0;height:18px;margin:2px 0 0;width:18px}.rm-terms-gate__decline{margin-top:var(--space-8)}.rm-terms-gate__error{color:var(--color-danger);font-size:var(--font-13);margin:0 0 var(--space-12)}
+</style>

package/dist/runtime/components/Toolbar.vue

@@ -74,5 +74,5 @@ function open(item: RmToolbarItem) {
 </template>
 
 <style scoped>
-.rm-toolbar{align-items:flex-start;border:1px solid var(--border-default);border-radius:var(--radius-md,8px);display:inline-flex;flex-direction:column;gap:4px;padding:4px}.rm-toolbar__item{align-items:center;background:none;border:none;border-radius:var(--radius-sm,4px);cursor:pointer;display:flex;gap:8px;justify-content:flex-end;padding:10px}.rm-toolbar__item:hover{background:var(--bg-hover)}.rm-toolbar__item:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.rm-toolbar__mark{display:flex;position:relative}.rm-toolbar__count{align-items:center;background:var(--color-danger);border-radius:var(--radius-pill,30px);color:var(--color-text-inverse);display:flex;font-size:var(--font-10,10px);font-weight:900;height:16px;justify-content:center;line-height:normal;position:absolute;right:-5px;top:-5px;width:16px}
+.rm-toolbar{align-items:flex-start;border:1px solid var(--border-default);border-radius:var(--radius-md,8px);display:inline-flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4)}.rm-toolbar__item{align-items:center;background:none;border:none;border-radius:var(--radius-sm,4px);cursor:pointer;display:flex;gap:var(--space-8);justify-content:flex-end;padding:var(--space-10)}.rm-toolbar__item:hover{background:var(--bg-hover)}.rm-toolbar__item:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.rm-toolbar__mark{display:flex;position:relative}.rm-toolbar__count{align-items:center;background:var(--color-danger);border-radius:var(--radius-pill,30px);color:var(--color-text-inverse);display:flex;font-size:var(--font-10,10px);font-weight:900;height:16px;justify-content:center;line-height:normal;position:absolute;right:-5px;top:-5px;width:16px}
 </style>

package/dist/runtime/components/ToolbarContent.vue

@@ -90,5 +90,5 @@ function labelOf(name: string) {
 </template>
 
 <style scoped>
-.rm-tbc{height:100%}.rm-tbc,.rm-tbc__rail{align-items:flex-start;display:flex}.rm-tbc__rail{align-self:stretch;background:var(--bg-surface-2);flex-direction:column;gap:16px;padding:24px 0;width:160px}.rm-tbc__close{align-items:center;background:var(--bg-surface-3);border:none;border-radius:var(--radius-md,8px);color:var(--text-secondary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);gap:6px;line-height:1.6;margin:0 16px;padding:6px 12px 6px 8px}.rm-tbc__close:hover{background:var(--bg-hover)}.rm-tbc__tab{align-items:center;align-self:stretch;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:500;gap:4px;justify-content:space-between;line-height:normal;padding:0 16px 4px}.rm-tbc__tab.is-active{border-bottom-color:var(--color-primary);color:var(--text-primary)}.rm-tbc__tab.is-active :deep(svg){color:var(--color-primary)}.rm-tbc__tab:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.rm-tbc__tab-left{align-items:center;display:flex;gap:4px}.rm-tbc__count{align-items:center;background:var(--color-danger);border-radius:var(--radius-pill,30px);color:var(--color-text-inverse);display:flex;font-size:var(--font-10,10px);font-weight:900;height:16px;justify-content:center;line-height:normal;width:16px}.rm-tbc__panel{align-items:flex-start;align-self:stretch;background:var(--bg-surface);border-left:1px solid var(--border-default);display:flex;flex:1;flex-direction:column;gap:24px;min-width:0;overflow-y:auto;padding:24px;scrollbar-width:thin}
+.rm-tbc{height:100%}.rm-tbc,.rm-tbc__rail{align-items:flex-start;display:flex}.rm-tbc__rail{align-self:stretch;background:var(--bg-surface-2);flex-direction:column;gap:var(--space-16);padding:var(--space-24) 0;width:160px}.rm-tbc__close{align-items:center;background:var(--bg-surface-3);border:none;border-radius:var(--radius-md,8px);color:var(--text-secondary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);gap:var(--space-6);line-height:1.6;margin:0 16px;padding:var(--space-6) var(--space-12) var(--space-6) var(--space-8)}.rm-tbc__close:hover{background:var(--bg-hover)}.rm-tbc__tab{align-items:center;align-self:stretch;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:500;gap:var(--space-4);justify-content:space-between;line-height:normal;padding:0 var(--space-16) var(--space-4)}.rm-tbc__tab.is-active{border-bottom-color:var(--color-primary);color:var(--text-primary)}.rm-tbc__tab.is-active :deep(svg){color:var(--color-primary)}.rm-tbc__tab:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.rm-tbc__tab-left{align-items:center;display:flex;gap:var(--space-4)}.rm-tbc__count{align-items:center;background:var(--color-danger);border-radius:var(--radius-pill,30px);color:var(--color-text-inverse);display:flex;font-size:var(--font-10,10px);font-weight:900;height:16px;justify-content:center;line-height:normal;width:16px}.rm-tbc__panel{align-items:flex-start;align-self:stretch;background:var(--bg-surface);border-left:1px solid var(--border-default);display:flex;flex:1;flex-direction:column;gap:var(--space-24);min-width:0;overflow-y:auto;padding:var(--space-24);scrollbar-width:thin}
 </style>

package/dist/runtime/components/ToolbarSources.vue

@@ -66,5 +66,5 @@ const t = computed(() => WORDS[props.lang])
 </template>
 
 <style scoped>
-.rm-tbs{align-self:stretch;display:flex;flex-direction:column;gap:16px}.rm-tbs__title{color:var(--text-primary);font-family:var(--font-serif);font-size:var(--font-18,18px);font-weight:700;margin:0}.rm-tbs__legal{color:var(--text-secondary);display:flex;flex-direction:column;font-size:var(--font-12,12px);gap:8px;line-height:1.6}.rm-tbs__legal p{margin:0}.rm-tbs__link{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px}.rm-tbs__list{align-self:stretch;display:flex;flex-direction:column;gap:12px}
+.rm-tbs{align-self:stretch;display:flex;flex-direction:column;gap:var(--space-16)}.rm-tbs__title{color:var(--text-primary);font-family:var(--font-serif);font-size:var(--font-18,18px);font-weight:700;margin:0}.rm-tbs__legal{color:var(--text-secondary);display:flex;flex-direction:column;font-size:var(--font-12,12px);gap:var(--space-8);line-height:1.6}.rm-tbs__legal p{margin:0}.rm-tbs__link{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px}.rm-tbs__list{align-self:stretch;display:flex;flex-direction:column;gap:var(--space-12)}
 </style>

package/dist/runtime/components/Tooltip.vue

@@ -63,5 +63,5 @@ const id = `rm-tooltip-${useId()}`
 </template>
 
 <style scoped>
-.rm-tooltip{display:inline-flex;position:relative;width:-moz-fit-content;width:fit-content}.rm-tooltip__bubble{background:var(--r-color-gray-900);border-radius:var(--radius-sm,4px);color:var(--r-color-white);display:-webkit-box;font-size:var(--font-13,13px);font-weight:400;-webkit-line-clamp:4;line-height:1.6;max-width:220px;padding:4px 12px;position:absolute;text-align:left;white-space:pre-line;width:-moz-max-content;width:max-content;z-index:60;-webkit-box-orient:vertical;opacity:0;overflow:hidden;transition:opacity var(--duration-fast,.15s) var(--ease-out,ease);visibility:hidden}.rm-tooltip__bubble--full{display:block;overflow:visible}.rm-tooltip:focus-within .rm-tooltip__bubble,.rm-tooltip:hover .rm-tooltip__bubble{opacity:1;visibility:visible}.rm-tooltip__bubble--top{bottom:calc(100% + 6px);left:50%;transform:translateX(-50%)}.rm-tooltip__bubble--bottom{left:50%;top:calc(100% + 6px);transform:translateX(-50%)}.rm-tooltip__bubble--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.rm-tooltip__bubble--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}
+.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%)}
 </style>

package/dist/runtime/components/ViewPill.vue

@@ -209,5 +209,5 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.rm-vpill{position:relative}.rm-vpill,.rm-vpill__pill{align-items:center;display:flex}.rm-vpill__pill{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-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h,32px);padding:0 14px;white-space:nowrap}.rm-vpill__pill:hover{background:var(--bg-surface-3)}.rm-vpill__pill.is-open{border-color:var(--color-primary);color:var(--color-primary)}.rm-vpill__icon{color:currentColor;flex-shrink:0}.rm-vpill__key{color:var(--text-muted);font-weight:var(--weight-normal)}.rm-vpill__value{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__pill.has-unsaved{border-color:var(--color-warning)}.rm-vpill__dot{border-radius:50%;flex-shrink:0;height:8px;width:8px}.rm-vpill__dot--applied{animation:rm-vpill-pulse-applied 2s ease-out infinite;background:var(--color-success)}.rm-vpill__dot--unsaved{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning)}@keyframes rm-vpill-pulse{0%{box-shadow:0 0 0 0 rgba(217,119,6,.6)}70%{box-shadow:0 0 0 6px rgba(217,119,6,0)}to{box-shadow:0 0 0 0 rgba(217,119,6,0)}}@keyframes rm-vpill-pulse-applied{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}to{box-shadow:0 0 0 0 rgba(22,163,74,0)}}@media (prefers-reduced-motion:reduce){.rm-vpill__dot,.rm-vpill__unsaved-dot:before{animation:none}}.rm-vpill__caret{color:var(--text-muted);flex-shrink:0}.rm-vpill__menu{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);box-sizing:border-box;font-family:var(--font-sans);left:0;max-width:460px;min-width:320px;padding:6px;position:absolute;top:calc(100% + 6px);z-index:60}.rm-vpill__unsaved{align-items:center;background:var(--color-warning-bg);border-radius:var(--radius-md);color:var(--color-warning);display:flex;font-size:var(--font-12);gap:8px;padding:8px 12px}.rm-vpill__unsaved-dot{align-items:center;display:inline-flex;flex-shrink:0;height:14px;justify-content:center;width:14px}.rm-vpill__unsaved-dot:before{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning);border-radius:50%;content:"";height:7px;width:7px}.rm-vpill__unsaved-label{flex:1;font-weight:var(--weight-semibold)}.rm-vpill__unsaved-cta{background:transparent;border:none;color:var(--color-warning);cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--weight-bold);padding:0;text-decoration:underline;text-underline-offset:2px}.rm-vpill__unsaved-cta:hover{color:var(--text-primary)}.rm-vpill__divider{background:var(--border-soft);height:1px;margin:6px -6px}.rm-vpill__section{color:var(--text-muted);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.08em;margin:0;padding:8px 12px 4px 34px;text-align:left;text-transform:uppercase}.rm-vpill__item{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-13);gap:8px;padding:8px 12px;text-align:left;transition:background .1s,color .1s;width:100%}.rm-vpill__item:hover{background:var(--bg-hover);color:var(--text-primary)}.rm-vpill__item.is-active{background:var(--bg-hover);color:var(--color-secondary);font-weight:var(--weight-semibold)}.rm-vpill__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__item--view .rm-vpill__check{color:var(--color-secondary);flex-shrink:0;opacity:0;transition:opacity .1s}.rm-vpill__item--view.is-active .rm-vpill__check{opacity:1}
+.rm-vpill{position:relative}.rm-vpill,.rm-vpill__pill{align-items:center;display:flex}.rm-vpill__pill{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-14);font-weight:var(--weight-medium);gap:var(--space-6);height:var(--rm-fbar-field-h,32px);padding:0 14px;white-space:nowrap}.rm-vpill__pill:hover{background:var(--bg-surface-3)}.rm-vpill__pill.is-open{border-color:var(--color-primary);color:var(--color-primary)}.rm-vpill__icon{color:currentColor;flex-shrink:0}.rm-vpill__key{color:var(--text-muted);font-weight:var(--weight-normal)}.rm-vpill__value{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__pill.has-unsaved{border-color:var(--color-warning)}.rm-vpill__dot{border-radius:50%;flex-shrink:0;height:8px;width:8px}.rm-vpill__dot--applied{animation:rm-vpill-pulse-applied 2s ease-out infinite;background:var(--color-success)}.rm-vpill__dot--unsaved{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning)}@keyframes rm-vpill-pulse{0%{box-shadow:0 0 0 0 rgba(217,119,6,.6)}70%{box-shadow:0 0 0 6px rgba(217,119,6,0)}to{box-shadow:0 0 0 0 rgba(217,119,6,0)}}@keyframes rm-vpill-pulse-applied{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}to{box-shadow:0 0 0 0 rgba(22,163,74,0)}}@media (prefers-reduced-motion:reduce){.rm-vpill__dot,.rm-vpill__unsaved-dot:before{animation:none}}.rm-vpill__caret{color:var(--text-muted);flex-shrink:0}.rm-vpill__menu{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);box-sizing:border-box;font-family:var(--font-sans);left:0;max-width:460px;min-width:320px;padding:var(--space-6);position:absolute;top:calc(100% + 6px);z-index:60}.rm-vpill__unsaved{align-items:center;background:var(--color-warning-bg);border-radius:var(--radius-md);color:var(--color-warning);display:flex;font-size:var(--font-12);gap:var(--space-8);padding:var(--space-8) var(--space-12)}.rm-vpill__unsaved-dot{align-items:center;display:inline-flex;flex-shrink:0;height:14px;justify-content:center;width:14px}.rm-vpill__unsaved-dot:before{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning);border-radius:50%;content:"";height:7px;width:7px}.rm-vpill__unsaved-label{flex:1;font-weight:var(--weight-semibold)}.rm-vpill__unsaved-cta{background:transparent;border:none;color:var(--color-warning);cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--weight-bold);padding:0;text-decoration:underline;text-underline-offset:2px}.rm-vpill__unsaved-cta:hover{color:var(--text-primary)}.rm-vpill__divider{background:var(--border-soft);height:1px;margin:6px -6px}.rm-vpill__section{color:var(--text-muted);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.08em;margin:0;padding:var(--space-8) var(--space-12) var(--space-4) 34px;text-align:left;text-transform:uppercase}.rm-vpill__item{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);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;transition:background .1s,color .1s;width:100%}.rm-vpill__item:hover{background:var(--bg-hover);color:var(--text-primary)}.rm-vpill__item.is-active{background:var(--bg-hover);color:var(--color-secondary);font-weight:var(--weight-semibold)}.rm-vpill__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__item--view .rm-vpill__check{color:var(--color-secondary);flex-shrink:0;opacity:0;transition:opacity .1s}.rm-vpill__item--view.is-active .rm-vpill__check{opacity:1}
 </style>

package/dist/runtime/components/ViewSelect.vue

@@ -77,5 +77,5 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.rm-vsel{position:relative}.rm-vsel,.rm-vsel__pill{align-items:center;display:flex}.rm-vsel__pill{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-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h,32px);padding:0 14px;white-space:nowrap}.rm-vsel__pill:hover{background:var(--bg-surface-3)}.rm-vsel__pill.is-open{border-color:var(--color-primary);color:var(--color-primary)}.rm-vsel__label{color:var(--text-muted);font-weight:var(--weight-normal)}.rm-vsel__caret{transition:transform var(--duration-fast)}.rm-vsel__pill.is-open .rm-vsel__caret{transform:rotate(180deg)}.rm-vsel__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;gap:2px;left:0;min-width:180px;padding:6px;position:absolute;top:calc(100% + 6px);z-index:120}.rm-vsel__option{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);gap:8px;padding:8px 10px;text-align:left}.rm-vsel__option:hover{background:var(--bg-surface-3)}.rm-vsel__option.is-active{color:var(--color-primary);font-weight:var(--weight-semibold)}
+.rm-vsel{position:relative}.rm-vsel,.rm-vsel__pill{align-items:center;display:flex}.rm-vsel__pill{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-14);font-weight:var(--weight-medium);gap:var(--space-6);height:var(--rm-fbar-field-h,32px);padding:0 14px;white-space:nowrap}.rm-vsel__pill:hover{background:var(--bg-surface-3)}.rm-vsel__pill.is-open{border-color:var(--color-primary);color:var(--color-primary)}.rm-vsel__label{color:var(--text-muted);font-weight:var(--weight-normal)}.rm-vsel__caret{transition:transform var(--duration-fast)}.rm-vsel__pill.is-open .rm-vsel__caret{transform:rotate(180deg)}.rm-vsel__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;gap:var(--space-2);left:0;min-width:180px;padding:var(--space-6);position:absolute;top:calc(100% + 6px);z-index:120}.rm-vsel__option{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);gap:var(--space-8);padding:var(--space-8) var(--space-10);text-align:left}.rm-vsel__option:hover{background:var(--bg-surface-3)}.rm-vsel__option.is-active{color:var(--color-primary);font-weight:var(--weight-semibold)}
 </style>

package/package.json

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