@sentropic/design-system-svelte 0.34.28 → 0.34.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/Badge.svelte +66 -2
  2. package/dist/Badge.svelte.d.ts +21 -0
  3. package/dist/Badge.svelte.d.ts.map +1 -1
  4. package/dist/CandlestickChart.svelte +286 -11
  5. package/dist/CandlestickChart.svelte.d.ts +17 -3
  6. package/dist/CandlestickChart.svelte.d.ts.map +1 -1
  7. package/dist/CellDecorationIcon.svelte +39 -0
  8. package/dist/CellDecorationIcon.svelte.d.ts +7 -0
  9. package/dist/CellDecorationIcon.svelte.d.ts.map +1 -0
  10. package/dist/Collapsible.svelte +55 -1
  11. package/dist/Collapsible.svelte.d.ts +15 -0
  12. package/dist/Collapsible.svelte.d.ts.map +1 -1
  13. package/dist/Collapsible.test.d.ts +2 -0
  14. package/dist/Collapsible.test.d.ts.map +1 -0
  15. package/dist/Collapsible.test.js +68 -0
  16. package/dist/ComboChart.svelte +333 -2
  17. package/dist/ComboChart.svelte.d.ts +34 -0
  18. package/dist/ComboChart.svelte.d.ts.map +1 -1
  19. package/dist/DataTable.svelte +91 -2
  20. package/dist/DataTable.svelte.d.ts +12 -0
  21. package/dist/DataTable.svelte.d.ts.map +1 -1
  22. package/dist/KpiCard.svelte +66 -1
  23. package/dist/KpiCard.svelte.d.ts +7 -0
  24. package/dist/KpiCard.svelte.d.ts.map +1 -1
  25. package/dist/OHLCChart.svelte +286 -11
  26. package/dist/OHLCChart.svelte.d.ts +17 -3
  27. package/dist/OHLCChart.svelte.d.ts.map +1 -1
  28. package/dist/ScatterPlot.svelte +260 -6
  29. package/dist/ScatterPlot.svelte.d.ts +25 -0
  30. package/dist/ScatterPlot.svelte.d.ts.map +1 -1
  31. package/dist/SelectableList.svelte +36 -17
  32. package/dist/SelectableList.svelte.d.ts.map +1 -1
  33. package/dist/SelectableRow.svelte +53 -1
  34. package/dist/SelectableRow.svelte.d.ts +10 -0
  35. package/dist/SelectableRow.svelte.d.ts.map +1 -1
  36. package/dist/cellDecoration.d.ts +36 -0
  37. package/dist/cellDecoration.d.ts.map +1 -0
  38. package/dist/cellDecoration.js +71 -0
  39. package/dist/index.d.ts +1 -0
  40. package/dist/index.d.ts.map +1 -1
  41. package/package.json +3 -3
@@ -1,5 +1,8 @@
1
1
  <script lang="ts" module>
2
2
  import type { Snippet } from "svelte";
3
+ import type { CellDecoration } from "./cellDecoration.js";
4
+
5
+ export type { CellDecoration, CellDecorationIntent } from "./cellDecoration.js";
3
6
 
4
7
  export interface DataTableColumn<R = DataTableRow> {
5
8
  key: string;
@@ -8,6 +11,11 @@
8
11
  align?: "start" | "center" | "end";
9
12
  width?: string;
10
13
  cell?: Snippet<[R, DataTableColumn<R>]>;
14
+ /**
15
+ * Conditional formatting (confort) : décoration sémantique calculée par
16
+ * cellule. Si une `decorations` map est aussi fournie, la map gagne.
17
+ */
18
+ cellDecoration?: (row: R, value: unknown, colId: string) => CellDecoration | null;
11
19
  }
12
20
 
13
21
  export interface DataTableRow {
@@ -25,10 +33,17 @@
25
33
 
26
34
  <script lang="ts">
27
35
  import type { HTMLTableAttributes } from "svelte/elements";
36
+ import { cellDecorationClass, cellDecorationLabel } from "./cellDecoration.js";
37
+ import CellDecorationIcon from "./CellDecorationIcon.svelte";
28
38
 
29
39
  type DataTableProps = Omit<HTMLTableAttributes, "class"> & {
30
40
  columns: DataTableColumn[];
31
41
  rows: DataTableRow[];
42
+ /**
43
+ * Conditional formatting : décorations sémantiques par cellule, indexées
44
+ * `rowId` → `colId` → décoration. Prioritaire sur `column.cellDecoration`.
45
+ */
46
+ decorations?: Record<string, Record<string, CellDecoration>>;
32
47
  caption?: string;
33
48
  size?: "sm" | "md" | "lg";
34
49
  selectable?: DataTableSelectMode;
@@ -53,6 +68,7 @@
53
68
  let {
54
69
  columns,
55
70
  rows,
71
+ decorations,
56
72
  caption,
57
73
  size = "md",
58
74
  selectable = "none",
@@ -191,6 +207,28 @@
191
207
  return String(row[key] ?? "");
192
208
  }
193
209
 
210
+ function resolveDecoration(row: DataTableRow, column: DataTableColumn): CellDecoration | null {
211
+ // La map `decorations` gagne sur le callback `column.cellDecoration`.
212
+ const fromMap = decorations?.[row.id]?.[column.key];
213
+ if (fromMap) return fromMap;
214
+ if (column.cellDecoration) {
215
+ return column.cellDecoration(row, row[column.key], column.key) ?? null;
216
+ }
217
+ return null;
218
+ }
219
+
220
+ function cellClass(column: DataTableColumn, decoration: CellDecoration | null) {
221
+ return (
222
+ [
223
+ alignClass(column.align),
224
+ decoration && "st-cell",
225
+ decoration && cellDecorationClass(decoration.intent),
226
+ ]
227
+ .filter(Boolean)
228
+ .join(" ") || undefined
229
+ );
230
+ }
231
+
194
232
  function goToPage(target: number) {
195
233
  if (target >= 1 && target <= pageCount && target !== safePage) {
196
234
  page = target;
@@ -302,8 +340,24 @@
302
340
  </td>
303
341
  {/if}
304
342
  {#each columns as column (column.key)}
305
- <td class={[alignClass(column.align)].filter(Boolean).join(" ") || undefined}>
306
- {#if column.cell}
343
+ {@const decoration = resolveDecoration(row, column)}
344
+ <td
345
+ class={cellClass(column, decoration)}
346
+ title={decoration ? cellDecorationLabel[decoration.intent] : undefined}
347
+ >
348
+ {#if decoration}
349
+ <span class="st-cell__content">
350
+ <CellDecorationIcon icon={decoration.icon} />
351
+ <span>
352
+ {#if column.cell}
353
+ {@render column.cell(row, column)}
354
+ {:else}
355
+ {cellValue(row, column.key)}
356
+ {/if}
357
+ </span>
358
+ <span class="st-visually-hidden">{cellDecorationLabel[decoration.intent]}</span>
359
+ </span>
360
+ {:else if column.cell}
307
361
  {@render column.cell(row, column)}
308
362
  {:else}
309
363
  {cellValue(row, column.key)}
@@ -426,6 +480,41 @@
426
480
  text-align: end;
427
481
  }
428
482
 
483
+ /* Conditional formatting (« classe Power-BI ») — décoration sémantique de
484
+ cellule. Le fond teinté réutilise le pattern accessible de Badge/Tag
485
+ (color-mix 14% sur token feedback) ; le texte garde le token plein. Le fond
486
+ n'est jamais la seule indication : icône + texte SR accompagnent l'intent. */
487
+ .st-cell__content {
488
+ align-items: center;
489
+ display: inline-flex;
490
+ gap: 0.375rem;
491
+ }
492
+
493
+ .st-cell--intent-positive {
494
+ background: color-mix(in srgb, var(--st-semantic-feedback-success) 14%, white);
495
+ color: var(--st-semantic-feedback-success);
496
+ }
497
+
498
+ .st-cell--intent-negative {
499
+ background: color-mix(in srgb, var(--st-semantic-feedback-error) 14%, white);
500
+ color: var(--st-semantic-feedback-error);
501
+ }
502
+
503
+ .st-cell--intent-warning {
504
+ background: color-mix(in srgb, var(--st-semantic-feedback-warning) 14%, white);
505
+ color: var(--st-semantic-feedback-warning);
506
+ }
507
+
508
+ .st-cell--intent-info {
509
+ background: color-mix(in srgb, var(--st-semantic-feedback-info) 14%, white);
510
+ color: var(--st-semantic-feedback-info);
511
+ }
512
+
513
+ .st-cell--intent-neutral {
514
+ background: var(--st-semantic-surface-subtle);
515
+ color: var(--st-semantic-text-secondary);
516
+ }
517
+
429
518
  .st-dataTable__select {
430
519
  width: 2.5rem;
431
520
  }
@@ -1,4 +1,6 @@
1
1
  import type { Snippet } from "svelte";
2
+ import type { CellDecoration } from "./cellDecoration.js";
3
+ export type { CellDecoration, CellDecorationIntent } from "./cellDecoration.js";
2
4
  export interface DataTableColumn<R = DataTableRow> {
3
5
  key: string;
4
6
  label: string;
@@ -6,6 +8,11 @@ export interface DataTableColumn<R = DataTableRow> {
6
8
  align?: "start" | "center" | "end";
7
9
  width?: string;
8
10
  cell?: Snippet<[R, DataTableColumn<R>]>;
11
+ /**
12
+ * Conditional formatting (confort) : décoration sémantique calculée par
13
+ * cellule. Si une `decorations` map est aussi fournie, la map gagne.
14
+ */
15
+ cellDecoration?: (row: R, value: unknown, colId: string) => CellDecoration | null;
9
16
  }
10
17
  export interface DataTableRow {
11
18
  id: string;
@@ -20,6 +27,11 @@ import type { HTMLTableAttributes } from "svelte/elements";
20
27
  type DataTableProps = Omit<HTMLTableAttributes, "class"> & {
21
28
  columns: DataTableColumn[];
22
29
  rows: DataTableRow[];
30
+ /**
31
+ * Conditional formatting : décorations sémantiques par cellule, indexées
32
+ * `rowId` → `colId` → décoration. Prioritaire sur `column.cellDecoration`.
33
+ */
34
+ decorations?: Record<string, Record<string, CellDecoration>>;
23
35
  caption?: string;
24
36
  size?: "sm" | "md" | "lg";
25
37
  selectable?: DataTableSelectMode;
@@ -1 +1 @@
1
- {"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DataTable.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,YAAY;IAC/C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEjE,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;CAC3B;AAGH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,cAAc,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC,GAAG;IACzD,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiQJ,QAAA,MAAM,SAAS,mFAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DataTable.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhF,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,YAAY;IAC/C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACxC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,cAAc,GAAG,IAAI,CAAC;CACnF;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEjE,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;CAC3B;AAGH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAKzD,KAAK,cAAc,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC,GAAG;IACzD,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuSJ,QAAA,MAAM,SAAS,mFAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
@@ -12,11 +12,19 @@
12
12
  | "category6"
13
13
  | "category7"
14
14
  | "category8";
15
+
16
+ export type { CellDecoration, CellDecorationIntent } from "./cellDecoration.js";
15
17
  </script>
16
18
 
17
19
  <script lang="ts">
18
20
  import type { HTMLAttributes } from "svelte/elements";
19
21
  import Sparkline from "./Sparkline.svelte";
22
+ import {
23
+ type CellDecoration,
24
+ cellDecorationClass,
25
+ cellDecorationLabel,
26
+ } from "./cellDecoration.js";
27
+ import CellDecorationIcon from "./CellDecorationIcon.svelte";
20
28
 
21
29
  type KpiCardProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
22
30
  /** Valeur principale affichée en grand. */
@@ -42,6 +50,11 @@
42
50
  size?: KpiCardSize;
43
51
  /** Couleur catégorielle pour l'accent (bordure de gauche). */
44
52
  tone?: KpiCardTone;
53
+ /**
54
+ * Conditional formatting : décoration sémantique de la carte (intent → token
55
+ * feedback en fond teinté accessible + icône lucide optionnelle).
56
+ */
57
+ decoration?: CellDecoration;
45
58
  class?: string;
46
59
  };
47
60
 
@@ -58,6 +71,7 @@
58
71
  sparkline,
59
72
  size = "md",
60
73
  tone,
74
+ decoration,
61
75
  class: className,
62
76
  ...rest
63
77
  }: KpiCardProps = $props();
@@ -116,7 +130,13 @@
116
130
  );
117
131
 
118
132
  const ariaLabel = $derived(
119
- [label, formattedValue, unit, formattedDelta && `${formattedDelta} ${trendLabel ?? ""}`.trim()]
133
+ [
134
+ label,
135
+ formattedValue,
136
+ unit,
137
+ formattedDelta && `${formattedDelta} ${trendLabel ?? ""}`.trim(),
138
+ decoration && cellDecorationLabel[decoration.intent]
139
+ ]
120
140
  .filter(Boolean)
121
141
  .join(", ")
122
142
  );
@@ -127,6 +147,8 @@
127
147
  `st-kpiCard--${size}`,
128
148
  tone && `st-kpiCard--${tone}`,
129
149
  tone && "st-kpiCard--toned",
150
+ decoration && "st-cell",
151
+ decoration && cellDecorationClass(decoration.intent),
130
152
  className
131
153
  ]
132
154
  .filter(Boolean)
@@ -138,6 +160,9 @@
138
160
  <p class="st-kpiCard__label">{label}</p>
139
161
 
140
162
  <p class="st-kpiCard__value">
163
+ {#if decoration}
164
+ <CellDecorationIcon icon={decoration.icon} />
165
+ {/if}
141
166
  <span class="st-kpiCard__number">{formattedValue}</span>
142
167
  {#if unit}
143
168
  <span class="st-kpiCard__unit">{unit}</span>
@@ -235,6 +260,46 @@
235
260
  margin: 0;
236
261
  }
237
262
 
263
+ /* Conditional formatting (« classe Power-BI ») : fond teinté accessible
264
+ (color-mix 14% sur token feedback, comme Badge/Tag) + icône alignée sur la
265
+ valeur. Le fond n'est jamais la seule indication (icône + texte SR). */
266
+ .st-kpiCard.st-cell {
267
+ padding: var(--st-spacing-4, 1rem);
268
+ }
269
+
270
+ .st-kpiCard.st-cell .st-kpiCard__value {
271
+ align-items: center;
272
+ }
273
+
274
+ .st-kpiCard.st-cell .st-kpiCard__number {
275
+ color: inherit;
276
+ }
277
+
278
+ .st-cell--intent-positive {
279
+ background: color-mix(in srgb, var(--st-semantic-feedback-success) 14%, white);
280
+ color: var(--st-semantic-feedback-success);
281
+ }
282
+
283
+ .st-cell--intent-negative {
284
+ background: color-mix(in srgb, var(--st-semantic-feedback-error) 14%, white);
285
+ color: var(--st-semantic-feedback-error);
286
+ }
287
+
288
+ .st-cell--intent-warning {
289
+ background: color-mix(in srgb, var(--st-semantic-feedback-warning) 14%, white);
290
+ color: var(--st-semantic-feedback-warning);
291
+ }
292
+
293
+ .st-cell--intent-info {
294
+ background: color-mix(in srgb, var(--st-semantic-feedback-info) 14%, white);
295
+ color: var(--st-semantic-feedback-info);
296
+ }
297
+
298
+ .st-cell--intent-neutral {
299
+ background: var(--st-semantic-surface-subtle);
300
+ color: var(--st-semantic-text-secondary);
301
+ }
302
+
238
303
  .st-kpiCard__number {
239
304
  font-size: 1.5rem;
240
305
  font-weight: 700;
@@ -3,7 +3,9 @@ export type KpiCardTrend = "up" | "down" | "flat";
3
3
  export type KpiCardFormat = "number" | "currency" | "percent";
4
4
  export type KpiCardDeltaFormat = "percent" | "absolute";
5
5
  export type KpiCardTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
6
+ export type { CellDecoration, CellDecorationIntent } from "./cellDecoration.js";
6
7
  import type { HTMLAttributes } from "svelte/elements";
8
+ import { type CellDecoration } from "./cellDecoration.js";
7
9
  type KpiCardProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
8
10
  /** Valeur principale affichée en grand. */
9
11
  value: number | string;
@@ -28,6 +30,11 @@ type KpiCardProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
28
30
  size?: KpiCardSize;
29
31
  /** Couleur catégorielle pour l'accent (bordure de gauche). */
30
32
  tone?: KpiCardTone;
33
+ /**
34
+ * Conditional formatting : décoration sémantique de la carte (intent → token
35
+ * feedback en fond teinté accessible + icône lucide optionnelle).
36
+ */
37
+ decoration?: CellDecoration;
31
38
  class?: string;
32
39
  };
33
40
  declare const KpiCard: import("svelte").Component<KpiCardProps, {}, "">;
@@ -1 +1 @@
1
- {"version":3,"file":"KpiCard.svelte.d.ts","sourceRoot":"","sources":["../src/lib/KpiCard.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9D,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,WAAW,GACnB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAGlB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC/D,2CAA2C;IAC3C,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,uDAAuD;IACvD,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiIJ,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"KpiCard.svelte.d.ts","sourceRoot":"","sources":["../src/lib/KpiCard.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9D,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,WAAW,GACnB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGlF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,EACH,KAAK,cAAc,EAGpB,MAAM,qBAAqB,CAAC;AAI7B,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC/D,2CAA2C;IAC3C,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,uDAAuD;IACvD,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+IJ,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}