fix(progress-indicator): allow currentIndex to be programmatically updated

docs/src/COMPONENT_API.json

@@ -6697,7 +6697,7 @@
         {
           "name": "preventChangeOnClick",
           "kind": "let",
-          "description": "Set to `true` to prevent updating `currentIndex`",
+          "description": "Set to `true` to prevent `currentIndex` from updating",
           "type": "boolean",
           "value": "false",
           "isFunction": false,
@@ -6707,11 +6707,11 @@
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [
+        { "type": "dispatched", "name": "change", "detail": "number" },
         { "type": "forwarded", "name": "click", "element": "ul" },
         { "type": "forwarded", "name": "mouseover", "element": "ul" },
         { "type": "forwarded", "name": "mouseenter", "element": "ul" },
-        { "type": "forwarded", "name": "mouseleave", "element": "ul" },
-        { "type": "dispatched", "name": "change" }
+        { "type": "forwarded", "name": "mouseleave", "element": "ul" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "ul" }

docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte

@@ -0,0 +1,52 @@
+<script>
+  import {
+    ProgressIndicator,
+    ProgressStep,
+    Button,
+  } from "carbon-components-svelte";
+
+  let currentIndex = 1;
+  let thirdStepComplete = false;
+</script>
+
+<ProgressIndicator bind:currentIndex>
+  <ProgressStep
+    complete
+    label="Step 1"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    complete
+    label="Step 2"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    complete="{thirdStepComplete}"
+    label="Step 3"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Step 4"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+</ProgressIndicator>
+
+<div style="margin: var(--cds-layout-02) 0">
+  <Button
+    on:click="{() => {
+      currentIndex = 2;
+    }}"
+  >
+    Set index to 2
+  </Button>
+  <Button
+    kind="ghost"
+    on:click="{() => {
+      thirdStepComplete = !thirdStepComplete;
+    }}"
+  >
+    Toggle step 3
+  </Button>
+</div>
+
+<h3>Current index: {currentIndex}</h3>