Refresh UI components and showcase; release updated framework packages

packages/ui/components/Stepper.wrn

@@ -25,6 +25,7 @@ component Stepper {
     size: string = "default"
     steps: unknown[] = []
     active: number = 0
+    controlled: boolean = false
     orientation: string = "horizontal"
     clickable: boolean = false
     label: string = "Progress"
@@ -44,6 +45,8 @@ component Stepper {
     class: string = ""
   }
 
+  state currentStep = active
+
   functions {
     shared function stepList() {
       return Array.isArray(steps) ? steps : []
@@ -54,7 +57,7 @@ component Stepper {
       if (count < 1) {
         return 0
       }
-      var value = Number(active)
+      var value = Number(controlled ? active : currentStep)
       if (!value || value < 0) {
         return 0
       }
@@ -100,6 +103,7 @@ component Stepper {
     client function goBack() {
       var target = Math.max(0, activeIndex() - 1)
       output.back({ index: target, step: stepList()[target] || {} })
+      currentStep = target
       output.change({ index: target, step: stepList()[target] || {} })
     }
 
@@ -113,12 +117,14 @@ component Stepper {
       }
       var target = Math.min(lastIndex(), activeIndex() + 1)
       output.next({ index: target, step: stepList()[target] || {} })
+      currentStep = target
       output.change({ index: target, step: stepList()[target] || {} })
     }
 
     client function goSkip() {
       var target = Math.min(lastIndex(), activeIndex() + 1)
       output.skip({ index: target, step: stepList()[target] || {} })
+      currentStep = target
       output.change({ index: target, step: stepList()[target] || {} })
     }
 
@@ -126,6 +132,7 @@ component Stepper {
       if (!clickable) {
         return
       }
+      currentStep = index
       output.change({ index: index, step: step })
     }
   }