@sentropic/design-system-svelte 0.10.3 → 0.10.4

package/dist/DatePicker.svelte

@@ -643,7 +643,7 @@
 
   .st-datepicker__day--inRange {
     background: var(
-      --st-component-dropdown-optionHoverBackground,
+      --st-component-control-hoverBackground,
       var(--st-semantic-surface-subtle)
     );
   }

package/dist/DisplaySettings.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export type DisplayFontScale = "normal" | "large" | "extra-large";
+  export type DisplayContrast = "default" | "high";
+  export type DisplayLineSpacing = "normal" | "comfortable";
+
+  export interface DisplaySettingsState {
+    fontScale: DisplayFontScale;
+    contrast: DisplayContrast;
+    lineSpacing: DisplayLineSpacing;
+    reducedMotion: boolean;
+  }
+
+  type DisplaySettingsProps = Omit<HTMLAttributes<HTMLElement>, "children" | "class"> & {
+    title?: string;
+    values?: Partial<DisplaySettingsState>;
+    showFontScale?: boolean;
+    showContrast?: boolean;
+    showLineSpacing?: boolean;
+    showReducedMotion?: boolean;
+    onChange?: (settings: DisplaySettingsState) => void;
+    class?: string;
+  };
+
+  const DEFAULT_SETTINGS: DisplaySettingsState = {
+    fontScale: "normal",
+    contrast: "default",
+    lineSpacing: "normal",
+    reducedMotion: false
+  };
+
+  let {
+    title = "Paramètres d’affichage",
+    values,
+    showFontScale = true,
+    showContrast = true,
+    showLineSpacing = true,
+    showReducedMotion = true,
+    onChange,
+    class: className,
+    ...rest
+  }: DisplaySettingsProps = $props();
+
+  const resolvedValues = $derived(() => ({
+    fontScale: values?.fontScale ?? DEFAULT_SETTINGS.fontScale,
+    contrast: values?.contrast ?? DEFAULT_SETTINGS.contrast,
+    lineSpacing: values?.lineSpacing ?? DEFAULT_SETTINGS.lineSpacing,
+    reducedMotion: values?.reducedMotion ?? DEFAULT_SETTINGS.reducedMotion
+  }));
+
+  let state = $state<DisplaySettingsState>({ ...DEFAULT_SETTINGS });
+
+  $effect(() => {
+    const synced = resolvedValues();
+    if (
+      state.fontScale !== synced.fontScale ||
+      state.contrast !== synced.contrast ||
+      state.lineSpacing !== synced.lineSpacing ||
+      state.reducedMotion !== synced.reducedMotion
+    ) {
+      state = {
+        ...state,
+        ...synced
+      };
+    }
+  });
+
+  const currentState = () => ({
+    fontScale: state.fontScale,
+    contrast: state.contrast,
+    lineSpacing: state.lineSpacing,
+    reducedMotion: state.reducedMotion
+  });
+
+  const classes = () => ["st-displaySettings", className].filter(Boolean).join(" ");
+
+  function update(next: Partial<DisplaySettingsState>) {
+    state = {
+      ...state,
+      ...next
+    };
+    onChange?.(currentState());
+  }
+
+  const onFontScaleChange = (event: Event) => {
+    update({
+      fontScale: (event.currentTarget as HTMLSelectElement).value as DisplayFontScale
+    });
+  };
+
+  const onContrastChange = (event: Event) => {
+    update({ contrast: (event.currentTarget as HTMLSelectElement).value as DisplayContrast });
+  };
+
+  const onLineSpacingChange = (event: Event) => {
+    update({ lineSpacing: (event.currentTarget as HTMLSelectElement).value as DisplayLineSpacing });
+  };
+
+  const onReducedMotionChange = (event: Event) => {
+    update({ reducedMotion: (event.currentTarget as HTMLInputElement).checked });
+  };
+</script>
+
+<div class={classes()} {...rest}>
+  <p class="st-displaySettings__title">{title}</p>
+
+  <div class="st-displaySettings__grid">
+    {#if showFontScale}
+      <label class="st-displaySettings__field">
+        <span class="st-displaySettings__label">Taille de texte</span>
+        <select value={state.fontScale} onchange={onFontScaleChange}>
+          <option value="normal">Normale</option>
+          <option value="large">Grande</option>
+          <option value="extra-large">Très grande</option>
+        </select>
+      </label>
+    {/if}
+
+    {#if showContrast}
+      <label class="st-displaySettings__field">
+        <span class="st-displaySettings__label">Contraste</span>
+        <select value={state.contrast} onchange={onContrastChange}>
+          <option value="default">Standard</option>
+          <option value="high">Élevé</option>
+        </select>
+      </label>
+    {/if}
+
+    {#if showLineSpacing}
+      <label class="st-displaySettings__field">
+        <span class="st-displaySettings__label">Interligne</span>
+        <select value={state.lineSpacing} onchange={onLineSpacingChange}>
+          <option value="normal">Normal</option>
+          <option value="comfortable">Confortable</option>
+        </select>
+      </label>
+    {/if}
+
+    {#if showReducedMotion}
+      <label class="st-displaySettings__field st-displaySettings__field--switch">
+        <span class="st-displaySettings__label">Animations (réduction)</span>
+        <input
+          type="checkbox"
+          role="switch"
+          checked={state.reducedMotion}
+          onchange={onReducedMotionChange}
+        />
+      </label>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .st-displaySettings {
+    border: 1px solid var(--st-semantic-border-subtle);
+    border-radius: 0.5rem;
+    padding: 0.75rem 0.875rem;
+  }
+
+  .st-displaySettings__title {
+    color: var(--st-semantic-text-primary);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    margin: 0;
+    text-transform: uppercase;
+  }
+
+  .st-displaySettings__grid {
+    display: grid;
+    gap: 0.75rem;
+    margin-top: 0.75rem;
+  }
+
+  .st-displaySettings__field {
+    display: grid;
+    gap: 0.35rem;
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.875rem;
+  }
+
+  .st-displaySettings__label {
+    font-weight: 600;
+  }
+
+  .st-displaySettings select,
+  .st-displaySettings input[type="checkbox"] {
+    appearance: auto;
+    width: 100%;
+    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
+    border-radius: 0.375rem;
+    color: var(--st-semantic-text-primary);
+    background: var(--st-component-control-background, var(--st-semantic-surface-primary));
+    padding: 0.5rem 0.65rem;
+    font: inherit;
+  }
+
+  .st-displaySettings input[type="checkbox"] {
+    width: fit-content;
+    min-width: 1.2rem;
+    min-height: 1.2rem;
+    margin: 0;
+  }
+
+  .st-displaySettings__field--switch {
+    align-items: center;
+    grid-template-columns: 1fr auto;
+    gap: 0.5rem;
+  }
+</style>

package/dist/DisplaySettings.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from "svelte/elements";
+export type DisplayFontScale = "normal" | "large" | "extra-large";
+export type DisplayContrast = "default" | "high";
+export type DisplayLineSpacing = "normal" | "comfortable";
+export interface DisplaySettingsState {
+    fontScale: DisplayFontScale;
+    contrast: DisplayContrast;
+    lineSpacing: DisplayLineSpacing;
+    reducedMotion: boolean;
+}
+type DisplaySettingsProps = Omit<HTMLAttributes<HTMLElement>, "children" | "class"> & {
+    title?: string;
+    values?: Partial<DisplaySettingsState>;
+    showFontScale?: boolean;
+    showContrast?: boolean;
+    showLineSpacing?: boolean;
+    showReducedMotion?: boolean;
+    onChange?: (settings: DisplaySettingsState) => void;
+    class?: string;
+};
+declare const DisplaySettings: import("svelte").Component<DisplaySettingsProps, {}, "">;
+type DisplaySettings = ReturnType<typeof DisplaySettings>;
+export default DisplaySettings;
+//# sourceMappingURL=DisplaySettings.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DisplaySettings.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DisplaySettings.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAC;AAClE,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,CAAC;AACjD,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE1D,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAwIJ,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/DonutChart.svelte

@@ -11,6 +11,8 @@
 </script>
 
 <script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
   type DonutChartProps = {
     data: DonutChartDatum[];
     /** Diamètre du SVG. */
@@ -69,32 +71,49 @@
 
   const classes = () => ["st-donutChart", className].filter(Boolean).join(" ");
   const fmtPct = (p: number) => `${p.toFixed(p < 10 ? 1 : 0)}%`;
+  const dataValueItems = $derived(
+    slices.items.map((slice) => `${slice.d.label}: ${slice.d.value} (${fmtPct(slice.pct)})`)
+  );
+
+  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;
+  }
 </script>
 
-<div class={classes()} role="img" aria-label={label}>
-  <svg viewBox="0 0 {size} {size}" width="100%" height="100%" focusable="false" aria-hidden="true">
-    {#if slices.total > 0}
-      {#each slices.items as slice, i (slice.d.label)}
-        <path
-          class="st-donutChart__slice st-donutChart__slice--{slice.tone}"
-          class:st-donutChart__slice--dim={hoveredIndex !== null && hoveredIndex !== i}
-          d={slice.path}
-          tabindex="0"
-          role="img"
-          aria-label="{slice.d.label}: {slice.d.value} ({fmtPct(slice.pct)})"
-          onmouseenter={() => (hoveredIndex = i)}
-          onmouseleave={() => (hoveredIndex = null)}
-          onfocus={() => (hoveredIndex = i)}
-          onblur={() => (hoveredIndex = null)}
-        />
-      {/each}
-      {#if centerLabel !== null}
-        <text class="st-donutChart__center" x={size / 2} y={size / 2} text-anchor="middle" dominant-baseline="central">
-          {centerLabel ?? slices.total}
-        </text>
+<div class={classes()}>
+  <div
+    class="st-donutChart__visual"
+    role="img"
+    aria-label={label}
+    onpointermove={handleVisualPointerMove}
+    onpointerleave={() => (hoveredIndex = null)}
+  >
+    <svg viewBox="0 0 {size} {size}" width="100%" height="100%" focusable="false" aria-hidden="true">
+      {#if slices.total > 0}
+        {#each slices.items as slice, i (slice.d.label)}
+          <path
+            class="st-donutChart__slice st-donutChart__slice--{slice.tone}"
+            class:st-donutChart__slice--dim={hoveredIndex !== null && hoveredIndex !== i}
+            d={slice.path}
+            data-chart-index={i}
+          />
+        {/each}
+        {#if centerLabel !== null}
+          <text class="st-donutChart__center" x={size / 2} y={size / 2} text-anchor="middle" dominant-baseline="central">
+            {centerLabel ?? slices.total}
+          </text>
+        {/if}
       {/if}
-    {/if}
-  </svg>
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
 
   {#if hoveredIndex !== null && slices.items[hoveredIndex]}
     {@const s = slices.items[hoveredIndex]}
@@ -114,7 +133,8 @@
     position: relative;
   }
 
-  .st-donutChart svg { display: block; overflow: visible; }
+  .st-donutChart svg,
+  .st-donutChart__visual { display: block; overflow: visible; }
 
   .st-donutChart__slice {
     cursor: pointer;
@@ -125,11 +145,6 @@
 
   .st-donutChart__slice--dim { opacity: 0.4; }
 
-  .st-donutChart__slice:focus-visible {
-    outline: 2px solid var(--st-semantic-border-interactive);
-    outline-offset: 1px;
-  }
-
   .st-donutChart__slice--category1 { fill: var(--st-semantic-data-category1); }
   .st-donutChart__slice--category2 { fill: var(--st-semantic-data-category2); }
   .st-donutChart__slice--category3 { fill: var(--st-semantic-data-category3); }

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

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DonutChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,cAAc,GACtB,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiFJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"DonutChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DonutChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,cAAc,GACtB,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC;AAMF,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAmGJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/Dropdown.svelte

@@ -176,7 +176,7 @@
   .st-dropdown__option:hover:not(:disabled),
   .st-dropdown__option:focus-visible {
     background: var(
-      --st-component-dropdown-optionHoverBackground,
+      --st-component-control-hoverBackground,
       var(--st-semantic-surface-subtle)
     );
     outline: none;

package/dist/FileUploader.svelte

@@ -407,7 +407,7 @@
   }
 
   .st-fileUploader__trigger:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--st-semantic-action-primary) 88%, black);
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
   }
 
   .st-fileUploader__trigger:focus-visible {
@@ -531,7 +531,7 @@
   }
 
   .st-fileUploader__remove:hover:not(:disabled) {
-    background: color-mix(in srgb, currentColor 14%, transparent);
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
   }
 
   .st-fileUploader__remove:focus-visible {