@tekkare/romulus 0.1.8 → 0.1.10

package/dist/runtime/components/LineChart.vue

@@ -0,0 +1,42 @@
+<!--
+  RmLineChart - courbe, aire, ou marche d'escalier (`step`) pour les series de
+  prix et de decisions discretes.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useChartTheme } from '../composables/useChartTheme'
+import { rmLineOption, type RmSeriesInput, RM_CHART_HEIGHTS } from '../utils/chart'
+
+const props = withDefaults(defineProps<{
+  categories: (string | number)[]
+  series: RmSeriesInput[]
+  /** Remplissage degrade sous la courbe. */
+  area?: boolean
+  /** Marche d'escalier : prix, taux de remboursement, decisions datees. */
+  step?: boolean
+  smooth?: boolean
+  height?: keyof typeof RM_CHART_HEIGHTS | number
+  description?: string
+}>(), {
+  area: false,
+  step: false,
+  smooth: true,
+  height: 'standard',
+  description: undefined,
+})
+
+const { theme, palette, decal } = useChartTheme()
+
+const option = computed(() =>
+  rmLineOption(props.categories, props.series, theme.value, palette.value.cat, {
+    area: props.area,
+    step: props.step,
+    smooth: props.smooth,
+    decal: decal.value,
+  }),
+)
+</script>
+
+<template>
+  <RmChart :option="option" :height="height" :description="description" />
+</template>

package/dist/runtime/components/NavLink.vue

@@ -56,5 +56,5 @@ defineEmits<{
 </template>
 
 <style scoped>
-.rm-nav-link{background:none;border:none;border-radius:var(--r-radius-lg);cursor:pointer;gap:8px;padding:6px 12px 6px 6px;text-align:left;width:100%}.rm-nav-link,.rm-nav-link__icon{align-items:center;display:flex;transition:all var(--r-transition-fast)}.rm-nav-link__icon{background-color:var(--r-color-gray-100);border-radius:var(--r-radius-md);color:var(--r-color-gray-500);flex-shrink:0;height:28px;justify-content:center;width:28px}.rm-nav-link__label{color:#1e293b;flex:1;font-family:var(--r-font-family);font-size:14px;font-weight:400;line-height:160%;overflow:hidden;text-overflow:ellipsis;transition:all var(--r-transition-fast);white-space:nowrap}.rm-nav-link__caret{align-items:center;color:var(--r-color-gray-400);display:flex;flex-shrink:0;transition:transform .25s ease,color var(--r-transition-fast)}.rm-nav-link__caret--expanded{transform:rotate(-180deg)}.rm-nav-link:not(.rm-nav-link--active):hover{background-color:var(--r-color-primary-50)}.rm-nav-link:not(.rm-nav-link--active):hover .rm-nav-link__icon{background-color:var(--r-color-primary-100);color:var(--r-color-primary-600)}.rm-nav-link:not(.rm-nav-link--active):hover .rm-nav-link__caret{color:var(--r-color-primary-600)}.rm-nav-link--active{background-color:var(--r-color-gray-100)}.rm-nav-link--active .rm-nav-link__icon{background-color:var(--r-color-primary-600);color:var(--r-color-white)}.rm-nav-link--active .rm-nav-link__caret{color:var(--r-color-primary-600)}
+.rm-nav-link{background:none;border:none;border-radius:var(--radius-lg);cursor:pointer;gap:8px;padding:6px 12px 6px 6px;text-align:left;width:100%}.rm-nav-link,.rm-nav-link__icon{align-items:center;display:flex;transition:all var(--duration-fast) var(--ease-in-out)}.rm-nav-link__icon{background-color:var(--bg-surface-3);border-radius:var(--radius-md);color:var(--text-secondary);flex-shrink:0;height:28px;justify-content:center;width:28px}.rm-nav-link__label{color:var(--text-primary);flex:1;font-family:var(--font-sans);font-size:14px;font-weight:400;line-height:160%;overflow:hidden;text-overflow:ellipsis;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap}.rm-nav-link__caret{align-items:center;color:var(--text-muted);display:flex;flex-shrink:0;transition:transform .25s ease,color var(--duration-fast) var(--ease-in-out)}.rm-nav-link__caret--expanded{transform:rotate(-180deg)}.rm-nav-link:not(.rm-nav-link--active):hover{background-color:var(--bg-hover)}.rm-nav-link:not(.rm-nav-link--active):hover .rm-nav-link__icon{background-color:var(--bg-hover);color:var(--color-healthcare)}.rm-nav-link:not(.rm-nav-link--active):hover .rm-nav-link__caret{color:var(--color-healthcare)}.rm-nav-link--active{background-color:var(--bg-surface-3)}.rm-nav-link--active .rm-nav-link__icon{background-color:var(--color-healthcare);color:var(--color-text-inverse)}.rm-nav-link--active .rm-nav-link__caret{color:var(--color-healthcare)}
 </style>

package/dist/runtime/components/Pill.vue

@@ -33,5 +33,5 @@ defineEmits<{
 </template>
 
 <style scoped>
-.toolbar-pill{align-items:center;background-color:#fff;border:1px solid #dbdef0;border-radius:38px;color:var(--r-color-gray-600);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--r-text-sm);font-weight:var(--r-font-weight-medium);gap:4px;padding:4px 12px;transition:all var(--r-transition-fast);white-space:nowrap}.toolbar-pill:hover{box-shadow:0 1px 2px 0 rgba(30,41,59,.1)}.toolbar-pill--active{background-color:#2176ff;border-color:#2176ff;color:var(--r-color-white)}.toolbar-pill--active:hover{background-color:#1a65e0;border-color:#1a65e0;box-shadow:none}.toolbar-pill--primary{background-color:#2176ff;border-color:#2176ff;color:var(--r-color-white)}.toolbar-pill--primary:hover{background-color:#1a65e0;border-color:#1a65e0;box-shadow:none}.toolbar-pill--secondary{background-color:var(--r-color-gray-100);border-color:transparent;color:var(--r-color-gray-800)}.toolbar-pill--secondary:hover{background-color:var(--r-color-gray-200);border-color:transparent}.toolbar-pill--pharma{background-color:#f7520e;border-color:#f7520e;color:var(--r-color-white)}.toolbar-pill--pharma:hover{background-color:#d9470c;border-color:#d9470c}.toolbar-pill--discovery{background-color:#07816f;border-color:#07816f;color:var(--r-color-white)}.toolbar-pill--discovery:hover{background-color:#066b5c;border-color:#066b5c}.toolbar-pill--databank{background-color:#e04380;border-color:#e04380;color:var(--r-color-white)}.toolbar-pill--databank:hover{background-color:#c73a6f;border-color:#c73a6f}
+.toolbar-pill{align-items:center;background-color:var(--color-text-inverse);border:1px solid var(--border-default);border-radius:38px;color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);gap:4px;padding:4px 12px;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap}.toolbar-pill:hover{box-shadow:0 1px 2px 0 rgba(var(--shadow-rgb),.1)}.toolbar-pill--active{background-color:var(--color-healthcare);border-color:var(--color-healthcare);color:var(--color-text-inverse)}.toolbar-pill--active:hover{background-color:var(--color-healthcare-active);border-color:var(--color-healthcare-active);box-shadow:none}.toolbar-pill--primary{background-color:var(--color-healthcare);border-color:var(--color-healthcare);color:var(--color-text-inverse)}.toolbar-pill--primary:hover{background-color:var(--color-healthcare-active);border-color:var(--color-healthcare-active);box-shadow:none}.toolbar-pill--secondary{background-color:var(--bg-surface-3);border-color:transparent;color:var(--text-primary)}.toolbar-pill--secondary:hover{background-color:var(--border-default);border-color:transparent}.toolbar-pill--pharma{background-color:var(--color-pharma);border-color:var(--color-pharma);color:var(--color-text-inverse)}.toolbar-pill--pharma:hover{background-color:var(--color-pharma-active);border-color:var(--color-pharma-active)}.toolbar-pill--discovery{background-color:var(--color-discovery);border-color:var(--color-discovery);color:var(--color-text-inverse)}.toolbar-pill--discovery:hover{background-color:var(--color-discovery-active);border-color:var(--color-discovery-active)}.toolbar-pill--databank{background-color:var(--color-databank);border-color:var(--color-databank);color:var(--color-text-inverse)}.toolbar-pill--databank:hover{background-color:var(--color-databank-active);border-color:var(--color-databank-active)}
 </style>

package/dist/runtime/components/PillTabs.vue

@@ -30,5 +30,5 @@ defineEmits<{
 </template>
 
 <style scoped>
-.rm-pill-tabs{display:flex;gap:4px}.rm-pill-tabs__tab{background:transparent;border:none;border-radius:var(--r-radius-lg);color:var(--r-color-gray-500);cursor:pointer;font-family:var(--r-font-family);font-size:14px;font-weight:400;padding:6px 14px;transition:all var(--r-transition-fast)}.rm-pill-tabs__tab:hover{color:var(--r-color-gray-700)}.rm-pill-tabs__tab--active{background-color:var(--r-color-gray-100);color:var(--r-color-gray-900);font-weight:600}
+.rm-pill-tabs{display:flex;gap:4px}.rm-pill-tabs__tab{background:transparent;border:none;border-radius:var(--radius-lg);cursor:pointer;font-family:var(--font-sans);font-size:14px;font-weight:400;padding:6px 14px;transition:all var(--duration-fast) var(--ease-in-out)}.rm-pill-tabs__tab,.rm-pill-tabs__tab:hover{color:var(--text-secondary)}.rm-pill-tabs__tab--active{background-color:var(--bg-surface-3);color:var(--text-primary);font-weight:600}
 </style>

package/dist/runtime/components/SearchBar.vue

@@ -1,38 +1,122 @@
 <script setup lang="ts">
-import { PhMagnifyingGlass } from '@phosphor-icons/vue'
+import { PhMagnifyingGlass, PhX } from '@phosphor-icons/vue'
+
+export interface SearchSuggestion {
+  label: string
+  field?: string
+}
 
 const model = defineModel<string>({ default: '' })
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   advancedActive?: boolean
+  advancedCount?: number
+  suggestions?: SearchSuggestion[]
+  placeholder?: string
 }>(), {
   advancedActive: false,
+  advancedCount: 0,
+  suggestions: () => [],
+  placeholder: 'Search...',
 })
 
-defineEmits<{
+const emit = defineEmits<{
   advancedSearch: []
+  search: [value: string]
+  typing: [value: string]
+  selectSuggestion: [suggestion: SearchSuggestion]
 }>()
+
+const showSuggestions = ref(false)
+const barRef = ref<HTMLElement>()
+let debounceTimer: ReturnType<typeof setTimeout>
+
+function onInput() {
+  clearTimeout(debounceTimer)
+  debounceTimer = setTimeout(() => {
+    emit('typing', model.value)
+    if (model.value.length >= 2) {
+      showSuggestions.value = true
+    } else {
+      showSuggestions.value = false
+    }
+  }, 300)
+}
+
+function submitSearch() {
+  showSuggestions.value = false
+  emit('search', model.value)
+}
+
+function selectSuggestion(sugg: SearchSuggestion) {
+  model.value = sugg.label
+  showSuggestions.value = false
+  emit('selectSuggestion', sugg)
+  emit('search', sugg.label)
+}
+
+function clearSearch() {
+  model.value = ''
+  showSuggestions.value = false
+  emit('search', '')
+}
+
+function onClickOutside(e: Event) {
+  if (barRef.value && !barRef.value.contains(e.target as Node)) {
+    showSuggestions.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', onClickOutside))
+onUnmounted(() => document.removeEventListener('click', onClickOutside))
 </script>
 
 <template>
-  <div class="search-bar" :class="{ 'search-bar--advanced-active': advancedActive }">
-    <PhMagnifyingGlass :size="16" class="search-bar__icon" />
-    <input
-      v-model="model"
-      type="text"
-      placeholder="Search..."
-      class="search-bar__input"
-    >
-    <button
-      class="search-bar__advanced"
-      :class="{ 'search-bar__advanced--active': advancedActive }"
-      @click="$emit('advancedSearch')"
-    >
-      Advanced search
-    </button>
+  <div ref="barRef" class="search-bar-wrapper">
+    <div class="search-bar" :class="{ 'search-bar--advanced-active': advancedActive, 'search-bar--has-value': model.length > 0 }">
+      <PhMagnifyingGlass :size="16" class="search-bar__icon" />
+      <input
+        v-model="model"
+        type="text"
+        :placeholder="placeholder"
+        class="search-bar__input"
+        @input="onInput"
+        @keydown.enter="submitSearch"
+      >
+      <button
+        v-if="model.length > 0"
+        class="search-bar__clear"
+        @click="clearSearch"
+      >
+        <PhX :size="12" />
+      </button>
+      <button
+        class="search-bar__advanced"
+        :class="{ 'search-bar__advanced--active': advancedActive }"
+        @click="$emit('advancedSearch')"
+      >
+        Advanced search
+        <span v-if="advancedCount > 0" class="search-bar__advanced-badge">{{ advancedCount }}</span>
+      </button>
+    </div>
+
+    <Transition name="suggestions">
+      <div v-if="showSuggestions && suggestions.length > 0" class="search-bar__suggestions">
+        <button
+          v-for="(sugg, i) in suggestions"
+          :key="i"
+          class="search-bar__suggestion"
+          @click="selectSuggestion(sugg)"
+        >
+          <PhMagnifyingGlass :size="14" class="search-bar__suggestion-icon" />
+          <span class="search-bar__suggestion-label">{{ sugg.label }}</span>
+          <span v-if="sugg.field" class="search-bar__suggestion-field">{{ sugg.field.split('.').pop() }}</span>
+        </button>
+      </div>
+    </Transition>
   </div>
 </template>
 
 <style scoped>
-.search-bar{align-items:center;border:1px solid var(--r-color-gray-200);border-radius:var(--r-radius-full);display:inline-flex;gap:var(--r-space-2);height:32px;min-width:200px;padding:var(--r-space-1) var(--r-space-3);transition:border-color var(--r-transition-fast)}.search-bar:focus-within{border-color:var(--r-color-primary-400)}.search-bar__icon{color:var(--r-color-gray-400);flex-shrink:0}.search-bar__input{background:transparent;border:none;color:var(--r-color-gray-700);font-family:inherit;font-size:var(--r-text-sm);outline:none;width:100%}.search-bar__input::-moz-placeholder{color:var(--r-color-gray-400)}.search-bar__input::placeholder{color:var(--r-color-gray-400)}.search-bar__advanced{background:none;border:none;border-left:1px solid var(--r-color-gray-200);color:var(--r-color-gray-500);cursor:pointer;flex-shrink:0;font-family:inherit;font-size:var(--r-text-sm);padding:0 0 0 var(--r-space-2);text-decoration:underline;transition:color var(--r-transition-fast);white-space:nowrap}.search-bar__advanced:hover{color:var(--r-color-primary-600)}.search-bar--advanced-active{border-color:#4164ee}.search-bar__advanced--active{color:#4164ee;font-weight:var(--r-font-weight-medium)}
+.search-bar-wrapper{position:relative}.search-bar{align-items:center;border:1px solid var(--border-default);border-radius:var(--radius-pill);display:inline-flex;gap:var(--space-8);height:32px;min-width:200px;padding:var(--space-4) var(--space-12);transition:border-color var(--duration-fast) var(--ease-in-out)}.search-bar:focus-within{border-color:var(--color-secondary);box-shadow:var(--shadow-focus)}.search-bar__icon{color:var(--text-muted);flex-shrink:0}.search-bar__input{background:transparent;border:none;color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--font-14);outline:none;width:100%}.search-bar__input::-moz-placeholder{color:var(--text-muted)}.search-bar__input::placeholder{color:var(--text-muted)}.search-bar__clear{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;height:18px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:18px}.search-bar__clear,.search-bar__clear:hover{background:var(--border-default);color:var(--text-secondary)}.search-bar__advanced{background:none;border:none;border-left:1px solid var(--border-default);color:var(--text-secondary);cursor:pointer;flex-shrink:0;font-family:var(--font-sans);font-size:var(--font-14);padding:0 0 0 var(--space-8);text-decoration:underline;transition:color var(--duration-fast) var(--ease-in-out);white-space:nowrap}.search-bar__advanced:hover{color:var(--color-healthcare)}.search-bar--advanced-active{border-color:var(--color-healthcare)}.search-bar__advanced--active{color:var(--color-healthcare);font-weight:500}.search-bar__advanced-badge{align-items:center;background-color:var(--color-healthcare);border-radius:100px;color:var(--color-text-inverse);display:inline-flex;font-size:10px;font-weight:600;height:16px;justify-content:center;line-height:1;min-width:16px;padding:0 4px}.search-bar__suggestions{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:0 4px 12px rgba(var(--shadow-rgb),.08);left:0;max-height:280px;overflow-y:auto;padding:4px;position:absolute;right:0;top:calc(100% + 4px);z-index:50}.search-bar__suggestion{align-items:center;background:none;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);gap:8px;padding:8px 10px;text-align:left;transition:background-color var(--duration-fast) var(--ease-in-out);width:100%}.search-bar__suggestion:hover{background-color:var(--bg-surface-2)}.search-bar__suggestion-icon{color:var(--text-muted);flex-shrink:0}.search-bar__suggestion-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-bar__suggestion-field{background:var(--bg-surface-2);border-radius:3px;color:var(--text-muted);flex-shrink:0;font-size:11px;padding:1px 6px}.suggestions-enter-active,.suggestions-leave-active{transition:opacity var(--duration-fast) var(--ease-in-out),transform var(--duration-fast) var(--ease-in-out)}.suggestions-enter-from,.suggestions-leave-to{opacity:0;transform:translateY(-4px)}
 </style>

package/dist/runtime/components/Sidebar.vue

@@ -139,5 +139,5 @@ function handleClick(item: RmSidebarMenuItem) {
 </template>
 
 <style scoped>
-.rm-sidebar{background-color:var(--r-color-white);border-right:1px solid var(--r-color-gray-200);bottom:0;display:flex;flex-direction:column;left:0;overflow-y:auto;position:fixed;top:0;transition:width var(--r-transition-base);width:240px;z-index:50}.rm-sidebar--collapsed{width:64px}.rm-sidebar__header{align-items:center;border-bottom:1px solid var(--r-color-gray-200);display:flex;justify-content:space-between;min-height:64px;padding:0 16px}.rm-sidebar__brand{align-items:center;display:flex;gap:8px}.rm-sidebar__logo{color:var(--r-color-primary-600)}.rm-sidebar__name{color:var(--r-color-gray-900);font-family:var(--r-font-family);font-size:16px;font-weight:700;white-space:nowrap}.rm-sidebar__toggle{align-items:center;background:none;border:none;border-radius:var(--r-radius-md);color:var(--r-color-gray-500);cursor:pointer;display:flex;justify-content:center;padding:4px}.rm-sidebar__toggle:hover{background-color:var(--r-color-gray-100)}.rm-sidebar__nav{display:flex;flex:1;flex-direction:column;gap:6px;padding:8px}.rm-sidebar__submenu{display:flex;flex-direction:column;gap:6px;padding-left:20px}.rm-sidebar__submenu-item{animation:rm-submenu-fade-in .25s ease both}@keyframes rm-submenu-fade-in{0%{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}.rm-sidebar__footer{border-top:1px solid var(--r-color-gray-200);padding:12px}
+.rm-sidebar{background-color:var(--color-text-inverse);border-right:1px solid var(--border-default);bottom:0;display:flex;flex-direction:column;left:0;overflow-y:auto;position:fixed;top:0;transition:width var(--duration-base) var(--ease-in-out);width:240px;z-index:50}.rm-sidebar--collapsed{width:64px}.rm-sidebar__header{align-items:center;border-bottom:1px solid var(--border-default);display:flex;justify-content:space-between;min-height:64px;padding:0 16px}.rm-sidebar__brand{align-items:center;display:flex;gap:8px}.rm-sidebar__logo{color:var(--color-healthcare)}.rm-sidebar__name{color:var(--text-primary);font-family:var(--font-sans);font-size:16px;font-weight:700;white-space:nowrap}.rm-sidebar__toggle{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;justify-content:center;padding:4px}.rm-sidebar__toggle:hover{background-color:var(--bg-surface-3)}.rm-sidebar__nav{display:flex;flex:1;flex-direction:column;gap:6px;padding:8px}.rm-sidebar__submenu{display:flex;flex-direction:column;gap:6px;padding-left:20px}.rm-sidebar__submenu-item{animation:rm-submenu-fade-in .25s ease both}@keyframes rm-submenu-fade-in{0%{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}.rm-sidebar__footer{border-top:1px solid var(--border-default);padding:12px}
 </style>

package/dist/runtime/components/SparklineChart.vue

@@ -0,0 +1,33 @@
+<!--
+  RmSparklineChart - micro-courbe pour une cellule de tableau ou une tuile KPI.
+  Sans axes ni tooltip : elle donne une forme, pas une valeur. La valeur doit
+  rester lisible en texte a cote, le survol n'etant jamais le seul acces a
+  l'information.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useChartTheme } from '../composables/useChartTheme'
+import { rmSparklineOption, RM_CHART_HEIGHTS } from '../utils/chart'
+
+const props = withDefaults(defineProps<{
+  values: (number | null)[]
+  /** Couleur explicite ; par defaut la primaire de la palette active. */
+  color?: string
+  height?: keyof typeof RM_CHART_HEIGHTS | number
+  description?: string
+}>(), {
+  color: undefined,
+  height: 'sparkline',
+  description: undefined,
+})
+
+// Pas de `theme` ici : une sparkline n'a ni axe ni tooltip a colorer. Le
+// basculement jour/nuit la recalcule quand meme, parce que `palette` en depend.
+const { palette } = useChartTheme()
+
+const option = computed(() => rmSparklineOption(props.values, props.color ?? palette.value.primary))
+</script>
+
+<template>
+  <RmChart :option="option" :height="height" :description="description" />
+</template>

package/dist/runtime/components/Tabs.vue

@@ -13,13 +13,13 @@ const props = withDefaults(defineProps<RmTabsProps>(), {
   variant: 'default',
 })
 
-const defaultColors = { color: '#4164EE', bg: 'rgba(65, 100, 238, 0.05)' }
+const defaultColors = { color: 'var(--color-healthcare)', bg: 'rgba(var(--healthcare-rgb), 0.05)' }
 
 const variantColors: Record<string, { color: string; bg: string }> = {
   default: defaultColors,
-  pharma: { color: '#F7520E', bg: 'rgba(247, 82, 14, 0.05)' },
-  discovery: { color: '#07816F', bg: 'rgba(7, 129, 111, 0.05)' },
-  databank: { color: '#E04380', bg: 'rgba(224, 67, 128, 0.05)' },
+  pharma: { color: 'var(--color-pharma)', bg: 'rgba(var(--pharma-rgb), 0.05)' },
+  discovery: { color: 'var(--color-discovery)', bg: 'rgba(var(--discovery-rgb), 0.05)' },
+  databank: { color: 'var(--color-databank)', bg: 'rgba(var(--databank-rgb), 0.05)' },
 }
 
 const currentColors = computed((): { color: string; bg: string } => variantColors[props.variant] ?? defaultColors)
@@ -101,5 +101,5 @@ watch(() => props.modelValue, (val) => updateIndicator(val))
 </template>
 
 <style scoped>
-.rm-tabs{background-color:var(--r-color-white);border-bottom:1px solid var(--r-color-gray-200)}.rm-tabs__list{display:flex;padding:8px 20px 0;position:relative}.rm-tabs__tab{background:none;border:none;border-radius:4px 4px 0 0;color:var(--r-color-gray-500);cursor:pointer;font-family:var(--r-font-family);font-size:14px;font-weight:400;padding:12px 16px;position:relative;transition:color var(--r-transition-fast),background var(--r-transition-fast);white-space:nowrap}.rm-tabs__tab:hover{background:var(--tab-active-bg);color:var(--r-color-gray-700)}.rm-tabs__tab--active{font-weight:500}.rm-tabs__indicator{border-radius:2px 2px 0 0;bottom:0;height:2px;left:0;position:absolute;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1)}
+.rm-tabs{background-color:var(--color-text-inverse);border-bottom:1px solid var(--border-default)}.rm-tabs__list{display:flex;padding:8px 20px 0;position:relative}.rm-tabs__tab{background:none;border:none;border-radius:4px 4px 0 0;color:var(--text-secondary);cursor:pointer;font-family:var(--font-sans);font-size:14px;font-weight:400;padding:12px 16px;position:relative;transition:color var(--duration-fast) var(--ease-in-out),background var(--duration-fast) var(--ease-in-out);white-space:nowrap}.rm-tabs__tab:hover{background:var(--tab-active-bg);color:var(--text-secondary)}.rm-tabs__tab--active{font-weight:500}.rm-tabs__indicator{border-radius:2px 2px 0 0;bottom:0;height:2px;left:0;position:absolute;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1)}
 </style>

package/dist/runtime/components/ToolbarFilter.vue

@@ -130,5 +130,5 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
 </template>
 
 <style scoped>
-.toolbar-filter{position:relative}.toolbar-filter__caret{opacity:.6;transition:transform var(--r-transition-fast)}.toolbar-filter__caret--open{transform:rotate(180deg)}.toolbar-filter__dropdown{background-color:var(--r-color-white);border:1px solid var(--r-color-gray-200);border-radius:var(--r-radius-lg);box-shadow:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);left:0;max-height:260px;min-width:200px;overflow-y:auto;padding:var(--r-space-1);position:absolute;top:calc(100% + var(--r-space-2));z-index:50}.toolbar-filter__option{align-items:center;background:none;border:none;border-radius:var(--r-radius-md);color:var(--r-color-gray-700);cursor:pointer;display:flex;font-family:inherit;font-size:var(--r-text-sm);gap:var(--r-space-2);padding:var(--r-space-2) var(--r-space-3);text-align:left;transition:background-color var(--r-transition-fast);width:100%}.toolbar-filter__option:hover{background-color:var(--r-color-gray-50)}.toolbar-filter__option--selected{color:var(--r-color-gray-900);font-weight:var(--r-font-weight-medium)}.toolbar-filter__checkbox{align-items:center;border:1.5px solid var(--r-color-gray-300);border-radius:var(--r-radius-sm);display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--r-transition-fast);width:16px}.toolbar-filter__checkbox--checked{background-color:var(--r-color-primary-600);border-color:var(--r-color-primary-600);color:var(--r-color-white)}.toolbar-filter__radio{align-items:center;border:1.5px solid var(--r-color-gray-300);border-radius:var(--r-radius-full);display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--r-transition-fast);width:16px}.toolbar-filter__radio--checked{border-color:var(--r-color-primary-600)}.toolbar-filter__radio--checked:after{background-color:var(--r-color-primary-600);border-radius:var(--r-radius-full);content:"";height:8px;width:8px}.dropdown-enter-active,.dropdown-leave-active{transition:opacity var(--r-transition-fast),transform var(--r-transition-fast)}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:translateY(-4px)}
+.toolbar-filter{position:relative}.toolbar-filter__caret{opacity:.6;transition:transform var(--duration-fast) var(--ease-in-out)}.toolbar-filter__caret--open{transform:rotate(180deg)}.toolbar-filter__dropdown{background-color:var(--color-text-inverse);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:0 4px 12px rgba(var(--shadow-rgb),.08),0 2px 4px rgba(var(--shadow-rgb),.04);left:0;max-height:260px;min-width:200px;overflow-y:auto;padding:var(--space-4);position:absolute;top:calc(100% + var(--space-8));z-index:50}.toolbar-filter__option{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-14);gap:var(--space-8);padding:var(--space-8) var(--space-12);text-align:left;transition:background-color var(--duration-fast) var(--ease-in-out);width:100%}.toolbar-filter__option:hover{background-color:var(--bg-surface-2)}.toolbar-filter__option--selected{color:var(--text-primary);font-weight:var(--weight-medium)}.toolbar-filter__checkbox{align-items:center;border:1.5px solid var(--border-default);border-radius:var(--radius-sm);display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.toolbar-filter__checkbox--checked{background-color:var(--color-healthcare);border-color:var(--color-healthcare);color:var(--color-text-inverse)}.toolbar-filter__radio{align-items:center;border:1.5px solid var(--border-default);border-radius:var(--radius-pill);display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.toolbar-filter__radio--checked{border-color:var(--color-healthcare)}.toolbar-filter__radio--checked:after{background-color:var(--color-healthcare);border-radius:var(--radius-pill);content:"";height:8px;width:8px}.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/dist/runtime/composables/useChartTheme.d.ts

@@ -0,0 +1,7 @@
+export declare function useChartTheme(): {
+    night: import("vue").Ref<boolean, boolean>;
+    cvd: import("vue").Ref<boolean, boolean>;
+    theme: import("vue").ComputedRef<import("../utils/chart").RmChartTheme>;
+    palette: import("vue").ComputedRef<import("../utils/chart").RmPalette>;
+    decal: import("vue").ComputedRef<boolean>;
+};

package/dist/runtime/composables/useChartTheme.js

@@ -0,0 +1,27 @@
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { rmChartTheme, rmPalette } from "../utils/chart.js";
+const CVD_CLASSES = ["cvd-deutera", "cvd-protan", "cvd-trita", "cvd-mono"];
+export function useChartTheme() {
+  const night = ref(false);
+  const cvd = ref(false);
+  let observer = null;
+  function read() {
+    if (typeof document === "undefined") return;
+    const list = document.body.classList;
+    night.value = list.contains("night");
+    cvd.value = CVD_CLASSES.some((c) => list.contains(c));
+  }
+  onMounted(() => {
+    read();
+    observer = new MutationObserver(read);
+    observer.observe(document.body, { attributes: true, attributeFilter: ["class"] });
+  });
+  onBeforeUnmount(() => {
+    observer?.disconnect();
+    observer = null;
+  });
+  const theme = computed(() => rmChartTheme(night.value));
+  const palette = computed(() => rmPalette(cvd.value ? "cvdSafe" : "default", night.value));
+  const decal = computed(() => cvd.value);
+  return { night, cvd, theme, palette, decal };
+}

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

@@ -0,0 +1,17 @@
+export type RmCvdMode = 'none' | 'deutera' | 'protan' | 'trita' | 'mono';
+export type RmTextScale = 'normal' | 'large' | 'xl';
+export declare function useRomulusTheme(): {
+    night: Readonly<import("vue").Ref<boolean, boolean>>;
+    highContrast: Readonly<import("vue").Ref<boolean, boolean>>;
+    reduceMotion: Readonly<import("vue").Ref<boolean, boolean>>;
+    compact: Readonly<import("vue").Ref<boolean, boolean>>;
+    cvd: Readonly<import("vue").Ref<RmCvdMode, RmCvdMode>>;
+    textScale: Readonly<import("vue").Ref<RmTextScale, RmTextScale>>;
+    setNight: (value: boolean) => void;
+    setHighContrast: (value: boolean) => void;
+    setReduceMotion: (value: boolean) => void;
+    setCompact: (value: boolean) => void;
+    setCvd: (mode: RmCvdMode) => void;
+    setTextScale: (scale: RmTextScale) => void;
+    reset: () => void;
+};

package/dist/runtime/composables/useTheme.js

@@ -0,0 +1,98 @@
+import { onMounted, readonly, ref } from "vue";
+const CVD_CLASSES = {
+  deutera: "cvd-deutera",
+  protan: "cvd-protan",
+  trita: "cvd-trita",
+  mono: "cvd-mono"
+};
+const TEXT_CLASSES = {
+  large: "text-large",
+  xl: "text-xl"
+};
+export function useRomulusTheme() {
+  const night = ref(false);
+  const highContrast = ref(false);
+  const reduceMotion = ref(false);
+  const compact = ref(false);
+  const cvd = ref("none");
+  const textScale = ref("normal");
+  function apply(mutate) {
+    if (typeof document === "undefined") return;
+    const { body } = document;
+    body.classList.add("theme-switching");
+    mutate();
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => body.classList.remove("theme-switching"));
+    });
+  }
+  const setNight = (value) => apply(() => {
+    night.value = value;
+    document.body.classList.toggle("night", value);
+  });
+  const setHighContrast = (value) => apply(() => {
+    highContrast.value = value;
+    document.body.classList.toggle("high-contrast", value);
+  });
+  const setReduceMotion = (value) => apply(() => {
+    reduceMotion.value = value;
+    document.body.classList.toggle("reduce-motion", value);
+  });
+  const setCompact = (value) => apply(() => {
+    compact.value = value;
+    document.body.classList.toggle("density-compact", value);
+  });
+  const setCvd = (mode) => apply(() => {
+    cvd.value = mode;
+    const { body } = document;
+    Object.values(CVD_CLASSES).forEach((c) => body.classList.remove(c));
+    if (mode !== "none") body.classList.add(CVD_CLASSES[mode]);
+  });
+  const setTextScale = (scale) => apply(() => {
+    textScale.value = scale;
+    const { body } = document;
+    Object.values(TEXT_CLASSES).forEach((c) => body.classList.remove(c));
+    if (scale !== "normal") body.classList.add(TEXT_CLASSES[scale]);
+  });
+  const reset = () => apply(() => {
+    const { body } = document;
+    night.value = false;
+    highContrast.value = false;
+    reduceMotion.value = false;
+    compact.value = false;
+    cvd.value = "none";
+    textScale.value = "normal";
+    body.classList.remove(
+      "night",
+      "high-contrast",
+      "reduce-motion",
+      "density-compact",
+      ...Object.values(CVD_CLASSES),
+      ...Object.values(TEXT_CLASSES)
+    );
+  });
+  onMounted(() => {
+    const list = document.body.classList;
+    night.value = list.contains("night");
+    highContrast.value = list.contains("high-contrast");
+    reduceMotion.value = list.contains("reduce-motion");
+    compact.value = list.contains("density-compact");
+    const found = Object.entries(CVD_CLASSES).find(([, c]) => list.contains(c));
+    cvd.value = found ? found[0] : "none";
+    textScale.value = list.contains("text-xl") ? "xl" : list.contains("text-large") ? "large" : "normal";
+  });
+  return {
+    night: readonly(night),
+    highContrast: readonly(highContrast),
+    reduceMotion: readonly(reduceMotion),
+    compact: readonly(compact),
+    cvd: readonly(cvd),
+    textScale: readonly(textScale),
+    setNight,
+    setHighContrast,
+    setReduceMotion,
+    setCompact,
+    setCvd,
+    setTextScale,
+    reset
+  };
+}