@tekkare/romulus 0.1.39 → 0.1.41

package/dist/module.json

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

package/dist/runtime/assets/styles/components.css

@@ -1 +1 @@
-.grid-2{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{display:grid;gap:20px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}.grid-2-1{display:grid;gap:20px;grid-template-columns:2fr 1fr}.pane-title{color:var(--text-primary);font-family:var(--font-serif);font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 16px}.pane-sub{color:var(--text-muted);font-size:13px;line-height:1.55;margin:0 0 24px;max-width:78ch}.chart-section{margin-inline:auto;max-width:var(--content-max-w,1440px);padding:0 0 40px;width:100%}.section-label{align-items:center;color:var(--text-secondary);display:flex;font-size:11px;font-weight:700;gap:8px;letter-spacing:.12em;margin:40px 0 18px;text-transform:uppercase}body.text-large .pane-title{font-size:38px}body.text-xl .pane-title{font-size:46px}body.text-large .section-label{font-size:13px}body.text-xl .section-label{font-size:14px}.chart-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:10px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:box-shadow .18s,border-color .18s}.chart-card:hover{border-color:var(--color-violet-pale);box-shadow:0 6px 16px rgba(107,63,255,.1),0 1px 3px rgba(30,41,59,.04)}.chart-card-head{padding:22px 64px 14px 24px;position:relative}.chart-card-title{color:var(--text-primary);font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0 0 5px}.chart-card-context{color:var(--text-muted);font-size:12px;line-height:1.55;margin:0}.chart-card-actions{position:absolute;right:12px;top:12px}.cc-export{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-secondary);cursor:pointer;display:flex;font-size:14px;height:28px;justify-content:center;transition:background .15s,color .15s,border-color .15s;width:28px}.cc-export:hover{color:var(--color-secondary)}.cc-export:hover,.chart-card-actions.open .cc-export{background:var(--bg-hover);border-color:var(--color-violet-pale)}.chart-card-actions.open .cc-export{color:var(--color-primary)}.cc-menu{animation:cc-menu-in .12s cubic-bezier(.2,0,0,1);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);display:none;min-width:200px;padding:6px 0;position:absolute;right:0;top:34px;z-index:var(--z-modal)}.chart-card-actions.open .cc-menu{display:block}.cc-menu-section{color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;padding:8px 14px 4px;text-transform:uppercase}.cc-menu-item{align-items:center;background:none;border:0;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:13px;gap:10px;padding:7px 14px;text-align:left;width:100%}.cc-menu-item i{color:var(--text-muted);font-size:14px}.cc-menu-item:hover{background:var(--bg-surface-3);color:var(--text-primary)}.cc-menu-item:hover i{color:var(--text-secondary)}.cc-menu-divider{background:var(--bg-surface-3);height:1px;margin:4px 0}@keyframes cc-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.chart-card-body{flex:1;padding:4px 12px 8px}.chart-card-body>.rm-empty{box-sizing:border-box;gap:6px;justify-content:center;max-width:none;min-height:240px;padding:36px 24px}.chart-card-foot{align-items:center;background:var(--bg-surface-2);border-radius:0 0 10px 10px;border-top:1px solid var(--border-soft);color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:11px;gap:10px;padding:12px 24px}.chart-card-foot .src{align-items:center;display:flex;gap:4px}.chart-card-foot .src b{color:var(--text-secondary);font-weight:600}.chart-card-foot .dot{background:var(--border-default);border-radius:50%;height:3px;width:3px}.chart-card-foot .updated{color:var(--text-secondary);font-weight:500}.kpi-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:0 2px 8px rgba(30,41,59,.06);padding:16px 18px}.kpi-label{color:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.1em;margin:0 0 6px;text-transform:uppercase}.kpi-value{color:var(--color-primary);font-family:var(--font-serif);font-size:28px;font-weight:700;line-height:1;margin:0}.kpi-value.healthcare{color:var(--color-healthcare)}.kpi-value.discovery{color:var(--color-discovery)}.kpi-value.pharma{color:var(--color-pharma)}.kpi-value.databank{color:var(--color-databank)}.kpi-trend{align-items:center;display:inline-flex;font-size:12px;font-weight:600;gap:4px;margin-top:6px}.kpi-trend i{font-size:11px}.kpi-trend--up{color:var(--color-success)}.kpi-trend--down{color:var(--color-danger)}.kpi-foot,.kpi-trend--flat{color:var(--text-muted)}.kpi-foot{font-size:11px;margin-top:4px}.badge{border-radius:4px;display:inline-block;font-size:10px;font-weight:600;padding:2px 8px}.badge-active{background:var(--color-success-bg);color:var(--color-success)}.badge-pending{background:var(--color-warning-bg);color:var(--color-warning)}.badge-error{background:var(--color-danger-bg);color:var(--color-danger)}.badge-info{background:var(--bg-hover);color:var(--color-primary)}.badge-grey{background:var(--bg-surface-3);color:var(--text-secondary)}table.tk{border-collapse:collapse;font-size:13px;width:100%}.sr-only,table.tk>caption.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}table.tk caption{caption-side:top;color:var(--text-primary);font-size:var(--font-13);font-weight:var(--weight-bold);padding:0 0 var(--space-8);text-align:left}table.tk th{background:var(--bg-surface-2);border-bottom:1px solid var(--border-default);color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:.08em;padding:12px 14px;text-align:left;text-transform:uppercase}table.tk tbody th[scope=row]{background:transparent;font-size:var(--font-13);font-weight:var(--weight-bold);letter-spacing:0;text-transform:none}table.tk tbody th[scope=row],table.tk td{border-bottom:1px solid var(--border-soft);color:var(--text-primary)}table.tk td{padding:12px 14px}table.tk tbody tr:nth-child(2n) td,table.tk tbody tr:nth-child(2n) th[scope=row]{background:var(--bg-surface-2)}table.tk tbody tr:hover td,table.tk tbody tr:hover th[scope=row]{background:var(--bg-hover)}table.tk th[aria-sort]{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}table.tk th[aria-sort]:hover{color:var(--text-primary)}.tk-wrap{overflow-x:auto}.tk-num{font-variant-numeric:tabular-nums;text-align:right}.tk-skeleton{height:14px;width:80%}.tk-empty{color:var(--text-muted);text-align:center}.nav-group{display:flex;flex-direction:column}.nav-group-header{align-items:center;background:none;border:0;color:var(--text-muted);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:11px;font-weight:700;gap:8px;letter-spacing:.08em;padding:8px 12px;text-align:left;text-transform:uppercase;transition:color var(--duration-fast) var(--ease-out);width:100%}.nav-group-header:hover{color:var(--text-secondary)}.nav-group-header .caret{display:inline-flex;margin-left:auto;transition:transform var(--duration-fast) var(--ease-out)}.nav-group[data-open=true]>.nav-group-header{color:var(--color-primary)}.nav-group[data-open=true]>.nav-group-header .caret{transform:rotate(180deg)}.nav-group-items{display:flex;flex-direction:column;gap:2px;padding:2px 0 8px}.cc-export:focus-visible,.cc-menu-item:focus-visible,.chart-card :focus-visible,.nav-group-header:focus-visible,table.tk th[aria-sort]:focus-visible{box-shadow:var(--shadow-focus);outline:2px solid var(--color-secondary);outline-offset:2px}.cc-menu-item,.nav-group-header{min-height:40px}body.text-large .kpi-label{font-size:13px}body.text-large .kpi-value{font-size:34px}body.text-large .kpi-trend{font-size:14px}body.text-large .kpi-foot{font-size:13px}body.text-large .chart-card-title{font-size:17px}body.text-large .chart-card-context{font-size:14px}body.text-large .chart-card-foot{font-size:12px}body.text-large .badge{font-size:12px;padding:3px 9px}body.text-large table.tk{font-size:15px}body.text-large table.tk th{font-size:13px}body.text-xl .kpi-label{font-size:14px}body.text-xl .kpi-value{font-size:40px}body.text-xl .kpi-trend{font-size:16px}body.text-xl .kpi-foot{font-size:14px}body.text-xl .chart-card-title{font-size:20px}body.text-xl .chart-card-context{font-size:16px}body.text-xl .chart-card-foot{font-size:14px}body.text-xl .badge{font-size:14px;padding:3px 10px}body.text-xl table.tk{font-size:16px}body.text-xl table.tk th{font-size:14px}body.high-contrast .cc-export,body.high-contrast .cc-menu,body.high-contrast .chart-card,body.high-contrast .kpi-card{border-width:2px}body.high-contrast .chart-card:hover{border-color:var(--border-default)}body.rm-switching,body.rm-switching *,body.rm-switching :after,body.rm-switching :before,body.theme-switching,body.theme-switching *,body.theme-switching :after,body.theme-switching :before{transition:none!important}body.high-contrast *{box-shadow:none!important}.rm-skeleton{animation:rm-skeleton-shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--bg-hover) 0,var(--bg-surface-2) 50%,var(--bg-hover) 100%);background-size:200% 100%;border-radius:var(--radius-md)}@keyframes rm-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.rm-skeleton{animation:none;background:var(--bg-hover)}}.rm-state-loading{display:flex;flex-direction:column;gap:10px;justify-content:center;min-height:240px;padding:8px 4px}.rm-spinner{animation:rm-spinner-turn .8s linear infinite;border:3px solid var(--border-default);border-radius:50%;border-top-color:var(--color-secondary);height:32px;width:32px}@keyframes rm-spinner-turn{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.rm-spinner{animation-duration:3s}}.rm-state{color:var(--text-secondary);flex-direction:column;font-family:var(--font-sans);gap:6px;min-height:240px;padding:36px 24px;text-align:center}.rm-state,.rm-state__icon{align-items:center;display:flex;justify-content:center}.rm-state__icon{background:var(--bg-surface-3);border-radius:50%;color:var(--text-muted);height:56px;margin-bottom:6px;width:56px}.rm-state__title{color:var(--text-primary);font-size:var(--font-14);font-weight:var(--weight-semibold);margin:0}.rm-state__text{color:var(--text-muted);font-size:var(--font-12);line-height:1.5;margin:0;max-width:280px}.rm-state__action{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:inline-flex;font-family:inherit;font-size:var(--font-12);font-weight:var(--weight-semibold);gap:6px;margin-top:10px;padding:6px 14px}.rm-state__action:hover{background:var(--bg-surface-3);color:var(--text-primary)}.rm-state--error .rm-state__icon{background:var(--color-danger-bg);color:var(--color-danger)}.rm-state--error .rm-state__action{border-color:var(--color-danger);color:var(--color-danger)}.rm-state--error .rm-state__action:hover{background:var(--color-danger-bg)}
+.grid-2{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{display:grid;gap:20px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}.grid-2-1{display:grid;gap:20px;grid-template-columns:2fr 1fr}.pane-title{color:var(--text-primary);font-family:var(--font-serif);font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 16px}.pane-sub{color:var(--text-muted);font-size:13px;line-height:1.55;margin:0 0 24px;max-width:78ch}.chart-section{margin-inline:auto;max-width:var(--content-max-w,1440px);padding:0 0 40px;width:100%}.section-label{align-items:center;color:var(--text-secondary);display:flex;font-size:11px;font-weight:700;gap:8px;letter-spacing:.12em;margin:40px 0 18px;text-transform:uppercase}body.text-large .pane-title{font-size:38px}body.text-xl .pane-title{font-size:46px}body.text-large .section-label{font-size:13px}body.text-xl .section-label{font-size:14px}.chart-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:10px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:box-shadow .18s,border-color .18s}.chart-card:hover{border-color:var(--color-violet-pale);box-shadow:0 6px 16px rgba(107,63,255,.1),0 1px 3px rgba(30,41,59,.04)}.chart-card-head{padding:22px 64px 14px 24px;position:relative}.chart-card-title{color:var(--text-primary);font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0 0 5px}.chart-card-context{color:var(--text-muted);font-size:12px;line-height:1.55;margin:0}.chart-card-actions{position:absolute;right:12px;top:12px}.cc-export{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-secondary);cursor:pointer;display:flex;font-size:14px;height:28px;justify-content:center;transition:background .15s,color .15s,border-color .15s;width:28px}.cc-export:hover{color:var(--color-secondary)}.cc-export:hover,.chart-card-actions.open .cc-export{background:var(--bg-hover);border-color:var(--color-violet-pale)}.chart-card-actions.open .cc-export{color:var(--color-primary)}.cc-menu{animation:cc-menu-in .12s cubic-bezier(.2,0,0,1);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);display:none;min-width:200px;padding:6px 0;position:absolute;right:0;top:34px;z-index:var(--z-modal)}.chart-card-actions.open .cc-menu{display:block}.cc-menu-section{color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;padding:8px 14px 4px;text-transform:uppercase}.cc-menu-item{align-items:center;background:none;border:0;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:13px;gap:10px;padding:7px 14px;text-align:left;width:100%}.cc-menu-item i{color:var(--text-muted);font-size:14px}.cc-menu-item:hover{background:var(--bg-surface-3);color:var(--text-primary)}.cc-menu-item:hover i{color:var(--text-secondary)}.cc-menu-divider{background:var(--bg-surface-3);height:1px;margin:4px 0}@keyframes cc-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.chart-card-body{flex:1;padding:4px 12px 8px}.chart-card-body>.rm-empty{box-sizing:border-box;gap:6px;justify-content:center;max-width:none;min-height:240px;padding:36px 24px}.chart-card-foot{align-items:center;background:var(--bg-surface-2);border-radius:0 0 10px 10px;border-top:1px solid var(--border-soft);color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:11px;gap:10px;padding:12px 24px}.chart-card-foot .src{align-items:center;display:flex;gap:4px}.chart-card-foot .src b{color:var(--text-secondary);font-weight:600}.chart-card-foot .dot{background:var(--border-default);border-radius:50%;height:3px;width:3px}.chart-card-foot .updated{color:var(--text-secondary);font-weight:500}.kpi-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:0 2px 8px rgba(30,41,59,.06);padding:16px 18px}.kpi-label{color:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.1em;margin:0 0 6px;text-transform:uppercase}.kpi-value{color:var(--color-primary);font-family:var(--font-serif);font-size:28px;font-weight:700;line-height:1;margin:0}.kpi-value.healthcare{color:var(--color-healthcare)}.kpi-value.discovery{color:var(--color-discovery)}.kpi-value.pharma{color:var(--color-pharma)}.kpi-value.databank{color:var(--color-databank)}.kpi-trend{align-items:center;display:inline-flex;font-size:12px;font-weight:600;gap:4px;margin-top:6px}.kpi-trend i{font-size:11px}.kpi-trend--up{color:var(--color-success)}.kpi-trend--down{color:var(--color-danger)}.kpi-foot,.kpi-trend--flat{color:var(--text-muted)}.kpi-foot{font-size:11px;margin-top:4px}.kpi-extra{margin-top:12px}.badge{border-radius:4px;display:inline-block;font-size:10px;font-weight:600;padding:2px 8px}.badge-active{background:var(--color-success-bg);color:var(--color-success)}.badge-pending{background:var(--color-warning-bg);color:var(--color-warning)}.badge-error{background:var(--color-danger-bg);color:var(--color-danger)}.badge-info{background:var(--bg-hover);color:var(--color-primary)}.badge-grey{background:var(--bg-surface-3);color:var(--text-secondary)}table.tk{border-collapse:collapse;font-size:13px;width:100%}.sr-only,table.tk>caption.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}table.tk caption{caption-side:top;color:var(--text-primary);font-size:var(--font-13);font-weight:var(--weight-bold);padding:0 0 var(--space-8);text-align:left}table.tk th{background:var(--bg-surface-2);border-bottom:1px solid var(--border-default);color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:.08em;padding:12px 14px;text-align:left;text-transform:uppercase}table.tk tbody th[scope=row]{background:transparent;font-size:var(--font-13);font-weight:var(--weight-bold);letter-spacing:0;text-transform:none}table.tk tbody th[scope=row],table.tk td{border-bottom:1px solid var(--border-soft);color:var(--text-primary)}table.tk td{padding:12px 14px}table.tk tbody tr:nth-child(2n) td,table.tk tbody tr:nth-child(2n) th[scope=row]{background:var(--bg-surface-2)}table.tk tbody tr:hover td,table.tk tbody tr:hover th[scope=row]{background:var(--bg-hover)}table.tk th[aria-sort]{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}table.tk th[aria-sort]:hover{color:var(--text-primary)}.tk-wrap{overflow-x:auto}.tk-num{font-variant-numeric:tabular-nums;text-align:right}.tk-skeleton{height:14px;width:80%}.tk-empty{color:var(--text-muted);text-align:center}.nav-group{display:flex;flex-direction:column}.nav-group-header{align-items:center;background:none;border:0;color:var(--text-muted);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:11px;font-weight:700;gap:8px;letter-spacing:.08em;padding:8px 12px;text-align:left;text-transform:uppercase;transition:color var(--duration-fast) var(--ease-out);width:100%}.nav-group-header:hover{color:var(--text-secondary)}.nav-group-header .caret{display:inline-flex;margin-left:auto;transition:transform var(--duration-fast) var(--ease-out)}.nav-group[data-open=true]>.nav-group-header{color:var(--color-primary)}.nav-group[data-open=true]>.nav-group-header .caret{transform:rotate(180deg)}.nav-group-items{display:flex;flex-direction:column;gap:2px;padding:2px 0 8px}.cc-export:focus-visible,.cc-menu-item:focus-visible,.chart-card :focus-visible,.nav-group-header:focus-visible,table.tk th[aria-sort]:focus-visible{box-shadow:var(--shadow-focus);outline:2px solid var(--color-secondary);outline-offset:2px}.cc-menu-item,.nav-group-header{min-height:40px}body.text-large .kpi-label{font-size:13px}body.text-large .kpi-value{font-size:34px}body.text-large .kpi-trend{font-size:14px}body.text-large .kpi-foot{font-size:13px}body.text-large .chart-card-title{font-size:17px}body.text-large .chart-card-context{font-size:14px}body.text-large .chart-card-foot{font-size:12px}body.text-large .badge{font-size:12px;padding:3px 9px}body.text-large table.tk{font-size:15px}body.text-large table.tk th{font-size:13px}body.text-xl .kpi-label{font-size:14px}body.text-xl .kpi-value{font-size:40px}body.text-xl .kpi-trend{font-size:16px}body.text-xl .kpi-foot{font-size:14px}body.text-xl .chart-card-title{font-size:20px}body.text-xl .chart-card-context{font-size:16px}body.text-xl .chart-card-foot{font-size:14px}body.text-xl .badge{font-size:14px;padding:3px 10px}body.text-xl table.tk{font-size:16px}body.text-xl table.tk th{font-size:14px}body.high-contrast .cc-export,body.high-contrast .cc-menu,body.high-contrast .chart-card,body.high-contrast .kpi-card{border-width:2px}body.high-contrast .chart-card:hover{border-color:var(--border-default)}body.rm-switching,body.rm-switching *,body.rm-switching :after,body.rm-switching :before,body.theme-switching,body.theme-switching *,body.theme-switching :after,body.theme-switching :before{transition:none!important}body.high-contrast *{box-shadow:none!important}.rm-skeleton{animation:rm-skeleton-shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--bg-hover) 0,var(--bg-surface-2) 50%,var(--bg-hover) 100%);background-size:200% 100%;border-radius:var(--radius-md)}@keyframes rm-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.rm-skeleton{animation:none;background:var(--bg-hover)}}.rm-state-loading{display:flex;flex-direction:column;gap:10px;justify-content:center;min-height:240px;padding:8px 4px}.rm-spinner{animation:rm-spinner-turn .8s linear infinite;border:3px solid var(--border-default);border-radius:50%;border-top-color:var(--color-secondary);height:32px;width:32px}@keyframes rm-spinner-turn{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.rm-spinner{animation-duration:3s}}.rm-state{color:var(--text-secondary);flex-direction:column;font-family:var(--font-sans);gap:6px;min-height:240px;padding:36px 24px;text-align:center}.rm-state,.rm-state__icon{align-items:center;display:flex;justify-content:center}.rm-state__icon{background:var(--bg-surface-3);border-radius:50%;color:var(--text-muted);height:56px;margin-bottom:6px;width:56px}.rm-state__title{color:var(--text-primary);font-size:var(--font-14);font-weight:var(--weight-semibold);margin:0}.rm-state__text{color:var(--text-muted);font-size:var(--font-12);line-height:1.5;margin:0;max-width:280px}.rm-state__action{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:inline-flex;font-family:inherit;font-size:var(--font-12);font-weight:var(--weight-semibold);gap:6px;margin-top:10px;padding:6px 14px}.rm-state__action:hover{background:var(--bg-surface-3);color:var(--text-primary)}.rm-state--error .rm-state__icon{background:var(--color-danger-bg);color:var(--color-danger)}.rm-state--error .rm-state__action{border-color:var(--color-danger);color:var(--color-danger)}.rm-state--error .rm-state__action:hover{background:var(--color-danger-bg)}

package/dist/runtime/components/Button.vue

@@ -14,6 +14,12 @@ export interface RmButtonProps {
   prefixIcon?: string
   /** Phosphor icon name after the label */
   suffixIcon?: string
+  /**
+   * Action en cours : le bouton tourne et n'accepte plus de clic. Sans cet
+   * etat, un export long laisse croire que le clic n'a pas pris et l'utilisateur
+   * relance la meme requete.
+   */
+  loading?: boolean
 }
 
 withDefaults(defineProps<RmButtonProps>(), {
@@ -24,6 +30,7 @@ withDefaults(defineProps<RmButtonProps>(), {
   type: 'button',
   prefixIcon: undefined,
   suffixIcon: undefined,
+  loading: false,
 })
 
 defineEmits<{
@@ -34,21 +41,23 @@ defineEmits<{
 <template>
   <button
     :type="type"
-    :disabled="disabled"
+    :disabled="disabled || loading"
+    :aria-busy="loading ? 'true' : undefined"
     :class="[
       'rm-button',
       `rm-button--${variant}`,
       `rm-button--${size}`,
-      { 'rm-button--block': block },
+      { 'rm-button--block': block, 'rm-button--loading': loading },
     ]"
     @click="$emit('click', $event)"
   >
-    <RmIcon v-if="prefixIcon" :name="prefixIcon" :size="size === 'sm' ? 14 : 16" />
+    <RmIcon v-if="loading" name="CircleNotch" :size="size === 'sm' ? 14 : 16" class="rm-button__spinner" />
+    <RmIcon v-else-if="prefixIcon" :name="prefixIcon" :size="size === 'sm' ? 14 : 16" />
     <slot />
     <RmIcon v-if="suffixIcon" :name="suffixIcon" :size="size === 'sm' ? 14 : 16" />
   </button>
 </template>
 
 <style scoped>
-.rm-button{align-items:center;border:1px solid transparent;border-radius:6px;cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-weight:500;gap:8px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.rm-button:focus-visible{outline:2px solid var(--color-healthcare);outline-offset:2px}.rm-button:disabled{cursor:not-allowed;opacity:.5}.rm-button--sm{font-size:13px;height:32px;padding:6px 16px}.rm-button--md{font-size:14px;height:40px;padding:10px 24px}.rm-button--lg{font-size:15px;height:48px;padding:12px 28px}.rm-button--primary{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.rm-button--primary:active:not(:disabled),.rm-button--primary:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.rm-button--primary-fill{background:linear-gradient(180deg,rgba(var(--healthcare-rgb),.8) 0,rgba(var(--healthcare-rgb),.9) 100%);border-color:var(--color-healthcare);box-shadow:0 2px 3px 0 rgba(var(--healthcare-rgb),.5);color:var(--color-text-inverse)}.rm-button--primary-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-healthcare) 0,var(--color-healthcare) 100%);box-shadow:0 2px 4px 0 rgba(var(--healthcare-rgb),.6)}.rm-button--primary-fill:active:not(:disabled){background:var(--color-healthcare-active);box-shadow:0 1px 2px 0 rgba(var(--healthcare-rgb),.4)}.rm-button--primary-stroke{box-shadow:0 2px 3px 0 rgba(var(--healthcare-rgb),.5);color:var(--color-healthcare)}.rm-button--primary-stroke,.rm-button--primary-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-healthcare)}.rm-button--primary-stroke:hover:not(:disabled){box-shadow:none}.rm-button--primary-stroke:active:not(:disabled){background:var(--bg-hover);box-shadow:none}.rm-button--discovery-fill{background:linear-gradient(180deg,rgba(var(--discovery-rgb),.8) 0,rgba(var(--discovery-rgb),.9) 100%);border-color:var(--color-discovery);box-shadow:0 2px 3px 0 rgba(var(--discovery-rgb),.5);color:var(--color-text-inverse)}.rm-button--discovery-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-discovery) 0,var(--color-discovery) 100%);border-color:var(--color-discovery);box-shadow:none}.rm-button--discovery-fill:active:not(:disabled){background:linear-gradient(180deg,var(--color-discovery-active) 0,var(--color-discovery-active) 100%);box-shadow:none}.rm-button--discovery-stroke{box-shadow:0 2px 3px 0 rgba(var(--discovery-rgb),.5);color:var(--color-discovery)}.rm-button--discovery-stroke,.rm-button--discovery-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-discovery)}.rm-button--discovery-stroke:hover:not(:disabled){box-shadow:none}.rm-button--discovery-stroke:active:not(:disabled){background:rgba(var(--discovery-rgb),.05);box-shadow:none}.rm-button--databank-fill{background:linear-gradient(180deg,rgba(var(--databank-rgb),.8) 0,rgba(var(--databank-rgb),.9) 100%);border-color:var(--color-databank);box-shadow:0 2px 3px 0 rgba(var(--databank-rgb),.5);color:var(--color-text-inverse)}.rm-button--databank-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-databank) 0,var(--color-databank) 100%);border-color:var(--color-databank);box-shadow:none}.rm-button--databank-fill:active:not(:disabled){background:linear-gradient(180deg,var(--color-databank-active) 0,var(--color-databank-active) 100%);box-shadow:none}.rm-button--databank-stroke{box-shadow:0 2px 3px 0 rgba(var(--databank-rgb),.5);color:var(--color-databank)}.rm-button--databank-stroke,.rm-button--databank-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-databank)}.rm-button--databank-stroke:hover:not(:disabled){box-shadow:none}.rm-button--databank-stroke:active:not(:disabled){background:rgba(var(--databank-rgb),.05);box-shadow:none}.rm-button--pharma-fill{background:linear-gradient(180deg,var(--color-pharma-soft) 0,var(--color-pharma) 100%);border-color:var(--color-pharma);box-shadow:0 2px 3px 0 rgba(var(--pharma-rgb),.5);color:var(--color-text-inverse)}.rm-button--pharma-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-pharma) 0,var(--color-pharma) 100%);border-color:var(--color-pharma);box-shadow:none}.rm-button--pharma-fill:active:not(:disabled){background:linear-gradient(180deg,var(--color-pharma-active) 0,var(--color-pharma-active) 100%);box-shadow:none}.rm-button--pharma-stroke{box-shadow:0 2px 3px 0 rgba(var(--pharma-rgb),.5);color:var(--color-pharma)}.rm-button--pharma-stroke,.rm-button--pharma-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-pharma)}.rm-button--pharma-stroke:hover:not(:disabled){box-shadow:none}.rm-button--pharma-stroke:active:not(:disabled){background:rgba(var(--pharma-rgb),.05);box-shadow:none}.rm-button--secondary{background-color:var(--bg-surface);border-color:var(--border-default);color:var(--text-secondary)}.rm-button--secondary:active:not(:disabled),.rm-button--secondary:hover:not(:disabled){background-color:var(--bg-surface-3);border-color:var(--color-violet-pale);color:var(--text-primary)}.rm-button--outline{background-color:transparent;border-color:var(--border-default);color:var(--text-secondary)}.rm-button--outline:hover:not(:disabled){background-color:var(--bg-surface-2);border-color:var(--text-muted)}.rm-button--outline:active:not(:disabled){background-color:var(--bg-surface-3)}.rm-button--danger{background-color:var(--bg-surface);border-color:var(--color-danger);color:var(--color-danger)}.rm-button--danger:active:not(:disabled),.rm-button--danger:hover:not(:disabled){background-color:var(--color-danger);color:var(--color-text-inverse)}.rm-button--ghost{background-color:transparent;color:var(--text-secondary)}.rm-button--ghost:hover:not(:disabled){background-color:var(--bg-surface-3)}.rm-button--ghost:active:not(:disabled){background-color:var(--border-default)}.rm-button--block{width:100%}
+.rm-button--loading{cursor:progress}.rm-button__spinner{animation:rm-button-spin .9s linear infinite}@keyframes rm-button-spin{to{transform:rotate(1turn)}}.rm-button{align-items:center;border:1px solid transparent;border-radius:6px;cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-weight:500;gap:8px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.rm-button:focus-visible{outline:2px solid var(--color-healthcare);outline-offset:2px}.rm-button:disabled{cursor:not-allowed;opacity:.5}.rm-button--sm{font-size:13px;height:32px;padding:6px 16px}.rm-button--md{font-size:14px;height:40px;padding:10px 24px}.rm-button--lg{font-size:15px;height:48px;padding:12px 28px}.rm-button--primary{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.rm-button--primary:active:not(:disabled),.rm-button--primary:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.rm-button--primary-fill{background:linear-gradient(180deg,rgba(var(--healthcare-rgb),.8) 0,rgba(var(--healthcare-rgb),.9) 100%);border-color:var(--color-healthcare);box-shadow:0 2px 3px 0 rgba(var(--healthcare-rgb),.5);color:var(--color-text-inverse)}.rm-button--primary-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-healthcare) 0,var(--color-healthcare) 100%);box-shadow:0 2px 4px 0 rgba(var(--healthcare-rgb),.6)}.rm-button--primary-fill:active:not(:disabled){background:var(--color-healthcare-active);box-shadow:0 1px 2px 0 rgba(var(--healthcare-rgb),.4)}.rm-button--primary-stroke{box-shadow:0 2px 3px 0 rgba(var(--healthcare-rgb),.5);color:var(--color-healthcare)}.rm-button--primary-stroke,.rm-button--primary-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-healthcare)}.rm-button--primary-stroke:hover:not(:disabled){box-shadow:none}.rm-button--primary-stroke:active:not(:disabled){background:var(--bg-hover);box-shadow:none}.rm-button--discovery-fill{background:linear-gradient(180deg,rgba(var(--discovery-rgb),.8) 0,rgba(var(--discovery-rgb),.9) 100%);border-color:var(--color-discovery);box-shadow:0 2px 3px 0 rgba(var(--discovery-rgb),.5);color:var(--color-text-inverse)}.rm-button--discovery-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-discovery) 0,var(--color-discovery) 100%);border-color:var(--color-discovery);box-shadow:none}.rm-button--discovery-fill:active:not(:disabled){background:linear-gradient(180deg,var(--color-discovery-active) 0,var(--color-discovery-active) 100%);box-shadow:none}.rm-button--discovery-stroke{box-shadow:0 2px 3px 0 rgba(var(--discovery-rgb),.5);color:var(--color-discovery)}.rm-button--discovery-stroke,.rm-button--discovery-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-discovery)}.rm-button--discovery-stroke:hover:not(:disabled){box-shadow:none}.rm-button--discovery-stroke:active:not(:disabled){background:rgba(var(--discovery-rgb),.05);box-shadow:none}.rm-button--databank-fill{background:linear-gradient(180deg,rgba(var(--databank-rgb),.8) 0,rgba(var(--databank-rgb),.9) 100%);border-color:var(--color-databank);box-shadow:0 2px 3px 0 rgba(var(--databank-rgb),.5);color:var(--color-text-inverse)}.rm-button--databank-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-databank) 0,var(--color-databank) 100%);border-color:var(--color-databank);box-shadow:none}.rm-button--databank-fill:active:not(:disabled){background:linear-gradient(180deg,var(--color-databank-active) 0,var(--color-databank-active) 100%);box-shadow:none}.rm-button--databank-stroke{box-shadow:0 2px 3px 0 rgba(var(--databank-rgb),.5);color:var(--color-databank)}.rm-button--databank-stroke,.rm-button--databank-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-databank)}.rm-button--databank-stroke:hover:not(:disabled){box-shadow:none}.rm-button--databank-stroke:active:not(:disabled){background:rgba(var(--databank-rgb),.05);box-shadow:none}.rm-button--pharma-fill{background:linear-gradient(180deg,var(--color-pharma-soft) 0,var(--color-pharma) 100%);border-color:var(--color-pharma);box-shadow:0 2px 3px 0 rgba(var(--pharma-rgb),.5);color:var(--color-text-inverse)}.rm-button--pharma-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-pharma) 0,var(--color-pharma) 100%);border-color:var(--color-pharma);box-shadow:none}.rm-button--pharma-fill:active:not(:disabled){background:linear-gradient(180deg,var(--color-pharma-active) 0,var(--color-pharma-active) 100%);box-shadow:none}.rm-button--pharma-stroke{box-shadow:0 2px 3px 0 rgba(var(--pharma-rgb),.5);color:var(--color-pharma)}.rm-button--pharma-stroke,.rm-button--pharma-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-pharma)}.rm-button--pharma-stroke:hover:not(:disabled){box-shadow:none}.rm-button--pharma-stroke:active:not(:disabled){background:rgba(var(--pharma-rgb),.05);box-shadow:none}.rm-button--secondary{background-color:var(--bg-surface);border-color:var(--border-default);color:var(--text-secondary)}.rm-button--secondary:active:not(:disabled),.rm-button--secondary:hover:not(:disabled){background-color:var(--bg-surface-3);border-color:var(--color-violet-pale);color:var(--text-primary)}.rm-button--outline{background-color:transparent;border-color:var(--border-default);color:var(--text-secondary)}.rm-button--outline:hover:not(:disabled){background-color:var(--bg-surface-2);border-color:var(--text-muted)}.rm-button--outline:active:not(:disabled){background-color:var(--bg-surface-3)}.rm-button--danger{background-color:var(--bg-surface);border-color:var(--color-danger);color:var(--color-danger)}.rm-button--danger:active:not(:disabled),.rm-button--danger:hover:not(:disabled){background-color:var(--color-danger);color:var(--color-text-inverse)}.rm-button--ghost{background-color:transparent;color:var(--text-secondary)}.rm-button--ghost:hover:not(:disabled){background-color:var(--bg-surface-3)}.rm-button--ghost:active:not(:disabled){background-color:var(--border-default)}.rm-button--block{width:100%}
 </style>

package/dist/runtime/components/ChartCard.vue

@@ -113,7 +113,15 @@ const t = computed(() => WORDS[props.lang])
 
 // Une chaine deja formatee ("17 juin 2026") n'est pas parsable : on la garde
 // telle quelle plutot que d'afficher "Invalid Date".
+/**
+ * Une chaine deja formatee ("June 2026", "T2 2025") passe telle quelle : la
+ * reparser inventerait un jour que la source ne donne pas. Seules une date
+ * technique (Date, timestamp, ISO) sont mises au format long.
+ */
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}/
+
 const verifiedText = computed(() => {
+  if (typeof props.verified === 'string' && !ISO_DATE.test(props.verified)) return props.verified
   const parsed = new Date(props.verified)
   if (Number.isNaN(parsed.getTime())) return String(props.verified)
   return props.lang === 'en'

package/dist/runtime/components/ExportPanel.vue

@@ -287,7 +287,7 @@ const sizeKb = computed(() =>
 )
 
 const fullFileName = computed(() => {
-  if (isPermalink.value) return '—'
+  if (isPermalink.value) return '-'
   const extension = RM_EXPORT_EXTENSIONS[config.format] ?? config.format
   return `${config.fileName || 'export'}.${extension}`
 })

package/dist/runtime/components/FilterDropdown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { PhCaretDown, PhCheck } from '@phosphor-icons/vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { PhCaretDown, PhCheck, PhMagnifyingGlass } from '@phosphor-icons/vue'
 import type { Component } from 'vue'
 
 export interface FilterDropdownOption {
@@ -14,17 +14,32 @@ const props = withDefaults(defineProps<{
   options: FilterDropdownOption[]
   multiple?: boolean
   showSelectAll?: boolean
+  /**
+   * Champ de recherche en tete de liste. `auto` l'ajoute au-dela de
+   * SEARCH_THRESHOLD options : une liste de 500 societes ne se parcourt pas a
+   * la molette, et une liste de six n'a rien a filtrer.
+   */
+  searchable?: boolean | 'auto'
+  /** Texte du champ de recherche, quand il y en a un. */
+  searchPlaceholder?: string
 }>(), {
   icon: undefined,
   multiple: true,
   showSelectAll: false,
+  searchable: 'auto',
+  searchPlaceholder: 'Rechercher...',
 })
 
 const selected = defineModel<string[]>({ default: () => [] })
 
 const isOpen = ref(false)
 const chipRef = ref<HTMLElement>()
+const searchRef = ref<HTMLInputElement>()
 const hasUserChanged = ref(false)
+const search = ref('')
+
+/** Au-dela de ce nombre d'options, `searchable: 'auto'` pose le champ. */
+const SEARCH_THRESHOLD = 12
 
 // Initialise synchrone pour éviter hydration mismatch
 if (!props.multiple && selected.value.length === 0 && props.options.length > 0) {
@@ -33,18 +48,41 @@ if (!props.multiple && selected.value.length === 0 && props.options.length > 0)
 
 const isActive = computed(() => hasUserChanged.value && selected.value.length > 0)
 
+// Un filtre a choix unique affiche toujours son choix, meme avant toute
+// interaction : la valeur par defaut fait partie du filtre, la cacher revient
+// a lire la page sans savoir sur quoi elle porte.
 const displayLabel = computed(() => {
-  if (!props.multiple && isActive.value && selected.value.length === 1) {
+  if (!props.multiple && selected.value.length === 1) {
     const option = props.options.find(o => o.value === selected.value[0])
     return option ? `${props.label}: ${option.label}` : props.label
   }
   return props.label
 })
 
+const hasSearch = computed(() =>
+  props.searchable === 'auto' ? props.options.length > SEARCH_THRESHOLD : props.searchable,
+)
+
+const filteredOptions = computed(() => {
+  if (!hasSearch.value || !search.value.trim()) return props.options
+  const needle = search.value.trim().toLowerCase()
+  return props.options.filter(o => o.label.toLowerCase().includes(needle))
+})
+
 function toggle() {
   isOpen.value = !isOpen.value
 }
 
+// La recherche repart vide a chaque ouverture, et prend le curseur : sinon le
+// filtre garde la saisie precedente et la liste s'ouvre deja amputee.
+watch(isOpen, async (open) => {
+  if (!open) return
+  search.value = ''
+  if (!hasSearch.value) return
+  await nextTick()
+  searchRef.value?.focus()
+})
+
 function toggleOption(value: string) {
   hasUserChanged.value = true
   if (props.multiple) {
@@ -106,6 +144,16 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
 
     <Transition name="dropdown">
       <div v-if="isOpen" class="filter-chip__dropdown">
+        <label v-if="hasSearch" class="filter-chip__search">
+          <PhMagnifyingGlass :size="14" />
+          <input
+            ref="searchRef"
+            v-model="search"
+            type="search"
+            :placeholder="searchPlaceholder"
+            @click.stop
+          />
+        </label>
         <button
           v-if="showSelectAll && multiple && options.length > 0"
           class="filter-chip__select-all"
@@ -117,8 +165,11 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
           <span>{{ allSelected ? 'Deselect all' : 'Select all' }}</span>
         </button>
         <div :class="{ 'filter-chip__options-group': showSelectAll && multiple && options.length > 0 }">
+        <p v-if="hasSearch && filteredOptions.length === 0" class="filter-chip__no-match">
+          Aucun résultat
+        </p>
         <button
-          v-for="option in options"
+          v-for="option in filteredOptions"
           :key="option.value"
           class="filter-chip__option"
           :class="{ 'filter-chip__option--selected': isSelected(option.value) }"
@@ -141,5 +192,5 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
 </template>
 
 <style scoped>
-.filter-chip-wrapper{position:relative}.filter-chip{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;box-sizing:border-box;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:8px;height:32px;padding:8px;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap;width:193px}.filter-chip:hover{border-color:var(--border-default)}.filter-chip__icon{color:var(--color-healthcare);flex-shrink:0}.filter-chip--active{border-color:var(--color-healthcare);box-shadow:0 0 8px 0 rgba(var(--healthcare-rgb),.1)}.filter-chip__label{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.filter-chip__badge{align-items:center;background-color:var(--color-healthcare);border-radius:100px;color:var(--color-text-inverse);display:inline-flex;flex-shrink:0;font-size:11px;font-weight:600;height:18px;justify-content:center;line-height:1;min-width:18px;padding:0 5px}.filter-chip__caret{color:var(--text-muted);flex-shrink:0;transition:transform var(--duration-fast) var(--ease-in-out)}.filter-chip__caret--open{transform:rotate(180deg)}.filter-chip__dropdown{background-color:var(--color-text-inverse);border:1px solid var(--border-default);border-radius:6px;box-shadow:0 4px 12px rgba(var(--shadow-rgb),.08),0 2px 4px rgba(var(--shadow-rgb),.04);left:0;max-height:300px;max-width:420px;min-width:380px;overflow-y:auto;padding:4px;position:absolute;top:calc(100% + 4px);width:-moz-max-content;width:max-content;z-index:50}.filter-chip__option{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:6px 8px;text-align:left;transition:background-color var(--duration-fast) var(--ease-in-out);width:100%}.filter-chip__option:hover{background-color:var(--bg-surface-2)}.filter-chip__option--selected{color:var(--text-primary);font-weight:var(--weight-medium)}.filter-chip__checkbox{align-items:center;border:1.5px solid var(--border-default);border-radius:3px;display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.filter-chip__checkbox--checked{background-color:var(--color-healthcare);border-color:var(--color-healthcare);color:var(--color-text-inverse)}.filter-chip__radio{align-items:center;border:1.5px solid var(--border-default);border-radius:100%;display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.filter-chip__radio--checked{border-color:var(--color-healthcare)}.filter-chip__radio--checked:after{background-color:var(--color-healthcare);border-radius:100%;content:"";height:8px;width:8px}.filter-chip__select-all{align-items:center;background:none;border:none;border-radius:4px;color:var(--color-healthcare);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:500;gap:8px;padding:6px 8px;text-align:left;width:100%}.filter-chip__select-all:hover{background-color:rgba(var(--healthcare-rgb),.04)}.filter-chip__options-group{border-left:1px solid var(--border-default);margin-left:14px;padding-left:6px}.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-chip-wrapper{position:relative}.filter-chip{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;box-sizing:border-box;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:8px;height:32px;padding:8px;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap;width:193px}.filter-chip:hover{border-color:var(--border-default)}.filter-chip__icon{color:var(--color-healthcare);flex-shrink:0}.filter-chip--active{border-color:var(--color-healthcare);box-shadow:0 0 8px 0 rgba(var(--healthcare-rgb),.1)}.filter-chip__label{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.filter-chip__badge{align-items:center;background-color:var(--color-healthcare);border-radius:100px;color:var(--color-text-inverse);display:inline-flex;flex-shrink:0;font-size:11px;font-weight:600;height:18px;justify-content:center;line-height:1;min-width:18px;padding:0 5px}.filter-chip__caret{color:var(--text-muted);flex-shrink:0;transition:transform var(--duration-fast) var(--ease-in-out)}.filter-chip__caret--open{transform:rotate(180deg)}.filter-chip__dropdown{background-color:var(--color-text-inverse);border:1px solid var(--border-default);border-radius:6px;box-shadow:0 4px 12px rgba(var(--shadow-rgb),.08),0 2px 4px rgba(var(--shadow-rgb),.04);left:0;max-height:300px;max-width:420px;min-width:380px;overflow-y:auto;padding:4px;position:absolute;top:calc(100% + 4px);width:-moz-max-content;width:max-content;z-index:50}.filter-chip__search{align-items:center;background-color:var(--color-text-inverse);border-bottom:1px solid var(--border-soft);color:var(--text-muted);display:flex;gap:6px;margin:-4px -4px 4px;padding:8px;position:sticky;top:-4px;z-index:1}.filter-chip__search input{background:none;border:none;color:var(--text-primary);flex:1;font-family:var(--font-sans);font-size:var(--font-14);min-width:0;outline:none}.filter-chip__search input::-webkit-search-cancel-button{cursor:pointer}.filter-chip__no-match{color:var(--text-muted);margin:0;padding:10px 8px}.filter-chip__no-match,.filter-chip__option{font-family:var(--font-sans);font-size:var(--font-14)}.filter-chip__option{align-items:center;background:none;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:flex;gap:8px;padding:6px 8px;text-align:left;transition:background-color var(--duration-fast) var(--ease-in-out);width:100%}.filter-chip__option:hover{background-color:var(--bg-surface-2)}.filter-chip__option--selected{color:var(--text-primary);font-weight:var(--weight-medium)}.filter-chip__checkbox{align-items:center;border:1.5px solid var(--border-default);border-radius:3px;display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.filter-chip__checkbox--checked{background-color:var(--color-healthcare);border-color:var(--color-healthcare);color:var(--color-text-inverse)}.filter-chip__radio{align-items:center;border:1.5px solid var(--border-default);border-radius:100%;display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.filter-chip__radio--checked{border-color:var(--color-healthcare)}.filter-chip__radio--checked:after{background-color:var(--color-healthcare);border-radius:100%;content:"";height:8px;width:8px}.filter-chip__select-all{align-items:center;background:none;border:none;border-radius:4px;color:var(--color-healthcare);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:500;gap:8px;padding:6px 8px;text-align:left;width:100%}.filter-chip__select-all:hover{background-color:rgba(var(--healthcare-rgb),.04)}.filter-chip__options-group{border-left:1px solid var(--border-default);margin-left:14px;padding-left:6px}.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/components/HybridTable.vue

@@ -1,71 +1,136 @@
+<!--
+  Tableau a barres : un classement ou chaque ligne porte sa part sous forme de
+  barre, derriere son libelle, et sa valeur chiffree a droite.
+
+  Remplace `arg-hybrid-chart` d'Auriga, avec le meme contrat de lecture : la
+  barre la plus longue vaut la plus grande part, la valeur garde son pourcentage
+  entre parentheses, et un bouton deplie le reste du classement quand `limit`
+  coupe la liste.
+
+  La barre n'est pas un graphe : c'est un tableau, lisible au lecteur d'ecran
+  ligne a ligne, ou la barre n'est qu'un fond. C'est ce qui la distingue de
+  RmBarChart, qui peint un SVG.
+-->
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-/**
- * HybridTable — a table with inline horizontal bars behind values.
- * Each row shows a label, a value, and a bar proportional to the max value.
- */
+import { rmNumber } from '../utils/format'
 
-export interface HybridTableRow {
+export interface RmHybridRow {
   label: string
   value: number
+  /** Part en pourcent, deja calculee (0-100). Affichee entre parentheses. */
+  percentage?: number | string
+  /** Colonnes de fin de ligne, alignees a droite apres la valeur. */
+  extra?: (string | number)[]
 }
 
 const props = withDefaults(defineProps<{
-  rows: HybridTableRow[]
-  title?: string
-  color?: string
-  maxVisible?: number
-  valueFormatter?: (val: number) => string
+  rows: RmHybridRow[]
+  /**
+   * En-tetes de colonnes : le libelle, la valeur, puis un titre par colonne
+   * `extra`. Vide : le tableau n'a pas de tete.
+   */
+  columns?: string[]
+  /**
+   * Couleur de la barre. Un chiffre de 1 a 6 prend la couleur categorielle du
+   * theme (`--chart-cat-N`), qui suit le mode nuit et les modes daltoniens ;
+   * une chaine passe telle quelle, pour une couleur imposee par la page.
+   */
+  accent?: number | string
+  /** Nombre de lignes visibles au repos. 0 : tout le classement. */
+  limit?: number
+  /** Langue du bouton de depliage. Le reste du texte vient de la page. */
+  lang?: 'fr' | 'en'
+  /** Formatage de la valeur. Par defaut le format francais (rmNumber). */
+  valueFormatter?: (value: number) => string
 }>(), {
-  title: undefined,
-  color: '#4164EE',
-  maxVisible: 10,
-  valueFormatter: (val: number) => val.toLocaleString(),
+  columns: () => [],
+  accent: 1,
+  limit: 0,
+  lang: 'fr',
+  valueFormatter: rmNumber,
 })
 
+const emit = defineEmits<{ showState: [value: boolean] }>()
+
 const showAll = ref(false)
 
-const maxValue = computed(() => Math.max(...props.rows.map(r => r.value), 1))
+const barColor = computed(() =>
+  typeof props.accent === 'number' ? `var(--chart-cat-${props.accent})` : props.accent,
+)
+
+const visibleRows = computed(() =>
+  props.limit && !showAll.value ? props.rows.slice(0, props.limit) : props.rows,
+)
 
-const visibleRows = computed(() => {
-  if (showAll.value) return props.rows
-  return props.rows.slice(0, props.maxVisible)
+const hasMore = computed(() => Boolean(props.limit) && props.rows.length > props.limit)
+
+/**
+ * La barre se lit en relatif : la plus grande part occupe toute la largeur,
+ * les autres se mesurent contre elle. Une barre proportionnelle a la part
+ * absolue serait illisible des que le premier du classement pese 3 %.
+ */
+const reference = computed(() => {
+  const shares = props.rows.map(share)
+  return Math.max(...shares, 0) || 1
 })
 
-const hasMore = computed(() => props.rows.length > props.maxVisible)
+function share(row: RmHybridRow) {
+  if (row.percentage !== undefined && row.percentage !== null && row.percentage !== '') {
+    return Number(row.percentage)
+  }
+  // Sans part fournie, la valeur se rapporte au total affiche.
+  const total = props.rows.reduce((sum, r) => sum + r.value, 0)
+  return total ? (row.value * 100) / total : 0
+}
+
+function barWidth(row: RmHybridRow) {
+  return `${Math.min((share(row) * 100) / reference.value, 100)}%`
+}
+
+function toggle() {
+  showAll.value = !showAll.value
+  emit('showState', showAll.value)
+}
 </script>
 
 <template>
-  <div class="hybrid-table">
-    <h3 v-if="title" class="hybrid-table__title">{{ title }}</h3>
-
-    <div class="hybrid-table__list">
-      <div
-        v-for="(row, idx) in visibleRows"
-        :key="idx"
-        class="hybrid-table__row"
-      >
-        <span class="hybrid-table__label">{{ row.label }}</span>
-        <div class="hybrid-table__bar-wrapper">
-          <div
-            class="hybrid-table__bar"
-            :style="{ width: `${(row.value / maxValue) * 100}%`, backgroundColor: color }"
-          />
-        </div>
-        <span class="hybrid-table__value">{{ valueFormatter(row.value) }}</span>
-      </div>
-    </div>
+  <div class="rm-hybrid">
+    <table class="rm-hybrid__table">
+      <thead v-if="columns.length" class="rm-hybrid__head">
+        <tr>
+          <th v-for="(column, index) in columns" :key="index" class="rm-hybrid__th">
+            {{ column }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, index) in visibleRows" :key="index" class="rm-hybrid__row">
+          <th scope="row" class="rm-hybrid__label_cell">
+            <span class="rm-hybrid__bar" :style="{ background: barColor, width: barWidth(row) }" />
+            <span class="rm-hybrid__label" :title="row.label">{{ row.label }}</span>
+          </th>
+          <td class="rm-hybrid__value">
+            {{ valueFormatter(row.value) }}
+            <span v-if="row.percentage !== undefined && row.percentage !== null" class="rm-hybrid__share">
+              ({{ row.percentage }} %)
+            </span>
+          </td>
+          <td v-for="(cell, cellIndex) in row.extra ?? []" :key="cellIndex" class="rm-hybrid__value">
+            {{ cell }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
 
-    <button
-      v-if="hasMore"
-      class="hybrid-table__toggle"
-      @click="showAll = !showAll"
-    >
-      {{ showAll ? 'Show less' : `Show all (${rows.length})` }}
-    </button>
+    <div v-if="hasMore" class="rm-hybrid__footer">
+      <RmButton variant="outline" size="sm" :prefix-icon="showAll ? 'CornersIn' : 'CornersOut'" @click="toggle">
+        {{ showAll ? (lang === 'fr' ? 'Voir moins' : 'Show less') : (lang === 'fr' ? 'Voir plus' : 'Show more') }}
+      </RmButton>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.hybrid-table{font-family:var(--r-font-family)}.hybrid-table__title{color:var(--r-color-gray-700);font-size:14px;font-weight:600;margin:0 0 12px}.hybrid-table__list{display:flex;flex-direction:column;gap:6px}.hybrid-table__row{align-items:center;display:flex;gap:12px;padding:6px 0}.hybrid-table__label{color:var(--r-color-gray-700);flex-shrink:0;font-size:13px;min-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hybrid-table__bar-wrapper{background:var(--r-color-gray-50);border-radius:4px;flex:1;height:20px;overflow:hidden}.hybrid-table__bar{border-radius:4px;height:100%;min-width:2px;transition:width .4s ease}.hybrid-table__value{color:var(--r-color-gray-900);flex-shrink:0;font-size:13px;font-weight:600;min-width:50px;text-align:right}.hybrid-table__toggle{background:none;border:none;color:#4164ee;cursor:pointer;font-family:var(--r-font-family);font-size:13px;margin-top:8px;padding:0;text-decoration:underline}.hybrid-table__toggle:hover{color:#3451d4}
+.rm-hybrid{font-family:var(--font-sans);width:100%}.rm-hybrid__table{border-collapse:collapse;table-layout:auto;width:100%}.rm-hybrid__th{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-normal);line-height:14px;padding:4px 10px;text-align:right;white-space:nowrap}.rm-hybrid__th:first-child{padding-left:0;text-align:left}.rm-hybrid__th:last-child{padding-right:0}.rm-hybrid__row{height:34px}.rm-hybrid__label_cell{font-weight:var(--weight-normal);padding:0;position:relative;text-align:left;width:100%}.rm-hybrid__bar{border-radius:var(--radius-sm);bottom:2px;left:0;opacity:.14;position:absolute;top:2px}.rm-hybrid__label{display:block;overflow:hidden;padding:6px 10px 6px 8px;position:relative;text-overflow:ellipsis}.rm-hybrid__label,.rm-hybrid__value{color:var(--text-primary);font-size:var(--font-13);white-space:nowrap}.rm-hybrid__value{font-variant-numeric:tabular-nums;font-weight:var(--weight-medium);padding:6px 10px;text-align:right}.rm-hybrid__value:last-child{padding-right:0}.rm-hybrid__share{color:var(--text-muted);font-weight:var(--weight-normal);margin-left:2px}.rm-hybrid__footer{display:flex;justify-content:center;margin-top:16px}
 </style>

package/dist/runtime/components/Kpi.vue

@@ -59,5 +59,8 @@ const trendText = computed(() =>
       <span v-if="trendLabel">{{ trendLabel }}</span>
     </p>
     <p v-if="note" class="kpi-foot">{{ note }}</p>
+    <!-- Complement de tuile : une repartition, une mini-courbe. Le contenu
+         projete reste sous le pied, pour ne pas repousser la valeur. -->
+    <div v-if="$slots.default" class="kpi-extra"><slot /></div>
   </div>
 </template>

package/dist/runtime/components/LineChart.vue

@@ -53,7 +53,7 @@ const props = withDefaults(defineProps<{
   axisLabels: undefined,
   valueLabels: false,
   hideValueAxis: false,
-  legendPosition: 'top',
+  legendPosition: 'bottom',
   startAtZero: false,
   numberFormat: undefined,
   height: 'standard',

package/dist/runtime/components/NumberInput.vue

@@ -0,0 +1,93 @@
+<!--
+  Champ numerique borne, pour les filtres qui prennent un nombre plutot qu'une
+  liste : un "Top N", un seuil, un nombre de mois.
+
+  Remplace `arg-number-input` d'Auriga. Meme hauteur et meme rayon que la puce
+  de filtre (RmFilterDropdown) : les deux se rangent sur la meme rangee.
+
+  La valeur est toujours ramenee dans les bornes, y compris a la frappe : un
+  filtre qui laisse saisir 5000 quand la donnee s'arrete a 100 renvoie une page
+  vide sans rien dire.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  /** Libelle du champ, au-dessus. Vide : aucun libelle. */
+  label?: string
+  /** Borne basse. */
+  min?: number
+  /** Borne haute. */
+  max?: number
+  /** Pas des boutons moins et plus. */
+  step?: number
+}>(), {
+  label: undefined,
+  min: 0,
+  max: Number.MAX_SAFE_INTEGER,
+  step: 1,
+})
+
+const model = defineModel<number>({ default: 0 })
+
+const atMin = computed(() => model.value <= props.min)
+const atMax = computed(() => model.value >= props.max)
+
+function clamp(value: number) {
+  if (Number.isNaN(value)) return props.min
+  return Math.min(Math.max(value, props.min), props.max)
+}
+
+function nudge(delta: number) {
+  model.value = clamp(model.value + delta)
+}
+
+function onInput(event: Event) {
+  const input = event.target as HTMLInputElement
+  const next = clamp(Number(input.value))
+  model.value = next
+  // Le champ affiche ce qui est retenu : sans ca, une saisie hors bornes reste
+  // a l'ecran alors que la page filtre sur autre chose.
+  if (String(next) !== input.value) input.value = String(next)
+}
+</script>
+
+<template>
+  <div class="rm-number">
+    <label v-if="label" class="rm-number__label">{{ label }}</label>
+    <div class="rm-number__box">
+      <button
+        type="button"
+        class="rm-number__step"
+        :disabled="atMin"
+        :aria-label="`Diminuer${label ? ' ' + label : ''}`"
+        @click="nudge(-step)"
+      >
+        <RmIcon name="Minus" :size="14" />
+      </button>
+      <input
+        class="rm-number__input"
+        type="number"
+        :value="model"
+        :min="min"
+        :max="max"
+        :step="step"
+        :aria-label="label"
+        @input="onInput"
+      />
+      <button
+        type="button"
+        class="rm-number__step"
+        :disabled="atMax"
+        :aria-label="`Augmenter${label ? ' ' + label : ''}`"
+        @click="nudge(step)"
+      >
+        <RmIcon name="Plus" :size="14" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-number{display:flex;flex-direction:column;font-family:var(--font-sans);gap:6px}.rm-number__label{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-medium)}.rm-number__box{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;box-sizing:border-box;display:flex;height:32px;overflow:hidden;width:193px}.rm-number__step{align-items:center;background:none;border:none;color:var(--text-secondary);cursor:pointer;display:flex;flex:none;height:100%;justify-content:center;transition:background var(--duration-fast) var(--ease-in-out);width:32px}.rm-number__step:hover:not(:disabled){background:var(--bg-hover)}.rm-number__step:disabled{color:var(--text-muted);cursor:not-allowed;opacity:.5}.rm-number__input{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;background:none;border:none;color:var(--text-primary);flex:1;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);height:100%;min-width:0;outline:none;text-align:center}.rm-number__input::-webkit-inner-spin-button,.rm-number__input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
+</style>

package/dist/runtime/components/PageHeader.vue

@@ -19,6 +19,12 @@ import type { RmHeaderTab } from './AppHeader.vue'
 withDefaults(
   defineProps<{
     title?: string | null
+    /**
+     * Sur-titre, au-dessus du titre : le domaine dont la page traite
+     * ("Retail & Hospital Drugs"). Le titre seul ne dit pas toujours de quel
+     * jeu de donnees il parle.
+     */
+    eyebrow?: string | null
     /** Fleche de retour a gauche du titre. */
     haveReturn?: boolean
     /** Destination du retour ; sans valeur, l'historique. */
@@ -28,7 +34,7 @@ withDefaults(
     /** Nom du groupe d'onglets pour les lecteurs d'ecran. */
     tabsLabel?: string
   }>(),
-  { title: null, haveReturn: false, backTo: null, tabs: () => [], tabsLabel: undefined },
+  { title: null, eyebrow: null, haveReturn: false, backTo: null, tabs: () => [], tabsLabel: undefined },
 )
 
 const emit = defineEmits<{ tab: [key: string] }>()
@@ -48,8 +54,11 @@ const router = useRouter()
         </button>
       </template>
 
-      <h1 v-if="title" class="rm-page-header__title">{{ title }}</h1>
-      <div v-else class="rm-page-header__title"><slot name="title" /></div>
+      <div class="rm-page-header__heading">
+        <p v-if="eyebrow" class="rm-page-header__eyebrow">{{ eyebrow }}</p>
+        <h1 v-if="title" class="rm-page-header__title">{{ title }}</h1>
+        <div v-else class="rm-page-header__title"><slot name="title" /></div>
+      </div>
 
       <div v-if="$slots.actions" class="rm-page-header__actions"><slot name="actions" /></div>
     </div>
@@ -71,5 +80,5 @@ const router = useRouter()
 </template>
 
 <style scoped>
-.rm-page-header{backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);box-sizing:border-box;color:var(--text-primary);display:flex;flex-direction:column;font-family:var(--font-sans);gap:12px;padding:16px 32px 12px;position:sticky;top:0;width:100%;z-index:95}.rm-page-header__row{align-items:center;align-self:stretch;display:flex;gap:16px}.rm-page-header__back{background:transparent;border:none;color:inherit;cursor:pointer;display:inline-flex;padding:0}.rm-page-header__title{flex-grow:2;font-size:23px;font-weight:900;line-height:normal;margin:0;min-width:0}.rm-page-header__title :deep(h1),.rm-page-header__title :deep(h2),.rm-page-header__title :deep(p){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-page-header__actions{align-items:center;display:flex;flex:0 0 auto;gap:16px}.rm-page-header__tabs{display:flex;gap:8px;margin-bottom:-13px;overflow-x:auto}.rm-page-header__tab{background:none;border:none;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;color:var(--text-muted);cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;line-height:1.6;padding:8px 16px 10px;transition:background-color .3s,color .15s;white-space:nowrap}.rm-page-header__tab:hover{color:var(--color-primary)}.rm-page-header__tab--active{background:color-mix(in srgb,var(--color-primary) 6%,transparent);border-bottom-color:var(--color-primary);color:var(--color-primary);font-weight:600}
+.rm-page-header{backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);box-sizing:border-box;color:var(--text-primary);display:flex;flex-direction:column;font-family:var(--font-sans);gap:12px;padding:16px 32px 12px;position:sticky;top:0;width:100%;z-index:95}.rm-page-header__row{align-items:center;align-self:stretch;display:flex;gap:16px}.rm-page-header__back{background:transparent;border:none;color:inherit;cursor:pointer;display:inline-flex;padding:0}.rm-page-header__heading{flex-grow:2;min-width:0}.rm-page-header__eyebrow{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-medium);margin:0 0 2px}.rm-page-header__title{flex-grow:2;font-size:23px;font-weight:900;line-height:normal;margin:0;min-width:0}.rm-page-header__title :deep(h1),.rm-page-header__title :deep(h2),.rm-page-header__title :deep(p){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-page-header__actions{align-items:center;display:flex;flex:0 0 auto;gap:16px}.rm-page-header__tabs{display:flex;gap:8px;margin-bottom:-13px;overflow-x:auto}.rm-page-header__tab{background:none;border:none;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;color:var(--text-muted);cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;line-height:1.6;padding:8px 16px 10px;transition:background-color .3s,color .15s;white-space:nowrap}.rm-page-header__tab:hover{color:var(--color-primary)}.rm-page-header__tab--active{background:color-mix(in srgb,var(--color-primary) 6%,transparent);border-bottom-color:var(--color-primary);color:var(--color-primary);font-weight:600}
 </style>

package/dist/runtime/components/SimpleBar.vue

@@ -1,86 +1,77 @@
+<!--
+  Barre de repartition : une barre empilee, puis la legende ligne a ligne avec
+  la valeur et la part de chaque poste.
+
+  Remplace `arg-simple-chart` d'Auriga. Pas de moteur de graphe : quelques
+  divs, ce qui la rend utilisable a l'interieur d'une tuile KPI ou d'une carte
+  etroite, la ou un ECharts serait disproportionne.
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
-/**
- * SimpleBar — lightweight horizontal bar chart without ApexCharts.
- * Pure CSS, no dependencies. Great for small inline visualizations.
- */
+import { useChartTheme } from '../composables/useChartTheme'
+import { rmNumber } from '../utils/format'
 
-export interface SimpleBarItem {
+export interface RmSimpleBarItem {
   label: string
   value: number
+  /** Couleur imposee. Sans elle, la couleur categorielle du rang. */
   color?: string
 }
 
 const props = withDefaults(defineProps<{
-  items: SimpleBarItem[]
+  items: RmSimpleBarItem[]
   title?: string
-  showValues?: boolean
-  showPercent?: boolean
+  /** Hauteur de la barre empilee, en pixels. */
   height?: number
+  /** Masque la legende : la barre seule, quand la place manque. */
+  hideLegend?: boolean
+  /** Formatage des valeurs de la legende. */
+  valueFormatter?: (value: number) => string
 }>(), {
   title: undefined,
-  showValues: true,
-  showPercent: false,
-  height: 24,
+  height: 8,
+  hideLegend: false,
+  valueFormatter: rmNumber,
 })
 
-const { PALETTE } = useChartTheme()
+const { palette } = useChartTheme()
+
+const total = computed(() => props.items.reduce((sum, item) => sum + item.value, 0))
+
+function colorOf(item: RmSimpleBarItem, index: number) {
+  return item.color ?? palette.value.cat[index % palette.value.cat.length]
+}
 
-const total = computed(() => props.items.reduce((sum, i) => sum + i.value, 0))
-const maxValue = computed(() => Math.max(...props.items.map(i => i.value), 1))
+function shareOf(item: RmSimpleBarItem) {
+  return total.value ? (item.value * 100) / total.value : 0
+}
 </script>
 
 <template>
-  <div class="simple-bar">
-    <h3 v-if="title" class="simple-bar__title">{{ title }}</h3>
+  <div class="rm-simple-bar">
+    <p v-if="title" class="rm-simple-bar__title">{{ title }}</p>
 
-    <!-- Stacked bar -->
-    <div v-if="showPercent" class="simple-bar__stacked" :style="{ height: `${height}px` }">
+    <div class="rm-simple-bar__track" :style="{ height: `${height}px` }">
       <div
-        v-for="(item, idx) in items"
-        :key="idx"
-        class="simple-bar__segment"
-        :style="{
-          width: `${(item.value / total) * 100}%`,
-          backgroundColor: item.color ?? PALETTE[idx % PALETTE.length],
-        }"
+        v-for="(item, index) in items"
+        :key="index"
+        class="rm-simple-bar__segment"
+        :style="{ width: `${shareOf(item)}%`, background: colorOf(item, index) }"
+        :title="`${item.label} : ${valueFormatter(item.value)}`"
       />
     </div>
 
-    <!-- Individual bars -->
-    <div class="simple-bar__list">
-      <div
-        v-for="(item, idx) in items"
-        :key="idx"
-        class="simple-bar__item"
-      >
-        <div class="simple-bar__item-header">
-          <span
-            class="simple-bar__dot"
-            :style="{ backgroundColor: item.color ?? PALETTE[idx % PALETTE.length] }"
-          />
-          <span class="simple-bar__label">{{ item.label }}</span>
-          <span v-if="showValues" class="simple-bar__value">
-            {{ item.value.toLocaleString() }}
-            <span v-if="showPercent" class="simple-bar__pct">
-              ({{ total > 0 ? ((item.value / total) * 100).toFixed(1) : 0 }}%)
-            </span>
-          </span>
-        </div>
-        <div v-if="!showPercent" class="simple-bar__track" :style="{ height: `${height}px` }">
-          <div
-            class="simple-bar__fill"
-            :style="{
-              width: `${(item.value / maxValue) * 100}%`,
-              backgroundColor: item.color ?? PALETTE[idx % PALETTE.length],
-            }"
-          />
-        </div>
-      </div>
-    </div>
+    <ul v-if="!hideLegend" class="rm-simple-bar__legend">
+      <li v-for="(item, index) in items" :key="index" class="rm-simple-bar__row">
+        <span class="rm-simple-bar__dot" :style="{ background: colorOf(item, index) }" />
+        <span class="rm-simple-bar__label">{{ item.label }}</span>
+        <span class="rm-simple-bar__value">{{ valueFormatter(item.value) }}</span>
+        <span class="rm-simple-bar__share">({{ shareOf(item).toFixed(1).replace('.', ',') }} %)</span>
+      </li>
+    </ul>
   </div>
 </template>
 
 <style scoped>
-.simple-bar{font-family:var(--r-font-family)}.simple-bar__title{color:var(--r-color-gray-700);font-size:14px;font-weight:600;margin:0 0 12px}.simple-bar__stacked{border-radius:6px;display:flex;margin-bottom:12px;overflow:hidden}.simple-bar__segment{min-width:2px;transition:width .4s ease}.simple-bar__segment:first-child{border-radius:6px 0 0 6px}.simple-bar__segment:last-child{border-radius:0 6px 6px 0}.simple-bar__list{display:flex;flex-direction:column;gap:8px}.simple-bar__item-header{align-items:center;display:flex;gap:8px;margin-bottom:4px}.simple-bar__dot{border-radius:50%;flex-shrink:0;height:8px;width:8px}.simple-bar__label{color:var(--r-color-gray-700);flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.simple-bar__value{color:var(--r-color-gray-900);flex-shrink:0;font-size:13px;font-weight:600}.simple-bar__pct{color:var(--r-color-gray-400);font-weight:400}.simple-bar__track{background:var(--r-color-gray-50);border-radius:4px;overflow:hidden}.simple-bar__fill{border-radius:4px;height:100%;min-width:2px;transition:width .4s ease}
+.rm-simple-bar{font-family:var(--font-sans)}.rm-simple-bar__title{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-medium);margin:0 0 8px}.rm-simple-bar__track{background:var(--bg-surface-2);border-radius:999px;display:flex;overflow:hidden}.rm-simple-bar__segment{height:100%}.rm-simple-bar__legend{list-style:none;margin:10px 0 0;padding:0}.rm-simple-bar__row{align-items:center;display:flex;font-size:var(--font-12);gap:6px;padding:3px 0}.rm-simple-bar__dot{border-radius:2px;flex:none;height:8px;width:8px}.rm-simple-bar__label{color:var(--text-secondary);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-simple-bar__value{color:var(--text-primary);font-variant-numeric:tabular-nums;font-weight:var(--weight-medium)}.rm-simple-bar__share{color:var(--text-muted)}
 </style>

package/dist/runtime/components/Table.vue

@@ -148,7 +148,7 @@ const sortedRows = computed(() => {
             :class="col.align && `rm-table__td--${col.align}`"
           >
             <slot :name="col.key" :value="getCellValue(row, col.key)" :row="row" :index="idx">
-              {{ getCellValue(row, col.key) ?? '—' }}
+              {{ getCellValue(row, col.key) ?? '-' }}
             </slot>
           </td>
         </tr>

package/dist/runtime/utils/chart.d.ts

@@ -94,6 +94,31 @@ export declare function rmBaseOption(theme: RmChartTheme, decal?: boolean): {
         borderWidth: number;
     };
 };
+/**
+ * Axe de valeurs, avec son libelle d'unite au-dessus quand il est fourni.
+ *
+ * `hidden` masque la graduation mais GARDE les lignes de fond : c'est le seul
+ * axe qu'on a le droit de cacher, et uniquement quand chaque point porte deja
+ * sa valeur en etiquette. Retirer aussi les lignes de fond ferait perdre toute
+ * echelle de comparaison entre deux courbes.
+ */
+/**
+ * `formatter` s'applique AUSSI a la graduation, pas seulement a l'infobulle :
+ * un axe qui affiche 400 000 000 la ou l'infobulle dit 400 M donne deux
+ * lectures du meme nombre sur le meme graphe.
+ */
+/**
+ * Couleur d'une serie a l'indice `index`.
+ *
+ * La palette categorielle compte six teintes ; au-dela, un simple modulo
+ * redonne EXACTEMENT la meme couleur a deux series et rend la legende
+ * inutilisable. Chaque tour de palette eclaircit donc la teinte d'un cran :
+ * la septieme serie reprend la premiere couleur, en plus clair.
+ *
+ * Ce n'est pas un remplacement du double encodage : au-dela d'une douzaine de
+ * series, un graphe de lignes ne se lit plus, quelle que soit la palette.
+ */
+export declare function rmSeriesColor(palette: string[], index: number): string;
 export interface RmSeriesInput {
     name?: string;
     data: (number | null)[];
@@ -111,13 +136,21 @@ export interface RmSeriesInput {
 /** Bar chart vertical, une ou plusieurs series, empilable. */
 export declare function rmBarVerticalOption(categories: (string | number)[], series: RmSeriesInput[], theme: RmChartTheme, palette: string[], decal?: boolean): {
     legend: {
-        top: number;
+        bottom: number;
+        left: string;
         textStyle: {
             color: string;
             fontSize: number;
             fontFamily: string;
         };
     } | undefined;
+    grid: {
+        bottom: number;
+        left: number;
+        right: number;
+        top: number;
+        containLabel: boolean;
+    };
     xAxis: {
         splitLine: {
             show: boolean;
@@ -174,13 +207,6 @@ export declare function rmBarVerticalOption(categories: (string | number)[], ser
     textStyle: {
         fontFamily: string;
     };
-    grid: {
-        left: number;
-        right: number;
-        top: number;
-        bottom: number;
-        containLabel: boolean;
-    };
     tooltip: {
         trigger: string;
         backgroundColor: string;
@@ -300,7 +326,12 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
      * graphe ne porte plus aucun chiffre.
      */
     hideValueAxis?: boolean;
-    /** Position de la legende. `bottom` degage le haut du graphe. */
+    /**
+     * Position de la legende. Par defaut sous le graphe : la carte porte deja
+     * son titre en haut, et une legende juste dessous se lit comme un
+     * sous-titre. En bas, elle se lit comme ce qu'elle est, la cle des
+     * couleurs, une fois la courbe regardee.
+     */
     legendPosition?: 'top' | 'bottom';
     /**
      * Ancre l'axe a zero quand toutes les valeurs sont positives. Sans ca
@@ -389,10 +420,8 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
         };
         axisLabel: {
             show: boolean;
-            fontSize?: undefined;
-            color?: undefined;
-            fontFamily?: undefined;
         } | {
+            formatter?: ((value: number) => string) | undefined;
             fontSize: number;
             color: string;
             fontFamily: string;
@@ -432,10 +461,8 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
         };
         axisLabel: {
             show: boolean;
-            fontSize?: undefined;
-            color?: undefined;
-            fontFamily?: undefined;
         } | {
+            formatter?: ((value: number) => string) | undefined;
             fontSize: number;
             color: string;
             fontFamily: string;
@@ -467,10 +494,8 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
         };
         axisLabel: {
             show: boolean;
-            fontSize?: undefined;
-            color?: undefined;
-            fontFamily?: undefined;
         } | {
+            formatter?: ((value: number) => string) | undefined;
             fontSize: number;
             color: string;
             fontFamily: string;

package/dist/runtime/utils/chart.js

@@ -90,13 +90,24 @@ export function rmBaseOption(theme, decal = false) {
     }
   };
 }
-const valueAxis = (theme, label, hidden = false) => ({
+export function rmSeriesColor(palette, index) {
+  const base = palette[index % palette.length];
+  const cycle = Math.floor(index / palette.length);
+  if (cycle === 0 || !base.startsWith("#")) return base;
+  const hex = base.slice(1);
+  const full = hex.length === 3 ? hex.split("").map((c) => c + c).join("") : hex;
+  const channels = [0, 2, 4].map((offset) => parseInt(full.slice(offset, offset + 2), 16));
+  const ratio = Math.min(cycle * 0.28, 0.7);
+  const mixed = channels.map((value) => Math.round(value + (255 - value) * ratio));
+  return "#" + mixed.map((value) => value.toString(16).padStart(2, "0")).join("");
+}
+const valueAxis = (theme, label, hidden = false, formatter) => ({
   type: "value",
   name: hidden ? void 0 : label,
   nameLocation: "end",
   nameGap: 12,
   nameTextStyle: { fontSize: 10, color: theme.dimmedColor, fontFamily: FONT, align: "left" },
-  axisLabel: hidden ? { show: false } : { fontSize: 11, color: theme.mutedColor, fontFamily: FONT },
+  axisLabel: hidden ? { show: false } : { fontSize: 11, color: theme.mutedColor, fontFamily: FONT, ...formatter ? { formatter } : {} },
   axisLine: hidden ? { show: false } : { lineStyle: { color: theme.axisLine } },
   axisTick: hidden ? { show: false } : void 0,
   splitLine: { lineStyle: { color: theme.splitLine } }
@@ -109,7 +120,10 @@ const axisCommon = (theme) => ({
 export function rmBarVerticalOption(categories, series, theme, palette, decal = false) {
   return {
     ...rmBaseOption(theme, decal),
-    legend: series.length > 1 ? { top: 0, textStyle: { color: theme.mutedColor, fontSize: 11, fontFamily: FONT } } : void 0,
+    legend: series.length > 1 ? { bottom: 0, left: "center", textStyle: { color: theme.mutedColor, fontSize: 11, fontFamily: FONT } } : void 0,
+    // La legende passee sous le graphe prend sa place dans la gouttiere basse,
+    // sinon elle recouvre les libelles de l'axe des abscisses.
+    grid: { ...rmBaseOption(theme, decal).grid, bottom: series.length > 1 ? 56 : 36 },
     xAxis: { type: "category", data: categories, ...axisCommon(theme), splitLine: { show: false } },
     yAxis: { type: "value", ...axisCommon(theme) },
     series: series.map((s, i) => ({
@@ -117,7 +131,7 @@ export function rmBarVerticalOption(categories, series, theme, palette, decal =
       name: s.name,
       stack: s.stack,
       data: s.data,
-      itemStyle: { color: s.color ?? palette[i % palette.length], borderRadius: [3, 3, 0, 0] }
+      itemStyle: { color: s.color ?? rmSeriesColor(palette, i), borderRadius: [3, 3, 0, 0] }
     }))
   };
 }
@@ -131,7 +145,7 @@ export function rmBarHorizontalOption(labels, values, theme, palette, decal = fa
       type: "bar",
       data: values,
       itemStyle: {
-        color: (params) => palette[params.dataIndex % palette.length],
+        color: (params) => rmSeriesColor(palette, params.dataIndex),
         borderRadius: [0, 3, 3, 0]
       },
       label: {
@@ -154,7 +168,7 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
     axisLabels,
     valueLabels = false,
     hideValueAxis = false,
-    legendPosition = "top",
+    legendPosition = "bottom",
     startAtZero = false,
     valueFormatter
   } = options;
@@ -192,13 +206,13 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
     },
     xAxis: { type: "category", data: categories, ...axisCommon(theme), splitLine: { show: false }, boundaryGap: false },
     yAxis: dual ? [
-      { ...valueAxis(theme, axisLabels?.[0], hideValueAxis), min: floorAtZero ? 0 : void 0 },
+      { ...valueAxis(theme, axisLabels?.[0], hideValueAxis, valueFormatter), min: floorAtZero ? 0 : void 0 },
       // Le second axe ne rejoue pas la grille : deux grilles superposees
       // rendent le fond illisible.
-      { ...valueAxis(theme, axisLabels?.[1], hideValueAxis), splitLine: { show: false }, min: floorAtZero ? 0 : void 0 }
-    ] : { ...valueAxis(theme, axisLabels?.[0], hideValueAxis), min: floorAtZero ? 0 : void 0 },
+      { ...valueAxis(theme, axisLabels?.[1], hideValueAxis, valueFormatter), splitLine: { show: false }, min: floorAtZero ? 0 : void 0 }
+    ] : { ...valueAxis(theme, axisLabels?.[0], hideValueAxis, valueFormatter), min: floorAtZero ? 0 : void 0 },
     series: series.map((s, i) => {
-      const color = s.color ?? palette[i % palette.length];
+      const color = s.color ?? rmSeriesColor(palette, i);
       return {
         type: "line",
         name: s.name,
@@ -211,7 +225,9 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
         // second marqueur au meme endroit. On l'annule par sa taille et non
         // par `symbol: 'none'` : ECharts accroche les etiquettes aux
         // symboles, les supprimer supprime aussi les etiquettes.
-        symbolSize: valueLabels ? 0 : 5,
+        // Le point est la cible de survol : trop petit, l'infobulle se derobe
+        // et les series courtes n'ont plus de reperes lisibles.
+        symbolSize: valueLabels ? 0 : 8,
         label: valueLabels ? {
           show: true,
           position: "top",
@@ -256,7 +272,7 @@ export function rmDonutOption(data, theme, palette, decal = false) {
       data: data.map((d, i) => ({
         value: d.value,
         name: d.name,
-        itemStyle: { color: palette[i % palette.length] }
+        itemStyle: { color: rmSeriesColor(palette, i) }
       })),
       label: { fontSize: 11, color: theme.mutedColor, fontFamily: FONT }
     }]

package/package.json

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