@sentropic/design-system-svelte 0.34.0 → 0.34.21

package/dist/PolygonChart.svelte

@@ -0,0 +1,189 @@
+<script lang="ts" module>
+  export type PolygonChartTone =
+    | "category1" | "category2" | "category3" | "category4"
+    | "category5" | "category6" | "category7" | "category8";
+
+  export type PolygonChartPoint = {
+    x: number;
+    y: number;
+  };
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
+  type PolygonChartProps = {
+    data: PolygonChartPoint[];
+    label: string;
+    tone?: PolygonChartTone;
+    width?: number;
+    height?: number;
+    class?: string;
+  };
+
+  let {
+    data,
+    label,
+    tone = "category1",
+    width = 480,
+    height = 360,
+    class: className
+  }: PolygonChartProps = $props();
+
+  const MARGIN = { top: 14, right: 18, bottom: 36, left: 48 };
+
+  function niceTicks(min: number, max: number, target = 5): number[] {
+    if (!Number.isFinite(min) || !Number.isFinite(max) || min === max) {
+      return [Number.isFinite(max) ? max : 0];
+    }
+    const range = max - min;
+    const rough = range / Math.max(target - 1, 1);
+    const pow = Math.pow(10, Math.floor(Math.log10(rough)));
+    const norm = rough / pow;
+    let step: number;
+    if (norm < 1.5) step = pow;
+    else if (norm < 3) step = 2 * pow;
+    else if (norm < 7) step = 5 * pow;
+    else step = 10 * pow;
+    const start = Math.floor(min / step) * step;
+    const end = Math.ceil(max / step) * step;
+    const ticks: number[] = [];
+    for (let v = start; v <= end + step / 2; v += step) ticks.push(Number(v.toFixed(10)));
+    return ticks;
+  }
+
+  function scaleLinear(v: number, d0: number, d1: number, r0: number, r1: number) {
+    if (d1 === d0) return r0;
+    return r0 + ((v - d0) * (r1 - r0)) / (d1 - d0);
+  }
+
+  function fmt(v: number): string {
+    if (Math.abs(v) >= 1000) return `${(v / 1000).toFixed(v % 1000 === 0 ? 0 : 1)}k`;
+    return Number.isInteger(v) ? String(v) : v.toFixed(1);
+  }
+
+  let hoveredIndex: number | null = $state(null);
+
+  // Non-finite coordinates are dropped before anything else.
+  const validData = $derived(
+    (data ?? []).filter((d) => Number.isFinite(d.x) && Number.isFinite(d.y))
+  );
+
+  const scales = $derived.by(() => {
+    const xs = validData.map((d) => d.x);
+    const ys = validData.map((d) => d.y);
+    const xTicks = niceTicks(Math.min(...xs), Math.max(...xs));
+    const yTicks = niceTicks(Math.min(...ys), Math.max(...ys));
+    const plotW = Math.max(width - MARGIN.left - MARGIN.right, 1);
+    const plotH = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
+    return {
+      xTicks, yTicks,
+      xMin: xTicks[0], xMax: xTicks[xTicks.length - 1],
+      yMin: yTicks[0], yMax: yTicks[yTicks.length - 1],
+      plotW, plotH
+    };
+  });
+
+  const points = $derived.by(() => {
+    const { xMin, xMax, yMin, yMax, plotW, plotH } = scales;
+    return validData.map((d) => ({
+      cx: MARGIN.left + scaleLinear(d.x, xMin, xMax, 0, plotW),
+      cy: MARGIN.top + scaleLinear(d.y, yMin, yMax, plotH, 0),
+      datum: d
+    }));
+  });
+
+  const polygonPoints = $derived(points.map((p) => `${p.cx},${p.cy}`).join(" "));
+
+  const dataValueItems = $derived(validData.map((d) => `x ${d.x}, y ${d.y}`));
+
+  function handleVisualPointerMove(event: PointerEvent) {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      hoveredIndex = null;
+      return;
+    }
+    const index = Number(target.getAttribute("data-chart-index"));
+    hoveredIndex = Number.isInteger(index) ? index : null;
+  }
+
+  const classes = () => ["st-polygonChart", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()}>
+  <div
+    class="st-polygonChart__visual"
+    role="img"
+    aria-label={label}
+    onpointermove={handleVisualPointerMove}
+    onpointerleave={() => (hoveredIndex = null)}
+  >
+    <svg viewBox="0 0 {width} {height}" preserveAspectRatio="xMidYMid meet" width="100%" height="100%" focusable="false" aria-hidden="true">
+      <!-- gridlines + ticks Y -->
+      {#each scales.yTicks as t (t)}
+        {@const y = MARGIN.top + scaleLinear(t, scales.yMin, scales.yMax, scales.plotH, 0)}
+        <line class="st-polygonChart__grid" x1={MARGIN.left} x2={width - MARGIN.right} y1={y} y2={y} />
+        <text class="st-polygonChart__tick" x={MARGIN.left - 6} y={y} text-anchor="end" dominant-baseline="middle">{fmt(t)}</text>
+      {/each}
+      <!-- ticks X -->
+      {#each scales.xTicks as t (t)}
+        {@const x = MARGIN.left + scaleLinear(t, scales.xMin, scales.xMax, 0, scales.plotW)}
+        <text class="st-polygonChart__tick" x={x} y={height - MARGIN.bottom + 16} text-anchor="middle">{fmt(t)}</text>
+      {/each}
+
+      <!-- axes -->
+      <line class="st-polygonChart__axis" x1={MARGIN.left} x2={MARGIN.left} y1={MARGIN.top} y2={height - MARGIN.bottom} />
+      <line class="st-polygonChart__axis" x1={MARGIN.left} x2={width - MARGIN.right} y1={height - MARGIN.bottom} y2={height - MARGIN.bottom} />
+
+      <!-- closed filled polygon connecting the points in order -->
+      {#if points.length >= 2}
+        <polygon class="st-polygonChart__polygon st-polygonChart__polygon--{tone}" points={polygonPoints} />
+      {/if}
+
+      <!-- vertex markers -->
+      {#each points as p, i (i)}
+        <circle
+          class="st-polygonChart__vertex st-polygonChart__vertex--{tone}"
+          cx={p.cx}
+          cy={p.cy}
+          r="3.5"
+          data-chart-index={i}
+        />
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
+
+  {#if hoveredIndex !== null && points[hoveredIndex]}
+    {@const p = points[hoveredIndex]}
+    <div class="st-polygonChart__tooltip" role="presentation" style="left: {(p.cx / width) * 100}%; top: {(p.cy / height) * 100}%">
+      <span class="st-polygonChart__tooltipValue">x {p.datum.x} · y {p.datum.y}</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .st-polygonChart { color: var(--st-semantic-text-secondary); display: block; font-family: inherit; position: relative; width: 100%; }
+  .st-polygonChart svg, .st-polygonChart__visual { display: block; overflow: visible; }
+  .st-polygonChart__grid { stroke: var(--st-semantic-border-subtle); stroke-dasharray: 2 3; stroke-width: 1; opacity: 0.7; }
+  .st-polygonChart__axis { stroke: var(--st-semantic-border-subtle); stroke-width: 1; }
+  .st-polygonChart__tick { fill: var(--st-semantic-text-secondary); font-size: 0.6875rem; }
+  .st-polygonChart__polygon { fill: currentColor; fill-opacity: 0.18; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
+  .st-polygonChart__vertex { fill: currentColor; }
+  .st-polygonChart__polygon--category1, .st-polygonChart__vertex--category1 { color: var(--st-semantic-data-category1); }
+  .st-polygonChart__polygon--category2, .st-polygonChart__vertex--category2 { color: var(--st-semantic-data-category2); }
+  .st-polygonChart__polygon--category3, .st-polygonChart__vertex--category3 { color: var(--st-semantic-data-category3); }
+  .st-polygonChart__polygon--category4, .st-polygonChart__vertex--category4 { color: var(--st-semantic-data-category4); }
+  .st-polygonChart__polygon--category5, .st-polygonChart__vertex--category5 { color: var(--st-semantic-data-category5); }
+  .st-polygonChart__polygon--category6, .st-polygonChart__vertex--category6 { color: var(--st-semantic-data-category6); }
+  .st-polygonChart__polygon--category7, .st-polygonChart__vertex--category7 { color: var(--st-semantic-data-category7); }
+  .st-polygonChart__polygon--category8, .st-polygonChart__vertex--category8 { color: var(--st-semantic-data-category8); }
+  .st-polygonChart__tooltip {
+    background: var(--st-semantic-surface-inverse); border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-inverse); display: inline-flex; flex-direction: column;
+    font-size: 0.75rem; gap: 0.125rem; line-height: 1.2; padding: 0.375rem 0.5rem;
+    pointer-events: none; position: absolute; transform: translate(-50%, calc(-100% - 8px)); white-space: nowrap; z-index: 1;
+  }
+  .st-polygonChart__tooltipValue { opacity: 0.85; }
+</style>

package/dist/PolygonChart.svelte.d.ts

@@ -0,0 +1,17 @@
+export type PolygonChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type PolygonChartPoint = {
+    x: number;
+    y: number;
+};
+type PolygonChartProps = {
+    data: PolygonChartPoint[];
+    label: string;
+    tone?: PolygonChartTone;
+    width?: number;
+    height?: number;
+    class?: string;
+};
+declare const PolygonChart: import("svelte").Component<PolygonChartProps, {}, "">;
+type PolygonChart = ReturnType<typeof PolygonChart>;
+export default PolygonChart;
+//# sourceMappingURL=PolygonChart.svelte.d.ts.map

package/dist/PolygonChart.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PolygonChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/PolygonChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,gBAAgB,GACxB,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAMF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6IJ,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/ScoreCard.svelte

@@ -0,0 +1,172 @@
+<script lang="ts" module>
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export type ScoreCardType = "value" | "complexity";
+  export type ScoreCardSize = "sm" | "md" | "lg";
+
+  export type ScoreCardProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Titre de la métrique notée. */
+    title: string;
+    /** Score numérique affiché (formaté à une décimale). */
+    score: number;
+    /** Nombre de symboles pleins (0..max). */
+    stars: number;
+    /** Nombre total de symboles. */
+    max?: number;
+    /**
+     * Nature de la note :
+     * - `value` (défaut) : étoiles, accent succès.
+     * - `complexity` : croix, accent avertissement.
+     */
+    type?: ScoreCardType;
+    /** Libellé d'unité du score (défaut « points »). */
+    unit?: string;
+    size?: ScoreCardSize;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  let {
+    title,
+    score,
+    stars,
+    max = 5,
+    type = "value",
+    unit = "points",
+    size = "md",
+    class: className,
+    ...rest
+  }: ScoreCardProps = $props();
+
+  const filled = $derived(Math.max(0, Math.min(max, Math.round(stars))));
+  const symbols = $derived(
+    Array.from({ length: max }, (_, i) => i < filled)
+  );
+  const ariaLabel = $derived(
+    `${title}, ${score.toFixed(1)} ${unit}, ${filled} sur ${max}`
+  );
+
+  const classes = $derived(
+    ["st-scoreCard", `st-scoreCard--${size}`, `st-scoreCard--${type}`, className]
+      .filter(Boolean)
+      .join(" ")
+  );
+
+  // Étoile pleine (type=value) vs croix (type=complexity).
+  const starPath =
+    "m7 1.5 1.7 3.45 3.8.55-2.75 2.68.65 3.79L7 10.18 3.6 11.96l.65-3.79L1.5 5.5l3.8-.55L7 1.5Z";
+  const crossPath = "M3.5 3.5l7 7M10.5 3.5l-7 7";
+</script>
+
+<article {...rest} class={classes} role="group" aria-label={ariaLabel}>
+  <h3 class="st-scoreCard__title">{title}</h3>
+  <div class="st-scoreCard__row">
+    <div class="st-scoreCard__symbols" aria-hidden="true">
+      {#each symbols as on, i (i)}
+        <svg
+          class="st-scoreCard__symbol {on ? 'st-scoreCard__symbol--on' : 'st-scoreCard__symbol--off'}"
+          width="20"
+          height="20"
+          viewBox="0 0 14 14"
+          focusable="false"
+        >
+          {#if type === "value"}
+            <path d={starPath} fill={on ? "currentColor" : "none"} stroke="currentColor" stroke-width="1" stroke-linejoin="round" />
+          {:else}
+            <path d={crossPath} fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
+          {/if}
+        </svg>
+      {/each}
+    </div>
+    <span class="st-scoreCard__score">
+      {score.toFixed(1)} {unit}
+    </span>
+  </div>
+</article>
+
+<style>
+  .st-scoreCard {
+    background: var(--st-component-card-background, var(--st-semantic-surface-raised));
+    border-width: var(--st-component-card-anatomy-shape-borderWidth, 1px);
+    border-style: var(--st-component-card-anatomy-shape-borderStyle, solid);
+    border-color: var(--st-component-card-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-card-anatomy-shape-radius, 0.5rem);
+    box-shadow: var(--st-component-card-shadow, 0 1px 2px rgb(15 23 42 / 0.08));
+    color: var(--st-semantic-text-primary);
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-2, 0.5rem);
+    padding: var(--st-spacing-4, 1rem);
+  }
+
+  .st-scoreCard--sm {
+    gap: var(--st-spacing-1, 0.25rem);
+    padding: var(--st-spacing-3, 0.75rem);
+  }
+
+  .st-scoreCard--lg {
+    gap: var(--st-spacing-3, 0.75rem);
+    padding: var(--st-spacing-6, 1.5rem);
+  }
+
+  .st-scoreCard__title {
+    color: var(--st-semantic-text-primary);
+    font-size: 0.9375rem;
+    font-weight: 600;
+    line-height: 1.3;
+    margin: 0;
+  }
+
+  .st-scoreCard__row {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-3, 0.75rem);
+  }
+
+  .st-scoreCard__symbols {
+    display: inline-flex;
+    gap: 0.125rem;
+  }
+
+  .st-scoreCard__symbol {
+    display: block;
+    flex: 0 0 auto;
+  }
+
+  .st-scoreCard--sm .st-scoreCard__symbol {
+    height: 16px;
+    width: 16px;
+  }
+
+  .st-scoreCard--lg .st-scoreCard__symbol {
+    height: 24px;
+    width: 24px;
+  }
+
+  .st-scoreCard__symbol--off {
+    color: var(--st-semantic-border-default);
+  }
+
+  .st-scoreCard--value .st-scoreCard__symbol--on {
+    color: var(--st-semantic-feedback-warning);
+  }
+
+  .st-scoreCard--complexity .st-scoreCard__symbol--on {
+    color: var(--st-semantic-text-secondary);
+  }
+
+  .st-scoreCard__score {
+    font-size: 1.0625rem;
+    font-weight: 700;
+  }
+
+  .st-scoreCard--value .st-scoreCard__score {
+    color: var(--st-semantic-feedback-success);
+  }
+
+  .st-scoreCard--complexity .st-scoreCard__score {
+    color: var(--st-semantic-feedback-warning);
+  }
+</style>

package/dist/ScoreCard.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from "svelte/elements";
+export type ScoreCardType = "value" | "complexity";
+export type ScoreCardSize = "sm" | "md" | "lg";
+export type ScoreCardProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Titre de la métrique notée. */
+    title: string;
+    /** Score numérique affiché (formaté à une décimale). */
+    score: number;
+    /** Nombre de symboles pleins (0..max). */
+    stars: number;
+    /** Nombre total de symboles. */
+    max?: number;
+    /**
+     * Nature de la note :
+     * - `value` (défaut) : étoiles, accent succès.
+     * - `complexity` : croix, accent avertissement.
+     */
+    type?: ScoreCardType;
+    /** Libellé d'unité du score (défaut « points »). */
+    unit?: string;
+    size?: ScoreCardSize;
+    class?: string;
+};
+declare const ScoreCard: import("svelte").Component<ScoreCardProps, {}, "">;
+type ScoreCard = ReturnType<typeof ScoreCard>;
+export default ScoreCard;
+//# sourceMappingURL=ScoreCard.svelte.d.ts.map

package/dist/ScoreCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScoreCard.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ScoreCard.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,YAAY,CAAC;AACnD,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACxE,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6DJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/Search.svelte

@@ -143,14 +143,17 @@
 
   .st-search--sm {
     min-height: var(--st-component-control-smHeight, 2rem);
+    font-size: 0.8125rem;
   }
 
   .st-search--md {
     min-height: var(--st-component-control-mdHeight, 2.5rem);
+    font-size: 0.875rem;
   }
 
   .st-search--lg {
     min-height: var(--st-component-control-lgHeight, 3rem);
+    font-size: 1rem;
   }
 
   .st-search:hover:not(:has(input:disabled)) {
@@ -210,18 +213,17 @@
     align-items: center;
     background: transparent;
     border: 0;
-    border-radius: 50%;
-    color: inherit;
+    border-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
+    color: var(--st-semantic-text-secondary);
     cursor: pointer;
     display: inline-flex;
     flex: 0 0 auto;
     font: inherit;
-    font-size: 1.125rem;
     height: 1.5rem;
     justify-content: center;
     line-height: 1;
-    margin-inline-end: 0.375rem;
-    padding: 0;
+    margin-inline-end: 0.25rem;
+    padding: 0 0.25rem;
     transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
     width: 1.5rem;
   }

package/dist/Select.svelte

@@ -144,14 +144,17 @@
 
   .st-select--sm {
     min-height: var(--st-component-control-smHeight, 2rem);
+    font-size: 0.8125rem;
   }
 
   .st-select--md {
     min-height: var(--st-component-control-mdHeight, 2.5rem);
+    font-size: 0.875rem;
   }
 
   .st-select--lg {
     min-height: var(--st-component-control-lgHeight, 3rem);
+    font-size: 1rem;
   }
 
   .st-select:focus-visible {