@sentropic/design-system-svelte 0.34.51 → 0.34.52

package/dist/CopyButton.svelte

@@ -4,6 +4,7 @@
 
   type CopyButtonProps = Omit<HTMLButtonAttributes, "class" | "type"> & {
     value: string;
+    locale?: string;
     label?: string;
     copiedLabel?: string;
     feedbackTimeoutMs?: number;
@@ -15,8 +16,9 @@
 
   let {
     value,
-    label = "Copy",
-    copiedLabel = "Copied",
+    locale = "fr-FR",
+    label,
+    copiedLabel,
     feedbackTimeoutMs = 1500,
     size = "md",
     onCopied,
@@ -26,6 +28,10 @@
     ...rest
   }: CopyButtonProps = $props();
 
+  const isFr = $derived(locale.toLowerCase().startsWith("fr"));
+  const resolvedLabel = $derived(label ?? (isFr ? "Copier" : "Copy"));
+  const resolvedCopiedLabel = $derived(copiedLabel ?? (isFr ? "Copié" : "Copied"));
+
   let copied = $state(false);
   let timeoutId: ReturnType<typeof setTimeout> | undefined;
 
@@ -65,7 +71,7 @@
       <Copy size={14} strokeWidth={2} aria-hidden="true" />
     {/if}
   </span>
-  <span class="st-copyButton__label">{copied ? copiedLabel : label}</span>
+  <span class="st-copyButton__label">{copied ? resolvedCopiedLabel : resolvedLabel}</span>
 </button>
 
 <style>

package/dist/CopyButton.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { HTMLButtonAttributes } from "svelte/elements";
 type CopyButtonProps = Omit<HTMLButtonAttributes, "class" | "type"> & {
     value: string;
+    locale?: string;
     label?: string;
     copiedLabel?: string;
     feedbackTimeoutMs?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CopyButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAI1D,KAAK,eAAe,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA0DJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"CopyButton.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CopyButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAI1D,KAAK,eAAe,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+DJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/Dropdown.svelte

@@ -12,6 +12,7 @@
     label: string;
     options: DropdownOption[];
     value?: string;
+    locale?: string;
     placeholder?: string;
     open?: boolean;
     class?: string;
@@ -22,13 +23,17 @@
     label,
     options,
     value,
-    placeholder = "Select",
+    locale = "fr-FR",
+    placeholder,
     open = false,
     class: className,
     onselect,
     ...rest
   }: DropdownProps = $props();
 
+  const isFr = $derived(locale.toLowerCase().startsWith("fr"));
+  const resolvedPlaceholder = $derived(placeholder ?? (isFr ? "Sélectionner" : "Select"));
+
   let host: HTMLDivElement | undefined = $state();
   let buttonEl: HTMLButtonElement | undefined = $state();
   let expanded = $state(false);
@@ -38,7 +43,7 @@
   let listPos = $state({ top: 0, left: 0, width: 0 });
 
   const classes = () => ["st-dropdown", className].filter(Boolean).join(" ");
-  const selectedLabel = () => options.find((option) => option.value === currentValue)?.label ?? placeholder;
+  const selectedLabel = () => options.find((option) => option.value === currentValue)?.label ?? resolvedPlaceholder;
 
   function updateListPos() {
     if (!buttonEl) return;

package/dist/Dropdown.svelte.d.ts

@@ -8,6 +8,7 @@ type DropdownProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onselect">
     label: string;
     options: DropdownOption[];
     value?: string;
+    locale?: string;
     placeholder?: string;
     open?: boolean;
     class?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Dropdown.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAChF,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AA4GJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Dropdown.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAChF,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAgHJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/MultiSelect.svelte

@@ -18,6 +18,7 @@
     size?: "sm" | "md" | "lg";
     options: MultiSelectOption[];
     selected?: string[];
+    locale?: string;
     placeholder?: string;
     searchPlaceholder?: string;
     noResultsLabel?: string;
@@ -37,11 +38,12 @@
     size = "md",
     options,
     selected = $bindable([]),
-    placeholder = "Select items",
-    searchPlaceholder = "Filter",
-    noResultsLabel = "No results",
-    toggleLabel = "Toggle options",
-    removeLabel = "Remove",
+    locale = "fr-FR",
+    placeholder,
+    searchPlaceholder,
+    noResultsLabel,
+    toggleLabel,
+    removeLabel,
     listLabel,
     disabled = false,
     class: className,
@@ -49,6 +51,13 @@
     ...rest
   }: MultiSelectProps = $props();
 
+  const isFr = $derived(locale.toLowerCase().startsWith("fr"));
+  const resolvedPlaceholder = $derived(placeholder ?? (isFr ? "Sélectionner des éléments" : "Select items"));
+  const resolvedSearchPlaceholder = $derived(searchPlaceholder ?? (isFr ? "Filtrer" : "Filter"));
+  const resolvedNoResultsLabel = $derived(noResultsLabel ?? (isFr ? "Aucun résultat" : "No results"));
+  const resolvedToggleLabel = $derived(toggleLabel ?? (isFr ? "Afficher les options" : "Toggle options"));
+  const resolvedRemoveLabel = $derived(removeLabel ?? (isFr ? "Supprimer" : "Remove"));
+
   let expanded = $state(false);
   let query = $state("");
 
@@ -112,7 +121,7 @@
           <button
             type="button"
             class="st-multiSelect__tagRemove"
-            aria-label={`${removeLabel} ${option.label}`}
+            aria-label={`${resolvedRemoveLabel} ${option.label}`}
             {disabled}
             onclick={() => removeOption(option.value)}
           >
@@ -132,7 +141,7 @@
       onclick={toggleOpen}
     >
       {#if selectedOptions.length === 0}
-        <span class="st-multiSelect__placeholder">{placeholder}</span>
+        <span class="st-multiSelect__placeholder">{resolvedPlaceholder}</span>
       {:else}
         <span class="st-multiSelect__count">{selectedOptions.length} selected</span>
       {/if}
@@ -143,7 +152,7 @@
           strokeWidth={2.25}
         />
       </span>
-      <span class="st-visually-hidden">{toggleLabel}</span>
+      <span class="st-visually-hidden">{resolvedToggleLabel}</span>
     </button>
   </span>
   {#if expanded}
@@ -151,13 +160,13 @@
       <input
         type="search"
         class="st-multiSelect__search"
-        placeholder={searchPlaceholder}
+        placeholder={resolvedSearchPlaceholder}
         bind:value={query}
-        aria-label={searchPlaceholder}
+        aria-label={resolvedSearchPlaceholder}
       />
       <div class="st-multiSelect__list" role="listbox" aria-label={listLabel ?? label ?? "Options"} aria-multiselectable="true">
         {#if filtered.length === 0}
-          <div class="st-multiSelect__empty">{noResultsLabel}</div>
+          <div class="st-multiSelect__empty">{resolvedNoResultsLabel}</div>
         {:else}
           {#each filtered as option (option.value)}
             {@const isSelected = selected.includes(option.value)}

package/dist/MultiSelect.svelte.d.ts

@@ -12,6 +12,7 @@ type MultiSelectProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onchange
     size?: "sm" | "md" | "lg";
     options: MultiSelectOption[];
     selected?: string[];
+    locale?: string;
     placeholder?: string;
     searchPlaceholder?: string;
     noResultsLabel?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../src/lib/MultiSelect.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAIH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzC,CAAC;AAqIJ,QAAA,MAAM,WAAW,8DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../src/lib/MultiSelect.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAIH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzC,CAAC;AA6IJ,QAAA,MAAM,WAAW,8DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/NavItem.svelte

@@ -87,8 +87,8 @@
     selected = $bindable(false),
     disabled = false,
     href,
-    leading,
-    trailing,
+    leading: leadingProp,
+    trailing: trailingProp,
     divider = false,
     class: className
   }: NavItemProps = $props();
@@ -150,8 +150,8 @@
     caption={caption ? captionSnippet : undefined}
   >
     {#snippet leading()}
-      {#if leading}
-        {@render leading()}
+      {#if leadingProp}
+        {@render leadingProp()}
       {:else if swatch}
         <!-- Tête : ColorSwatch pour une couleur arbitraire, sinon StatusDot pour
              un ton sémantique. Décoratif → aria géré par la primitive. -->
@@ -168,8 +168,8 @@
     {/snippet}
 
     {#snippet trailing()}
-      {#if trailing}
-        {@render trailing()}
+      {#if trailingProp}
+        {@render trailingProp()}
       {:else if count != null}
         <!-- Queue : bulle de compte. Badge shape="circle" size="sm" (tabular-nums),
              ton sémantique aligné sur le `status` de la rangée. aria-label explicite. -->

package/dist/PaginationNav.svelte

@@ -6,6 +6,7 @@
     page: number;
     pageCount: number;
     siblings?: number;
+    locale?: string;
     label?: string;
     previousLabel?: string;
     nextLabel?: string;
@@ -17,14 +18,19 @@
     page = $bindable(1),
     pageCount,
     siblings = 1,
+    locale = "fr-FR",
     label = "Pagination",
-    previousLabel = "Previous page",
-    nextLabel = "Next page",
+    previousLabel,
+    nextLabel,
     class: className,
     onPageChange,
     ...rest
   }: PaginationNavProps = $props();
 
+  const isFr = $derived(locale.toLowerCase().startsWith("fr"));
+  const resolvedPreviousLabel = $derived(previousLabel ?? (isFr ? "Page précédente" : "Previous page"));
+  const resolvedNextLabel = $derived(nextLabel ?? (isFr ? "Page suivante" : "Next page"));
+
   type Slot = number | "ellipsis-start" | "ellipsis-end";
 
   const classes = () => ["st-paginationNav", className].filter(Boolean).join(" ");
@@ -86,7 +92,7 @@
       <button
         type="button"
         class="st-paginationNav__nav"
-        aria-label={previousLabel}
+        aria-label={resolvedPreviousLabel}
         disabled={page <= 1 || pageCount <= 0}
         onclick={() => go(page - 1)}
       >
@@ -117,7 +123,7 @@
       <button
         type="button"
         class="st-paginationNav__nav"
-        aria-label={nextLabel}
+        aria-label={resolvedNextLabel}
         disabled={page >= pageCount || pageCount <= 0}
         onclick={() => go(page + 1)}
       >

package/dist/PaginationNav.svelte.d.ts

@@ -3,6 +3,7 @@ type PaginationNavProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
     page: number;
     pageCount: number;
     siblings?: number;
+    locale?: string;
     label?: string;
     previousLabel?: string;
     nextLabel?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"PaginationNav.svelte.d.ts","sourceRoot":"","sources":["../src/lib/PaginationNav.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AA0GJ,QAAA,MAAM,aAAa,4DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PaginationNav.svelte.d.ts","sourceRoot":"","sources":["../src/lib/PaginationNav.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AA+GJ,QAAA,MAAM,aAAa,4DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/design-system-svelte",
-  "version": "0.34.51",
+  "version": "0.34.52",
   "type": "module",
   "publishConfig": {
     "access": "public"