@tekkare/romulus 0.1.31 → 0.1.33

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.30",
+  "version": "0.1.32",
   "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-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}.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}
+.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)}

package/dist/runtime/components/ChartCard.vue

@@ -26,10 +26,26 @@ const props = withDefaults(defineProps<{
   extra?: string
   /** Masque le menu d'actions quand la carte n'a rien a exporter. */
   actions?: boolean
+  /**
+   * Etat de la donnee. Les trois variantes se posent dans le CORPS ; la tete
+   * et le pied restent stables, pour que le titre et la source restent sous
+   * les yeux pendant que la donnee charge, manque ou echoue.
+   */
+  state?: 'ready' | 'loading' | 'empty' | 'error'
+  /**
+   * Libelle du bouton du corps en erreur, qui emet `retry`. Vide : aucun
+   * bouton. Un bouton que la page n'ecoute pas ne repare rien, il ment.
+   */
+  retryLabel?: string
+  /** Libelle du bouton du corps vide, qui emet `emptyAction`. Vide : aucun bouton. */
+  emptyActionLabel?: string
 }>(), {
   context: undefined,
   extra: undefined,
   actions: true,
+  state: 'ready',
+  retryLabel: '',
+  emptyActionLabel: '',
 })
 
 const emit = defineEmits<{
@@ -39,6 +55,10 @@ const emit = defineEmits<{
   exportXlsx: []
   copyLink: []
   fullscreen: []
+  /** L'utilisateur relance la donnee depuis le corps en erreur. */
+  retry: []
+  /** L'utilisateur veut sortir du corps vide (elargir ses filtres). */
+  emptyAction: []
 }>()
 
 const menuOpen = ref(false)
@@ -116,8 +136,32 @@ function run(action: 'exportPng' | 'exportSvg' | 'exportCsv' | 'exportXlsx' | 'c
       </div>
     </div>
 
+    <!-- Un corps vide n'est jamais laisse blanc : chaque etat a son rendu par
+         defaut, qu'un slot dedie peut remplacer quand la page a mieux a dire. -->
     <div class="chart-card-body">
-      <slot />
+      <slot v-if="state === 'ready'" />
+      <slot v-else-if="state === 'loading'" name="loading">
+        <RmLoadingState />
+      </slot>
+      <!-- Pas de cadre pointille ici : dans un corps de carte, la carte porte
+           deja son propre cadre. Le pointille est reserve aux vues entieres. -->
+      <slot v-else-if="state === 'empty'" name="empty">
+        <RmEmptyState
+          icon="MagnifyingGlassMinus"
+          title="Aucun résultat"
+          text="Aucune ligne ne correspond aux filtres en cours. Élargissez votre période ou retirez une dimension."
+          :action-label="emptyActionLabel"
+          action-icon="Broom"
+          @action="emit('emptyAction')"
+        />
+      </slot>
+      <slot v-else name="error">
+        <RmErrorState
+          text="La donnée de cette carte n'a pas pu être chargée."
+          :action-label="retryLabel"
+          @action="emit('retry')"
+        />
+      </slot>
     </div>
 
     <div class="chart-card-foot">

package/dist/runtime/components/DataTable.vue

@@ -35,11 +35,17 @@ const props = withDefaults(defineProps<{
   sortDir?: 'asc' | 'desc'
   /** Message affiche quand il n'y a aucune ligne. Le hors-perimetre se dit, il ne s'estime pas. */
   emptyText?: string
+  /** Squelette de lignes pendant le chargement, plutot qu'un tableau vide. */
+  loading?: boolean
+  /** Nombre de lignes du squelette : la table garde sa hauteur a l'arrivee de la donnee. */
+  loadingRows?: number
 }>(), {
   captionVisible: false,
   sortKey: undefined,
   sortDir: undefined,
   emptyText: 'Aucune donnée disponible pour cette sélection.',
+  loading: false,
+  loadingRows: 5,
 })
 
 const emit = defineEmits<{ sort: [key: string] }>()
@@ -72,9 +78,18 @@ function ariaSort(column: RmColumn) {
           </th>
         </tr>
       </thead>
-      <tbody>
+      <tbody v-if="loading">
+        <!-- Une table vide pendant le chargement se lit comme une absence de
+             donnee : le squelette dit que la donnee arrive. -->
+        <tr v-for="index in loadingRows" :key="index">
+          <td v-for="column in columns" :key="column.key">
+            <div class="rm-skeleton tk-skeleton" />
+          </td>
+        </tr>
+      </tbody>
+      <tbody v-else>
         <tr v-if="!rows.length">
-          <td :colspan="columns.length">{{ emptyText }}</td>
+          <td :colspan="columns.length" class="tk-empty">{{ emptyText }}</td>
         </tr>
         <tr v-for="(row, index) in rows" :key="index">
           <template v-for="column in columns" :key="column.key">

package/dist/runtime/components/EmptyState.vue

@@ -1,8 +1,20 @@
 <!--
-  Etat vide d'une liste : une icone dans un disque, un titre, une phrase.
+  Etat vide d'une liste ou d'une vue : une icone dans un disque, un titre, une
+  phrase, et l'action a faire.
 
   Remplace `arg-errors` d'Auriga. Les textes viennent de la page : le
   hors-perimetre se dit, il ne s'estime pas.
+
+  Le systeme de design demande trois choses de plus qu'un simple message.
+  D'abord une action, sauf s'il n'y a vraiment rien a faire : un ecran vide
+  sans issue laisse l'utilisateur devant une impasse. Ensuite un ton sans
+  catastrophisme, « Aucun résultat » plutot que « Erreur ». Enfin un titre qui
+  dit ce qui manque et une phrase qui dit pourquoi ET quoi faire.
+
+  `tone` colore le disque selon la nature du vide : violet quand il reste
+  quelque chose a creer, rouge quand un droit bloque, neutre quand une
+  recherche ne ramene rien. `framed` pose le cadre pointille des etats
+  transitoires.
 -->
 <script setup lang="ts">
 withDefaults(
@@ -10,23 +22,49 @@ withDefaults(
     icon?: string
     title: string
     text?: string
+    /** Couleur du disque : `neutral` recherche vide, `primary` a creer, `danger` bloquant. */
+    tone?: 'neutral' | 'primary' | 'danger'
+    /** Libelle de l'action. Vide pour n'en poser aucune. */
+    actionLabel?: string
+    /** Icone de l'action. */
+    actionIcon?: string
+    /** Cadre pointille, pour signaler un etat transitoire. */
+    framed?: boolean
   }>(),
-  { icon: 'MagnifyingGlass', text: '' },
+  {
+    icon: 'MagnifyingGlass',
+    text: '',
+    tone: 'neutral',
+    actionLabel: '',
+    actionIcon: '',
+    framed: false,
+  },
 )
+
+const emit = defineEmits<{ action: [] }>()
 </script>
 
 <template>
-  <div class="rm-empty">
+  <div class="rm-empty" :class="[`rm-empty--${tone}`, { 'rm-empty--framed': framed }]">
     <div class="rm-empty__icon">
-      <RmIcon :name="icon" :size="44" />
+      <RmIcon :name="icon" :size="28" />
     </div>
     <div class="rm-empty__text">
       <p class="rm-empty__title">{{ title }}</p>
       <p v-if="text" class="rm-empty__descr">{{ text }}</p>
     </div>
+    <button
+      v-if="actionLabel"
+      type="button"
+      class="rm-empty__action"
+      @click="emit('action')"
+    >
+      <RmIcon v-if="actionIcon" :name="actionIcon" :size="14" />
+      {{ actionLabel }}
+    </button>
   </div>
 </template>
 
 <style scoped>
-.rm-empty{color:var(--text-primary);flex-direction:column;font-family:var(--font-sans);gap:24px;max-width:409px}.rm-empty,.rm-empty__icon{align-items:center;display:flex}.rm-empty__icon{background:var(--border-default);border-radius:50px;color:var(--text-secondary);justify-content:center;padding:10px}.rm-empty__text{align-items:center;align-self:stretch;display:flex;flex-direction:column;gap:8px;text-align:center}.rm-empty__title{font-size:var(--font-16);font-weight:var(--weight-bold);line-height:normal;margin:0}.rm-empty__descr{color:var(--text-secondary);font-size:var(--font-14);line-height:160%;margin:0}
+.rm-empty{align-items:center;color:var(--text-primary);display:flex;flex-direction:column;font-family:var(--font-sans);gap:24px;max-width:409px}.rm-empty--framed{background:var(--bg-surface-2);border:1px dashed var(--border-default);border-radius:12px;box-sizing:border-box;max-width:none;padding:32px 16px;width:100%}.rm-empty__icon{align-items:center;background:var(--bg-surface-3);border-radius:50%;color:var(--text-muted);display:flex;flex:0 0 auto;height:56px;justify-content:center;width:56px}.rm-empty--primary .rm-empty__icon{background:var(--bg-hover);color:var(--color-secondary)}.rm-empty--danger .rm-empty__icon{background:var(--color-danger-bg);color:var(--color-danger)}.rm-empty__text{align-items:center;align-self:stretch;display:flex;flex-direction:column;gap:8px;text-align:center}.rm-empty__title{font-size:var(--font-16);font-weight:var(--weight-bold);line-height:normal;margin:0}.rm-empty__descr{color:var(--text-secondary);font-size:var(--font-14);line-height:160%;margin:0}.rm-empty__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-13);font-weight:var(--weight-semibold);gap:6px;padding:7px 14px}.rm-empty__action:hover{background:var(--bg-surface-3);color:var(--text-primary)}
 </style>

package/dist/runtime/components/ErrorState.vue

@@ -0,0 +1,69 @@
+<!--
+  RmErrorState - corps de carte ou de vue dont la donnee a echoue. Style :
+  components.css (.rm-state, .rm-state--error).
+
+  Le systeme de design impose trois pieces d'information, dans cet ordre : ce
+  qui a echoue (`title`), pourquoi (`text`), et quoi faire (`actionLabel` avec
+  l'evenement `action`). Une erreur sans issue est une impasse, d'ou l'action
+  posee par defaut.
+
+  Le ton reste factuel : « Connecteur indisponible », pas « ERREUR FATALE ».
+  Les textes viennent donc de l'appelant, qui seul sait ce qui a echoue.
+
+  Pour une erreur serveur, `code` ajoute l'identifiant que le support
+  demandera. L'etat ne se signale jamais par le rouge seul : couleur, icone
+  et texte disent la meme chose, pour rester lisible en vision des couleurs
+  alteree.
+-->
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    /** Ce qui a echoue. */
+    title?: string
+    /** Pourquoi, et depuis quand. */
+    text?: string
+    /** Icone du disque : `CloudWarning` reseau, `LockKey` droits, `WarningOctagon` sinon. */
+    icon?: string
+    /** Libelle de l'action de recuperation. Vide pour aucune action. */
+    actionLabel?: string
+    /** Icone de l'action. */
+    actionIcon?: string
+    /** Identifiant a citer au support, pour une erreur serveur. */
+    code?: string
+  }>(),
+  {
+    title: 'Donnée indisponible',
+    text: '',
+    icon: 'WarningOctagon',
+    actionLabel: 'Réessayer',
+    actionIcon: 'ArrowClockwise',
+    code: '',
+  },
+)
+
+const emit = defineEmits<{ action: [] }>()
+</script>
+
+<template>
+  <div class="rm-state rm-state--error" role="alert">
+    <div class="rm-state__icon">
+      <RmIcon :name="icon" :size="26" />
+    </div>
+    <p class="rm-state__title">{{ title }}</p>
+    <p v-if="text" class="rm-state__text">{{ text }}</p>
+    <p v-if="code" class="rm-state__code">Code : {{ code }}</p>
+    <button
+      v-if="actionLabel"
+      type="button"
+      class="rm-state__action"
+      @click="emit('action')"
+    >
+      <RmIcon v-if="actionIcon" :name="actionIcon" :size="14" />
+      {{ actionLabel }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.rm-state__code{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--font-11);margin:2px 0 0}
+</style>

package/dist/runtime/components/FilterBar.vue

@@ -75,6 +75,26 @@ function toggle(which: RmFilterBarPanel) {
   panel.value = panel.value === which ? null : which
 }
 
+/**
+ * Le lien de recherche avancee est pose DANS le champ, a son bout : le champ
+ * doit donc lui reserver sa place, sinon le texte saisi et la croix passent
+ * dessous. La largeur se mesure — « Recherche avancee » et « Advanced search »
+ * ne font pas la meme longueur.
+ */
+const advancedLink = ref<HTMLElement | null>(null)
+const advancedWidth = ref(0)
+let advancedSize: ResizeObserver | null = null
+
+function watchAdvanced() {
+  if (!advancedLink.value) return
+  advancedSize?.disconnect()
+  advancedSize = new ResizeObserver(() => {
+    advancedWidth.value = advancedLink.value?.offsetWidth ?? 0
+  })
+  advancedSize.observe(advancedLink.value)
+  advancedWidth.value = advancedLink.value.offsetWidth
+}
+
 /** Onglets de vue publies par la page. */
 const { view } = useRmFilterBarView()
 
@@ -100,11 +120,16 @@ function watchHeader() {
   stickyTop.value = header.offsetHeight
 }
 
-onMounted(() => watchHeader())
+onMounted(() => {
+  watchHeader()
+  watchAdvanced()
+})
 
 onBeforeUnmount(() => {
   headerSize?.disconnect()
   headerSize = null
+  advancedSize?.disconnect()
+  advancedSize = null
 })
 </script>
 
@@ -113,7 +138,7 @@ onBeforeUnmount(() => {
     id="rm_filter_bar"
     class="rm-fbar"
     :class="panel ? 'rm-fbar--open' : 'rm-fbar--closed'"
-    :style="{ top: `${stickyTop}px` }"
+    :style="{ top: `${stickyTop}px`, '--rm-fbar-advanced-w': `${advancedWidth}px` }"
   >
     <div class="rm-fbar__row">
       <div v-if="view" class="rm-fbar__view">
@@ -134,20 +159,21 @@ onBeforeUnmount(() => {
 
       <div class="rm-fbar__search">
         <slot name="Search" />
-      </div>
 
-      <!-- La recherche avancee s'ouvre par un lien pose au bout du champ : elle
-           prolonge la recherche, elle n'est pas un troisieme reglage a cote de
-           « Filtres » et « Personnaliser ». -->
-      <button
-        v-if="hasAdvanced"
-        type="button"
-        class="rm-fbar__advanced"
-        :class="{ 'is-active': advancedOpen }"
-        @click="toggle('advanced')"
-      >
-        {{ t.advanced }}
-      </button>
+        <!-- La recherche avancee s'ouvre par un lien pose dans le champ, a son
+             bout : elle prolonge la recherche, elle n'est pas un troisieme
+             reglage a cote de « Filtres » et « Personnaliser ». -->
+        <button
+          v-if="hasAdvanced"
+          ref="advancedLink"
+          type="button"
+          class="rm-fbar__advanced"
+          :class="{ 'is-active': advancedOpen }"
+          @click="toggle('advanced')"
+        >
+          {{ t.advanced }}
+        </button>
+      </div>
 
       <button
         v-if="hasCustomize"
@@ -207,5 +233,5 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.rm-fbar{margin-inline:calc((min(var(--oip-content-max, 100%), 100%) - var(--oip-main-w, 100%))/2);position:sticky;width:var(--oip-main-w,100%);z-index:91;--rm-fbar-field-h:32px;backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);display:flex;flex-direction:column;font-family:var(--font-sans)}.rm-fbar__row{align-items:flex-start;display:flex;gap:12px;padding-block:8px;padding-inline:max(32px,(100% - var(--oip-content-max,100%))/2 + 32px)}.rm-fbar--open .rm-fbar__row{border-bottom:1px solid var(--border-default)}.rm-fbar__toggle :deep(p),.rm-fbar__toggle :deep(span){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-fbar__toggle{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;display:flex;flex:0 0 auto;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h);justify-content:center;padding:0 14px}.rm-fbar__toggle:hover{background:var(--bg-surface-3)}.rm-fbar__toggle.is-active,.rm-fbar__toggle.is-active:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.rm-fbar__toggle.is-active .rm-fbar__badge{background:var(--color-text-inverse);color:var(--color-primary)}.rm-fbar__badge{align-items:center;background:var(--color-primary);border-radius:16px;color:var(--color-text-inverse);display:inline-flex;font-size:var(--font-11);font-weight:var(--weight-bold);justify-content:center;min-width:18px;padding:0 5px}.rm-fbar__view{align-items:center;display:flex;flex:0 0 auto}.rm-fbar__advanced{align-items:center;background:none;border:none;color:var(--color-primary);cursor:pointer;display:inline-flex;flex:0 0 auto;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-medium);height:var(--rm-fbar-field-h);padding:0;text-decoration-line:underline;white-space:nowrap}.rm-fbar__advanced.is-active,.rm-fbar__advanced:hover{color:var(--color-primary-hover,var(--color-primary));text-decoration-thickness:2px}.rm-fbar__search{align-items:center;display:flex;flex:1 1 auto;gap:8px;min-width:0}.rm-fbar__search:empty{display:none}.rm-fbar__search :deep(.filters_input_search){border-radius:var(--radius-pill);box-sizing:border-box;height:auto;min-height:var(--rm-fbar-field-h);width:100%}.rm-fbar__search :deep(.research_tags:not(:has(*))){display:none}.rm-fbar__search :deep(.select_shortcut){box-sizing:border-box;font-size:var(--font-11);height:24px;padding-block:0}.rm-fbar__search :deep(.select_shortcut:hover){background:var(--bg-surface-3)!important;border-color:var(--border-default)!important;color:inherit!important}.rm-fbar__search :deep(.select_shortcut:hover svg){color:inherit!important}.rm-fbar__search :deep(.remove_search_section){border-left:none;border-radius:0 var(--radius-pill) var(--radius-pill) 0}.rm-fbar__search :deep(.remove_search_section:hover){background:transparent!important}.rm-fbar__search :deep(.remove_search_section:hover svg){color:var(--text-primary)!important}.rm-fbar__search :deep(.filters_input_search.no_bottom){border-bottom:1.5px solid var(--color-primary)!important;border-radius:var(--radius-pill)}.rm-fbar__search :deep(.search_suggestions){border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);left:0;padding:6px;right:0;top:calc(100% + 6px);width:auto}.rm-fbar__search :deep(.sugg_container>*){border-radius:var(--radius-lg)}.rm-fbar__search :deep(.sugg_container>.selected){background:color-mix(in srgb,var(--color-primary) 6%,transparent)!important}.rm-fbar__panel{--rm-filter-col:224px;align-items:end;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(0,var(--rm-filter-col)));justify-content:center;padding-block:16px 20px;padding-inline:56px}.rm-fbar__panel--wide{align-items:stretch;display:flex;flex-direction:column;gap:12px}.rm-fbar__filters{display:contents}.rm-fbar__panel-head{align-items:baseline;display:flex;gap:16px;grid-column:1/-1;width:100%}.rm-fbar__customize{grid-column:1/-1}.rm-fbar__panel :deep(.filters_row_break){grid-column:1/-1}.rm-fbar__panel-title{font-size:var(--font-18);font-weight:800;margin:0}.rm-fbar__action{background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);padding:0;text-decoration-line:underline}.rm-fbar__action--save{color:var(--color-primary)}.rm-fbar__action--clear{color:var(--text-secondary)}
+.rm-fbar{margin-inline:calc((min(var(--oip-content-max, 100%), 100%) - var(--oip-main-w, 100%))/2);position:sticky;width:var(--oip-main-w,100%);z-index:91;--rm-fbar-field-h:32px;backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);display:flex;flex-direction:column;font-family:var(--font-sans)}.rm-fbar__row{align-items:flex-start;display:flex;gap:12px;padding-block:8px;padding-inline:max(32px,(100% - var(--oip-content-max,100%))/2 + 32px)}.rm-fbar--open .rm-fbar__row{border-bottom:1px solid var(--border-default)}.rm-fbar__toggle :deep(p),.rm-fbar__toggle :deep(span){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-fbar__toggle{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;display:flex;flex:0 0 auto;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h);justify-content:center;padding:0 14px}.rm-fbar__toggle:hover{background:var(--bg-surface-3)}.rm-fbar__toggle.is-active,.rm-fbar__toggle.is-active:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.rm-fbar__toggle.is-active .rm-fbar__badge{background:var(--color-text-inverse);color:var(--color-primary)}.rm-fbar__badge{align-items:center;background:var(--color-primary);border-radius:16px;color:var(--color-text-inverse);display:inline-flex;font-size:var(--font-11);font-weight:var(--weight-bold);justify-content:center;min-width:18px;padding:0 5px}.rm-fbar__view{align-items:center;display:flex;flex:0 0 auto}.rm-fbar__advanced{align-items:center;background:none;border:none;border-left:1px solid var(--border-default);color:var(--color-primary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-medium);height:var(--rm-fbar-field-h);padding:0 0 0 12px;position:absolute;right:14px;text-decoration-line:underline;top:0;white-space:nowrap;z-index:2}.rm-fbar__advanced.is-active,.rm-fbar__advanced:hover{color:var(--color-primary-hover,var(--color-primary));text-decoration-thickness:2px}.rm-fbar__search{align-items:center;display:flex;flex:1 1 auto;gap:8px;min-width:0;position:relative}.rm-fbar__search:empty{display:none}.rm-fbar__search :deep(.filters_input_search){border-radius:var(--radius-pill);box-sizing:border-box;height:auto;min-height:var(--rm-fbar-field-h);padding-right:calc(var(--rm-fbar-advanced-w, 0px) + 12px);width:100%}.rm-fbar__search :deep(.research_tags:not(:has(*))){display:none}.rm-fbar__search :deep(.select_shortcut){box-sizing:border-box;font-size:var(--font-11);height:24px;padding-block:0}.rm-fbar__search :deep(.select_shortcut:hover){background:var(--bg-surface-3)!important;border-color:var(--border-default)!important;color:inherit!important}.rm-fbar__search :deep(.select_shortcut:hover svg){color:inherit!important}.rm-fbar__search :deep(.remove_search_section){border-left:none;border-radius:0 var(--radius-pill) var(--radius-pill) 0}.rm-fbar__search :deep(.remove_search_section:hover){background:transparent!important}.rm-fbar__search :deep(.remove_search_section:hover svg){color:var(--text-primary)!important}.rm-fbar__search :deep(.filters_input_search.no_bottom){border-bottom:1.5px solid var(--color-primary)!important;border-radius:var(--radius-pill)}.rm-fbar__search :deep(.search_suggestions){border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);left:0;padding:6px;right:0;top:calc(100% + 6px);width:auto}.rm-fbar__search :deep(.sugg_container>*){border-radius:var(--radius-lg)}.rm-fbar__search :deep(.sugg_container>.selected){background:color-mix(in srgb,var(--color-primary) 6%,transparent)!important}.rm-fbar__panel{--rm-filter-col:224px;align-items:end;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(0,var(--rm-filter-col)));justify-content:center;padding-block:16px 20px;padding-inline:56px}.rm-fbar__panel--wide{align-items:stretch;display:flex;flex-direction:column;gap:12px}.rm-fbar__filters{display:contents}.rm-fbar__panel-head{align-items:baseline;display:flex;gap:16px;grid-column:1/-1;width:100%}.rm-fbar__customize{grid-column:1/-1}.rm-fbar__panel :deep(.filters_row_break){grid-column:1/-1}.rm-fbar__panel-title{font-size:var(--font-18);font-weight:800;margin:0}.rm-fbar__action{background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);padding:0;text-decoration-line:underline}.rm-fbar__action--save{color:var(--color-primary)}.rm-fbar__action--clear{color:var(--text-secondary)}
 </style>

package/dist/runtime/components/LoadingState.vue

@@ -0,0 +1,81 @@
+<!--
+  RmLoadingState - corps de carte en chargement. Style : components.css
+  (.rm-state-loading).
+
+  Le systeme de design tranche : squelette plutot que rotative des qu'on
+  connait la forme du contenu, et jamais de blanc pendant une attente. Ce
+  composant porte la forme la plus courante d'un corps de carte, un titre,
+  une plage de graphe, deux lignes de legende. `chart` a false donne une
+  simple pile de lignes, pour une liste ou un tableau.
+
+  Une rotative reste possible via `spinner`, pour une action ponctuelle dont
+  on ignore la structure du resultat.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** Pose la plage pleine du graphe entre les lignes. */
+    chart?: boolean
+    /** Nombre de lignes de texte simulees. */
+    lines?: number
+    /** Hauteur de la plage de graphe. */
+    chartHeight?: string | number
+    /** Rotative plutot que squelette, avec ce libelle. */
+    spinner?: boolean
+    /** Texte sous la rotative. */
+    label?: string
+    /** Hauteur minimale du bloc, pour epouser la carte qu'il remplit. */
+    minHeight?: string | number
+  }>(),
+  {
+    chart: true,
+    lines: 2,
+    chartHeight: 120,
+    spinner: false,
+    label: '',
+    minHeight: undefined,
+  },
+)
+
+/** Largeurs decroissantes : une pile de lignes egales ne ressemble a rien. */
+const WIDTHS = ['90%', '70%', '80%', '60%', '75%']
+
+const size = (value: string | number | undefined) =>
+  value === undefined ? undefined : typeof value === 'number' ? `${value}px` : value
+
+const style = computed(() => ({ minHeight: size(props.minHeight) }))
+</script>
+
+<template>
+  <div
+    class="rm-state-loading"
+    :style="style"
+    role="status"
+    aria-busy="true"
+    :aria-label="label || 'Chargement en cours'"
+  >
+    <template v-if="spinner">
+      <div class="rm-loading__center">
+        <div class="rm-spinner" />
+        <p v-if="label" class="rm-loading__label">{{ label }}</p>
+      </div>
+    </template>
+
+    <template v-else>
+      <RmSkeleton width="50%" :height="14" />
+      <RmSkeleton v-if="chart" width="100%" :height="chartHeight" radius="8px" />
+      <RmSkeleton
+        v-for="index in lines"
+        :key="index"
+        :width="WIDTHS[(index - 1) % WIDTHS.length]"
+        :height="10"
+      />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.rm-loading__center{align-items:center;display:flex;flex:1;flex-direction:column;gap:12px;justify-content:center}.rm-loading__label{color:var(--text-muted);font-family:var(--font-sans);font-size:var(--font-12);margin:0}
+</style>

package/dist/runtime/components/Skeleton.vue

@@ -0,0 +1,32 @@
+<!--
+  RmSkeleton - un bloc de squelette anime, pose a la place du contenu qui
+  charge. Style : components.css (.rm-skeleton).
+
+  Il n'a aucune forme propre : c'est l'appelant qui donne la largeur et la
+  hauteur du contenu remplace. Un squelette qui ne ressemble pas au contenu
+  final fait sauter la mise en page a l'arrivee de la donnee, ce que le
+  squelette est justement la pour eviter.
+-->
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    /** Largeur CSS. Un nombre est lu en pixels. */
+    width?: string | number
+    /** Hauteur CSS. Un nombre est lu en pixels. */
+    height?: string | number
+    /** Rayon CSS, pour un disque (`50%`) ou une pastille. */
+    radius?: string
+  }>(),
+  { width: '100%', height: 12, radius: undefined },
+)
+
+const size = (value: string | number) => (typeof value === 'number' ? `${value}px` : value)
+</script>
+
+<template>
+  <div
+    class="rm-skeleton"
+    aria-hidden="true"
+    :style="{ width: size(width), height: size(height), borderRadius: radius }"
+  />
+</template>

package/dist/runtime/components/Table.vue

@@ -117,7 +117,7 @@ const sortedRows = computed(() => {
       <tbody v-if="loading">
         <tr v-for="i in 5" :key="i">
           <td v-for="col in columns" :key="col.key" class="rm-table__td">
-            <div class="rm-table__skeleton" />
+            <div class="rm-skeleton rm-table__skeleton" />
           </td>
         </tr>
       </tbody>
@@ -158,5 +158,5 @@ const sortedRows = computed(() => {
 </template>
 
 <style scoped>
-.rm-table-wrapper{background:#fff;border:1px solid #dbdef0;border-radius:8px;flex:1;overflow:auto}.rm-table{border-collapse:collapse;font-family:var(--r-font-family);font-size:var(--r-text-sm);width:100%}.rm-table__head{background:var(--r-color-gray-50)}.rm-table__head--sticky{position:sticky;top:0;z-index:2}.rm-table__th{border-bottom:1px solid #dbdef0;color:var(--r-color-gray-500);font-size:12px;font-weight:600;letter-spacing:.3px;padding:10px 16px;text-align:left;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.rm-table__th--center{text-align:center}.rm-table__th--right{text-align:right}.rm-table__th--sortable{cursor:pointer}.rm-table__th--sortable:hover{color:var(--r-color-gray-700)}.rm-table__th-content{align-items:center;display:inline-flex;gap:4px}.rm-table__sort{color:var(--r-color-gray-300);display:inline-flex;flex-direction:column;gap:-2px}.rm-table__sort--active{color:#4164ee}.rm-table__td{border-bottom:1px solid var(--r-color-gray-100);color:var(--r-color-gray-700);padding:10px 16px;vertical-align:top}.rm-table__td--center{text-align:center}.rm-table__td--right{text-align:right}.rm-table__row:last-child .rm-table__td{border-bottom:none}.rm-table__row--striped{background-color:var(--r-color-gray-50)}.rm-table__row--hoverable:hover{background-color:rgba(65,100,238,.06);cursor:pointer}.rm-table__empty{color:var(--r-color-gray-400);font-style:italic;padding:32px 16px;text-align:center}.rm-table__skeleton{animation:rm-table-shimmer 1.5s infinite;background:linear-gradient(90deg,#eee 25%,#e0e0e0 50%,#eee 75%);background-size:200% 100%;border-radius:4px;height:14px;width:80%}@keyframes rm-table-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}
+.rm-table-wrapper{background:#fff;border:1px solid #dbdef0;border-radius:8px;flex:1;overflow:auto}.rm-table{border-collapse:collapse;font-family:var(--r-font-family);font-size:var(--r-text-sm);width:100%}.rm-table__head{background:var(--r-color-gray-50)}.rm-table__head--sticky{position:sticky;top:0;z-index:2}.rm-table__th{border-bottom:1px solid #dbdef0;color:var(--r-color-gray-500);font-size:12px;font-weight:600;letter-spacing:.3px;padding:10px 16px;text-align:left;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.rm-table__th--center{text-align:center}.rm-table__th--right{text-align:right}.rm-table__th--sortable{cursor:pointer}.rm-table__th--sortable:hover{color:var(--r-color-gray-700)}.rm-table__th-content{align-items:center;display:inline-flex;gap:4px}.rm-table__sort{color:var(--r-color-gray-300);display:inline-flex;flex-direction:column;gap:-2px}.rm-table__sort--active{color:#4164ee}.rm-table__td{border-bottom:1px solid var(--r-color-gray-100);color:var(--r-color-gray-700);padding:10px 16px;vertical-align:top}.rm-table__td--center{text-align:center}.rm-table__td--right{text-align:right}.rm-table__row:last-child .rm-table__td{border-bottom:none}.rm-table__row--striped{background-color:var(--r-color-gray-50)}.rm-table__row--hoverable:hover{background-color:rgba(65,100,238,.06);cursor:pointer}.rm-table__empty{color:var(--text-muted);padding:32px 16px;text-align:center}.rm-table__skeleton{height:14px;width:80%}
 </style>

package/package.json

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