{
    "version": "https://jsonfeed.org/version/1",
    "title": "Trackunit IrisX - Change Log",
    "home_page_url": "https://developers.trackunit.com/changelog/",
    "description": "New APIs, SDK updates and platform changes.",
    "items": [
        {
            "id": "https://developers.trackunit.com/changelog/2026/08/03/iris-app-nx-23-upgrade/",
            "content_html": "<p>In this version of our Iris App SDK, we have upgraded NX to <strong>v23.1.0</strong>. This release also moves Iris App builds onto <strong>Vite 8</strong>.</p>\n<p>Make sure to upgrade your extensions to the latest version of NX.</p>\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">npx nx migrate </span><span class=\"token number\" style=\"color:#36acaa\">23.1</span><span class=\"token plain\">.0</span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">npx nx migrate --run-migrations</span><br></div></code></pre></div></div>\n<p>Please refer to <a class=\"\" href=\"https://developers.trackunit.com/docs/apps-and-extensions/overview/iris-app-sdk-reference/maintaining-your-app/\">Maintaining Your Application</a> for more information.</p>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"also-included-vite-8\">Also included: Vite 8<a href=\"https://developers.trackunit.com/changelog/2026/08/03/iris-app-nx-23-upgrade/#also-included-vite-8\" class=\"hash-link\" aria-label=\"Direct link to Also included: Vite 8\" title=\"Direct link to Also included: Vite 8\" translate=\"no\">​</a></h3>\n<p><code>@trackunit/iris-app-sdk-vite</code> now depends on Vite <strong>8.1.x</strong> (Rolldown-based bundler). Most Iris Apps need no Vite config changes after updating <code>@trackunit/*</code> packages.</p>\n<p>If you customized production minification with <code>build.minify: \"esbuild\"</code>, switch to Vite 8's default (<code>\"oxc\"</code>), or install <code>esbuild</code> separately — generated Iris App workspaces do not include esbuild.</p>\n<p>Module Federation continues to work via <code>@module-federation/vite</code> 1.18+, which supports Vite 8.</p>",
            "url": "https://developers.trackunit.com/changelog/2026/08/03/iris-app-nx-23-upgrade/",
            "title": "trackunit/iris-app — NX upgraded to v23.1.0",
            "summary": "In this version of our Iris App SDK, we have upgraded NX to v23.1.0. This release also moves Iris App builds onto Vite 8.",
            "date_modified": "2026-08-03T00:00:00.000Z",
            "tags": [
                "Improved"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2026/07/27/webpack-rspack-removed/",
            "content_html": "<p>The <code>@trackunit/iris-app-sdk-webpack</code>, <code>@trackunit/iris-app-sdk-rspack</code>, and <code>@trackunit/iris-app-webpack-plugin</code> packages have been <strong>removed</strong>. <strong>Vite</strong> (<code>@trackunit/iris-app-sdk-vite</code>) is now the only supported build system for Iris Apps.</p>\n<p>This follows the <a class=\"\" href=\"https://developers.trackunit.com/changelog/2026/06/25/webpack-rspack-deprecation/\">deprecation notice</a> published in June. If your Iris App was still using the Webpack or Rspack executors, it will no longer build — see the <a class=\"\" href=\"https://developers.trackunit.com/changelog/2026/02/26/migrate-from-rspack-to-vite/\">Vite migration guide</a> to switch over.</p>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"what-changed\">What changed<a href=\"https://developers.trackunit.com/changelog/2026/07/27/webpack-rspack-removed/#what-changed\" class=\"hash-link\" aria-label=\"Direct link to What changed\" title=\"Direct link to What changed\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\"><code>@trackunit/iris-app-sdk-webpack</code>, <code>@trackunit/iris-app-sdk-rspack</code>, and <code>@trackunit/iris-app-webpack-plugin</code> have been removed from the monorepo and are marked deprecated on npm.</li>\n<li class=\"\"><code>@trackunit/iris-app-build-utilities</code> no longer exports <code>getIrisAppWebpackDevServer</code> or <code>getIrisAppRspackDevServer</code>.</li>\n<li class=\"\">Internally, the Iris App loader that hosts your app in Trackunit Manager has also been migrated from Webpack to Vite. This is transparent to Iris App developers — no action needed on your end for this part.</li>\n</ul>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"action-required\">Action required<a href=\"https://developers.trackunit.com/changelog/2026/07/27/webpack-rspack-removed/#action-required\" class=\"hash-link\" aria-label=\"Direct link to Action required\" title=\"Direct link to Action required\" translate=\"no\">​</a></h3>\n<p>If you haven't migrated yet, follow the <a class=\"\" href=\"https://developers.trackunit.com/changelog/2026/02/26/migrate-from-rspack-to-vite/\">Vite migration guide</a> before updating your <code>@trackunit/*</code> dependencies, since the old executors are no longer published as working packages.</p>\n<p>If you're unsure whether your app is affected, check your <code>project.json</code> for <code>@trackunit/iris-app-sdk-webpack:*</code> or <code>@trackunit/iris-app-sdk-rspack:*</code> executors.</p>",
            "url": "https://developers.trackunit.com/changelog/2026/07/27/webpack-rspack-removed/",
            "title": "Webpack & Rspack SDK build executors have been removed",
            "summary": "The @trackunit/iris-app-sdk-webpack, @trackunit/iris-app-sdk-rspack, and @trackunit/iris-app-webpack-plugin packages have been removed. Vite (@trackunit/iris-app-sdk-vite) is now the only supported build system for Iris Apps.",
            "date_modified": "2026-07-27T00:00:00.000Z",
            "tags": [
                "Removed"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2026/06/26/device-health-issues-api-v1/",
            "content_html": "<p>The Device Health Issues API is now generally available. The endpoints have been promoted from <code>v1beta1</code> to <code>v1</code>, and the API is no longer marked as beta.</p>\n<p>Below is a list of all available REST endpoints:</p>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"issue-api\">Issue API<a href=\"https://developers.trackunit.com/changelog/2026/06/26/device-health-issues-api-v1/#issue-api\" class=\"hash-link\" aria-label=\"Direct link to Issue API\" title=\"Direct link to Issue API\" translate=\"no\">​</a></h2>\n<blockquote>\n<p>➕ GET: <code>/v1/assets/{assetId}/issues</code></p>\n</blockquote>\n<p>Get issues by asset</p>\n<blockquote>\n<p>➕ GET: <code>/v1/issues</code></p>\n</blockquote>\n<p>Get issues</p>\n<blockquote>\n<p>➕ GET: <code>/v1/issues/{issueId}</code></p>\n</blockquote>\n<p>Get issue by id</p>\n<h1>Breaking changes</h1>\n<blockquote>\n<p>⚠️ The <code>v1beta1</code> endpoints have been replaced by <code>v1</code>. Update any integrations to use the <code>/v1/...</code> paths.</p>\n</blockquote>\n<blockquote>\n<p>⚠️ The issue type <code>LOW_DEVICE_BATTERY_VOLTAGE</code> has been renamed to <code>LOW_DEVICE_BATTERY</code>. Update any filtering or handling that relies on this value.</p>\n</blockquote>",
            "url": "https://developers.trackunit.com/changelog/2026/06/26/device-health-issues-api-v1/",
            "title": "Device Health Issues API v1",
            "summary": "The Device Health Issues API is now generally available. The endpoints have been promoted from v1beta1 to v1, and the API is no longer marked as beta.",
            "date_modified": "2026-06-26T00:00:00.000Z",
            "tags": [
                "Improved",
                "Removed"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2026/06/25/webpack-rspack-deprecation/",
            "content_html": "<p>The <code>@trackunit/iris-app-sdk-webpack</code> and <code>@trackunit/iris-app-sdk-rspack</code> build executors are <strong>deprecated</strong> and will be <strong>removed in the coming months</strong>. <strong>Vite</strong> is the supported path forward — migrate your Iris app to the Vite executor.</p>\n<p>We are consolidating the Iris App SDK build tooling on <strong>Vite</strong> (<code>@trackunit/iris-app-sdk-vite</code>) so we can focus our effort on a single, well-supported bundler.</p>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"what-this-means\">What this means<a href=\"https://developers.trackunit.com/changelog/2026/06/25/webpack-rspack-deprecation/#what-this-means\" class=\"hash-link\" aria-label=\"Direct link to What this means\" title=\"Direct link to What this means\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\">The <code>@trackunit/iris-app-sdk-webpack</code> and <code>@trackunit/iris-app-sdk-rspack</code> executors are deprecated and will be removed in the coming months.</li>\n<li class=\"\"><code>@trackunit/iris-app-sdk-vite</code> is the supported bundler going forward.</li>\n</ul>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"action-required\">Action required<a href=\"https://developers.trackunit.com/changelog/2026/06/25/webpack-rspack-deprecation/#action-required\" class=\"hash-link\" aria-label=\"Direct link to Action required\" title=\"Direct link to Action required\" translate=\"no\">​</a></h3>\n<p>Migrate your Iris app to the Vite executor. See the <a class=\"\" href=\"https://developers.trackunit.com/changelog/2026/02/26/migrate-from-rspack-to-vite/\">Vite migration guide</a>.</p>",
            "url": "https://developers.trackunit.com/changelog/2026/06/25/webpack-rspack-deprecation/",
            "title": "Webpack & Rspack SDK build executors are being removed — migrate to Vite",
            "summary": "The @trackunit/iris-app-sdk-webpack and @trackunit/iris-app-sdk-rspack build executors are deprecated and will be removed in the coming months. Vite is the supported path forward — migrate your Iris app to the Vite executor.",
            "date_modified": "2026-06-25T00:00:00.000Z",
            "tags": [
                "Removed"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2026/06/01/telematics-device-configuration-job-rollback/",
            "content_html": "<p>The Telematics Device API now lets you roll back a previously executed configuration job. Rollback creates new configuration jobs that restore each device to the configuration it had before the original job ran.</p>\n<p>Devices that have had their configuration changed since the original job (manually, by another job, or by automation) are excluded from rollback so the rollback never silently overwrites a newer change. A rollback request can produce more than one rollback job because devices are grouped by the previous configuration they shared.</p>\n<p>Today, rollback is supported for <strong>CAN profile</strong>, <strong>Modbus profile</strong>, and <strong>Operating Mode</strong> changes. Other configurations the original job touched are excluded from the rollback's desired state — additional configurations will be announced as they become available.</p>\n<blockquote>\n<p>➕ POST: <code>/v2/configuration-jobs/{id}/rollbacks</code></p>\n</blockquote>\n<p><a class=\"\" href=\"https://developers.trackunit.com/docs/api-reference/telematics-device/rollback-configuration-job/\">Rollback a configuration job</a></p>",
            "url": "https://developers.trackunit.com/changelog/2026/06/01/telematics-device-configuration-job-rollback/",
            "title": "Telematics Device API: rollback a configuration job",
            "summary": "The Telematics Device API now lets you roll back a previously executed configuration job. Rollback creates new configuration jobs that restore each device to the configuration it had before the original job ran.",
            "date_modified": "2026-06-01T00:00:00.000Z",
            "tags": [
                "Added"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2026/05/13/react-components-v2-accessibility/",
            "content_html": "<p><code>@trackunit/react-components</code> and <code>@trackunit/react-form-components</code> include breaking accessibility, tooltip, and layout updates for component consumers. These changes were made to improve accessibility compliance and create more consistent tooltip and labeling behavior across components</p>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"breaking-changes\">Breaking Changes<a href=\"https://developers.trackunit.com/changelog/2026/05/13/react-components-v2-accessibility/#breaking-changes\" class=\"hash-link\" aria-label=\"Direct link to Breaking Changes\" title=\"Direct link to Breaking Changes\" translate=\"no\">​</a></h2>\n<ul>\n<li class=\"\">\n<p><strong>IconButton:</strong> Icon buttons must now have an accessible name. Pass either <code>title</code> or <code>ariaLabel</code>.</p>\n<ul>\n<li class=\"\"><code>title</code> renders the component-library tooltip and is used as the accessible name unless <code>ariaLabel</code> is also provided.</li>\n<li class=\"\"><code>ariaLabel</code> lets the accessible name differ from the visible tooltip text.</li>\n<li class=\"\"><code>title</code> is no longer rendered as a native DOM <code>title</code> attribute, so tests should query the button by role/name instead of <code>getByTitle</code>.</li>\n<li class=\"\"><code>icon</code> must be an <code>&lt;Icon /&gt;</code> element from <code>@trackunit/react-components</code>; arbitrary <code>ReactNode</code> icons are no longer accepted.</li>\n<li class=\"\">Disabled and loading icon buttons do not show the tooltip.</li>\n<li class=\"\">The <code>&lt;Icon /&gt;</code> passed via <code>icon</code> is automatically marked <code>aria-hidden</code> so the button's accessible name is the only label announced.</li>\n</ul>\n<div class=\"language-tsx codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-tsx codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">IconButton</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">icon</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag script language-javascript tag class-name\" style=\"color:#00009f\">Icon</span><span class=\"token tag script language-javascript tag\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript tag attr-name\" style=\"color:#00a4db\">name</span><span class=\"token tag script language-javascript tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag script language-javascript tag attr-value\" style=\"color:#e3116c\">Trash</span><span class=\"token tag script language-javascript tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag script language-javascript tag\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript tag attr-name\" style=\"color:#00a4db\">size</span><span class=\"token tag script language-javascript tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag script language-javascript tag attr-value\" style=\"color:#e3116c\">small</span><span class=\"token tag script language-javascript tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag script language-javascript tag\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript tag punctuation\" style=\"color:#393A34\">/&gt;</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">title</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">Delete item</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag punctuation\" style=\"color:#393A34\">/&gt;</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">IconButton</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">ariaLabel</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">Delete asset</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">icon</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag script language-javascript tag class-name\" style=\"color:#00009f\">Icon</span><span class=\"token tag script language-javascript tag\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript tag attr-name\" style=\"color:#00a4db\">name</span><span class=\"token tag script language-javascript tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag script language-javascript tag attr-value\" style=\"color:#e3116c\">Trash</span><span class=\"token tag script language-javascript tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag script language-javascript tag\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript tag attr-name\" style=\"color:#00a4db\">size</span><span class=\"token tag script language-javascript tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag script language-javascript tag attr-value\" style=\"color:#e3116c\">small</span><span class=\"token tag script language-javascript tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag script language-javascript tag\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript tag punctuation\" style=\"color:#393A34\">/&gt;</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">title</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">Delete</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag punctuation\" style=\"color:#393A34\">/&gt;</span><br></div></code></pre></div></div>\n</li>\n<li class=\"\">\n<p><strong>CardHeader:</strong> Removed the deprecated <code>onClickClose</code> prop and the built-in close button. Render close actions through <code>actions</code> instead.</p>\n<div class=\"language-tsx codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-tsx codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">CardHeader</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">actions</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag script language-javascript\" style=\"color:#00009f\">    </span><span class=\"token tag script language-javascript tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag script language-javascript tag class-name\" style=\"color:#00009f\">IconButton</span><span class=\"token tag script language-javascript tag\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript tag attr-name\" style=\"color:#00a4db\">icon</span><span class=\"token tag script language-javascript tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript tag script language-javascript tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag script language-javascript tag script language-javascript tag class-name\" style=\"color:#00009f\">Icon</span><span class=\"token tag script language-javascript tag script language-javascript tag\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript tag script language-javascript tag attr-name\" style=\"color:#00a4db\">name</span><span class=\"token tag script language-javascript tag script language-javascript tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript tag script language-javascript tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag script language-javascript tag script language-javascript tag attr-value\" style=\"color:#e3116c\">XMark</span><span class=\"token tag script language-javascript tag script language-javascript tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag script language-javascript tag script language-javascript tag\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript tag script language-javascript tag attr-name\" style=\"color:#00a4db\">size</span><span class=\"token tag script language-javascript tag script language-javascript tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript tag script language-javascript tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag script language-javascript tag script language-javascript tag attr-value\" style=\"color:#e3116c\">small</span><span class=\"token tag script language-javascript tag script language-javascript tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag script language-javascript tag script language-javascript tag\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript tag script language-javascript tag punctuation\" style=\"color:#393A34\">/&gt;</span><span class=\"token tag script language-javascript tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag script language-javascript tag\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript tag attr-name\" style=\"color:#00a4db\">onClick</span><span class=\"token tag script language-javascript tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript tag script language-javascript\" style=\"color:#00009f\">onClose</span><span class=\"token tag script language-javascript tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag script language-javascript tag\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript tag attr-name\" style=\"color:#00a4db\">title</span><span class=\"token tag script language-javascript tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag script language-javascript tag attr-value\" style=\"color:#e3116c\">Close</span><span class=\"token tag script language-javascript tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag script language-javascript tag\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript tag attr-name\" style=\"color:#00a4db\">variant</span><span class=\"token tag script language-javascript tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag script language-javascript tag attr-value\" style=\"color:#e3116c\">ghost-neutral</span><span class=\"token tag script language-javascript tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag script language-javascript tag\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript tag punctuation\" style=\"color:#393A34\">/&gt;</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag script language-javascript\" style=\"color:#00009f\">  </span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">heading</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">Details</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\"></span><span class=\"token tag punctuation\" style=\"color:#393A34\">/&gt;</span><br></div></code></pre></div></div>\n</li>\n<li class=\"\">\n<p><strong>Breadcrumb:</strong> The previously proposed <code>backButtonTitle</code> and <code>expandCollapsedItemsTitle</code> props are no longer accepted on <code>Breadcrumb</code>, <code>BreadcrumbContainer</code>, or <code>BreadcrumbForMediumScreen</code>. The back button and the medium-screen ellipsis button now resolve their accessible names from the <code>react-components</code> library translations (<code>breadcrumb.backButton</code> and <code>breadcrumb.expandButton</code>). Host applications must register the <code>react-components</code> library translations to get the localized strings. Consumers that were forwarding these props should remove them from their JSX.</p>\n<div class=\"language-tsx codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-tsx codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">Breadcrumb</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">breadcrumbItems</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\">items</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">onClickBack</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\">onBack</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag punctuation\" style=\"color:#393A34\">/&gt;</span><br></div></code></pre></div></div>\n</li>\n<li class=\"\">\n<p><strong>Pagination:</strong> <code>previousPageTitle</code> and <code>nextPageTitle</code> are now required and are passed to the previous/next <code>IconButton</code>s.</p>\n<div class=\"language-tsx codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-tsx codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">Pagination</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">nextPage</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\">nextPage</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">nextPageTitle</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">Next page</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">previousPage</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\">previousPage</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">previousPageTitle</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">Previous page</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">pageCount</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\">pageCount</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\"></span><span class=\"token tag punctuation\" style=\"color:#393A34\">/&gt;</span><br></div></code></pre></div></div>\n</li>\n<li class=\"\">\n<p><strong>Tag:</strong> Dismissible tags now require <code>removeTagLabel</code> whenever <code>onClickClose</code> is provided. The close icon uses that label for its tooltip.</p>\n<div class=\"language-tsx codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-tsx codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">Tag</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">onClickClose</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\">onRemove</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">removeTagLabel</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">Remove tag</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag punctuation\" style=\"color:#393A34\">&gt;</span><span class=\"token plain-text\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain-text\">  Active filter</span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain-text\"></span><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;/</span><span class=\"token tag class-name\" style=\"color:#00009f\">Tag</span><span class=\"token tag punctuation\" style=\"color:#393A34\">&gt;</span><br></div></code></pre></div></div>\n</li>\n<li class=\"\">\n<p><strong>KPI:</strong> Removed the <code>tooltipLabel</code> prop and the built-in tooltip wrapper from <code>KPI</code>. Wrap <code>KPI</code> with <code>Tooltip</code> yourself or use <code>KPICard</code> when the tooltip belongs to a card KPI.</p>\n<div class=\"language-tsx codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-tsx codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">Tooltip</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">label</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">Average utilization across all assets</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">placement</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">bottom</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag punctuation\" style=\"color:#393A34\">&gt;</span><span class=\"token plain-text\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain-text\">  </span><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">KPI</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">title</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">Utilization</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">unit</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">%</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">value</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript number\" style=\"color:#36acaa\">87</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag punctuation\" style=\"color:#393A34\">/&gt;</span><span class=\"token plain-text\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain-text\"></span><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;/</span><span class=\"token tag class-name\" style=\"color:#00009f\">Tooltip</span><span class=\"token tag punctuation\" style=\"color:#393A34\">&gt;</span><br></div></code></pre></div></div>\n</li>\n<li class=\"\">\n<p><strong>KPICard:</strong> <code>tooltipLabel</code> now belongs to <code>KPICard</code> instead of being forwarded to <code>KPI</code>. When provided, the tooltip wraps the card body rather than only the inner <code>KPI</code>.</p>\n<div class=\"language-tsx codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-tsx codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">KPICard</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">tooltipLabel</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">Average utilization across all assets</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">title</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">Utilization</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">unit</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">%</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">value</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript number\" style=\"color:#36acaa\">87</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag punctuation\" style=\"color:#393A34\">/&gt;</span><br></div></code></pre></div></div>\n</li>\n<li class=\"\">\n<p><strong>Notice:</strong> Removed <code>withTooltip</code> and <code>tooltipLabel</code>. <code>Notice</code> no longer renders a tooltip internally because notices are not intended to be interactive or rely on hover behavior. Wrap it in Tooltip where hover help is still needed.\n.</p>\n<div class=\"language-tsx codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-tsx codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">Tooltip</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">label</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">Battery level is below 20%</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">placement</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">bottom</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag punctuation\" style=\"color:#393A34\">&gt;</span><span class=\"token plain-text\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain-text\">  </span><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">Notice</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">color</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">warning</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">iconName</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">ExclamationTriangle</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">label</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">Low battery</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag punctuation\" style=\"color:#393A34\">/&gt;</span><span class=\"token plain-text\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain-text\"></span><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;/</span><span class=\"token tag class-name\" style=\"color:#00009f\">Tooltip</span><span class=\"token tag punctuation\" style=\"color:#393A34\">&gt;</span><br></div></code></pre></div></div>\n</li>\n<li class=\"\">\n<p><strong>ToggleGroup:</strong> Icon-only mode is now a stricter discriminated union, and per-item styling has been tightened.</p>\n<ul>\n<li class=\"\">When <code>isIconOnly</code> is <code>true</code>, every list item must provide <code>tooltip.content</code> because the tooltip is the button's only accessible name.</li>\n<li class=\"\">Non-icon-only groups should omit <code>isIconOnly</code> or pass <code>false</code>; item tooltip content remains optional.</li>\n<li class=\"\">List items no longer accept a <code>style</code> prop (<code>BasicToggleGroupListProps</code> no longer extends <code>Styleable</code>). Apply per-item styling through <code>className</code> or wrap the group instead.</li>\n</ul>\n<div class=\"language-tsx codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-tsx codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">ToggleGroup</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">isIconOnly</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">list</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">[</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag script language-javascript\" style=\"color:#00009f\">    </span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> id</span><span class=\"token tag script language-javascript operator\" style=\"color:#393A34\">:</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript string\" style=\"color:#e3116c\">\"list\"</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">,</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> title</span><span class=\"token tag script language-javascript operator\" style=\"color:#393A34\">:</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript string\" style=\"color:#e3116c\">\"List\"</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">,</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> iconName</span><span class=\"token tag script language-javascript operator\" style=\"color:#393A34\">:</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript string\" style=\"color:#e3116c\">\"Bars3\"</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">,</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> tooltip</span><span class=\"token tag script language-javascript operator\" style=\"color:#393A34\">:</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> content</span><span class=\"token tag script language-javascript operator\" style=\"color:#393A34\">:</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript string\" style=\"color:#e3116c\">\"Show list view\"</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">,</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag script language-javascript\" style=\"color:#00009f\">    </span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> id</span><span class=\"token tag script language-javascript operator\" style=\"color:#393A34\">:</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript string\" style=\"color:#e3116c\">\"map\"</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">,</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> title</span><span class=\"token tag script language-javascript operator\" style=\"color:#393A34\">:</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript string\" style=\"color:#e3116c\">\"Map\"</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">,</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> iconName</span><span class=\"token tag script language-javascript operator\" style=\"color:#393A34\">:</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript string\" style=\"color:#e3116c\">\"MapPin\"</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">,</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> tooltip</span><span class=\"token tag script language-javascript operator\" style=\"color:#393A34\">:</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> content</span><span class=\"token tag script language-javascript operator\" style=\"color:#393A34\">:</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript string\" style=\"color:#e3116c\">\"Show map view\"</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">,</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag script language-javascript\" style=\"color:#00009f\">  </span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">]</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">selected</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\">selected</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">setSelected</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\">setSelected</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\"></span><span class=\"token tag punctuation\" style=\"color:#393A34\">/&gt;</span><br></div></code></pre></div></div>\n</li>\n<li class=\"\">\n<p><strong>ActionButton (<code>@trackunit/react-form-components</code>):</strong> <code>title</code> is now a required prop and is forwarded to the inner <code>IconButton</code> for the tooltip and accessible name. The inherited optional <code>title</code> from <code>ButtonCommonProps</code> has been omitted to enforce this.</p>\n<div class=\"language-tsx codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-tsx codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">ActionButton</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">type</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">COPY</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">title</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">Copy value</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">value</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\">inputRef</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag punctuation\" style=\"color:#393A34\">/&gt;</span><br></div></code></pre></div></div>\n</li>\n<li class=\"\">\n<p><strong>OptionCard (<code>@trackunit/react-form-components</code>):</strong> Container layout changed from <code>display: contents</code> to <code>flex grow-0</code>. Layouts that relied on the card collapsing into its parent's grid or flex flow may need a wrapping <code>flex</code> container.</p>\n</li>\n<li class=\"\">\n<p><strong>HorizontalOverflowScroller:</strong> The internal overflow indicator <code>IconButton</code>s no longer expose scroll-button tooltips and are rendered disabled. Consumers should not rely on the old hover tooltip or clickable indicator-button behavior.</p>\n</li>\n</ul>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"codemods\">Codemods<a href=\"https://developers.trackunit.com/changelog/2026/05/13/react-components-v2-accessibility/#codemods\" class=\"hash-link\" aria-label=\"Direct link to Codemods\" title=\"Direct link to Codemods\" translate=\"no\">​</a></h2>\n<p>This release ships automated codemods for breaking changes in @trackunit/react-components@2.0.0 and @trackunit/react-form-components@2.0.0, orchestrated by the @trackunit/migrations coordinator (modeled after nx migrate).</p>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"running-the-codemods\">Running the codemods<a href=\"https://developers.trackunit.com/changelog/2026/05/13/react-components-v2-accessibility/#running-the-codemods\" class=\"hash-link\" aria-label=\"Direct link to Running the codemods\" title=\"Direct link to Running the codemods\" translate=\"no\">​</a></h3>\n<p>Run the two-step flow from your project root:</p>\n<ol>\n<li class=\"\">Bump @trackunit/* versions in package.json and collect pending migrations into trackunit-migrations.json\n<ul>\n<li class=\"\">nx g @trackunit/migrations:migrate</li>\n</ul>\n</li>\n<li class=\"\">Review trackunit-migrations.json, then execute the pending migrations\n<ul>\n<li class=\"\">nx g @trackunit/migrations:run-migrations</li>\n</ul>\n</li>\n</ol>\n<p>Previously-applied migrations are tracked in trackunit-migrations.json and will not re-run.</p>\n<p><strong>Included migrations</strong></p>\n<p>@trackunit/react-components@2.0.0</p>\n<ul>\n<li class=\"\">v2-0-0-iconbutton-add-required-name — Adds a placeholder title prop to IconButton usages missing both title and ariaLabel (now required for accessibility).</li>\n<li class=\"\">v2-0-0-breadcrumb-remove-deprecated-props — Removes the deprecated backButtonTitle and expandCollapsedItemsTitle props from Breadcrumb, BreadcrumbContainer, and BreadcrumbForMediumScreen.</li>\n<li class=\"\">v2-0-0-cardheader-onclickclose-to-actions — Replaces the removed CardHeader.onClickClose prop with an actions slot containing an IconButton + XMark icon.</li>\n<li class=\"\">v2-0-0-pagination-add-required-titles — Adds the now-required previousPageTitle and nextPageTitle props to Pagination.</li>\n<li class=\"\">v2-0-0-tag-add-removetaglabel — Adds the now-required removeTagLabel prop to dismissible Tag usages (those with onClickClose).</li>\n<li class=\"\">v2-0-0-kpi-tooltiplabel-to-wrapper — Replaces the removed KPI.tooltipLabel prop with a Tooltip wrapper around the KPI.</li>\n<li class=\"\">v2-0-0-notice-tooltiplabel-to-wrapper — Replaces the removed Notice.withTooltip / Notice.tooltipLabel props with a Tooltip wrapper.</li>\n<li class=\"\">v2-0-0-togglegroup-remove-item-style — Removes the no-longer-supported style property from inline ToggleGroup list items.</li>\n</ul>\n<p>@trackunit/react-form-components@2.0.0</p>\n<ul>\n<li class=\"\">v2-0-0-actionbutton-add-title — Adds the now-required title prop to ActionButton, defaulting to a sensible English string per action type.</li>\n</ul>",
            "url": "https://developers.trackunit.com/changelog/2026/05/13/react-components-v2-accessibility/",
            "title": "Breaking: React component accessibility and tooltip updates",
            "summary": "@trackunit/react-components and @trackunit/react-form-components include breaking accessibility, tooltip, and layout updates for component consumers. These changes were made to improve accessibility compliance and create more consistent tooltip and labeling behavior across components",
            "date_modified": "2026-05-13T00:00:00.000Z",
            "tags": [
                "Improved"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2026/05/12/datefield-locale-picker-behavior/",
            "content_html": "<p><code>DateField</code> in <code>@trackunit/react-form-components</code> now displays, parses, and hints dates using the user's regional locale while continuing to emit canonical <code>YYYY-MM-DD</code> values to consumers.</p>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"what-changed\">What changed<a href=\"https://developers.trackunit.com/changelog/2026/05/12/datefield-locale-picker-behavior/#what-changed\" class=\"hash-link\" aria-label=\"Direct link to What changed\" title=\"Direct link to What changed\" translate=\"no\">​</a></h2>\n<p><code>DateField</code> now uses the browser's region-qualified locale, such as <code>en-GB</code>, <code>en-US</code>, or <code>da-DK</code>, for visible date formatting and placeholders. This means users see date formats that match their regional preference, for example <code>dd/mm/yyyy</code> in the United Kingdom and <code>mm/dd/yyyy</code> in the United States.</p>\n<p>Change and blur events still expose canonical date-only values through <code>event.target.value</code>, so existing integrations can continue storing and sending <code>YYYY-MM-DD</code> values.</p>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"new-datefield-options\">New DateField options<a href=\"https://developers.trackunit.com/changelog/2026/05/12/datefield-locale-picker-behavior/#new-datefield-options\" class=\"hash-link\" aria-label=\"Direct link to New DateField options\" title=\"Direct link to New DateField options\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"locale\"><code>locale</code><a href=\"https://developers.trackunit.com/changelog/2026/05/12/datefield-locale-picker-behavior/#locale\" class=\"hash-link\" aria-label=\"Direct link to locale\" title=\"Direct link to locale\" translate=\"no\">​</a></h3>\n<p>Override the locale for a specific field when a fixed regional format is required.</p>\n<div class=\"language-tsx codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-tsx codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">DateField</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">label</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">Start date</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">locale</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">en-GB</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag punctuation\" style=\"color:#393A34\">/&gt;</span><br></div></code></pre></div></div>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"openonfocus\"><code>openOnFocus</code><a href=\"https://developers.trackunit.com/changelog/2026/05/12/datefield-locale-picker-behavior/#openonfocus\" class=\"hash-link\" aria-label=\"Direct link to openonfocus\" title=\"Direct link to openonfocus\" translate=\"no\">​</a></h3>\n<p>Open the date picker automatically when the input receives focus, for example when users tab through a form.</p>\n<div class=\"language-tsx codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-tsx codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">DateField</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">label</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">Start date</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">openOnFocus</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag punctuation\" style=\"color:#393A34\">/&gt;</span><br></div></code></pre></div></div>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"onpickerclose\"><code>onPickerClose</code><a href=\"https://developers.trackunit.com/changelog/2026/05/12/datefield-locale-picker-behavior/#onpickerclose\" class=\"hash-link\" aria-label=\"Direct link to onpickerclose\" title=\"Direct link to onpickerclose\" translate=\"no\">​</a></h3>\n<p>Run logic when the calendar picker closes, without waiting for the input itself to blur. The callback receives the canonical value and a close reason: <code>apply</code>, <code>clear</code>, <code>cancel</code>, or <code>outside</code>.</p>\n<div class=\"language-tsx codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-tsx codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">DateField</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">label</span><span class=\"token tag attr-value punctuation attr-equals\" style=\"color:#393A34\">=</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag attr-value\" style=\"color:#e3116c\">Start date</span><span class=\"token tag attr-value punctuation\" style=\"color:#393A34\">\"</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\">  </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">onPickerClose</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">(</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\">event</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">,</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> reason</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">)</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript arrow operator\" style=\"color:#393A34\">=&gt;</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag script language-javascript\" style=\"color:#00009f\">    </span><span class=\"token tag script language-javascript keyword\" style=\"color:#00009f\">if</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">(</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\">reason </span><span class=\"token tag script language-javascript operator\" style=\"color:#393A34\">===</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript string\" style=\"color:#e3116c\">\"cancel\"</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">)</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript keyword\" style=\"color:#00009f\">return</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">;</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag script language-javascript\" style=\"color:#00009f\">    </span><span class=\"token tag script language-javascript function\" style=\"color:#d73a49\">validateDate</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">(</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\">event</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">.</span><span class=\"token tag script language-javascript property-access\" style=\"color:#00009f\">target</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">.</span><span class=\"token tag script language-javascript property-access\" style=\"color:#00009f\">value</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">)</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">;</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag script language-javascript\" style=\"color:#00009f\">  </span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag\" style=\"color:#00009f\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token tag\" style=\"color:#00009f\"></span><span class=\"token tag punctuation\" style=\"color:#393A34\">/&gt;</span><br></div></code></pre></div></div>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"picker-accessibility\">Picker accessibility<a href=\"https://developers.trackunit.com/changelog/2026/05/12/datefield-locale-picker-behavior/#picker-accessibility\" class=\"hash-link\" aria-label=\"Direct link to Picker accessibility\" title=\"Direct link to Picker accessibility\" translate=\"no\">​</a></h2>\n<p>The DateField calendar picker has improved focus handling and keyboard navigation. Keyboard users can move between dates with arrow keys and commit the focused date from the picker.</p>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"popover-focus-support\">Popover focus support<a href=\"https://developers.trackunit.com/changelog/2026/05/12/datefield-locale-picker-behavior/#popover-focus-support\" class=\"hash-link\" aria-label=\"Direct link to Popover focus support\" title=\"Direct link to Popover focus support\" translate=\"no\">​</a></h2>\n<p><code>PopoverContent</code> in <code>@trackunit/react-components</code> now supports an <code>initialFocus</code> prop for cases where popover content should receive focus when opened.</p>",
            "url": "https://developers.trackunit.com/changelog/2026/05/12/datefield-locale-picker-behavior/",
            "title": "Improved: DateField locale formatting and picker behavior",
            "summary": "DateField in @trackunit/react-form-components now displays, parses, and hints dates using the user's regional locale while continuing to emit canonical YYYY-MM-DD values to consumers.",
            "date_modified": "2026-05-12T00:00:00.000Z",
            "tags": [
                "Improved",
                "Fixed"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2026/05/06/aemp-iso-faults-accept-language/",
            "content_html": "<p>The AEMP ISO Diagnostic Trouble Codes time-series endpoint now honors the <code>Accept-Language</code> request header when enriching fault codes with descriptions.</p>\n<p>When an <code>Accept-Language</code> header is provided, the language is threaded through to the fault interpretation lookup, so the returned <code>CodeDescription</code> is localized to the caller's preferred language (for example, <code>Accept-Language: da-DK,da;q=0.9,en;q=0.8</code> returns Danish descriptions) — but only if a translation for that language actually exists for the given fault code.</p>\n<p>If no translation exists for the requested language — or if the header is omitted — the response falls back to the fault code's default description (typically English). The set of available languages depends on what the OEM provides and varies by manufacturer; common languages include English (<code>en</code>), German (<code>de</code>), French (<code>fr</code>), Italian (<code>it</code>), Spanish (<code>es</code>), Dutch (<code>nl</code>), Polish (<code>pl</code>), and Japanese (<code>ja</code>).</p>\n<blockquote>\n<p>📝 GET: <code>/15143/-3/Fleet/Equipment/ID/{oemISOIdentifier}/Faults/{startDate}/{endDate}/{pageNumber}</code></p>\n</blockquote>\n<p>Get diagnostic trouble codes time-series, with fault descriptions localized via the <code>Accept-Language</code> header.</p>",
            "url": "https://developers.trackunit.com/changelog/2026/05/06/aemp-iso-faults-accept-language/",
            "title": "AEMP ISO Faults: localized fault descriptions via Accept-Language",
            "summary": "The AEMP ISO Diagnostic Trouble Codes time-series endpoint now honors the Accept-Language request header when enriching fault codes with descriptions.",
            "date_modified": "2026-05-06T00:00:00.000Z",
            "tags": [
                "Improved"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2026/04/20/modal-sheet-mode/",
            "content_html": "<p><code>useModal</code> in <code>@trackunit/react-modal</code> has been updated with sheet mode support and container scoping. Modals can now automatically adapt to a sheet presentation when rendered inside a narrow container.</p>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"changes-to-usemodal\">Changes to <code>useModal</code><a href=\"https://developers.trackunit.com/changelog/2026/04/20/modal-sheet-mode/#changes-to-usemodal\" class=\"hash-link\" aria-label=\"Direct link to changes-to-usemodal\" title=\"Direct link to changes-to-usemodal\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"new-return-values\">New return values<a href=\"https://developers.trackunit.com/changelog/2026/04/20/modal-sheet-mode/#new-return-values\" class=\"hash-link\" aria-label=\"Direct link to New return values\" title=\"Direct link to New return values\" translate=\"no\">​</a></h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>mode</code></td><td><code>\"card\" | \"sheet\"</code></td><td>Current presentation mode</td></tr><tr><td><code>dismiss</code></td><td>function</td><td>Programmatically dismiss with options</td></tr><tr><td><code>onCloseComplete</code></td><td>function</td><td>Callback fired after close animation finishes</td></tr><tr><td><code>container</code></td><td>element</td><td>The scoping container element</td></tr><tr><td><code>stack</code></td><td>array</td><td>Modal stack state</td></tr></tbody></table>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"removed-return-values\">Removed return values<a href=\"https://developers.trackunit.com/changelog/2026/04/20/modal-sheet-mode/#removed-return-values\" class=\"hash-link\" aria-label=\"Direct link to Removed return values\" title=\"Direct link to Removed return values\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\"><code>depthFromFront</code> — removed</li>\n<li class=\"\"><code>stackSizeAtOpen</code> — removed</li>\n</ul>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"new-prop-container\">New prop: <code>container</code><a href=\"https://developers.trackunit.com/changelog/2026/04/20/modal-sheet-mode/#new-prop-container\" class=\"hash-link\" aria-label=\"Direct link to new-prop-container\" title=\"Direct link to new-prop-container\" translate=\"no\">​</a></h3>\n<p>Pass a <code>container</code> element to <code>useModal</code> to scope the modal to that element. When the container's width is less than 480 px, the modal automatically switches to sheet mode.</p>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"updated-modaldismissoptions\">Updated: <code>ModalDismissOptions</code><a href=\"https://developers.trackunit.com/changelog/2026/04/20/modal-sheet-mode/#updated-modaldismissoptions\" class=\"hash-link\" aria-label=\"Direct link to updated-modaldismissoptions\" title=\"Direct link to updated-modaldismissoptions\" translate=\"no\">​</a></h3>\n<p><code>ModalDismissOptions</code> now extends the shared <code>DismissOptions</code> type from <code>@trackunit/react-components</code>, aligning dismiss behaviour across overlay components.</p>",
            "url": "https://developers.trackunit.com/changelog/2026/04/20/modal-sheet-mode/",
            "title": "Improved: useModal now supports sheet mode and container scoping",
            "summary": "useModal in @trackunit/react-modal has been updated with sheet mode support and container scoping. Modals can now automatically adapt to a sheet presentation when rendered inside a narrow container.",
            "date_modified": "2026-04-20T00:00:00.000Z",
            "tags": [
                "Improved"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2026/04/20/remove-swipeable-drawer/",
            "content_html": "<p><code>SwipeableDrawer</code>, <code>DrawerPuller</code>, and <code>useSwipeHandlers</code> have been removed from <code>@trackunit/react-drawer</code>. The <code>react-swipeable</code> peer dependency is also gone.</p>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"migration\">Migration<a href=\"https://developers.trackunit.com/changelog/2026/04/20/remove-swipeable-drawer/#migration\" class=\"hash-link\" aria-label=\"Direct link to Migration\" title=\"Direct link to Migration\" translate=\"no\">​</a></h2>\n<p>Replace <code>SwipeableDrawer</code> with the new <code>Sheet</code> component from <code>@trackunit/react-components</code>.</p>\n<p><strong>Before:</strong></p>\n<div class=\"language-tsx codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-tsx codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token keyword\" style=\"color:#00009f\">import</span><span class=\"token plain\"> </span><span class=\"token imports punctuation\" style=\"color:#393A34\">{</span><span class=\"token imports\"> </span><span class=\"token imports maybe-class-name\">SwipeableDrawer</span><span class=\"token imports\"> </span><span class=\"token imports punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\"> </span><span class=\"token keyword\" style=\"color:#00009f\">from</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"@trackunit/react-drawer\"</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">SwipeableDrawer</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">open</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\">open</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag attr-name\" style=\"color:#00a4db\">onClose</span><span class=\"token tag script language-javascript script-punctuation punctuation\" style=\"color:#393A34\">=</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">(</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">)</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript arrow operator\" style=\"color:#393A34\">=&gt;</span><span class=\"token tag script language-javascript\" style=\"color:#00009f\"> </span><span class=\"token tag script language-javascript function\" style=\"color:#d73a49\">setOpen</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">(</span><span class=\"token tag script language-javascript boolean\" style=\"color:#36acaa\">false</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">)</span><span class=\"token tag script language-javascript punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag punctuation\" style=\"color:#393A34\">&gt;</span><span class=\"token plain-text\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain-text\">  </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\">children</span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain-text\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain-text\"></span><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;/</span><span class=\"token tag class-name\" style=\"color:#00009f\">SwipeableDrawer</span><span class=\"token tag punctuation\" style=\"color:#393A34\">&gt;</span><br></div></code></pre></div></div>\n<p><strong>After:</strong></p>\n<div class=\"language-tsx codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-tsx codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token keyword\" style=\"color:#00009f\">import</span><span class=\"token plain\"> </span><span class=\"token imports punctuation\" style=\"color:#393A34\">{</span><span class=\"token imports\"> </span><span class=\"token imports maybe-class-name\">Sheet</span><span class=\"token imports punctuation\" style=\"color:#393A34\">,</span><span class=\"token imports\"> useSheet </span><span class=\"token imports punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\"> </span><span class=\"token keyword\" style=\"color:#00009f\">from</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"@trackunit/react-components\"</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token keyword\" style=\"color:#00009f\">const</span><span class=\"token plain\"> sheet </span><span class=\"token operator\" style=\"color:#393A34\">=</span><span class=\"token plain\"> </span><span class=\"token function\" style=\"color:#d73a49\">useSheet</span><span class=\"token punctuation\" style=\"color:#393A34\">(</span><span class=\"token punctuation\" style=\"color:#393A34\">)</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;</span><span class=\"token tag class-name\" style=\"color:#00009f\">Sheet</span><span class=\"token tag\" style=\"color:#00009f\"> </span><span class=\"token tag spread punctuation\" style=\"color:#393A34\">{</span><span class=\"token tag spread operator\" style=\"color:#393A34\">...</span><span class=\"token tag spread\" style=\"color:#00009f\">sheet</span><span class=\"token tag spread punctuation\" style=\"color:#393A34\">}</span><span class=\"token tag punctuation\" style=\"color:#393A34\">&gt;</span><span class=\"token plain-text\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain-text\">  </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\">children</span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain-text\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain-text\"></span><span class=\"token tag punctuation\" style=\"color:#393A34\">&lt;/</span><span class=\"token tag class-name\" style=\"color:#00009f\">Sheet</span><span class=\"token tag punctuation\" style=\"color:#393A34\">&gt;</span><br></div></code></pre></div></div>\n<p>Use <code>useSheet</code> for open/close state management instead of manual <code>open</code>/<code>onClose</code> props. See the <a class=\"\" href=\"https://developers.trackunit.com/changelog/2026/04/20/sheet-component/\">Sheet component changelog</a> for the full API.</p>",
            "url": "https://developers.trackunit.com/changelog/2026/04/20/remove-swipeable-drawer/",
            "title": "Removed: SwipeableDrawer from @trackunit/react-drawer",
            "summary": "SwipeableDrawer, DrawerPuller, and useSwipeHandlers have been removed from @trackunit/react-drawer. The react-swipeable peer dependency is also gone.",
            "date_modified": "2026-04-20T00:00:00.000Z",
            "tags": [
                "Removed"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2026/04/20/sheet-component/",
            "content_html": "<p>A new <code>Sheet</code> component is now available in <code>@trackunit/react-components</code>. It provides a bottom-sheet UI with snap points, gesture support, and container-scoped rendering — suitable for mobile and responsive layouts.</p>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"new-exports\">New exports<a href=\"https://developers.trackunit.com/changelog/2026/04/20/sheet-component/#new-exports\" class=\"hash-link\" aria-label=\"Direct link to New exports\" title=\"Direct link to New exports\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"sheet-component\"><code>Sheet</code> component<a href=\"https://developers.trackunit.com/changelog/2026/04/20/sheet-component/#sheet-component\" class=\"hash-link\" aria-label=\"Direct link to sheet-component\" title=\"Direct link to sheet-component\" translate=\"no\">​</a></h3>\n<p>A bottom-sheet overlay with snap points and gesture-driven open/close/expand behaviour.</p>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"usesheet-hook\"><code>useSheet</code> hook<a href=\"https://developers.trackunit.com/changelog/2026/04/20/sheet-component/#usesheet-hook\" class=\"hash-link\" aria-label=\"Direct link to usesheet-hook\" title=\"Direct link to usesheet-hook\" translate=\"no\">​</a></h3>\n<p>Manages open/close state and dismiss options for a <code>Sheet</code>.</p>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"usesheetsnap-hook\"><code>useSheetSnap</code> hook<a href=\"https://developers.trackunit.com/changelog/2026/04/20/sheet-component/#usesheetsnap-hook\" class=\"hash-link\" aria-label=\"Direct link to usesheetsnap-hook\" title=\"Direct link to usesheetsnap-hook\" translate=\"no\">​</a></h3>\n<p>Controls the snap point of an open sheet: dock, fit, expand, or close.</p>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"useoverflowborder-hook\"><code>useOverflowBorder</code> hook<a href=\"https://developers.trackunit.com/changelog/2026/04/20/sheet-component/#useoverflowborder-hook\" class=\"hash-link\" aria-label=\"Direct link to useoverflowborder-hook\" title=\"Direct link to useoverflowborder-hook\" translate=\"no\">​</a></h3>\n<p>Detects top/bottom scroll overflow in a container and applies CSS border classes — useful for indicating scrollable content inside a sheet.</p>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"shared-overlay-dismissible-types\">Shared overlay-dismissible types<a href=\"https://developers.trackunit.com/changelog/2026/04/20/sheet-component/#shared-overlay-dismissible-types\" class=\"hash-link\" aria-label=\"Direct link to Shared overlay-dismissible types\" title=\"Direct link to Shared overlay-dismissible types\" translate=\"no\">​</a></h3>\n<p>The following types are now exported from <code>@trackunit/react-components</code> and shared across overlay components:</p>\n<ul>\n<li class=\"\"><code>CloseReason</code></li>\n<li class=\"\"><code>DismissOptions</code></li>\n<li class=\"\"><code>OnBeforeCloseFn</code></li>\n<li class=\"\"><code>OnCloseFn</code></li>\n<li class=\"\"><code>OnOpenChangeFn</code></li>\n<li class=\"\"><code>OnOpenFn</code></li>\n<li class=\"\"><code>UseOverlayDismissibleProps</code></li>\n<li class=\"\"><code>UseOverlayDismissibleReturn</code></li>\n</ul>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"sheet-specific-types-and-constants\"><code>Sheet</code>-specific types and constants<a href=\"https://developers.trackunit.com/changelog/2026/04/20/sheet-component/#sheet-specific-types-and-constants\" class=\"hash-link\" aria-label=\"Direct link to sheet-specific-types-and-constants\" title=\"Direct link to sheet-specific-types-and-constants\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\">Types: <code>SheetProps</code>, <code>UseSheetProps</code>, <code>UseSheetReturnValue</code>, <code>SheetDefaultSize</code>, <code>SheetVariant</code>, <code>SheetSnapActions</code>, <code>SheetState</code>, <code>SheetGeometry</code></li>\n<li class=\"\">Constants: <code>SHEET_TRANSITION_DURATION</code>, <code>SHEET_TRANSITION_DURATION_MS</code>, <code>SHEET_TRANSITION_EASING</code></li>\n</ul>",
            "url": "https://developers.trackunit.com/changelog/2026/04/20/sheet-component/",
            "title": "New: Sheet component in @trackunit/react-components",
            "summary": "A new Sheet component is now available in @trackunit/react-components. It provides a bottom-sheet UI with snap points, gesture support, and container-scoped rendering — suitable for mobile and responsive layouts.",
            "date_modified": "2026-04-20T00:00:00.000Z",
            "tags": [
                "Added"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2026/03/24/react-widgets-widget-kpi-interactive/",
            "content_html": "<p>The <code>WidgetKPI</code> component now supports an <code>onClick</code> prop, making KPI cards interactive with a hover effect, chevron indicator, and keyboard accessibility.</p>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"breaking-change\">Breaking Change<a href=\"https://developers.trackunit.com/changelog/2026/03/24/react-widgets-widget-kpi-interactive/#breaking-change\" class=\"hash-link\" aria-label=\"Direct link to Breaking Change\" title=\"Direct link to Breaking Change\" translate=\"no\">​</a></h3>\n<p><strong><code>WidgetContent</code> padding has changed</strong> for KPI widgets using the <code>onClick</code> prop. If your widget previously used <code>padding=\"responsive\"</code>, you should update it to <code>padding=\"none\"</code> — the <code>WidgetKPI</code> component now handles its own padding internally.</p>",
            "url": "https://developers.trackunit.com/changelog/2026/03/24/react-widgets-widget-kpi-interactive/",
            "title": "trackunit/react-widgets 2.13.4 - Interactive WidgetKPI",
            "summary": "The WidgetKPI component now supports an onClick prop, making KPI cards interactive with a hover effect, chevron indicator, and keyboard accessibility.",
            "date_modified": "2026-03-24T00:00:00.000Z",
            "tags": [
                "Improved"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2026/02/26/migrate-from-rspack-to-vite/",
            "content_html": "<p>Iris Apps have been migrated from Rspack to <a href=\"https://vitejs.dev/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">Vite</a> as the build system. Vite provides near-instant dev server startup, fast HMR using native ES modules, and optimized production builds.</p>\n<p>Affected packages:</p>\n<ul>\n<li class=\"\"><strong>@trackunit/iris-app-sdk-vite</strong> — new package, replaces <code>@trackunit/iris-app-sdk-rspack</code> for build and serve</li>\n<li class=\"\"><strong>@trackunit/iris-app-sdk-rspack</strong> — deprecated for Iris Apps, will be removed in a future version</li>\n</ul>\n<p>Old executors removed:</p>\n<ul>\n<li class=\"\"><strong>@trackunit/iris-app:build</strong> — removed (was already deprecated)</li>\n<li class=\"\"><strong>@trackunit/iris-app:serve</strong> — removed (was already deprecated)</li>\n</ul>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"step-1-update-all-trackunit-dependencies\">Step 1: Update all Trackunit dependencies<a href=\"https://developers.trackunit.com/changelog/2026/02/26/migrate-from-rspack-to-vite/#step-1-update-all-trackunit-dependencies\" class=\"hash-link\" aria-label=\"Direct link to Step 1: Update all Trackunit dependencies\" title=\"Direct link to Step 1: Update all Trackunit dependencies\" translate=\"no\">​</a></h2>\n<p>Make sure you are on the latest Trackunit dependencies:</p>\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">npx npm-check-updates </span><span class=\"token string\" style=\"color:#e3116c\">\"/@trackunit/\"</span><span class=\"token plain\"> </span><span class=\"token parameter variable\" style=\"color:#36acaa\">-u</span><br></div></code></pre></div></div>\n<p>Then install:</p>\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token function\" style=\"color:#d73a49\">npm</span><span class=\"token plain\"> </span><span class=\"token function\" style=\"color:#d73a49\">install</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token function\" style=\"color:#d73a49\">npm</span><span class=\"token plain\"> </span><span class=\"token function\" style=\"color:#d73a49\">install</span><span class=\"token plain\"> @trackunit/iris-app-sdk-vite </span><span class=\"token parameter variable\" style=\"color:#36acaa\">-D</span><br></div></code></pre></div></div>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"step-2-update-projectjson\">Step 2: Update <code>project.json</code><a href=\"https://developers.trackunit.com/changelog/2026/02/26/migrate-from-rspack-to-vite/#step-2-update-projectjson\" class=\"hash-link\" aria-label=\"Direct link to step-2-update-projectjson\" title=\"Direct link to step-2-update-projectjson\" translate=\"no\">​</a></h2>\n<p>Replace the Rspack executors with the Vite equivalents.</p>\n<p><strong>Before:</strong></p>\n<div class=\"language-json codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-json codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token property\" style=\"color:#36acaa\">\"targets\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token property\" style=\"color:#36acaa\">\"build\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token property\" style=\"color:#36acaa\">\"executor\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"@trackunit/iris-app-sdk-rspack:build\"</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token property\" style=\"color:#36acaa\">\"options\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">        </span><span class=\"token property\" style=\"color:#36acaa\">\"rspackConfig\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"apps/{app-name}/rspack.config.ts\"</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">        </span><span class=\"token property\" style=\"color:#36acaa\">\"outputPath\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"dist/apps/{app-name}\"</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token property\" style=\"color:#36acaa\">\"outputs\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">[</span><span class=\"token string\" style=\"color:#e3116c\">\"{options.outputPath}\"</span><span class=\"token punctuation\" style=\"color:#393A34\">]</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token property\" style=\"color:#36acaa\">\"serve\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token property\" style=\"color:#36acaa\">\"executor\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"@trackunit/iris-app-sdk-rspack:serve\"</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token property\" style=\"color:#36acaa\">\"options\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">        </span><span class=\"token property\" style=\"color:#36acaa\">\"rspackConfig\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"apps/{app-name}/rspack.config.ts\"</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><br></div></code></pre></div></div>\n<p><strong>After:</strong></p>\n<div class=\"language-json codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-json codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token property\" style=\"color:#36acaa\">\"targets\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token property\" style=\"color:#36acaa\">\"build\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token property\" style=\"color:#36acaa\">\"executor\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"@trackunit/iris-app-sdk-vite:build\"</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token property\" style=\"color:#36acaa\">\"options\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">        </span><span class=\"token property\" style=\"color:#36acaa\">\"outputPath\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"dist/apps/{app-name}\"</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token property\" style=\"color:#36acaa\">\"outputs\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">[</span><span class=\"token string\" style=\"color:#e3116c\">\"{options.outputPath}\"</span><span class=\"token punctuation\" style=\"color:#393A34\">]</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token property\" style=\"color:#36acaa\">\"serve\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token property\" style=\"color:#36acaa\">\"executor\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"@trackunit/iris-app-sdk-vite:serve\"</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token property\" style=\"color:#36acaa\">\"options\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><br></div></code></pre></div></div>\n<p>Key changes:</p>\n<ul>\n<li class=\"\">Executor changed from <code>@trackunit/iris-app-sdk-rspack</code> to <code>@trackunit/iris-app-sdk-vite</code></li>\n<li class=\"\">The <code>rspackConfig</code> option is removed — Vite works with zero config by default</li>\n<li class=\"\">Optionally, you can add a <code>viteConfig</code> option if you need custom configuration (see Step 3)</li>\n</ul>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"step-3-replace-rspackconfigts-with-viteconfigts\">Step 3: Replace <code>rspack.config.ts</code> with <code>vite.config.ts</code><a href=\"https://developers.trackunit.com/changelog/2026/02/26/migrate-from-rspack-to-vite/#step-3-replace-rspackconfigts-with-viteconfigts\" class=\"hash-link\" aria-label=\"Direct link to step-3-replace-rspackconfigts-with-viteconfigts\" title=\"Direct link to step-3-replace-rspackconfigts-with-viteconfigts\" translate=\"no\">​</a></h2>\n<p>Delete your existing <code>rspack.config.ts</code> file.</p>\n<p>If you had no customizations in your rspack config (i.e., it just returned the default configuration), you can skip creating a vite config entirely — it works out of the box.</p>\n<p>If you need custom configuration, create a <code>vite.config.ts</code> in your app root:</p>\n<div class=\"language-typescript codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-typescript codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token keyword\" style=\"color:#00009f\">import</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"> defineConfig</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"> UserConfig </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\"> </span><span class=\"token keyword\" style=\"color:#00009f\">from</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"vite\"</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token keyword\" style=\"color:#00009f\">export</span><span class=\"token plain\"> </span><span class=\"token keyword\" style=\"color:#00009f\">default</span><span class=\"token plain\"> </span><span class=\"token function\" style=\"color:#d73a49\">defineConfig</span><span class=\"token punctuation\" style=\"color:#393A34\">(</span><span class=\"token keyword\" style=\"color:#00009f\">async</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">(</span><span class=\"token plain\">configuration</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> UserConfig</span><span class=\"token punctuation\" style=\"color:#393A34\">)</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token builtin\">Promise</span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token plain\">UserConfig</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"> </span><span class=\"token operator\" style=\"color:#393A34\">=&gt;</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token keyword\" style=\"color:#00009f\">return</span><span class=\"token plain\"> configuration</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token punctuation\" style=\"color:#393A34\">)</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><br></div></code></pre></div></div>\n<p>You can extend the default configuration by spreading and adding your overrides:</p>\n<div class=\"language-typescript codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-typescript codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token keyword\" style=\"color:#00009f\">import</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"> defineConfig</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"> UserConfig </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\"> </span><span class=\"token keyword\" style=\"color:#00009f\">from</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"vite\"</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token keyword\" style=\"color:#00009f\">export</span><span class=\"token plain\"> </span><span class=\"token keyword\" style=\"color:#00009f\">default</span><span class=\"token plain\"> </span><span class=\"token function\" style=\"color:#d73a49\">defineConfig</span><span class=\"token punctuation\" style=\"color:#393A34\">(</span><span class=\"token keyword\" style=\"color:#00009f\">async</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">(</span><span class=\"token plain\">configuration</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> UserConfig</span><span class=\"token punctuation\" style=\"color:#393A34\">)</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token builtin\">Promise</span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token plain\">UserConfig</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"> </span><span class=\"token operator\" style=\"color:#393A34\">=&gt;</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token keyword\" style=\"color:#00009f\">return</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">        </span><span class=\"token operator\" style=\"color:#393A34\">...</span><span class=\"token plain\">configuration</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">        define</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">            </span><span class=\"token operator\" style=\"color:#393A34\">...</span><span class=\"token plain\">configuration</span><span class=\"token punctuation\" style=\"color:#393A34\">.</span><span class=\"token plain\">define</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">            __MY_CUSTOM_FLAG__</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token constant\" style=\"color:#36acaa\">JSON</span><span class=\"token punctuation\" style=\"color:#393A34\">.</span><span class=\"token function\" style=\"color:#d73a49\">stringify</span><span class=\"token punctuation\" style=\"color:#393A34\">(</span><span class=\"token boolean\" style=\"color:#36acaa\">true</span><span class=\"token punctuation\" style=\"color:#393A34\">)</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">        </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token punctuation\" style=\"color:#393A34\">)</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><br></div></code></pre></div></div>\n<p>Then reference it in your <code>project.json</code>:</p>\n<div class=\"language-json codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-json codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token property\" style=\"color:#36acaa\">\"serve\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token property\" style=\"color:#36acaa\">\"executor\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"@trackunit/iris-app-sdk-vite:serve\"</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token property\" style=\"color:#36acaa\">\"options\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token property\" style=\"color:#36acaa\">\"viteConfig\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"apps/{app-name}/vite.config.ts\"</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token property\" style=\"color:#36acaa\">\"build\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token property\" style=\"color:#36acaa\">\"executor\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"@trackunit/iris-app-sdk-vite:build\"</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token property\" style=\"color:#36acaa\">\"options\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token property\" style=\"color:#36acaa\">\"viteConfig\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"apps/{app-name}/vite.config.ts\"</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token property\" style=\"color:#36acaa\">\"outputPath\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"dist/apps/{app-name}\"</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><br></div></code></pre></div></div>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"step-4-remove-tailwindconfigjs-if-present\">Step 4: Remove <code>tailwind.config.js</code> (if present)<a href=\"https://developers.trackunit.com/changelog/2026/02/26/migrate-from-rspack-to-vite/#step-4-remove-tailwindconfigjs-if-present\" class=\"hash-link\" aria-label=\"Direct link to step-4-remove-tailwindconfigjs-if-present\" title=\"Direct link to step-4-remove-tailwindconfigjs-if-present\" translate=\"no\">​</a></h2>\n<p>If your app has a <code>tailwind.config.js</code> file, delete it. Tailwind CSS v4 is now configured automatically by the Vite plugin using PostCSS — no manual Tailwind config is needed.</p>\n<p>See the <a class=\"\" href=\"https://developers.trackunit.com/changelog/tailwind-4-upgrade/\">Tailwind 4 upgrade changelog</a> for more details on the Tailwind migration.</p>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"step-5-clean-up-old-dependencies\">Step 5: Clean up old dependencies<a href=\"https://developers.trackunit.com/changelog/2026/02/26/migrate-from-rspack-to-vite/#step-5-clean-up-old-dependencies\" class=\"hash-link\" aria-label=\"Direct link to Step 5: Clean up old dependencies\" title=\"Direct link to Step 5: Clean up old dependencies\" translate=\"no\">​</a></h2>\n<p>Remove unwanted packages from your NX's <code>package.json</code> (if present):</p>\n<ul>\n<li class=\"\"><code>@trackunit/iris-app-webpack-plugin</code></li>\n<li class=\"\"><code>@trackunit/iris-app-sdk-rspack</code></li>\n<li class=\"\"><code>@rspack/core</code></li>\n<li class=\"\"><code>@rspack/dev-server</code>,</li>\n<li class=\"\"><code>copy-webpack-plugin</code></li>\n<li class=\"\"><code>css-loader</code></li>\n<li class=\"\"><code>esbuild-loader</code></li>\n<li class=\"\"><code>style-loader</code></li>\n<li class=\"\"><code>postcss</code></li>\n<li class=\"\"><code>postcss-loader</code></li>\n<li class=\"\"><code>json-loader</code></li>\n<li class=\"\"><code>webpack</code></li>\n<li class=\"\"><code>webpack-cli</code></li>\n<li class=\"\"><code>webpack-dev-server</code></li>\n</ul>\n<p>Then install to update your lockfile:</p>\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token function\" style=\"color:#d73a49\">npm</span><span class=\"token plain\"> </span><span class=\"token function\" style=\"color:#d73a49\">install</span><br></div></code></pre></div></div>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"step-6-verify\">Step 6: Verify<a href=\"https://developers.trackunit.com/changelog/2026/02/26/migrate-from-rspack-to-vite/#step-6-verify\" class=\"hash-link\" aria-label=\"Direct link to Step 6: Verify\" title=\"Direct link to Step 6: Verify\" translate=\"no\">​</a></h2>\n<p>Run serve and build to verify everything works:</p>\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token comment\" style=\"color:#999988;font-style:italic\"># Start dev server</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">npx nx run </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\">app-name</span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\">:serve</span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token comment\" style=\"color:#999988;font-style:italic\"># Production build</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">npx nx run </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\">app-name</span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\">:build</span><br></div></code></pre></div></div>\n<p>The dev server will start on a port in the range 22220–22229 and print a link to open your app:</p>\n<div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">✨ Iris App is now started, check it out ✨</span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">https://new.manager.trackunit.com/goto/iris-app-dev</span><br></div></code></pre></div></div>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"new-executor-options\">New executor options<a href=\"https://developers.trackunit.com/changelog/2026/02/26/migrate-from-rspack-to-vite/#new-executor-options\" class=\"hash-link\" aria-label=\"Direct link to New executor options\" title=\"Direct link to New executor options\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"serve-options\">Serve options<a href=\"https://developers.trackunit.com/changelog/2026/02/26/migrate-from-rspack-to-vite/#serve-options\" class=\"hash-link\" aria-label=\"Direct link to Serve options\" title=\"Direct link to Serve options\" translate=\"no\">​</a></h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th>Option</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>viteConfig</code></td><td>string</td><td>—</td><td>Path to custom Vite config file (optional)</td></tr><tr><td><code>port</code></td><td>number</td><td>auto (22220-22229)</td><td>Dev server port</td></tr><tr><td><code>host</code></td><td>string</td><td><code>localhost</code></td><td>Dev server host</td></tr><tr><td><code>skipTypeChecking</code></td><td>boolean</td><td><code>false</code></td><td>Skip TypeScript type checking during dev</td></tr></tbody></table>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"build-options\">Build options<a href=\"https://developers.trackunit.com/changelog/2026/02/26/migrate-from-rspack-to-vite/#build-options\" class=\"hash-link\" aria-label=\"Direct link to Build options\" title=\"Direct link to Build options\" translate=\"no\">​</a></h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th>Option</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>viteConfig</code></td><td>string</td><td>—</td><td>Path to custom Vite config file (optional)</td></tr><tr><td><code>outputPath</code></td><td>string</td><td>—</td><td>Output directory (required)</td></tr><tr><td><code>skipTypeChecking</code></td><td>boolean</td><td><code>false</code></td><td>Skip TypeScript type checking during build</td></tr></tbody></table>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"bundle-analysis\">Bundle analysis<a href=\"https://developers.trackunit.com/changelog/2026/02/26/migrate-from-rspack-to-vite/#bundle-analysis\" class=\"hash-link\" aria-label=\"Direct link to Bundle analysis\" title=\"Direct link to Bundle analysis\" translate=\"no\">​</a></h2>\n<p>To analyze your bundle size, set the <code>BUNDLE_ANALYSE</code> environment variable:</p>\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token assign-left variable\" style=\"color:#36acaa\">BUNDLE_ANALYSE</span><span class=\"token operator\" style=\"color:#393A34\">=</span><span class=\"token plain\">true npx nx run </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\">app-name</span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\">:build</span><br></div></code></pre></div></div>\n<p>This generates a <code>stats.html</code> file in the output directory using <a href=\"https://github.com/btd/rollup-plugin-visualizer\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">rollup-plugin-visualizer</a>.</p>\n<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"troubleshooting\">Troubleshooting<a href=\"https://developers.trackunit.com/changelog/2026/02/26/migrate-from-rspack-to-vite/#troubleshooting\" class=\"hash-link\" aria-label=\"Direct link to Troubleshooting\" title=\"Direct link to Troubleshooting\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"cors-errors-during-development\">CORS errors during development<a href=\"https://developers.trackunit.com/changelog/2026/02/26/migrate-from-rspack-to-vite/#cors-errors-during-development\" class=\"hash-link\" aria-label=\"Direct link to CORS errors during development\" title=\"Direct link to CORS errors during development\" translate=\"no\">​</a></h3>\n<p>The Vite dev server automatically sets CORS headers for Trackunit domains. If you see CORS errors:</p>\n<ol>\n<li class=\"\">Verify the Vite server is running</li>\n<li class=\"\">Check that \"Use Local Apps\" is enabled in developer settings</li>\n<li class=\"\">Ensure no proxy is interfering with requests</li>\n</ol>",
            "url": "https://developers.trackunit.com/changelog/2026/02/26/migrate-from-rspack-to-vite/",
            "title": "Iris Apps now use Vite instead of Rspack",
            "summary": "Iris Apps have been migrated from Rspack to Vite as the build system. Vite provides near-instant dev server startup, fast HMR using native ES modules, and optimized production builds.",
            "date_modified": "2026-02-26T00:00:00.000Z",
            "tags": [
                "Improved"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2026/02/19/iris-app-v1-11-45-nx-upgrade/",
            "content_html": "<p>In this version of our Iris App SDK, we have upgraded NX to v22.4.4.\nMake sure to upgrade your extensions to the latest version of NX.</p>\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">npx nx migrate </span><span class=\"token number\" style=\"color:#36acaa\">22.4</span><span class=\"token plain\">.4</span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">npx nx migrate --run-migrations</span><br></div></code></pre></div></div>\n<p>Please refer to <a class=\"\" href=\"https://developers.trackunit.com/docs/apps-and-extensions/overview/iris-app-sdk-reference/maintaining-your-app/\">Maintaining Your Application</a> for more information.</p>",
            "url": "https://developers.trackunit.com/changelog/2026/02/19/iris-app-v1-11-45-nx-upgrade/",
            "title": "trackunit/iris-app v1.11.45 - NX upgraded to v22.4.4",
            "summary": "In this version of our Iris App SDK, we have upgraded NX to v22.4.4.",
            "date_modified": "2026-02-19T00:00:00.000Z",
            "tags": [
                "Improved"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/tailwind-4-upgrade/",
            "content_html": "<p>In this version we upgraded the foundation for our tailwind to use tailwind 4.1.18 instead of 3.x.</p>\n<p>Effected packages:</p>\n<ul>\n<li class=\"\">@trackunit/css-core - contains the generated css file to use</li>\n<li class=\"\">@trackunit/css-tailwind - deprecated, just remove it from your package.json</li>\n<li class=\"\">@trackunit/css-tailwind-custom-properties-plugin - deprecated, just remove it from your package.json</li>\n</ul>\n<p>Also, many of the React libraries have changed, so make sure to update all Trackunit dependencies.</p>\n<p>Use this command to make sure you are updated with all latest Trackunit dependencies</p>\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">npx npm-check-updates </span><span class=\"token string\" style=\"color:#e3116c\">\"/@trackunit/\"</span><span class=\"token plain\"> </span><span class=\"token parameter variable\" style=\"color:#36acaa\">-u</span><br></div></code></pre></div></div>\n<p>Now you need to install the latest tailwind dependencies</p>\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token function\" style=\"color:#d73a49\">npm</span><span class=\"token plain\"> </span><span class=\"token function\" style=\"color:#d73a49\">install</span><span class=\"token plain\"> @tailwind/postcss@4.1.18 --save-dev</span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token function\" style=\"color:#d73a49\">npm</span><span class=\"token plain\"> </span><span class=\"token function\" style=\"color:#d73a49\">install</span><span class=\"token plain\"> tailwindcss@4.1.18 --save-dev</span><br></div></code></pre></div></div>\n<p>After this the 'serve' command will use the correct tailwindcss/postcss and all Trackunit dependencies are updated.</p>\n<p>For more information on how it might effect your own tailwind classes in your codebase - check this <a href=\"https://tailwindcss.com/docs/upgrade-guide\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">Migration guide</a></p>",
            "url": "https://developers.trackunit.com/changelog/tailwind-4-upgrade/",
            "title": "Tailwind upgraded from v3 to v4",
            "summary": "In this version we upgraded the foundation for our tailwind to use tailwind 4.1.18 instead of 3.x.",
            "date_modified": "2026-02-16T00:00:00.000Z",
            "tags": [
                "Improved"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2026/01/15/assets-api-stable-version-v2/",
            "content_html": "<p>Released stable version v2 of Assets API.</p>\n<p>The Assets API v2 builds on the foundation of v1 with expanded querying, improved asset lifecycle management, and enhanced flexibility. In addition to onboarding, offboarding, and updating asset specifications, v2 introduces advanced filtering and pagination, asset querying by multiple identifier types, asset hiding and unhiding, and dedicated support for asset notes. The API also streamlines telematics device attachment flow, providing a more consistent and scalable way to manage assets across accounts and fleets. For more information, see the updated endpoint documentation.</p>\n<p>Below a list of all available endpoints:</p>\n<blockquote>\n<p>➕ GET: <code>/asset/v2/assets</code></p>\n</blockquote>\n<p>Get assets</p>\n<blockquote>\n<p>➕ GET: <code>/asset/v2/assets/{assetId}</code></p>\n</blockquote>\n<p>Get asset</p>\n<blockquote>\n<p>➕ POST: <code>/asset/v2/assets</code></p>\n</blockquote>\n<p>Create assets</p>\n<blockquote>\n<p>➕ PATCH: <code>/asset/v2/assets</code></p>\n</blockquote>\n<p>Update assets</p>\n<blockquote>\n<p>➕ DELETE: <code>/asset/v2/assets/{assetId}</code></p>\n</blockquote>\n<p>Delete asset</p>\n<blockquote>\n<p>➕ POST: <code>/asset/v2/assets/query</code></p>\n</blockquote>\n<p>Query assets by identifiers</p>\n<blockquote>\n<p>➕ PATCH: <code>/asset/v2/assets/hidden</code></p>\n</blockquote>\n<p>Hide or unhide assets</p>\n<blockquote>\n<p>➕ PATCH: <code>/asset/v2/assets/note</code></p>\n</blockquote>\n<p>Update asset note</p>\n<blockquote>\n<p>➕ POST: <code>/asset/v2/assets/notes/query</code></p>\n</blockquote>\n<p>Fetch asset notes</p>\n<blockquote>\n<p>➕ POST: <code>/asset/v2/assets/{assetId}/telematics-devices</code></p>\n</blockquote>\n<p>Attach telematics device</p>",
            "url": "https://developers.trackunit.com/changelog/2026/01/15/assets-api-stable-version-v2/",
            "title": "Assets API v2",
            "summary": "Released stable version v2 of Assets API.",
            "date_modified": "2026-01-15T00:00:00.000Z",
            "tags": [
                "Added"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2025/11/26/rackunitiris-app-vxxxxx-node-upgraded-to-v24/",
            "content_html": "<p>In this version of the App SDK, we have upgraded Node to the current LTS version 24.11.1. Make sure to upgrade your workspace to at least that version.</p>\n<p>If using volta, you can install the latest LTS version of Node by running:</p>\n<div class=\"language-shell codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-shell codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">volta </span><span class=\"token function\" style=\"color:#d73a49\">install</span><span class=\"token plain\"> node@lts</span><br></div></code></pre></div></div>\n<p>or by adding the following to your root package.json</p>\n<div class=\"language-json codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockTitle_OeMC\">package.json</div><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-json codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token property\" style=\"color:#36acaa\">\"volta\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token property\" style=\"color:#36acaa\">\"node\"</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">\"24.11.1\"</span><span class=\"token plain\"></span><br></div><div class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><br></div></code></pre></div></div>\n<p>Otherwise, you can download the latest LTS version of Node from the Node.js website.</p>",
            "url": "https://developers.trackunit.com/changelog/2025/11/26/rackunitiris-app-vxxxxx-node-upgraded-to-v24/",
            "title": "trackunit/iris-app v1.7.96 - Node upgraded to v24",
            "summary": "In this version of the App SDK, we have upgraded Node to the current LTS version 24.11.1. Make sure to upgrade your workspace to at least that version.",
            "date_modified": "2025-11-26T00:00:00.000Z",
            "tags": [
                "Improved"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2025/10/06/filters-filter-bar-v1-7-90/",
            "content_html": "<h2 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"filter-url-synchronization\">Filter URL Synchronization<a href=\"https://developers.trackunit.com/changelog/2025/10/06/filters-filter-bar-v1-7-90/#filter-url-synchronization\" class=\"hash-link\" aria-label=\"Direct link to Filter URL Synchronization\" title=\"Direct link to Filter URL Synchronization\" translate=\"no\">​</a></h2>\n<p>Filter states are now automatically synchronized with URL parameters, allowing users to bookmark or share filtered views. When filters are applied, the URL updates to reflect the current filter state, and the filters are restored when navigating back to that URL.</p>\n<h3 class=\"anchor anchorTargetStickyNavbar_Vzrq\" id=\"breaking-change\">Breaking Change<a href=\"https://developers.trackunit.com/changelog/2025/10/06/filters-filter-bar-v1-7-90/#breaking-change\" class=\"hash-link\" aria-label=\"Direct link to Breaking Change\" title=\"Direct link to Breaking Change\" translate=\"no\">​</a></h3>\n<p><strong>TanStack Router is now required</strong> for Iris app extensions using the filter bar.</p>\n<p>Your app entry point must be wrapped with TanStack Router's <code>RouterProvider</code>. See the <a href=\"https://github.com/Trackunit/iris-app-with-router-example/blob/main/libs/context-test/src/index.tsx\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">iris-app-with-router-example</a> for a complete implementation example showing how to set up the router in your Iris app extension.</p>",
            "url": "https://developers.trackunit.com/changelog/2025/10/06/filters-filter-bar-v1-7-90/",
            "title": "trackunit/filters-filter-bar v1.7.90 - Filter URL Synchronization",
            "summary": "Filter URL Synchronization",
            "date_modified": "2025-10-06T00:00:00.000Z",
            "tags": [
                "Improved"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2025/09/04/custom-fields-def-key/",
            "content_html": "<p>We enhanced the endpoint for setting custom field values to support definition keys as an alternative to definition UUIDs. This improvement eliminates the need to hardcode UUIDs in your integration code, making your implementations more maintainable and readable.</p>\n<blockquote>\n<p>➕ POST: /api/custom-fields/v1/set-values/</p>\n</blockquote>\n<p>Set custom field values</p>",
            "url": "https://developers.trackunit.com/changelog/2025/09/04/custom-fields-def-key/",
            "title": "Set custom fields values using definition key",
            "summary": "We enhanced the endpoint for setting custom field values to support definition keys as an alternative to definition UUIDs. This improvement eliminates the need to hardcode UUIDs in your integration code, making your implementations more maintainable and readable.",
            "date_modified": "2025-09-04T00:00:00.000Z",
            "tags": [
                "Improved"
            ]
        },
        {
            "id": "https://developers.trackunit.com/changelog/2025/06/24/day-ranger-picker-popover/",
            "content_html": "<p>The <code>DayRangePickerPopover</code> component is being deprecated in favor of the new <code>DayRangeSelect</code> component. The new <code>DayRangeSelect</code> component replaces it with all the same functionality but with a more user friendly user experience.</p>",
            "url": "https://developers.trackunit.com/changelog/2025/06/24/day-ranger-picker-popover/",
            "title": "Deprecation of Day Range Picker Popover Component",
            "summary": "The DayRangePickerPopover component is being deprecated in favor of the new DayRangeSelect component. The new DayRangeSelect component replaces it with all the same functionality but with a more user friendly user experience.",
            "date_modified": "2025-06-24T00:00:00.000Z",
            "tags": [
                "Removed"
            ]
        }
    ]
}