@number-flow/svelte 0.1.4 → 0.1.6

package/dist/NumberFlow.svelte

@@ -3,8 +3,8 @@ export class NumberFlowElement extends NumberFlowLite {
   set __svelte_manual(manual) {
     this.manual = manual;
   }
-  set parts(parts) {
-    super.parts = parts;
+  set data(data) {
+    super.data = data;
   }
 }
 Object.keys(NumberFlowElement.defaultProps).forEach((key) => {
@@ -20,14 +20,17 @@ define("number-flow-svelte", NumberFlowElement);
 </script>
 
 <script>import {
-  render as renderFlow,
-  partitionParts
+  renderInnerHTML,
+  formatToData
 } from "number-flow";
 import { writable } from "svelte/store";
 import { getGroupContext } from "./group.js";
+import { BROWSER } from "esm-env";
 export let locales = void 0;
 export let format = void 0;
 export let value;
+export let prefix = void 0;
+export let suffix = void 0;
 export let willChange = false;
 export let transformTiming = NumberFlowElement.defaultProps.transformTiming;
 export let spinTiming = NumberFlowElement.defaultProps.spinTiming;
@@ -40,14 +43,16 @@ export let el = void 0;
 const elStore = writable(el);
 $: $elStore = el;
 $: formatter = new Intl.NumberFormat(locales, format);
-$: parts = partitionParts(value, formatter);
+$: data = formatToData(value, formatter, prefix, suffix);
 const group = getGroupContext();
 group?.register?.(elStore);
 </script>
 
 <number-flow-svelte
 	bind:this={el}
+	aria-label={data.valueAsString}
 	{...$$restProps}
+	role="img"
 	data-will-change={willChange ? '' : undefined}
 	on:animationsstart
 	on:animationsfinish
@@ -59,7 +64,7 @@ group?.register?.(elStore);
 	__svelte_respectMotionPreference={respectMotionPreference}
 	__svelte_trend={trend}
 	__svelte_continuous={continuous}
-	{parts}
+	{data}
 >
-	{@html renderFlow({ formatted: parts.formatted, willChange })}
+	{@html BROWSER ? undefined : renderInnerHTML(data)}
 </number-flow-svelte>

package/dist/NumberFlow.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
-import { NumberFlowLite, type PartitionedParts } from 'number-flow';
+import { NumberFlowLite, type Data } from 'number-flow';
 export declare class NumberFlowElement extends NumberFlowLite {
     set __svelte_manual(manual: boolean);
-    set parts(parts: PartitionedParts | undefined);
+    set data(data: Data | undefined);
 }
 import { type Value, type Format, type Props as NumberFlowProps } from 'number-flow';
 import type { HTMLAttributes } from 'svelte/elements';
@@ -12,6 +12,8 @@ declare const __propDef: {
         locales?: Intl.LocalesArgument;
         format?: Format;
         value: Value;
+        prefix?: string;
+        suffix?: string;
         willChange?: boolean;
     };
     slots: {};

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "A component to transition and format numbers.",
   "license": "MIT",
   "homepage": "https://number-flow.barvian.me/svelte",
@@ -41,7 +41,8 @@
     }
   },
   "dependencies": {
-    "number-flow": "0.3.7"
+    "esm-env": "^1.1.4",
+    "number-flow": "0.3.9"
   },
   "peerDependencies": {
     "svelte": "^4 || ^5"