[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"readme-html:EDM115\u002Flight-odometer:master":3},"\u003Cdiv align=\"center\">\n\u003Ch1 id=\"light-odometer\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"light-odometer\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#light-odometer\">light-odometer\u003C\u002Fa>\u003C\u002Fh1>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Flight-odometer\" alt=\"NPM Version\" loading=\"lazy\"> \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Flight-odometer\" alt=\"NPM Downloads\" loading=\"lazy\"> \u003Ca href=\"https:\u002F\u002Fnpmx.dev\u002Flight-odometer\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fnpmx-More_info-orange?logo=npm\" alt=\"More info\" loading=\"lazy\">\u003C\u002Fa>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cp>This project is made only for personal use, as a small and lightweight build of \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmtmarco87\u002Ftm-odometer\" target=\"_blank\" rel=\"noopener noreferrer\">tm-odometer\u003C\u002Fa>, which is itself a fork of \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FHubSpot\u002Fodometer\" target=\"_blank\" rel=\"noopener noreferrer\">HubSpot’s odometer\u003C\u002Fa>.\u003Cbr>\n⚠️ Do not use this, use \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmtmarco87\" target=\"_blank\" rel=\"noopener noreferrer\">@mtmarco87\u003C\u002Fa>’s package instead.\u003Cbr>\nHuge props to him for this TypeScript refactor !\u003Cbr>\n\u003Cbr>\n\u003C\u002Fp>\n\u003Cp>No theme is shipped here, no docs either.\u003C\u002Fp>\n\u003Ch2 id=\"whats-changed\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"whats-changed\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#whats-changed\">What’s changed ?\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>For a quick overview in a real-world usage, see \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FEDM115\u002Fwebsite\u002Fblob\u002Fmaster\u002Fapp\u002Fcomponents\u002Fui\u002FOdometer.vue\" target=\"_blank\" rel=\"noopener noreferrer\">https:\u002F\u002Fgithub.com\u002FEDM115\u002Fwebsite\u002Fblob\u002Fmaster\u002Fapp\u002Fcomponents\u002Fui\u002FOdometer.vue\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch3 id=\"breaking-changes\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"breaking-changes\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#breaking-changes\">Breaking changes\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Renamed from \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-title class_\">TmOdometer\u003C\u002Fspan>\u003C\u002Fcode> to \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-title class_\">LightOdometer\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>Removal of all built artifacts, themes, demo, screenshots and CoffeeScript code\u003C\u002Fli>\n\u003Cli>Switch from Rollup to tsdown (Rolldown)\u003C\u002Fli>\n\u003Cli>Remove compatibility layers (Internet Explorer, jQuery)\u003C\u002Fli>\n\u003Cli>Keep only the ESM build and switch to a default export\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3 id=\"new-features\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"new-features\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#new-features\">New features\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>SSR friendly (you can import it top-level without blowing up) and use safe fallbacks for browser-land functions\u003C\u002Fli>\n\u003Cli>Each instance can now have an \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-built_in\">id\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>Ability to customize the framerate\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>ts\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs ts'>\u003Cspan class=\"hljs-keyword\">const\u003C\u002Fspan> odo = \u003Cspan class=\"hljs-keyword\">new\u003C\u002Fspan> \u003Cspan class=\"hljs-title class_\">LightOdometer\u003C\u002Fspan>({ ..., \u003Cspan class=\"hljs-attr\">framerate\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">20\u003C\u002Fspan> })\n\u003Cspan class=\"hljs-comment\">\u002F\u002F default is 30, going above isn't recommended\u003C\u002Fspan>\n\u003Cspan class=\"hljs-comment\">\u002F\u002F use countFramerate if you use the `count` mode instead of `slide`\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003C\u002Fli>\n\u003Cli>Ability to render once and destroy the instance\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>ts\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs ts'>\u003Cspan class=\"hljs-keyword\">const\u003C\u002Fspan> odo = \u003Cspan class=\"hljs-keyword\">new\u003C\u002Fspan> \u003Cspan class=\"hljs-title class_\">LightOdometer\u003C\u002Fspan>({ ..., \u003Cspan class=\"hljs-attr\">value\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">0\u003C\u002Fspan> })\nodo.\u003Cspan class=\"hljs-title function_\">animateOnceAndDisconnect\u003C\u002Fspan>(\u003Cspan class=\"hljs-number\">12345\u003C\u002Fspan>)\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003C\u002Fli>\n\u003Cli>Expose \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">duration\u003C\u002Fspan>\u003C\u002Fcode> as a CSS property to sync up JS and CSS animations\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>ts\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs ts'>\u003Cspan class=\"hljs-keyword\">const\u003C\u002Fspan> odo = \u003Cspan class=\"hljs-keyword\">new\u003C\u002Fspan> \u003Cspan class=\"hljs-title class_\">LightOdometer\u003C\u002Fspan>({ ..., \u003Cspan class=\"hljs-attr\">duration\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">5000\u003C\u002Fspan> })\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">getComputedStyle\u003C\u002Fspan>(odo.\u003Cspan class=\"hljs-property\">el\u003C\u002Fspan>).\u003Cspan class=\"hljs-title function_\">getPropertyValue\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">"--odometer-duration"\u003C\u002Fspan>)) \u003Cspan class=\"hljs-comment\">\u002F\u002F "5000ms"\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003C\u002Fli>\n\u003Cli>Get and mutate instance and global options\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>ts\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs ts'>\u003Cspan class=\"hljs-keyword\">const\u003C\u002Fspan> odo = \u003Cspan class=\"hljs-keyword\">new\u003C\u002Fspan> \u003Cspan class=\"hljs-title class_\">LightOdometer\u003C\u002Fspan>({ ... })\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(odo.\u003Cspan class=\"hljs-title function_\">getOptions\u003C\u002Fspan>().\u003Cspan class=\"hljs-property\">duration\u003C\u002Fspan>)\nodo.\u003Cspan class=\"hljs-title function_\">setOptions\u003C\u002Fspan>({ \u003Cspan class=\"hljs-attr\">duration\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">2000\u003C\u002Fspan> })\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title class_\">LightOdometer\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">getGlobalOptions\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">selector\u003C\u002Fspan>)\n\u003Cspan class=\"hljs-title class_\">LightOdometer\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">setGlobalOptions\u003C\u002Fspan>({ \u003Cspan class=\"hljs-attr\">selector\u003C\u002Fspan>: \u003Cspan class=\"hljs-string\">".my-odometer"\u003C\u002Fspan> })\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003C\u002Fli>\n\u003Cli>Add per-instance subscriptable animation start\u002Fend events, they give back the instance id, el, instance, value, oldValue, options\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>ts\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs ts'>\u003Cspan class=\"hljs-keyword\">const\u003C\u002Fspan> odo = \u003Cspan class=\"hljs-keyword\">new\u003C\u002Fspan> \u003Cspan class=\"hljs-title class_\">LightOdometer\u003C\u002Fspan>({ ... })\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(odo.\u003Cspan class=\"hljs-property\">isAnimating\u003C\u002Fspan>)\n\n\u003Cspan class=\"hljs-keyword\">function\u003C\u002Fspan> \u003Cspan class=\"hljs-title function_\">onStart\u003C\u002Fspan>(\u003Cspan class=\"hljs-params\">\u003Cspan class=\"hljs-attr\">e\u003C\u002Fspan>: \u003Cspan class=\"hljs-title class_\">Event\u003C\u002Fspan>\u003C\u002Fspan>) {\n  \u003Cspan class=\"hljs-keyword\">const\u003C\u002Fspan> { detail } = e \u003Cspan class=\"hljs-keyword\">as\u003C\u002Fspan> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C\u002Fspan><\u003Cspan class=\"hljs-title class_\">LightOdometerEventDetail\u003C\u002Fspan>>\n  \u003Cspan class=\"hljs-comment\">\u002F\u002F detail.id, detail.value, detail.instance.isAnimating, ...\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">`started animating to \u003Cspan class=\"hljs-subst\">${detail.value}\u003C\u002Fspan>`\u003C\u002Fspan>)\n}\n\n\u003Cspan class=\"hljs-keyword\">function\u003C\u002Fspan> \u003Cspan class=\"hljs-title function_\">onDone\u003C\u002Fspan>(\u003Cspan class=\"hljs-params\">\u003Cspan class=\"hljs-attr\">e\u003C\u002Fspan>: \u003Cspan class=\"hljs-title class_\">Event\u003C\u002Fspan>\u003C\u002Fspan>) {\n  \u003Cspan class=\"hljs-keyword\">const\u003C\u002Fspan> { detail } = e \u003Cspan class=\"hljs-keyword\">as\u003C\u002Fspan> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C\u002Fspan><\u003Cspan class=\"hljs-title class_\">LightOdometerEventDetail\u003C\u002Fspan>>\n  \u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">`finished animating to \u003Cspan class=\"hljs-subst\">${detail.value}\u003C\u002Fspan>`\u003C\u002Fspan>)\n}\n\nodo.\u003Cspan class=\"hljs-title function_\">on\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">"odometerstart"\u003C\u002Fspan>, onStart)\nodo.\u003Cspan class=\"hljs-title function_\">on\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">"odometerdone"\u003C\u002Fspan>, onDone)\n\n\u003Cspan class=\"hljs-comment\">\u002F\u002F later\u003C\u002Fspan>\nodo.\u003Cspan class=\"hljs-title function_\">off\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">"odometerstart"\u003C\u002Fspan>, onStart)\nodo.\u003Cspan class=\"hljs-title function_\">off\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">"odometerdone"\u003C\u002Fspan>, onDone)\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003C\u002Fli>\n\u003Cli>Print the instance as a JSON-friendly string\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>ts\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs ts'>\u003Cspan class=\"hljs-keyword\">const\u003C\u002Fspan> odo = \u003Cspan class=\"hljs-keyword\">new\u003C\u002Fspan> \u003Cspan class=\"hljs-title class_\">LightOdometer\u003C\u002Fspan>({ ... })\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(odo.\u003Cspan class=\"hljs-title function_\">toString\u003C\u002Fspan>())\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>json\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs json'>\u003Cspan class=\"hljs-punctuation\">{\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-attr\">"id"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-number\">2\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">,\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-attr\">"value"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-number\">157\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">,\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-attr\">"options"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-punctuation\">{\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">"id"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-number\">2\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">,\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">"value"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-number\">0\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">,\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">"animation"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">"slide"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">,\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">"duration"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-number\">8000\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">,\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">"format"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">"( ddd)"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">,\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">"framerate"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-number\">20\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-punctuation\">}\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">,\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-attr\">"globalOptions"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-punctuation\">{\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">}\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">,\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-attr\">"watchMutations"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-literal\">\u003Cspan class=\"hljs-keyword\">false\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">,\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-attr\">"transitionEndBound"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-literal\">\u003Cspan class=\"hljs-keyword\">true\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">,\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-attr\">"destroyed"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-literal\">\u003Cspan class=\"hljs-keyword\">false\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">,\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-attr\">"format"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-punctuation\">{\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">"repeating"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">" "\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">,\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">"precision"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-number\">0\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-punctuation\">}\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">,\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-attr\">"isAnimating"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-literal\">\u003Cspan class=\"hljs-keyword\">false\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"hljs-punctuation\">}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3 id=\"animation-controls\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"animation-controls\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#animation-controls\">Animation controls\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">maxValues\u003C\u002Fspan>\u003C\u002Fcode> caps each slide ribbon at 32 value elements by default (configurable from 2 to 256). \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">framerate\u003C\u002Fspan>\u003C\u002Fcode> can lower the sampling density further, it does not throttle CSS animation frames. Digit containers are reused between renders.\u003Cbr>\nTiming changes made with \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-title\">setOptions\u003C\u002Fspan>\u003Cspan class=\"hljs-params\">()\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode> apply to the next animation. Format changes apply immediately, including when the numeric value stays the same. A new \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-title\">update\u003C\u002Fspan>\u003Cspan class=\"hljs-params\">()\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode> supersedes the previous animation, only the current animation emits \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">odometerdone\u003C\u002Fspan>\u003C\u002Fcode>.\u003Cbr>\n\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">respectReducedMotion\u003C\u002Fspan>\u003C\u002Fcode> defaults to \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>\u003C\u002Fcode>. Reduced motion and a zero duration render the target immediately while preserving the start\u002Fdone event order. \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-title\">disconnect\u003C\u002Fspan>\u003Cspan class=\"hljs-params\">()\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode> cancels work, restores wrapped element properties, removes subscriptions registered with \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-title\">on\u003C\u002Fspan>\u003Cspan class=\"hljs-params\">()\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode> and leaves a static target. Disconnected instances are terminal, create a new instance to reuse the element.\u003Cbr>\nUse \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">onRender\u003C\u002Fspan>\u003C\u002Fcode> to decorate the complete digit structure synchronously without a mutation observer. The callback runs on the initial render as well as later renders, keep it limited to decorating the DOM.\u003C\u002Fp>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>ts\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs ts'>\u003Cspan class=\"hljs-keyword\">const\u003C\u002Fspan> odo = \u003Cspan class=\"hljs-keyword\">new\u003C\u002Fspan> \u003Cspan class=\"hljs-title class_\">LightOdometer\u003C\u002Fspan>({\n  el,\n  \u003Cspan class=\"hljs-attr\">value\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">0\u003C\u002Fspan>,\n  \u003Cspan class=\"hljs-attr\">maxValues\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">32\u003C\u002Fspan>,\n  \u003Cspan class=\"hljs-attr\">respectReducedMotion\u003C\u002Fspan>: \u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>,\n  \u003Cspan class=\"hljs-title function_\">onRender\u003C\u002Fspan>(\u003Cspan class=\"hljs-params\">instance\u003C\u002Fspan>) {\n    \u003Cspan class=\"hljs-comment\">\u002F\u002F instance.inside contains the complete structure\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-comment\">\u002F\u002F instance.digits is ordered from the least significant digit\u003C\u002Fspan>\n  },\n})\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Cp>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-title\">spin\u003C\u002Fspan>\u003Cspan class=\"hljs-params\">(digitCount)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode> rolls 1–32 digits continuously using 11 value elements per digit. \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">duration\u003C\u002Fspan>\u003C\u002Fcode> controls a full revolution with a small speed difference between columns. It keeps the last numeric value unchanged and emits a start event, it has no done event until a later numeric update completes. \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">isSpinning\u003C\u002Fspan>\u003C\u002Fcode> distinguishes this mode from a finite animation. Under reduced motion or zero duration, the requested digits remain stationary. A change in the motion preference updates a running spinner automatically.\u003C\u002Fp>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>ts\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs ts'>odo.\u003Cspan class=\"hljs-title function_\">spin\u003C\u002Fspan>(\u003Cspan class=\"hljs-number\">6\u003C\u002Fspan>)\nodo.\u003Cspan class=\"hljs-title function_\">update\u003C\u002Fspan>(\u003Cspan class=\"hljs-number\">123456\u003C\u002Fspan>) \u003Cspan class=\"hljs-comment\">\u002F\u002F Stops spinning and settles on this value\u003C\u002Fspan>\nodo.\u003Cspan class=\"hljs-title function_\">disconnect\u003C\u002Fspan>() \u003Cspan class=\"hljs-comment\">\u002F\u002F Also stops an active spinner\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Cp>Numeric inputs must be finite and safely representable after scaling to the format precision, formats support up to 15 decimal places. Invalid values, negative durations, and nonpositive framerates throw \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-built_in\">RangeError\u003C\u002Fspan>\u003C\u002Fcode>. Use \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-title\">spin\u003C\u002Fspan>\u003Cspan class=\"hljs-params\">()\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode> for indefinite motion instead of passing numeric \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-literal\">Infinity\u003C\u002Fspan>\u003C\u002Fcode>.\u003Cbr>\nFor an accessible integration, expose a separate formatted text value and mark the decorative wheel \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">aria-hidden\u003C\u002Fspan>\u003Cspan class=\"hljs-operator\">=\u003C\u002Fspan>\u003Cspan class=\"hljs-string\">"true"\u003C\u002Fspan>\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch3 id=\"improvements\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"improvements\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#improvements\">Improvements\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">value\u003C\u002Fspan>\u003C\u002Fcode> is now stripped from spaces\u003C\u002Fli>\n\u003Cli>Multiple performance improvements\u003C\u002Fli>\n\u003Cli>Use overall more optimized methods\u003C\u002Fli>\n\u003Cli>Stabilize and simplify the interfaces\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3 id=\"other-changes\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"other-changes\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#other-changes\">Other changes\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>No more const functions\u003C\u002Fli>\n\u003Cli>Better TS config and stricter types (no more \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-built_in\">any\u003C\u002Fspan>\u003C\u002Fcode> nor \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-keyword\">as\u003C\u002Fspan>\u003C\u002Fcode>)\u003C\u002Fli>\n\u003Cli>Use classes private elements\u003C\u002Fli>\n\u003Cli>Added linting and formatting (OxLint + ESLint Stylistic)\u003C\u002Fli>\n\u003Cli>Target ES2023 instead of ES2015\u003C\u002Fli>\n\u003C\u002Ful>\n",1788996429077]