@dnb/eufemia 10.28.0 → 10.30.0

package/cjs/components/progress-indicator/style/dnb-progress-indicator.css

@@ -7,11 +7,16 @@
  */
 .dnb-progress-indicator {
   --progress-indicator-timing: cubic-bezier(0.5, 0, 0.5, 0.99);
-  --progress-indicator-circular-circle: 88;
-  --progress-indicator-circular-circle-offset--min: 88;
-  --progress-indicator-circular-circle-offset--max: 1;
+  --progress-indicator-circular-circle: 314.159265359%;
+  --progress-indicator-circular-circle-offset--min: 314.159265359%;
+  --progress-indicator-circular-circle-offset--max: 1%;
+  --progress-indicator-circular-size: 2rem;
+  --progress-indicator-circular-stroke-width: calc(
+    var(--progress-indicator-circular-size) / 8
+  );
   --progress-indicator-circular-background-color: grey;
   --progress-indicator-circular-bar-color: var(--color-black);
+  --progress-indicator-linear-size: 0.5rem;
   --progress-indicator-linear-background-color: grey;
   --progress-indicator-linear-bar-color: var(--color-black);
   position: relative;
@@ -44,10 +49,32 @@
 .dnb-progress-indicator--vertical .dnb-progress-indicator__label {
   padding-top: 0.5rem;
 }
+.dnb-progress-indicator--inside .dnb-progress-indicator__label {
+  position: absolute;
+  width: 100%;
+  justify-content: center;
+  padding: var(--progress-indicator-circular-stroke-width);
+}
+.dnb-progress-indicator--small {
+  --progress-indicator-circular-size: 1rem;
+  --progress-indicator-linear-size: 0.25rem;
+}
+.dnb-progress-indicator--medium {
+  --progress-indicator-circular-size: 1.5rem;
+  --progress-indicator-linear-size: 1rem;
+}
+.dnb-progress-indicator--large {
+  --progress-indicator-circular-size: 3.5rem;
+  --progress-indicator-linear-size: 1.5rem;
+}
+.dnb-progress-indicator--huge {
+  --progress-indicator-circular-size: 20rem;
+  --progress-indicator-linear-size: 2rem;
+}
 .dnb-progress-indicator__circular {
   position: relative;
-  width: 2rem;
-  height: 2rem;
+  width: var(--progress-indicator-circular-size);
+  height: var(--progress-indicator-circular-size);
   transform: rotate(-90deg);
 }
 .dnb-progress-indicator__circular svg {
@@ -55,6 +82,21 @@
   inset: 0;
   width: 100%;
   height: 100%;
+  padding: calc(var(--progress-indicator-circular-stroke-width) / 2);
+}
+.dnb-progress-indicator__circular svg:not(:root) {
+  overflow: visible;
+}
+.dnb-progress-indicator__circular__background-padding {
+  display: block;
+  height: 100%;
+  padding: calc(var(--progress-indicator-circular-stroke-width) / 2);
+}
+.dnb-progress-indicator__circular__background {
+  display: block;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 50%;
 }
 .dnb-progress-indicator__circular__line {
   animation-duration: 2s;
@@ -83,43 +125,14 @@
 }
 .dnb-progress-indicator__circular__circle {
   stroke-linecap: round;
+  stroke-width: var(--progress-indicator-circular-stroke-width);
 }
 .dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle {
   stroke: var(--progress-indicator-circular-background-color);
 }
 .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
   stroke: var(--progress-indicator-circular-bar-color);
-}
-.dnb-progress-indicator__circular--small {
-  width: 1rem;
-  height: 1rem;
-}
-.dnb-progress-indicator__circular--medium {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.dnb-progress-indicator__circular--large {
-  width: 3.5rem;
-  height: 3.5rem;
-}
-.dnb-progress-indicator__circular--huge {
-  width: 20rem;
-  height: 20rem;
-}
-.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.1;
-}
-.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.3;
-}
-.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.5;
-}
-.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.7;
-}
-.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.9;
+  stroke-width: calc(var(--progress-indicator-circular-stroke-width) - 0.5px);
 }
 .dnb-progress-indicator__linear {
   background-color: var(--progress-indicator-linear-background-color);
@@ -127,8 +140,8 @@
   overflow: hidden;
   width: 100%;
   will-change: transform;
-  height: 0.5rem;
-  border-radius: 0.25rem;
+  height: var(--progress-indicator-linear-size);
+  border-radius: calc(var(--progress-indicator-linear-size) / 2);
 }
 .dnb-progress-indicator__linear__bar {
   background-color: var(--progress-indicator-linear-bar-color);
@@ -151,22 +164,6 @@
   width: auto;
   animation: progress-indicator-linear-bar-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
 }
-.dnb-progress-indicator__linear--small {
-  height: 0.25rem;
-  border-radius: 0.125rem;
-}
-.dnb-progress-indicator__linear--medium {
-  height: 1rem;
-  border-radius: 0.5rem;
-}
-.dnb-progress-indicator__linear--large {
-  height: 1.5rem;
-  border-radius: 0.75rem;
-}
-.dnb-progress-indicator__linear--huge {
-  height: 2rem;
-  border-radius: 1rem;
-}
 html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation {
   left: -35%;
   right: 100%;
@@ -190,7 +187,7 @@ html[data-visual-test] .dnb-progress-indicator {
   opacity: 1;
   animation-duration: 0ms;
 }
-.dnb-progress-indicator--no-animation {
+.dnb-progress-indicator--no-animation, .dnb-progress-indicator--no-animation.dnb-progress-indicator--complete {
   animation-duration: 0ms;
 }
 html[data-visual-test] .dnb-progress-indicator__bar-transition {

package/cjs/components/progress-indicator/style/dnb-progress-indicator.min.css

@@ -1 +1 @@
-.dnb-progress-indicator{--progress-indicator-timing:cubic-bezier(0.5,0,0.5,0.99);--progress-indicator-circular-circle:88;--progress-indicator-circular-circle-offset--min:88;--progress-indicator-circular-circle-offset--max:1;--progress-indicator-circular-background-color:grey;--progress-indicator-circular-bar-color:var(--color-black);--progress-indicator-linear-background-color:grey;--progress-indicator-linear-bar-color:var(--color-black);align-items:center;display:inline-flex;position:relative}.dnb-progress-indicator--vertical{flex-direction:column}.dnb-progress-indicator--horizontal{justify-content:center}.dnb-progress-indicator__label{display:inline-flex}.dnb-progress-indicator__label .dnb-p{align-self:center}.dnb-spacing .dnb-progress-indicator .dnb-p,.dnb-spacing .dnb-progress-indicator .dnb-p:not([class*=dnb-space]){margin:0}.dnb-progress-indicator--horizontal .dnb-progress-indicator__label{padding-left:1rem}.dnb-progress-indicator--horizontal.dnb-progress-indicator--small .dnb-progress-indicator__label{padding-left:.5rem}.dnb-progress-indicator--vertical .dnb-progress-indicator__label{padding-top:.5rem}.dnb-progress-indicator__circular{height:2rem;position:relative;transform:rotate(-90deg);width:2rem}.dnb-progress-indicator__circular svg{height:100%;inset:0;position:absolute;width:100%}.dnb-progress-indicator__circular__line{animation-delay:.2s;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:var(--progress-indicator-timing)}.dnb-progress-indicator__circular__line.background,.dnb-progress-indicator__circular__line.light{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}.dnb-progress-indicator__circular__line.light{animation-name:progress-indicator-circular-line-light}.dnb-progress-indicator__circular__line.dark,.dnb-progress-indicator__circular__line.light{stroke-dasharray:var(--progress-indicator-circular-circle),var(--progress-indicator-circular-circle)}.dnb-progress-indicator__circular__line.dark{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min);animation-name:progress-indicator-circular-line-dark}.dnb-progress-indicator__circular__line.paused{animation-play-state:paused}.dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark{transition:stroke-dashoffset .6s var(--progress-indicator-timing)}.dnb-progress-indicator__circular__circle{stroke-linecap:round}.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-background-color)}.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-bar-color)}.dnb-progress-indicator__circular--small{height:1rem;width:1rem}.dnb-progress-indicator__circular--medium{height:1.5rem;width:1.5rem}.dnb-progress-indicator__circular--large{height:3.5rem;width:3.5rem}.dnb-progress-indicator__circular--huge{height:20rem;width:20rem}.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.1}.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.3}.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.5}.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.7}.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.9}.dnb-progress-indicator__linear{background-color:var(--progress-indicator-linear-background-color);border-radius:.25rem;height:.5rem;overflow:hidden;position:relative;width:100%;will-change:transform}.dnb-progress-indicator__linear__bar{background-color:var(--progress-indicator-linear-bar-color);border-radius:inherit;bottom:0;left:0;position:absolute;top:0;transform-origin:left;width:100%}.dnb-progress-indicator__linear__bar-transition{transition:transform .2s linear}.dnb-progress-indicator__linear__bar1-animation{animation:progress-indicator-linear-bar-1 2.1s cubic-bezier(.65,.815,.735,.395) infinite;width:auto}.dnb-progress-indicator__linear__bar2-animation{animation:progress-indicator-linear-bar-2 2.1s cubic-bezier(.165,.84,.44,1) 1.15s infinite;width:auto}.dnb-progress-indicator__linear--small{border-radius:.125rem;height:.25rem}.dnb-progress-indicator__linear--medium{border-radius:.5rem;height:1rem}.dnb-progress-indicator__linear--large{border-radius:.75rem;height:1.5rem}.dnb-progress-indicator__linear--huge{border-radius:1rem;height:2rem}html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation{animation-duration:0ms;animation-iteration-count:0;left:-35%;right:100%}html[data-visual-test] .dnb-progress-indicator__linear__bar2-animation{animation-duration:0ms;animation-iteration-count:0;left:-200%;right:100%}.dnb-progress-indicator,.dnb-progress-indicator--visible{animation:progress-indicator-fade-in .2s ease-out 1 forwards;opacity:0}.dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible){animation:progress-indicator-fade-out .6s ease-out 1 forwards}html[data-visual-test] .dnb-progress-indicator{animation-duration:0ms;opacity:1}.dnb-progress-indicator--no-animation{animation-duration:0ms}html[data-visual-test] .dnb-progress-indicator__bar-transition{transition:none}.dnb-progress-indicator--full-width{min-width:1rem;width:100%}@keyframes progress-indicator-fade-in{0%{opacity:0}to{opacity:1}}@keyframes progress-indicator-fade-out{0%{opacity:1}to{opacity:0}}@keyframes progress-indicator-circular-line-light{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-circular-line-dark{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-linear-bar-1{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes progress-indicator-linear-bar-2{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}
+.dnb-progress-indicator{--progress-indicator-timing:cubic-bezier(0.5,0,0.5,0.99);--progress-indicator-circular-circle:314.159265359%;--progress-indicator-circular-circle-offset--min:314.159265359%;--progress-indicator-circular-circle-offset--max:1%;--progress-indicator-circular-size:2rem;--progress-indicator-circular-stroke-width:calc(var(--progress-indicator-circular-size)/8);--progress-indicator-circular-background-color:grey;--progress-indicator-circular-bar-color:var(--color-black);--progress-indicator-linear-size:0.5rem;--progress-indicator-linear-background-color:grey;--progress-indicator-linear-bar-color:var(--color-black);align-items:center;display:inline-flex;position:relative}.dnb-progress-indicator--vertical{flex-direction:column}.dnb-progress-indicator--horizontal{justify-content:center}.dnb-progress-indicator__label{display:inline-flex}.dnb-progress-indicator__label .dnb-p{align-self:center}.dnb-spacing .dnb-progress-indicator .dnb-p,.dnb-spacing .dnb-progress-indicator .dnb-p:not([class*=dnb-space]){margin:0}.dnb-progress-indicator--horizontal .dnb-progress-indicator__label{padding-left:1rem}.dnb-progress-indicator--horizontal.dnb-progress-indicator--small .dnb-progress-indicator__label{padding-left:.5rem}.dnb-progress-indicator--vertical .dnb-progress-indicator__label{padding-top:.5rem}.dnb-progress-indicator--inside .dnb-progress-indicator__label{justify-content:center;padding:var(--progress-indicator-circular-stroke-width);position:absolute;width:100%}.dnb-progress-indicator--small{--progress-indicator-circular-size:1rem;--progress-indicator-linear-size:0.25rem}.dnb-progress-indicator--medium{--progress-indicator-circular-size:1.5rem;--progress-indicator-linear-size:1rem}.dnb-progress-indicator--large{--progress-indicator-circular-size:3.5rem;--progress-indicator-linear-size:1.5rem}.dnb-progress-indicator--huge{--progress-indicator-circular-size:20rem;--progress-indicator-linear-size:2rem}.dnb-progress-indicator__circular{height:var(--progress-indicator-circular-size);position:relative;transform:rotate(-90deg);width:var(--progress-indicator-circular-size)}.dnb-progress-indicator__circular svg{height:100%;inset:0;padding:calc(var(--progress-indicator-circular-stroke-width)/2);position:absolute;width:100%}.dnb-progress-indicator__circular svg:not(:root){overflow:visible}.dnb-progress-indicator__circular__background-padding{display:block;height:100%;padding:calc(var(--progress-indicator-circular-stroke-width)/2)}.dnb-progress-indicator__circular__background{background-color:transparent;border-radius:50%;display:block;height:100%}.dnb-progress-indicator__circular__line{animation-delay:.2s;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:var(--progress-indicator-timing)}.dnb-progress-indicator__circular__line.background,.dnb-progress-indicator__circular__line.light{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}.dnb-progress-indicator__circular__line.light{animation-name:progress-indicator-circular-line-light}.dnb-progress-indicator__circular__line.dark,.dnb-progress-indicator__circular__line.light{stroke-dasharray:var(--progress-indicator-circular-circle),var(--progress-indicator-circular-circle)}.dnb-progress-indicator__circular__line.dark{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min);animation-name:progress-indicator-circular-line-dark}.dnb-progress-indicator__circular__line.paused{animation-play-state:paused}.dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark{transition:stroke-dashoffset .6s var(--progress-indicator-timing)}.dnb-progress-indicator__circular__circle{stroke-linecap:round;stroke-width:var(--progress-indicator-circular-stroke-width)}.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-background-color)}.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-bar-color);stroke-width:calc(var(--progress-indicator-circular-stroke-width) - .5px)}.dnb-progress-indicator__linear{background-color:var(--progress-indicator-linear-background-color);border-radius:calc(var(--progress-indicator-linear-size)/2);height:var(--progress-indicator-linear-size);overflow:hidden;position:relative;width:100%;will-change:transform}.dnb-progress-indicator__linear__bar{background-color:var(--progress-indicator-linear-bar-color);border-radius:inherit;bottom:0;left:0;position:absolute;top:0;transform-origin:left;width:100%}.dnb-progress-indicator__linear__bar-transition{transition:transform .2s linear}.dnb-progress-indicator__linear__bar1-animation{animation:progress-indicator-linear-bar-1 2.1s cubic-bezier(.65,.815,.735,.395) infinite;width:auto}.dnb-progress-indicator__linear__bar2-animation{animation:progress-indicator-linear-bar-2 2.1s cubic-bezier(.165,.84,.44,1) 1.15s infinite;width:auto}html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation{animation-duration:0ms;animation-iteration-count:0;left:-35%;right:100%}html[data-visual-test] .dnb-progress-indicator__linear__bar2-animation{animation-duration:0ms;animation-iteration-count:0;left:-200%;right:100%}.dnb-progress-indicator,.dnb-progress-indicator--visible{animation:progress-indicator-fade-in .2s ease-out 1 forwards;opacity:0}.dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible){animation:progress-indicator-fade-out .6s ease-out 1 forwards}html[data-visual-test] .dnb-progress-indicator{animation-duration:0ms;opacity:1}.dnb-progress-indicator--no-animation,.dnb-progress-indicator--no-animation.dnb-progress-indicator--complete{animation-duration:0ms}html[data-visual-test] .dnb-progress-indicator__bar-transition{transition:none}.dnb-progress-indicator--full-width{min-width:1rem;width:100%}@keyframes progress-indicator-fade-in{0%{opacity:0}to{opacity:1}}@keyframes progress-indicator-fade-out{0%{opacity:1}to{opacity:0}}@keyframes progress-indicator-circular-line-light{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-circular-line-dark{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-linear-bar-1{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes progress-indicator-linear-bar-2{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}

package/cjs/components/progress-indicator/style/dnb-progress-indicator.scss

@@ -7,11 +7,17 @@
 
 .dnb-progress-indicator {
   --progress-indicator-timing: cubic-bezier(0.5, 0, 0.5, 0.99);
-  --progress-indicator-circular-circle: 88;
-  --progress-indicator-circular-circle-offset--min: 88;
-  --progress-indicator-circular-circle-offset--max: 1;
+  // 314.159...% is the full circumference of a circle (2πr). The radius is 50%, so the circumference is π * 100%
+  --progress-indicator-circular-circle: 314.159265359%;
+  --progress-indicator-circular-circle-offset--min: 314.159265359%;
+  --progress-indicator-circular-circle-offset--max: 1%;
+  --progress-indicator-circular-size: 2rem;
+  --progress-indicator-circular-stroke-width: calc(
+    var(--progress-indicator-circular-size) / 8
+  );
   --progress-indicator-circular-background-color: grey;
   --progress-indicator-circular-bar-color: var(--color-black);
+  --progress-indicator-linear-size: 0.5rem;
   --progress-indicator-linear-background-color: grey;
   --progress-indicator-linear-bar-color: var(--color-black);
 
@@ -54,13 +60,40 @@
     padding-top: 0.5rem;
   }
 
+  &--inside &__label {
+    position: absolute;
+    width: 100%;
+    justify-content: center;
+    padding: var(--progress-indicator-circular-stroke-width);
+  }
+
+  &--small {
+    --progress-indicator-circular-size: 1rem;
+    --progress-indicator-linear-size: 0.25rem;
+  }
+
+  &--medium {
+    --progress-indicator-circular-size: 1.5rem;
+    --progress-indicator-linear-size: 1rem;
+  }
+
+  &--large {
+    --progress-indicator-circular-size: 3.5rem;
+    --progress-indicator-linear-size: 1.5rem;
+  }
+
+  &--huge {
+    --progress-indicator-circular-size: 20rem;
+    --progress-indicator-linear-size: 2rem;
+  }
+
   // circular variant
   &__circular {
     position: relative;
 
     // default/basis size
-    width: 2rem;
-    height: 2rem;
+    width: var(--progress-indicator-circular-size);
+    height: var(--progress-indicator-circular-size);
 
     // since SVG is starting 90deg from top
     transform: rotate(-90deg);
@@ -70,6 +103,24 @@
       inset: 0;
       width: 100%;
       height: 100%;
+      padding: calc(var(--progress-indicator-circular-stroke-width) / 2);
+
+      &:not(:root) {
+        overflow: visible;
+      }
+    }
+
+    &__background-padding {
+      display: block;
+      height: 100%;
+      padding: calc(var(--progress-indicator-circular-stroke-width) / 2);
+    }
+
+    &__background {
+      display: block;
+      height: 100%;
+      background-color: transparent;
+      border-radius: 50%;
     }
 
     &__line {
@@ -114,6 +165,7 @@
 
     &__circle {
       stroke-linecap: round;
+      stroke-width: var(--progress-indicator-circular-stroke-width);
     }
 
     &__line.light &__circle {
@@ -122,47 +174,10 @@
 
     &__line.dark &__circle {
       stroke: var(--progress-indicator-circular-bar-color);
-    }
-
-    &--small {
-      width: 1rem;
-      height: 1rem;
-    }
-
-    &--medium {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-
-    &--large {
-      width: 3.5rem;
-      height: 3.5rem;
-    }
-
-    &--huge {
-      width: 20rem;
-      height: 20rem;
-    }
-
-    // compensate for 'aliasing artifacts' seen when rendering same sized, lighter on dark elements
-    &--small &__line.dark &__circle {
-      stroke-width: 3.1;
-    }
-
-    &--medium &__line.dark &__circle {
-      stroke-width: 3.3;
-    }
-
-    &--default &__line.dark &__circle {
-      stroke-width: 3.5;
-    }
-
-    &--large &__line.dark &__circle {
-      stroke-width: 3.7;
-    }
-
-    &--huge &__line.dark &__circle {
-      stroke-width: 3.9;
+      // compensate for 'aliasing artifacts' seen when rendering same sized, lighter on dark elements
+      stroke-width: calc(
+        var(--progress-indicator-circular-stroke-width) - 0.5px
+      );
     }
   }
 
@@ -175,8 +190,8 @@
     will-change: transform;
 
     // default/basis size
-    height: 0.5rem;
-    border-radius: 0.25rem;
+    height: var(--progress-indicator-linear-size);
+    border-radius: calc(var(--progress-indicator-linear-size) / 2);
 
     &__bar {
       background-color: var(--progress-indicator-linear-bar-color);
@@ -205,26 +220,6 @@
         cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
     }
 
-    &--small {
-      height: 0.25rem;
-      border-radius: 0.125rem;
-    }
-
-    &--medium {
-      height: 1rem;
-      border-radius: 0.5rem;
-    }
-
-    &--large {
-      height: 1.5rem;
-      border-radius: 0.75rem;
-    }
-
-    &--huge {
-      height: 2rem;
-      border-radius: 1rem;
-    }
-
     html[data-visual-test] &__bar1-animation {
       left: -35%;
       right: 100%;
@@ -254,7 +249,8 @@
     animation-duration: 0ms;
   }
 
-  &--no-animation {
+  &--no-animation,
+  &--no-animation#{&}--complete {
     animation-duration: 0ms;
   }
 

package/cjs/components/progress-indicator/types.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import CSS from 'csstype';
+import { SpacingProps } from '../space/types';
+declare const validSizes: readonly ["default", "small", "medium", "large", "huge"];
+export type ValidSizes = (typeof validSizes)[number];
+export type CustomSize = CSS.Property.Width;
+export declare function isValidSize(size: ProgressIndicatorProps['size']): size is ValidSizes;
+export type ProgressIndicatorProps = {
+    /**
+     * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`.
+     */
+    visible?: boolean;
+    /**
+     * Defines the type. Defaults to `circular`.
+     */
+    type?: 'circular' | 'linear' | 'countdown';
+    /**
+     * Disables the fade-in and fade-out animation. Defaults to `false`.
+     */
+    noAnimation?: boolean;
+    /**
+     * Defines the size. Defaults to `default`.
+     */
+    size?: ValidSizes | CustomSize;
+    /**
+     * A number between 0-100, if not supplied a continous loading-type animation will be used. Defaults to `undefined`
+     */
+    progress?: string | number;
+    /**
+     * Content of a custom label. (Overrides `indicator_label` and `showDefaultLabel`)
+     */
+    label?: React.ReactNode;
+    /**
+     * Same as `label` prop (`label` prop has priority)
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets the position of the label. `'inside'` only works with `type='circular'. Defaults to `horizontal`.
+     */
+    labelDirection?: 'horizontal' | 'vertical' | 'inside';
+    /**
+     * If set to `true` a default label (from text locales) will be shown.
+     */
+    showDefaultLabel?: boolean;
+    /**
+     * Use this to override the default label from text locales.
+     */
+    indicator_label?: string;
+    /**
+     * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.
+     */
+    title?: string;
+    /**
+     * Will be called once it's no longer `visible`.
+     */
+    onComplete?: (...args: any[]) => any;
+    /**
+     * Send in custom css colors that overrides any css. Default is `undefined`.
+     */
+    customColors?: {
+        /**
+         * Override the moving line color.
+         */
+        line?: CSS.Property.BackgroundColor;
+        /**
+         * Override the background line color.
+         */
+        shaft?: CSS.Property.BackgroundColor;
+        /**
+         * Set a background color for the center of the circle.
+         */
+        background?: CSS.Property.BackgroundColor;
+    };
+    /**
+     * Send in custom css width for circle progress line. Default is `undefined`. (`undefined` defaults to one eighth of the size).
+     */
+    customCircleWidth?: CSS.Property.StrokeWidth;
+};
+export type ProgressIndicatorAnimationProps = Pick<ProgressIndicatorProps, 'size' | 'visible' | 'progress' | 'onComplete' | 'customColors' | 'customCircleWidth'> & {
+    size?: ValidSizes | 'custom-size';
+    progress?: number;
+    /**
+     * Callback when animation ends because `visible` is set to false
+     */
+    callOnCompleteHandler?: (...args: any[]) => any;
+};
+export type ProgressIndicatorAllProps = Omit<React.HTMLProps<HTMLSpanElement>, 'ref' | 'label' | 'size'> & SpacingProps & ProgressIndicatorProps;
+export type ProgressIndicatorCircularAllProps = Omit<React.HTMLProps<HTMLElement>, 'size'> & ProgressIndicatorAnimationProps & {
+    /**
+     * Reverse the direction of the progress bar. Defaults to `false`.
+     */
+    counterClockwise?: boolean;
+};
+export type ProgressIndicatorLinearAllProps = Omit<React.HTMLProps<HTMLElement>, 'size'> & Omit<ProgressIndicatorAnimationProps, 'customCircleWidth'>;
+export {};

package/cjs/components/progress-indicator/types.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isValidSize = isValidSize;
+const validSizes = ['default', 'small', 'medium', 'large', 'huge'];
+function isValidSize(size) {
+  return validSizes.some(validSize => validSize === size);
+}
+//# sourceMappingURL=types.js.map

package/cjs/components/progress-indicator/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["validSizes","isValidSize","size","some","validSize"],"sources":["../../../../src/components/progress-indicator/types.ts"],"sourcesContent":["import * as React from 'react'\nimport CSS from 'csstype'\nimport { SpacingProps } from '../space/types'\n\nconst validSizes = ['default', 'small', 'medium', 'large', 'huge'] as const\n\nexport type ValidSizes = (typeof validSizes)[number]\nexport type CustomSize = CSS.Property.Width\n\nexport function isValidSize(\n  size: ProgressIndicatorProps['size']\n): size is ValidSizes {\n  return validSizes.some((validSize) => validSize === size)\n}\n\nexport type ProgressIndicatorProps = {\n  /**\n   * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`.\n   */\n  visible?: boolean\n  /**\n   * Defines the type. Defaults to `circular`.\n   */\n  type?: 'circular' | 'linear' | 'countdown'\n  /**\n   * Disables the fade-in and fade-out animation. Defaults to `false`.\n   */\n  noAnimation?: boolean\n  /**\n   * Defines the size. Defaults to `default`.\n   */\n  size?: ValidSizes | CustomSize\n  /**\n   * A number between 0-100, if not supplied a continous loading-type animation will be used. Defaults to `undefined`\n   */\n  progress?: string | number\n  /**\n   * Content of a custom label. (Overrides `indicator_label` and `showDefaultLabel`)\n   */\n  label?: React.ReactNode\n  /**\n   * Same as `label` prop (`label` prop has priority)\n   */\n  children?: React.ReactNode\n  /**\n   * Sets the position of the label. `'inside'` only works with `type='circular'. Defaults to `horizontal`.\n   */\n  labelDirection?: 'horizontal' | 'vertical' | 'inside'\n  /**\n   * If set to `true` a default label (from text locales) will be shown.\n   */\n  showDefaultLabel?: boolean\n  /**\n   * Use this to override the default label from text locales.\n   */\n  indicator_label?: string\n  /**\n   * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.\n   */\n  title?: string\n  /**\n   * Will be called once it's no longer `visible`.\n   */\n  onComplete?: (...args: any[]) => any\n  /**\n   * Send in custom css colors that overrides any css. Default is `undefined`.\n   */\n  customColors?: {\n    /**\n     * Override the moving line color.\n     */\n    line?: CSS.Property.BackgroundColor\n    /**\n     * Override the background line color.\n     */\n    shaft?: CSS.Property.BackgroundColor\n    /**\n     * Set a background color for the center of the circle.\n     */\n    background?: CSS.Property.BackgroundColor\n  }\n  /**\n   * Send in custom css width for circle progress line. Default is `undefined`. (`undefined` defaults to one eighth of the size).\n   */\n  customCircleWidth?: CSS.Property.StrokeWidth\n}\n\nexport type ProgressIndicatorAnimationProps = Pick<\n  ProgressIndicatorProps,\n  | 'size'\n  | 'visible'\n  | 'progress'\n  | 'onComplete'\n  | 'customColors'\n  | 'customCircleWidth'\n> & {\n  size?: ValidSizes | 'custom-size'\n  progress?: number\n  /**\n   * Callback when animation ends because `visible` is set to false\n   */\n  callOnCompleteHandler?: (...args: any[]) => any\n}\n\nexport type ProgressIndicatorAllProps = Omit<\n  React.HTMLProps<HTMLSpanElement>,\n  'ref' | 'label' | 'size'\n> &\n  SpacingProps &\n  ProgressIndicatorProps\n\nexport type ProgressIndicatorCircularAllProps = Omit<\n  React.HTMLProps<HTMLElement>,\n  'size'\n> &\n  ProgressIndicatorAnimationProps & {\n    /**\n     * Reverse the direction of the progress bar. Defaults to `false`.\n     */\n    counterClockwise?: boolean\n  }\n\nexport type ProgressIndicatorLinearAllProps = Omit<\n  React.HTMLProps<HTMLElement>,\n  'size'\n> &\n  Omit<ProgressIndicatorAnimationProps, 'customCircleWidth'>\n"],"mappings":";;;;;;AAIA,MAAMA,UAAU,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAU;AAKpE,SAASC,WAAWA,CACzBC,IAAoC,EAChB;EACpB,OAAOF,UAAU,CAACG,IAAI,CAAEC,SAAS,IAAKA,SAAS,KAAKF,IAAI,CAAC;AAC3D"}

package/cjs/extensions/forms/DataContext/Context.d.ts

@@ -14,6 +14,9 @@ export type FilterDataHandler<Data> = (data: Data, filter: FilterData) => Partia
 export type FilterData = (path: Path, value: any, props: FieldProps, internal: {
     error: Error | undefined;
 }) => boolean | undefined;
+export type TransformData = (path: Path, value: any, props: FieldProps, internal: {
+    error: Error | undefined;
+}) => any;
 export interface ContextState {
     id?: Identifier;
     hasContext: boolean;
@@ -27,7 +30,8 @@ export interface ContextState {
     handlePathChangeUnvalidated: (path: Path, value: any) => void;
     updateDataValue: (path: Path, value: any) => void;
     setData: (data: any) => void;
-    filterDataHandler: (data: any, filter: FilterData) => any;
+    mutateDataHandler?: (data: any, mutate: TransformData) => any;
+    filterDataHandler?: (data: any, filter: FilterData) => any;
     validateData: () => void;
     handleSubmit: (props?: HandleSubmitProps) => any;
     scrollToTop: () => void;
@@ -55,7 +59,8 @@ export interface ContextState {
     ajvInstance: Ajv;
     contextErrorMessages: CustomErrorMessagesWithPaths;
     schema: AllJSONSchemaVersions;
-    disabled: boolean;
+    disabled?: boolean;
+    required?: boolean;
     submitState: Partial<EventStateObject>;
     _isInsideFormElement?: boolean;
     props: ProviderProps<unknown>;

package/cjs/extensions/forms/DataContext/Context.js

@@ -11,13 +11,11 @@ const defaultContextState = {
   hasContext: false,
   data: undefined,
   schema: undefined,
-  disabled: undefined,
   submitState: undefined,
   handlePathChange: () => null,
   handlePathChangeUnvalidated: () => null,
   updateDataValue: () => null,
   setData: () => null,
-  filterDataHandler: () => null,
   validateData: () => null,
   handleSubmit: () => null,
   scrollToTop: () => null,

package/cjs/extensions/forms/DataContext/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","names":["_react","_interopRequireDefault","require","_ajv","obj","__esModule","default","defaultContextState","hasContext","data","undefined","schema","disabled","submitState","handlePathChange","handlePathChangeUnvalidated","updateDataValue","setData","filterDataHandler","validateData","handleSubmit","scrollToTop","showAllErrors","formState","setFormState","setSubmitState","setFieldEventListener","handleSubmitCall","setShowAllErrors","mountedFieldPaths","handleMountField","handleUnMountField","hasErrors","hasFieldState","checkFieldStateFor","setFieldState","setFieldError","setProps","ajvInstance","makeAjvInstance","contextErrorMessages","_isInsideFormElement","props","exports","Context","React","createContext","_default"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\nimport { Ajv, makeAjvInstance } from '../utils/ajv'\nimport {\n  AllJSONSchemaVersions,\n  CustomErrorMessagesWithPaths,\n  SubmitState,\n  Path,\n  EventStateObject,\n  EventReturnWithStateObject,\n  Identifier,\n  FieldProps,\n  FormError,\n} from '../types'\nimport { Props as ProviderProps } from './Provider'\n\ntype HandleSubmitProps = {\n  formElement?: HTMLFormElement\n}\n\nexport type EventListenerCall = {\n  path: Path\n  type: 'onSubmit'\n  callback: () => any\n}\n\nexport type FilterDataHandler<Data> = (\n  data: Data,\n  filter: FilterData\n) => Partial<Data>\nexport type FilterData = (\n  path: Path,\n  value: any,\n  props: FieldProps,\n  internal: {\n    error: Error | undefined\n  }\n) => boolean | undefined\n\nexport interface ContextState {\n  id?: Identifier\n  hasContext: boolean\n  /** The dataset for the form / form wizard */\n  data: any\n  /** Should the form validate data before submitting? */\n  errors?: Record<string, Error>\n  /** Will set autoComplete=\"on\" on each nested Field.String and Field.Number */\n  autoComplete?: boolean\n  handlePathChange: (\n    path: Path,\n    value?: any\n  ) =>\n    | EventReturnWithStateObject\n    | unknown\n    | Promise<EventReturnWithStateObject | unknown>\n  handlePathChangeUnvalidated: (path: Path, value: any) => void\n  updateDataValue: (path: Path, value: any) => void\n  setData: (data: any) => void\n  filterDataHandler: (data: any, filter: FilterData) => any\n  validateData: () => void\n  handleSubmit: (props?: HandleSubmitProps) => any\n  scrollToTop: () => void\n  // Error status\n  showAllErrors: boolean\n  setShowAllErrors: (showAllErrors: boolean) => void\n  hasErrors: () => boolean\n  hasFieldState: (state: SubmitState) => boolean\n  checkFieldStateFor: (path: Path, state: SubmitState) => boolean\n  setFieldState: (path: Path, fieldState: SubmitState) => void\n  setFieldError: (path: Path, error: Error | FormError) => void\n  // Mounted fields - Components telling the provider what fields is on screen at any time\n  mountedFieldPaths: string[]\n  handleMountField: (path: Path) => void\n  handleUnMountField: (path: Path) => void\n  formState: SubmitState\n  setFormState?: (state: SubmitState) => void\n  setSubmitState?: (state: EventStateObject) => void\n  handleSubmitCall: ({\n    onSubmit,\n    enableAsyncBehaviour,\n    skipFieldValidation,\n    skipErrorCheck,\n  }: {\n    onSubmit: () =>\n      | EventReturnWithStateObject\n      | void\n      | Promise<EventReturnWithStateObject | void>\n    enableAsyncBehaviour: boolean\n    skipFieldValidation?: boolean\n    skipErrorCheck?: boolean\n  }) => void\n  setFieldEventListener: (\n    path: EventListenerCall['path'],\n    type: EventListenerCall['type'],\n    callback: EventListenerCall['callback']\n  ) => void\n  setProps: (path: Path, props: any) => void\n  ajvInstance: Ajv\n  contextErrorMessages: CustomErrorMessagesWithPaths\n  schema: AllJSONSchemaVersions\n  disabled: boolean\n  submitState: Partial<EventStateObject>\n  _isInsideFormElement?: boolean\n  props: ProviderProps<unknown>\n}\n\nexport const defaultContextState: ContextState = {\n  hasContext: false,\n  data: undefined,\n  schema: undefined,\n  disabled: undefined,\n  submitState: undefined,\n  handlePathChange: () => null,\n  handlePathChangeUnvalidated: () => null,\n  updateDataValue: () => null,\n  setData: () => null,\n  filterDataHandler: () => null,\n  validateData: () => null,\n  handleSubmit: () => null,\n  scrollToTop: () => null,\n  showAllErrors: false,\n  formState: undefined,\n  setFormState: () => null,\n  setSubmitState: () => null,\n  setFieldEventListener: () => null,\n  handleSubmitCall: () => null,\n  setShowAllErrors: () => null,\n  mountedFieldPaths: [],\n  handleMountField: () => null,\n  handleUnMountField: () => null,\n  hasErrors: () => false,\n  hasFieldState: () => false,\n  checkFieldStateFor: () => false,\n  setFieldState: () => null,\n  setFieldError: () => null,\n  setProps: () => null,\n  ajvInstance: makeAjvInstance(),\n  contextErrorMessages: undefined,\n  _isInsideFormElement: false,\n  props: null,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AAAmD,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAwG5C,MAAMG,mBAAiC,GAAG;EAC/CC,UAAU,EAAE,KAAK;EACjBC,IAAI,EAAEC,SAAS;EACfC,MAAM,EAAED,SAAS;EACjBE,QAAQ,EAAEF,SAAS;EACnBG,WAAW,EAAEH,SAAS;EACtBI,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,2BAA2B,EAAEA,CAAA,KAAM,IAAI;EACvCC,eAAe,EAAEA,CAAA,KAAM,IAAI;EAC3BC,OAAO,EAAEA,CAAA,KAAM,IAAI;EACnBC,iBAAiB,EAAEA,CAAA,KAAM,IAAI;EAC7BC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,WAAW,EAAEA,CAAA,KAAM,IAAI;EACvBC,aAAa,EAAE,KAAK;EACpBC,SAAS,EAAEb,SAAS;EACpBc,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,cAAc,EAAEA,CAAA,KAAM,IAAI;EAC1BC,qBAAqB,EAAEA,CAAA,KAAM,IAAI;EACjCC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,iBAAiB,EAAE,EAAE;EACrBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,kBAAkB,EAAEA,CAAA,KAAM,IAAI;EAC9BC,SAAS,EAAEA,CAAA,KAAM,KAAK;EACtBC,aAAa,EAAEA,CAAA,KAAM,KAAK;EAC1BC,kBAAkB,EAAEA,CAAA,KAAM,KAAK;EAC/BC,aAAa,EAAEA,CAAA,KAAM,IAAI;EACzBC,aAAa,EAAEA,CAAA,KAAM,IAAI;EACzBC,QAAQ,EAAEA,CAAA,KAAM,IAAI;EACpBC,WAAW,EAAE,IAAAC,oBAAe,EAAC,CAAC;EAC9BC,oBAAoB,EAAE9B,SAAS;EAC/B+B,oBAAoB,EAAE,KAAK;EAC3BC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAApC,mBAAA,GAAAA,mBAAA;AAED,MAAMqC,OAAO,GAAGC,cAAK,CAACC,aAAa,CAAevC,mBAAmB,CAAC;AAAA,IAAAwC,QAAA,GAEvDH,OAAO;AAAAD,OAAA,CAAArC,OAAA,GAAAyC,QAAA"}
+{"version":3,"file":"Context.js","names":["_react","_interopRequireDefault","require","_ajv","obj","__esModule","default","defaultContextState","hasContext","data","undefined","schema","submitState","handlePathChange","handlePathChangeUnvalidated","updateDataValue","setData","validateData","handleSubmit","scrollToTop","showAllErrors","formState","setFormState","setSubmitState","setFieldEventListener","handleSubmitCall","setShowAllErrors","mountedFieldPaths","handleMountField","handleUnMountField","hasErrors","hasFieldState","checkFieldStateFor","setFieldState","setFieldError","setProps","ajvInstance","makeAjvInstance","contextErrorMessages","_isInsideFormElement","props","exports","Context","React","createContext","_default"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\nimport { Ajv, makeAjvInstance } from '../utils/ajv'\nimport {\n  AllJSONSchemaVersions,\n  CustomErrorMessagesWithPaths,\n  SubmitState,\n  Path,\n  EventStateObject,\n  EventReturnWithStateObject,\n  Identifier,\n  FieldProps,\n  FormError,\n} from '../types'\nimport { Props as ProviderProps } from './Provider'\n\ntype HandleSubmitProps = {\n  formElement?: HTMLFormElement\n}\n\nexport type EventListenerCall = {\n  path: Path\n  type: 'onSubmit'\n  callback: () => any\n}\n\nexport type FilterDataHandler<Data> = (\n  data: Data,\n  filter: FilterData\n) => Partial<Data>\nexport type FilterData = (\n  path: Path,\n  value: any,\n  props: FieldProps,\n  internal: {\n    error: Error | undefined\n  }\n) => boolean | undefined\nexport type TransformData = (\n  path: Path,\n  value: any,\n  props: FieldProps,\n  internal: {\n    error: Error | undefined\n  }\n) => any\n\nexport interface ContextState {\n  id?: Identifier\n  hasContext: boolean\n  /** The dataset for the form / form wizard */\n  data: any\n  /** Should the form validate data before submitting? */\n  errors?: Record<string, Error>\n  /** Will set autoComplete=\"on\" on each nested Field.String and Field.Number */\n  autoComplete?: boolean\n  handlePathChange: (\n    path: Path,\n    value?: any\n  ) =>\n    | EventReturnWithStateObject\n    | unknown\n    | Promise<EventReturnWithStateObject | unknown>\n  handlePathChangeUnvalidated: (path: Path, value: any) => void\n  updateDataValue: (path: Path, value: any) => void\n  setData: (data: any) => void\n  mutateDataHandler?: (data: any, mutate: TransformData) => any\n  filterDataHandler?: (data: any, filter: FilterData) => any\n  validateData: () => void\n  handleSubmit: (props?: HandleSubmitProps) => any\n  scrollToTop: () => void\n  // Error status\n  showAllErrors: boolean\n  setShowAllErrors: (showAllErrors: boolean) => void\n  hasErrors: () => boolean\n  hasFieldState: (state: SubmitState) => boolean\n  checkFieldStateFor: (path: Path, state: SubmitState) => boolean\n  setFieldState: (path: Path, fieldState: SubmitState) => void\n  setFieldError: (path: Path, error: Error | FormError) => void\n  // Mounted fields - Components telling the provider what fields is on screen at any time\n  mountedFieldPaths: string[]\n  handleMountField: (path: Path) => void\n  handleUnMountField: (path: Path) => void\n  formState: SubmitState\n  setFormState?: (state: SubmitState) => void\n  setSubmitState?: (state: EventStateObject) => void\n  handleSubmitCall: ({\n    onSubmit,\n    enableAsyncBehaviour,\n    skipFieldValidation,\n    skipErrorCheck,\n  }: {\n    onSubmit: () =>\n      | EventReturnWithStateObject\n      | void\n      | Promise<EventReturnWithStateObject | void>\n    enableAsyncBehaviour: boolean\n    skipFieldValidation?: boolean\n    skipErrorCheck?: boolean\n  }) => void\n  setFieldEventListener: (\n    path: EventListenerCall['path'],\n    type: EventListenerCall['type'],\n    callback: EventListenerCall['callback']\n  ) => void\n  setProps: (path: Path, props: any) => void\n  ajvInstance: Ajv\n  contextErrorMessages: CustomErrorMessagesWithPaths\n  schema: AllJSONSchemaVersions\n  disabled?: boolean\n  required?: boolean\n  submitState: Partial<EventStateObject>\n  _isInsideFormElement?: boolean\n  props: ProviderProps<unknown>\n}\n\nexport const defaultContextState: ContextState = {\n  hasContext: false,\n  data: undefined,\n  schema: undefined,\n  submitState: undefined,\n  handlePathChange: () => null,\n  handlePathChangeUnvalidated: () => null,\n  updateDataValue: () => null,\n  setData: () => null,\n  validateData: () => null,\n  handleSubmit: () => null,\n  scrollToTop: () => null,\n  showAllErrors: false,\n  formState: undefined,\n  setFormState: () => null,\n  setSubmitState: () => null,\n  setFieldEventListener: () => null,\n  handleSubmitCall: () => null,\n  setShowAllErrors: () => null,\n  mountedFieldPaths: [],\n  handleMountField: () => null,\n  handleUnMountField: () => null,\n  hasErrors: () => false,\n  hasFieldState: () => false,\n  checkFieldStateFor: () => false,\n  setFieldState: () => null,\n  setFieldError: () => null,\n  setProps: () => null,\n  ajvInstance: makeAjvInstance(),\n  contextErrorMessages: undefined,\n  _isInsideFormElement: false,\n  props: null,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AAAmD,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAkH5C,MAAMG,mBAAiC,GAAG;EAC/CC,UAAU,EAAE,KAAK;EACjBC,IAAI,EAAEC,SAAS;EACfC,MAAM,EAAED,SAAS;EACjBE,WAAW,EAAEF,SAAS;EACtBG,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,2BAA2B,EAAEA,CAAA,KAAM,IAAI;EACvCC,eAAe,EAAEA,CAAA,KAAM,IAAI;EAC3BC,OAAO,EAAEA,CAAA,KAAM,IAAI;EACnBC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,WAAW,EAAEA,CAAA,KAAM,IAAI;EACvBC,aAAa,EAAE,KAAK;EACpBC,SAAS,EAAEX,SAAS;EACpBY,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,cAAc,EAAEA,CAAA,KAAM,IAAI;EAC1BC,qBAAqB,EAAEA,CAAA,KAAM,IAAI;EACjCC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,iBAAiB,EAAE,EAAE;EACrBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,kBAAkB,EAAEA,CAAA,KAAM,IAAI;EAC9BC,SAAS,EAAEA,CAAA,KAAM,KAAK;EACtBC,aAAa,EAAEA,CAAA,KAAM,KAAK;EAC1BC,kBAAkB,EAAEA,CAAA,KAAM,KAAK;EAC/BC,aAAa,EAAEA,CAAA,KAAM,IAAI;EACzBC,aAAa,EAAEA,CAAA,KAAM,IAAI;EACzBC,QAAQ,EAAEA,CAAA,KAAM,IAAI;EACpBC,WAAW,EAAE,IAAAC,oBAAe,EAAC,CAAC;EAC9BC,oBAAoB,EAAE5B,SAAS;EAC/B6B,oBAAoB,EAAE,KAAK;EAC3BC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAAlC,mBAAA,GAAAA,mBAAA;AAED,MAAMmC,OAAO,GAAGC,cAAK,CAACC,aAAa,CAAerC,mBAAmB,CAAC;AAAA,IAAAsC,QAAA,GAEvDH,OAAO;AAAAD,OAAA,CAAAnC,OAAA,GAAAuC,QAAA"}

package/cjs/extensions/forms/DataContext/Provider/Provider.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import { JsonObject } from 'json-pointer';
 import { Ajv } from '../../utils/ajv';
 import { CustomErrorMessagesWithPaths, AllJSONSchemaVersions, Path, OnSubmit, OnChange, EventReturnWithStateObject } from '../../types';
-import { FilterData } from '../Context';
+import { ContextProps } from '../../../../shared/Context';
+import { FilterData, TransformData } from '../Context';
 export interface Props<Data extends JsonObject> {
     /**
      * Unique ID to communicate with the hook Form.useData
@@ -15,11 +16,11 @@ export interface Props<Data extends JsonObject> {
     /**
      * Default source data, only used if no other source is available, and not leading to updates if changed after mount
      */
-    defaultData?: Partial<Data>;
+    defaultData?: Data;
     /**
      * Source data, will be used instead of defaultData, and leading to updates if changed after mount
      */
-    data?: Partial<Data>;
+    data?: Data;
     /**
      * JSON Schema to validate the data against.
      */
@@ -33,9 +34,21 @@ export interface Props<Data extends JsonObject> {
      */
     errorMessages?: CustomErrorMessagesWithPaths;
     /**
-     * Filter the internal data context based on your criteria: `(path, value, props) => !props?.disabled`. It will iterate on each data entry.
+     * Filter the `onSubmit` output data, based on your criteria: `(path, value, props, internal) => !props?.disabled`. It will iterate on each data entry (/path). Return false to exclude the entry.
+     */
+    filterSubmitData?: FilterData;
+    /**
+     * @deprecated Use `filterSubmitData` instead
      */
     filterData?: FilterData;
+    /**
+     * Transform the data context (internally as well) based on your criteria: `(path, value, props, internal) => 'new value'`. It will iterate on each data entry (/path).
+     */
+    transformIn?: TransformData;
+    /**
+     * Mutate the data before it enters onSubmit or onChange based on your criteria: `(path, value, props, internal) => 'new value'`. It will iterate on each data entry (/path).
+     */
+    transformOut?: TransformData;
     /**
      * Change handler for the whole data set.
      * You can provide an async function to show an indicator on the current label during a field change.
@@ -49,7 +62,7 @@ export interface Props<Data extends JsonObject> {
      * Will emit on a form submit – if validation has passed.
      * You can provide an async function to shows a submit indicator during submit. All form elements will be disabled during the submit.
      */
-    onSubmit?: OnSubmit;
+    onSubmit?: OnSubmit<Data>;
     /**
      * Submit was requested, but data was invalid
      */
@@ -78,6 +91,18 @@ export interface Props<Data extends JsonObject> {
      * Key for caching the data in session storage
      */
     sessionStorageId?: string;
+    /**
+     * Locale to use for all nested Eufemia components
+     */
+    locale?: ContextProps['locale'];
+    /**
+     * Provide your own translations. Use the same format as defined in the translation files
+     */
+    translations?: ContextProps['translations'];
+    /**
+     * Make all fields required
+     */
+    required?: boolean;
     children: React.ReactNode;
 }
 export default function Provider<Data extends JsonObject>(props: Props<Data>): import("react/jsx-runtime").JSX.Element;