@tekkare/romulus 0.1.86 → 0.1.88

package/dist/module.json

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

package/dist/runtime/components/FileRow.vue

@@ -12,6 +12,12 @@
   et `ph-file-csv` ne se confondent pas en noir et blanc. Elle vient des tokens
   du theme et non d'un hexadecimal en dur, pour suivre le mode nuit.
 
+  Elle passe par la prop `color` de RmIcon et non par une classe : le style
+  scope de ce fichier n'atteint pas le `<svg>` que RmIcon monte derriere son
+  `<ClientOnly>`, et l'icone retombait sur la couleur du texte. Les classes
+  posees sur RmIcon ne servent donc qu'a la mise en place, jamais a la
+  couleur.
+
   Le composant ne navigue pas et n'ouvre rien lui-meme : il emet `select`, la
   page decide (un apercu dans un tiroir, un onglet, un telechargement).
 -->
@@ -46,18 +52,18 @@ const emit = defineEmits<{ select: [] }>()
  * neutre dit « document » sans se tromper, ce qu'une icone approchante ne
  * ferait pas.
  */
-const FORMATS: { match: string[]; icon: string; tone: string }[] = [
-  { match: ['pdf'], icon: 'FilePdf', tone: 'pdf' },
-  { match: ['csv'], icon: 'FileCsv', tone: 'csv' },
-  { match: ['sheet', 'excel', 'xls'], icon: 'FileXls', tone: 'sheet' },
-  { match: ['word', 'doc'], icon: 'FileDoc', tone: 'doc' },
+const FORMATS: { match: string[]; icon: string; color: string }[] = [
+  { match: ['pdf'], icon: 'FilePdf', color: 'var(--color-danger)' },
+  { match: ['csv'], icon: 'FileCsv', color: 'var(--color-info)' },
+  { match: ['sheet', 'excel', 'xls'], icon: 'FileXls', color: 'var(--color-success)' },
+  { match: ['word', 'doc'], icon: 'FileDoc', color: 'var(--color-primary)' },
 ]
 
 const format = computed(() => {
   const value = props.format.toLowerCase()
   return (
     FORMATS.find(entry => entry.match.some(word => value.includes(word)))
-    ?? { icon: 'FileText', tone: 'plain' }
+    ?? { icon: 'FileText', color: 'var(--text-muted)' }
   )
 })
 
@@ -70,23 +76,17 @@ const ACTION_ICONS: Record<string, string> = {
 
 <template>
   <button type="button" class="rm-file-row" @click="emit('select')">
-    <RmIcon
-      class="rm-file-row__icon"
-      :class="`rm-file-row__icon--${format.tone}`"
-      :name="format.icon"
-      :size="16"
-    />
+    <span class="rm-file-row__icon">
+      <RmIcon :name="format.icon" :size="16" :color="format.color" />
+    </span>
     <span class="rm-file-row__name">{{ name }}</span>
     <span v-if="size" class="rm-file-row__size">{{ size }}</span>
-    <RmIcon
-      v-if="action !== 'none'"
-      class="rm-file-row__action"
-      :name="ACTION_ICONS[action]"
-      :size="14"
-    />
+    <span v-if="action !== 'none'" class="rm-file-row__action">
+      <RmIcon :name="ACTION_ICONS[action]" :size="14" color="var(--text-muted)" />
+    </span>
   </button>
 </template>
 
 <style scoped>
-.rm-file-row{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-13);gap:8px;line-height:1.4;padding:8px;text-align:left;transition:background-color var(--duration-fast) linear;width:100%}.rm-file-row:hover{background:var(--bg-surface-2)}.rm-file-row__icon{color:var(--text-muted);flex:none}.rm-file-row__icon--pdf{color:var(--color-danger)}.rm-file-row__icon--csv{color:var(--color-info)}.rm-file-row__icon--sheet{color:var(--color-success)}.rm-file-row__icon--doc{color:var(--color-primary)}.rm-file-row__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-file-row__size{font-size:var(--font-12)}.rm-file-row__action,.rm-file-row__size{color:var(--text-muted);flex:none}
+.rm-file-row{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-13);gap:8px;line-height:1.4;padding:8px;text-align:left;transition:background-color var(--duration-fast) linear;width:100%}.rm-file-row:hover{background:var(--bg-surface-2)}.rm-file-row__action,.rm-file-row__icon{display:inline-flex;flex:none}.rm-file-row__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-file-row__size{color:var(--text-muted);flex:none;font-size:var(--font-12)}
 </style>

package/dist/runtime/components/Notes.vue

@@ -0,0 +1,380 @@
+<!--
+  RmNotes - le panneau « Notes », la documentation d'un ecran en un seul endroit.
+
+  Une app metier accumulait un onglet par genre d'explication : Infos,
+  Metrics, Tips, Methodologie. Quatre tuiles au rail pour quatre textes courts,
+  et le lecteur devait deviner sous laquelle sa reponse se trouvait — la
+  definition d'un indicateur pouvait aussi bien tenir dans « Metrics » que dans
+  « Infos ». Le panneau les rassemble : une seule tuile, une liste de notes,
+  et le genre devient une categorie qu'on filtre au lieu d'un onglet qu'on
+  cherche.
+
+  Le composant ne connait pas l'ecran : l'appelant lui donne les notes deja
+  triees pour la page ouverte, deja traduites. La recherche et les pastilles
+  travaillent sur cette liste en memoire, sans aller-retour.
+
+  Le temps de lecture est calcule a partir du texte des notes, jamais pose a la
+  main : une note qu'on rallonge annoncerait sinon une duree fausse. La date,
+  elle, vient de l'appelant — c'est une date de revision editoriale, que rien
+  dans le contenu ne permet de deviner.
+-->
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+export type RmNoteTone = 'primary' | 'info' | 'warning' | 'success' | 'neutral'
+
+export type RmNoteBlock =
+  /** Paragraphe. `**gras**` est reconnu, rien d'autre. */
+  | { type: 'text', text: string }
+  /** Liste a puces. Chaque entree accepte le meme gras. */
+  | { type: 'list', items: string[] }
+  /** Liste de definitions : le terme en gras, sa definition a la suite. */
+  | { type: 'terms', items: { term: string, def?: string }[] }
+  /** Encadre : un avertissement, une limite, une precaution de lecture. */
+  | { type: 'callout', text: string, tone?: 'info' | 'warning', title?: string }
+  /** Exemple, rendu en fonte a chasse fixe sur fond teinte. */
+  | { type: 'example', text: string }
+  /** Renvoi vers un ecran de l'app. Le clic remonte en `navigate`. */
+  | { type: 'link', to: string, label: string }
+
+export interface RmNoteSection {
+  /** Intitule de section, en capitales dans la note depliee. */
+  title?: string
+  blocks: RmNoteBlock[]
+}
+
+export interface RmNote {
+  id: string
+  title: string
+  /** Accroche lue liste repliee : ce que la note repond, en une phrase. */
+  summary: string
+  /** Cle de categorie, a rapprocher de `categories`. */
+  category: string
+  /** Date ISO de derniere revision editoriale. */
+  updated?: string
+  /** Icone Phosphor. Par defaut celle de la categorie. */
+  icon?: string
+  /** Teinte de la pastille. Par defaut celle de la categorie. */
+  tone?: RmNoteTone
+  sections: RmNoteSection[]
+}
+
+export interface RmNoteCategory {
+  key: string
+  label: string
+  icon?: string
+  tone?: RmNoteTone
+}
+
+const props = withDefaults(defineProps<{
+  /** Notes de l'ecran ouvert, deja traduites et ordonnees. */
+  notes: RmNote[]
+  /** Categories connues, dans l'ordre des pastilles. Celles sans note sont masquees. */
+  categories?: RmNoteCategory[]
+  title?: string
+  /** Phrase d'introduction : qui ecrit ces notes, et ce qu'elles couvrent. */
+  description?: string
+  /** Pastille d'auteur en haut a droite (« TEKKARE »). Vide : pas de pastille. */
+  badge?: string
+  lang?: 'fr' | 'en'
+}>(), {
+  categories: () => [],
+  title: 'Notes',
+  description: undefined,
+  badge: undefined,
+  lang: 'fr',
+})
+
+const emit = defineEmits<{ navigate: [to: string] }>()
+
+const WORDS = {
+  fr: {
+    all: 'Toutes',
+    search: 'Rechercher dans les notes...',
+    updated: 'MAJ',
+    reading: 'min de lecture',
+    expand: 'Déplier la note',
+    collapse: 'Replier la note',
+    emptyTitle: 'Aucune note pour cet écran',
+    emptyText: "Les notes sont rattachées à la page affichée : changez d'écran pour en voir d'autres.",
+    noMatch: 'Aucune note ne correspond',
+    noMatchText: 'Essayez un autre terme, ou revenez à « Toutes ».',
+  },
+  en: {
+    all: 'All',
+    search: 'Search the notes...',
+    updated: 'Updated',
+    reading: 'min read',
+    expand: 'Expand note',
+    collapse: 'Collapse note',
+    emptyTitle: 'No note for this screen',
+    emptyText: 'Notes belong to the page on display: switch screens to see others.',
+    noMatch: 'No note matches',
+    noMatchText: 'Try another term, or go back to "All".',
+  },
+} as const
+
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const search = ref('')
+const category = ref('all')
+const open = ref<string[]>([])
+
+function toggle(id: string) {
+  open.value = open.value.includes(id)
+    ? open.value.filter(item => item !== id)
+    : [...open.value, id]
+}
+
+const descriptor = computed(() => {
+  const map = new Map<string, RmNoteCategory>()
+  for (const item of props.categories) map.set(item.key, item)
+  return map
+})
+
+/** Tout le texte d'une note, pour la recherche et le temps de lecture. */
+function plainText(note: RmNote) {
+  const parts = [note.title, note.summary]
+  for (const section of note.sections) {
+    if (section.title) parts.push(section.title)
+    for (const block of section.blocks) {
+      if (block.type === 'text' || block.type === 'callout' || block.type === 'example') parts.push(block.text)
+      else if (block.type === 'list') parts.push(block.items.join(' '))
+      else if (block.type === 'terms') parts.push(block.items.map(item => `${item.term} ${item.def ?? ''}`).join(' '))
+      else if (block.type === 'link') parts.push(block.label)
+    }
+  }
+  return parts.join(' ')
+}
+
+/** 200 mots par minute, une minute au minimum : « 0 min » ne veut rien dire. */
+function readingTime(note: RmNote) {
+  const words = plainText(note).trim().split(/\s+/).filter(Boolean).length
+  return Math.max(1, Math.round(words / 200))
+}
+
+const shown = computed(() => {
+  const needle = search.value.trim().toLowerCase()
+  return props.notes.filter((note) => {
+    if (category.value !== 'all' && note.category !== category.value) return false
+    if (!needle) return true
+    return plainText(note).toLowerCase().includes(needle)
+  })
+})
+
+/** Pastilles : « Toutes » puis les seules categories qui ont une note ici. */
+const chips = computed(() => {
+  const counts = new Map<string, number>()
+  for (const note of props.notes) counts.set(note.category, (counts.get(note.category) ?? 0) + 1)
+
+  const ordered = props.categories.length
+    ? props.categories.filter(item => counts.has(item.key))
+    : [...counts.keys()].map(key => ({ key, label: key } as RmNoteCategory))
+
+  return [
+    { key: 'all', label: T.value.all, icon: undefined, count: props.notes.length },
+    ...ordered.map(item => ({ key: item.key, label: item.label, icon: item.icon, count: counts.get(item.key) ?? 0 })),
+  ]
+})
+
+function noteIcon(note: RmNote) {
+  return note.icon ?? descriptor.value.get(note.category)?.icon ?? 'Note'
+}
+
+function noteTone(note: RmNote): RmNoteTone {
+  return note.tone ?? descriptor.value.get(note.category)?.tone ?? 'primary'
+}
+
+function categoryLabel(note: RmNote) {
+  return descriptor.value.get(note.category)?.label ?? note.category
+}
+
+function updatedLabel(note: RmNote) {
+  const time = note.updated ? new Date(note.updated).getTime() : Number.NaN
+  if (!Number.isFinite(time) || time <= 0) return ''
+  return new Date(time).toLocaleDateString(props.lang === 'fr' ? 'fr-FR' : 'en-GB', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  })
+}
+
+/**
+ * Le seul balisage reconnu dans une note est `**gras**`. Le texte est decoupe
+ * en morceaux rendus par `v-for` plutot que par `v-html` : les notes viennent
+ * du code de l'app aujourd'hui, d'un CMS demain, et un panneau qui interprete
+ * du HTML est un panneau qui l'executera le jour ou la source change.
+ */
+function inline(text: string) {
+  return text.split(/(\*\*[^*]+\*\*)/g)
+    .filter(Boolean)
+    .map((chunk, index) => ({
+      key: index,
+      bold: chunk.startsWith('**') && chunk.endsWith('**'),
+      text: chunk.startsWith('**') && chunk.endsWith('**') ? chunk.slice(2, -2) : chunk,
+    }))
+}
+
+function onLink(to: string) {
+  emit('navigate', to)
+}
+</script>
+
+<template>
+  <div class="rm-notes">
+    <div class="rm-notes__head">
+      <h2 v-if="title" class="rm-notes__title">{{ title }}</h2>
+      <span v-if="badge" class="rm-notes__badge">
+        <RmIcon name="ShieldCheck" :size="14" weight="fill" />
+        {{ badge }}
+      </span>
+    </div>
+
+    <p v-if="description" class="rm-notes__desc">{{ description }}</p>
+
+    <label class="rm-notes__search">
+      <RmIcon name="MagnifyingGlass" :size="14" />
+      <input v-model="search" type="text" :placeholder="T.search">
+    </label>
+
+    <div class="rm-notes__chips" role="group">
+      <button
+        v-for="chip in chips"
+        :key="chip.key"
+        type="button"
+        class="rm-notes__chip"
+        :class="{ 'rm-notes__chip--on': category === chip.key }"
+        :aria-pressed="category === chip.key"
+        @click="category = chip.key"
+      >
+        <RmIcon v-if="chip.icon" :name="chip.icon" :size="13" />
+        {{ chip.label }}
+        <span v-if="chip.key === 'all'" class="rm-notes__chip-count">{{ chip.count }}</span>
+      </button>
+    </div>
+
+    <RmEmptyState
+      v-if="!notes.length"
+      framed
+      tone="primary"
+      icon="Notebook"
+      :title="T.emptyTitle"
+      :text="T.emptyText"
+    />
+
+    <RmEmptyState
+      v-else-if="!shown.length"
+      framed
+      icon="MagnifyingGlass"
+      :title="T.noMatch"
+      :text="T.noMatchText"
+    />
+
+    <div v-else class="rm-notes__list">
+      <article
+        v-for="note in shown"
+        :key="note.id"
+        class="rm-notes__note"
+        :class="{ 'rm-notes__note--open': open.includes(note.id) }"
+      >
+        <header class="rm-notes__note-head">
+          <button
+            type="button"
+            class="rm-notes__note-id"
+            :aria-expanded="open.includes(note.id)"
+            :aria-controls="`rm-note-${note.id}`"
+            @click="toggle(note.id)"
+          >
+            <span class="rm-notes__note-icon" :class="`rm-notes__note-icon--${noteTone(note)}`">
+              <RmIcon :name="noteIcon(note)" :size="18" weight="fill" />
+            </span>
+            <span class="rm-notes__note-text">
+              <span class="rm-notes__note-title">{{ note.title }}</span>
+              <span class="rm-notes__note-meta">
+                <span class="rm-notes__tag" :class="`rm-notes__tag--${noteTone(note)}`">
+                  {{ categoryLabel(note) }}
+                </span>
+                <span v-if="updatedLabel(note)" class="rm-notes__cell">
+                  <RmIcon name="Clock" :size="13" />
+                  {{ T.updated }} {{ updatedLabel(note) }}
+                </span>
+                <span class="rm-notes__cell">
+                  <RmIcon name="BookOpenText" :size="13" />
+                  {{ readingTime(note) }} {{ T.reading }}
+                </span>
+              </span>
+            </span>
+          </button>
+
+          <button
+            type="button"
+            class="rm-notes__caret"
+            :aria-expanded="open.includes(note.id)"
+            :aria-controls="`rm-note-${note.id}`"
+            :aria-label="open.includes(note.id) ? T.collapse : T.expand"
+            :title="open.includes(note.id) ? T.collapse : T.expand"
+            @click="toggle(note.id)"
+          >
+            <RmIcon :name="open.includes(note.id) ? 'CaretUp' : 'CaretDown'" :size="14" />
+          </button>
+        </header>
+
+        <p class="rm-notes__summary">{{ note.summary }}</p>
+
+        <div v-if="open.includes(note.id)" :id="`rm-note-${note.id}`" class="rm-notes__body">
+          <section v-for="(section, index) in note.sections" :key="index" class="rm-notes__section">
+            <p v-if="section.title" class="rm-notes__eyebrow">{{ section.title }}</p>
+
+            <template v-for="(block, blockIndex) in section.blocks" :key="blockIndex">
+              <p v-if="block.type === 'text'" class="rm-notes__p">
+                <span v-for="part in inline(block.text)" :key="part.key">
+                  <b v-if="part.bold">{{ part.text }}</b>
+                  <template v-else>{{ part.text }}</template>
+                </span>
+              </p>
+
+              <ul v-else-if="block.type === 'list'" class="rm-notes__ul">
+                <li v-for="(item, itemIndex) in block.items" :key="itemIndex">
+                  <span v-for="part in inline(item)" :key="part.key">
+                    <b v-if="part.bold">{{ part.text }}</b>
+                    <template v-else>{{ part.text }}</template>
+                  </span>
+                </li>
+              </ul>
+
+              <ul v-else-if="block.type === 'terms'" class="rm-notes__ul rm-notes__ul--terms">
+                <li v-for="(item, itemIndex) in block.items" :key="itemIndex">
+                  <b>{{ item.term }}</b><template v-if="item.def"> : {{ item.def }}</template>
+                </li>
+              </ul>
+
+              <RmCallout v-else-if="block.type === 'callout'" :tone="block.tone ?? 'info'">
+                <b v-if="block.title">{{ block.title }} </b>
+                <span v-for="part in inline(block.text)" :key="part.key">
+                  <b v-if="part.bold">{{ part.text }}</b>
+                  <template v-else>{{ part.text }}</template>
+                </span>
+              </RmCallout>
+
+              <p v-else-if="block.type === 'example'" class="rm-notes__example">{{ block.text }}</p>
+
+              <a
+                v-else-if="block.type === 'link'"
+                class="rm-notes__link"
+                :href="block.to"
+                @click.prevent="onLink(block.to)"
+              >
+                <RmIcon name="ArrowUpRight" :size="14" />
+                <span>{{ block.label }}</span>
+              </a>
+            </template>
+          </section>
+        </div>
+      </article>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-notes{align-self:stretch;flex-direction:column;font-family:var(--font-sans)}.rm-notes,.rm-notes__head{display:flex;gap:var(--space-12)}.rm-notes__head{align-items:center;justify-content:space-between}.rm-notes__title{color:var(--text-primary);font-family:var(--font-serif);font-size:var(--font-22);font-weight:var(--weight-bold);margin:0}.rm-notes__badge{align-items:center;background:var(--bg-hover);border-radius:var(--radius-pill);color:var(--color-secondary);display:inline-flex;font-size:var(--font-10);font-weight:var(--weight-bold);gap:var(--space-4);letter-spacing:.06em;padding:4px 10px;text-transform:uppercase}.rm-notes__desc{color:var(--text-secondary);font-size:var(--font-13);line-height:1.5;margin:0}.rm-notes__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-muted);display:flex;gap:var(--space-8);padding:var(--space-8) var(--space-12)}.rm-notes__search:focus-within{border-color:var(--color-secondary);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.1)}.rm-notes__search input{background:none;border:none;color:var(--text-primary);flex:1;font-family:inherit;font-size:var(--font-13);min-width:0;outline:none}.rm-notes__search input::-moz-placeholder{color:var(--text-muted)}.rm-notes__search input::placeholder{color:var(--text-muted)}.rm-notes__chips{display:flex;flex-wrap:wrap;gap:var(--space-6)}.rm-notes__chip{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-12);gap:var(--space-4);padding:5px 10px}.rm-notes__chip:hover{background:var(--bg-surface-3)}.rm-notes__chip--on{background:var(--bg-hover);border-color:var(--color-violet-pale);color:var(--color-primary);font-weight:var(--weight-semibold)}.rm-notes__chip-count{font-variant-numeric:tabular-nums;opacity:.8}.rm-notes__list,.rm-notes__note{display:flex;flex-direction:column;gap:var(--space-8)}.rm-notes__note{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--space-16);transition:border-color var(--duration-fast) var(--ease-out)}.rm-notes__note:hover{border-color:var(--color-violet-pale)}.rm-notes__note--open{border-color:var(--color-secondary)}.rm-notes__note-head,.rm-notes__note-id{align-items:flex-start;display:flex;gap:var(--space-12)}.rm-notes__note-id{background:none;border:none;cursor:pointer;flex:1;font-family:inherit;min-width:0;padding:0;text-align:left}.rm-notes__note-icon{align-items:center;border-radius:var(--radius-lg);display:flex;flex-shrink:0;height:36px;justify-content:center;width:36px}.rm-notes__note-icon--primary{background:var(--bg-hover);color:var(--color-secondary)}.rm-notes__note-icon--info{background:var(--color-info-bg);color:var(--color-info)}.rm-notes__note-icon--warning{background:var(--color-warning-bg);color:var(--color-warning)}.rm-notes__note-icon--success{background:var(--color-success-bg);color:var(--color-success)}.rm-notes__note-icon--neutral{background:var(--bg-surface-2);color:var(--text-secondary)}.rm-notes__note-text{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}.rm-notes__note-title{color:var(--text-primary);font-family:var(--font-serif);font-size:var(--font-16);font-weight:var(--weight-bold)}.rm-notes__note-meta{align-items:center;color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:var(--font-11);gap:var(--space-8)}.rm-notes__cell{align-items:center;display:inline-flex;gap:var(--space-4)}.rm-notes__tag{border-radius:var(--radius-pill);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.04em;padding:2px var(--space-6);text-transform:uppercase}.rm-notes__tag--primary{background:var(--bg-hover);color:var(--color-secondary)}.rm-notes__tag--info{background:var(--color-info-bg);color:var(--color-info)}.rm-notes__tag--warning{background:var(--color-warning-bg);color:var(--color-warning)}.rm-notes__tag--success{background:var(--color-success-bg);color:var(--color-success)}.rm-notes__tag--neutral{background:var(--bg-surface-2);color:var(--text-secondary)}.rm-notes__caret{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;flex-shrink:0;height:28px;justify-content:center;width:28px}.rm-notes__caret:hover{background:var(--bg-surface-3)}.rm-notes__summary{color:var(--text-secondary);font-size:var(--font-13);line-height:1.6;margin:0}.rm-notes__body{border-top:1px solid var(--border-soft);display:flex;flex-direction:column;gap:var(--space-16);padding-top:var(--space-12)}.rm-notes__section{display:flex;flex-direction:column;gap:var(--space-8)}.rm-notes__eyebrow{color:var(--text-muted);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.08em;margin:0;text-transform:uppercase}.rm-notes__p,.rm-notes__ul{color:var(--text-secondary);font-size:var(--font-13);line-height:1.65;margin:0}.rm-notes__ul{padding-left:var(--space-20)}.rm-notes__ul--terms{list-style:none;padding-left:0}.rm-notes__p b,.rm-notes__ul b{color:var(--text-primary)}.rm-notes__example{background:var(--bg-surface-3);border-left:3px solid var(--color-primary);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--font-12);margin:0;padding:var(--space-8) var(--space-12)}.rm-notes__link{align-items:center;color:var(--color-primary);cursor:pointer;display:inline-flex;font-size:var(--font-13);font-weight:var(--weight-semibold);gap:var(--space-4);text-decoration:underline;text-underline-offset:3px}
+</style>

package/package.json

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