From bc87c6c1cb0790a78dd607259a2b901f6c879254 Mon Sep 17 00:00:00 2001
From: Marko Gronroos <magi@vaadin.com>
Date: Thu, 21 Jul 2016 15:31:21 +0300
Subject: Updated StreamResource example and screenshot, as well as various
 diagrams. #19897

Uses slider example png/svg from the vaadin8 branch

Change-Id: I8a52ca754262a32487d6c8330d0382635d9fedca
---
 documentation/components/img/field-diagram-hi.png  | Bin 90096 -> 83961 bytes
 .../components/img/slider-example1-hi.png          | Bin 12676 -> 31155 bytes
 .../components/original-drawings/field-diagram.svg | 229 +++++++++------------
 .../original-drawings/slider-example1.svg          |  18 +-
 4 files changed, 106 insertions(+), 141 deletions(-)

(limited to 'documentation/components')

diff --git a/documentation/components/img/field-diagram-hi.png b/documentation/components/img/field-diagram-hi.png
index a438436c61..627e0d784d 100644
Binary files a/documentation/components/img/field-diagram-hi.png and b/documentation/components/img/field-diagram-hi.png differ
diff --git a/documentation/components/img/slider-example1-hi.png b/documentation/components/img/slider-example1-hi.png
index 70ca635e60..7f38639dde 100644
Binary files a/documentation/components/img/slider-example1-hi.png and b/documentation/components/img/slider-example1-hi.png differ
diff --git a/documentation/components/original-drawings/field-diagram.svg b/documentation/components/original-drawings/field-diagram.svg
index 8c1ce159ce..4b713c30ab 100644
--- a/documentation/components/original-drawings/field-diagram.svg
+++ b/documentation/components/original-drawings/field-diagram.svg
@@ -11,7 +11,7 @@
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="82mm"
-   height="82mm"
+   height="73mm"
    id="svg2475"
    sodipodi:version="0.32"
    inkscape:version="0.91 r"
@@ -31,9 +31,9 @@
      objecttolerance="10"
      inkscape:pageopacity="1"
      inkscape:pageshadow="2"
-     inkscape:zoom="3.3941125"
-     inkscape:cx="158.52687"
-     inkscape:cy="140.02242"
+     inkscape:zoom="2.4"
+     inkscape:cx="225.58075"
+     inkscape:cy="130.81707"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
      showgrid="true"
@@ -61,7 +61,7 @@
        type="xygrid"
        dotted="false" />
     <sodipodi:guide
-       position="166.53543,134.64567"
+       position="166.53543,230.31496"
        orientation="1,0"
        id="guide25051" />
   </sodipodi:namedview>
@@ -1495,6 +1495,21 @@
          transform="matrix(0.4,0,0,0.4,-1.8,0)"
          inkscape:connector-curvature="0" />
     </marker>
+    <marker
+       inkscape:stockid="EmptyTriangleOutM"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="marker24201-3-2-4"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path24203-8-6-8"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill:#ffffff;fill-rule:evenodd;stroke:#00b4f0;stroke-width:1pt;stroke-opacity:1"
+         transform="matrix(0.4,0,0,0.4,-1.8,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
   </defs>
   <metadata
      id="metadata2480">
@@ -1512,38 +1527,32 @@
      id="layer1"
      inkscape:groupmode="layer"
      inkscape:label="Layer 1"
-     transform="translate(0,-761.81105)">
+     transform="translate(0,-793.70084)">
     <path
        sodipodi:nodetypes="cc"
        style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-mid:none"
-       d="m 165.60285,889.3701 -23.87057,0"
+       d="m 165.60285,896.45672 -23.87057,0"
        id="path49764"
        inkscape:connector-type="polyline"
        inkscape:connector-curvature="0" />
     <flowRoot
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3594541px;line-height:122%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.35945415px;line-height:122.00000286%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        id="flowRoot2485"
        xml:space="preserve"
-       transform="matrix(0.56140019,0,0,0.56140019,-101.54462,557.11682)"><flowRegion
+       transform="matrix(0.56140019,0,0,0.56140019,-101.54462,564.20344)"><flowRegion
          id="flowRegion2487"><rect
-           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3594541px;line-height:122%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr;text-anchor:middle;fill:#000000;fill-opacity:1;"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.35945415px;line-height:122.00000286%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1"
            y="238.07646"
            x="262.85715"
            height="120"
            width="184.28572"
            id="rect2489" /></flowRegion><flowPara
          id="flowPara2491" /></flowRoot>    <g
-       transform="matrix(0.56140019,0,0,0.56140019,-103.54962,570.14931)"
+       transform="matrix(0.56140019,0,0,0.56140019,-103.54962,577.23593)"
        id="g3178" />
-    <path
-       inkscape:connector-type="polyline"
-       id="path28387"
-       d="m -8.189821,873.56631 -0.7765624,0.0744"
-       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       inkscape:connector-curvature="0" />
     <g
        id="g2492"
-       transform="matrix(0.56140018,0,0,0.56140018,-77.431844,660.85865)">
+       transform="matrix(0.56140018,0,0,0.56140018,-77.431844,667.94527)">
       <rect
          ry="0"
          y="230.31496"
@@ -1568,7 +1577,7 @@
            id="flowPara4670">Component</flowPara></flowRoot>    </g>
     <g
        id="g2475"
-       transform="matrix(0.56140018,0,0,0.56140018,-76.025223,704.6837)">
+       transform="matrix(0.56140018,0,0,0.56140018,-76.025223,711.77032)">
       <rect
          style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ff3a49;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
          id="rect4622"
@@ -1592,7 +1601,7 @@
            id="flowPara4642">AbstractComponent</flowPara></flowRoot>    </g>
     <g
        id="g2854"
-       transform="matrix(0.56140018,0,0,0.56140018,10.924822,660.68217)">
+       transform="matrix(0.56140018,0,0,0.56140018,10.924822,667.76879)">
       <rect
          ry="0"
          y="230.6293"
@@ -1616,7 +1625,7 @@
              height="1052.3622" /></flowRegion><flowPara
            id="flowPara2864">HasValue&lt;T&gt;</flowPara></flowRoot>    </g>
     <g
-       transform="matrix(0.56140018,0,0,0.56140018,-2.8872178,704.96725)"
+       transform="matrix(0.56140018,0,0,0.56140018,-2.8872179,712.05387)"
        id="g2802">
       <rect
          ry="0"
@@ -1625,7 +1634,7 @@
          height="37.86932"
          width="113.60796"
          id="rect2804"
-         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ff3a49;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate" />
+         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ff3a49;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate" />
       <flowRoot
          transform="translate(18.635472,9.7695016)"
          id="flowRoot2806"
@@ -1640,28 +1649,10 @@
              x="0" /></flowRegion><flowPara
            id="flowPara2812">AbstractField</flowPara></flowRoot>    </g>
     <g
-       transform="matrix(0.56140018,0,0,0.56140018,158.57858,688.76999)"
-       id="g3808">
-      <rect
-         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
-         id="rect3810"
-         width="82.050171"
-         height="37.869328"
-         x="14.173247"
-         y="237.40155"
-         ry="0" />
-      <flowRoot
-         xml:space="preserve"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.35945415px;line-height:122.00000286%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         id="flowRoot3812"
-         transform="translate(55.03875,260.97862)"><flowRegion
-           id="flowRegion3814" /><flowPara
-           id="flowPara3818">Button</flowPara></flowRoot>    </g>
-    <g
-       transform="matrix(0.56140018,0,0,0.56140018,211.72818,688.76999)"
+       transform="matrix(0.56140018,0,0,0.56140018,158.57857,695.85662)"
        id="g3820">
       <rect
-         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
+         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
          id="rect3822"
          width="82.050186"
          height="37.869328"
@@ -1676,10 +1667,10 @@
            id="flowRegion3826" /><flowPara
            id="flowPara3830">CheckBox</flowPara></flowRoot>    </g>
     <g
-       transform="matrix(0.56140018,0,0,0.56140018,158.79359,716.25388)"
+       transform="matrix(0.56140018,0,0,0.56140018,158.79359,723.3405)"
        id="g3836">
       <rect
-         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
+         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
          id="rect3838"
          width="82.050194"
          height="37.869312"
@@ -1694,11 +1685,11 @@
            id="flowRegion3842" /><flowPara
            id="flowPara3846">TextField</flowPara></flowRoot>    </g>
     <g
-       transform="matrix(0.56140018,0,0,0.56140018,211.76685,723.59701)"
+       transform="matrix(0.56140018,0,0,0.56140018,211.76685,730.68363)"
        id="g3848"
        style="stroke-width:1.77165353;stroke-miterlimit:4;stroke-dasharray:none">
       <rect
-         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
+         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
          id="rect3850"
          width="100.98485"
          height="37.86932"
@@ -1718,10 +1709,10 @@
            y="249.79576">RichTextArea</tspan></text>
     </g>
     <g
-       transform="matrix(0.56140018,0,0,0.56140018,158.79359,744.10287)"
+       transform="matrix(0.56140018,0,0,0.56140018,158.79359,751.18949)"
        id="g3870">
       <rect
-         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
+         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
          id="rect3872"
          width="82.050194"
          height="37.869324"
@@ -1736,10 +1727,10 @@
            id="flowRegion3876" /><flowPara
            id="flowPara3880">DateField</flowPara></flowRoot>    </g>
     <g
-       transform="matrix(0.56140018,0,0,0.56140018,211.68145,751.39928)"
+       transform="matrix(0.56140018,0,0,0.56140018,211.68145,758.4859)"
        id="g3894">
       <rect
-         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
+         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
          id="rect3896"
          width="119.91951"
          height="37.869312"
@@ -1759,10 +1750,10 @@
            y="250.76511">InlineDateField</tspan></text>
     </g>
     <g
-       transform="matrix(0.56140018,0,0,0.56140018,160.66912,778.9299)"
+       transform="matrix(0.56140018,0,0,0.56140018,213.81873,786.01652)"
        id="g3902">
       <rect
-         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
+         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
          id="rect3904"
          width="119.91951"
          height="37.869312"
@@ -1782,16 +1773,16 @@
            y="250.95586">PopupDateField</tspan></text>
     </g>
     <g
-       transform="matrix(0.56140018,0,0,0.56140018,-1.4148363,818.31352)"
+       transform="matrix(0.56140018,0,0,0.56140018,-1.4148364,825.40014)"
        id="g3796">
       <rect
          ry="0"
          y="208.62048"
          x="172.93213"
-         height="35.867687"
-         width="109.9191"
+         height="37.86932"
+         width="113.60796"
          id="rect3798"
-         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ff3a49;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate" />
+         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ff3a49;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate" />
       <flowRoot
          transform="translate(15.719998,9.3213059)"
          id="flowRoot3800"
@@ -1806,14 +1797,14 @@
              x="0" /></flowRegion><flowPara
            id="flowPara3806">AbstractSelect</flowPara></flowRoot>    </g>
     <g
-       transform="matrix(0.56140018,0,0,0.56140018,1.6457416,696.36175)"
+       transform="matrix(0.56140018,0,0,0.56140018,1.6457354,731.79482)"
        id="g2643">
       <rect
-         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
+         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
          id="rect2645"
-         width="126.23106"
-         height="37.869305"
-         x="41.249378"
+         width="100.98486"
+         height="37.869293"
+         x="53.872482"
          y="274.37109"
          ry="0" />
       <text
@@ -1826,10 +1817,10 @@
            sodipodi:role="line"
            id="tspan2687"
            x="103.82072"
-           y="297.02637">ProgressIndicator</tspan></text>
+           y="297.02637">ProgressBar</tspan></text>
     </g>
     <g
-       transform="matrix(0.56140018,0,0,0.56140018,158.57857,830.50228)"
+       transform="matrix(0.56140018,0,0,0.56140018,158.57857,837.5889)"
        id="g6708">
       <rect
          style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
@@ -1847,7 +1838,7 @@
            id="flowRegion6714" /><flowPara
            id="flowPara6718">ListSelect</flowPara></flowRoot>    </g>
     <g
-       transform="matrix(0.56140018,0,0,0.56140018,158.57857,858.84873)"
+       transform="matrix(0.56140018,0,0,0.56140018,158.57857,865.93535)"
        id="g6732">
       <rect
          style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
@@ -1865,7 +1856,7 @@
            id="flowRegion6738" /><flowPara
            id="flowPara6742">NativeSelect</flowPara></flowRoot>    </g>
     <g
-       transform="matrix(0.56140018,0,0,0.56140018,158.57857,887.19519)"
+       transform="matrix(0.56140018,0,0,0.56140018,158.57857,894.28181)"
        id="g6744">
       <rect
          style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
@@ -1888,10 +1879,10 @@
            y="261.33932">TwinColSelect</tspan></text>
     </g>
     <g
-       transform="matrix(0.56140018,0,0,0.56140018,30.895481,830.50228)"
+       transform="matrix(0.56140018,0,0,0.56140018,30.895481,837.5889)"
        id="g6760">
       <rect
-         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
+         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
          id="rect6762"
          width="100.98486"
          height="37.869328"
@@ -1911,10 +1902,10 @@
            y="260.07687">OptionGroup</tspan></text>
     </g>
     <g
-       transform="matrix(0.56140018,0,0,0.56140018,30.895481,858.84873)"
+       transform="matrix(0.56140018,0,0,0.56140018,30.895481,865.93535)"
        id="g6768">
       <rect
-         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
+         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
          id="rect6770"
          width="88.58268"
          height="37.869328"
@@ -1934,10 +1925,10 @@
            y="261.25919">Table</tspan></text>
     </g>
     <g
-       transform="matrix(0.56140018,0,0,0.56140018,30.895481,887.19519)"
+       transform="matrix(0.56140018,0,0,0.56140018,30.895481,894.28181)"
        id="g6776">
       <rect
-         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
+         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
          id="rect6778"
          width="88.361748"
          height="37.86932"
@@ -1958,32 +1949,13 @@
     </g>
     <path
        style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-mid:none;marker-end:url(#marker20517)"
-       d="m 127.25558,1023.9176 0.30348,-67.22466"
+       d="m 127.25558,1031.0042 0.30348,-67.22464"
        id="path6792"
        inkscape:connector-type="polyline"
        sodipodi:nodetypes="cc"
        inkscape:connector-curvature="0" />
     <g
-       transform="matrix(0.56140018,0,0,0.56140018,158.57857,802.15582)"
-       id="g6696"
-       style="stroke-width:1.77165353;stroke-miterlimit:4;stroke-dasharray:none">
-      <rect
-         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
-         id="rect6698"
-         width="88.36174"
-         height="37.86932"
-         x="14.173247"
-         y="237.40155"
-         ry="0" />
-      <flowRoot
-         xml:space="preserve"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.35945415px;line-height:122.00000286%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-         id="flowRoot6700"
-         transform="translate(58.315709,261.25917)"><flowRegion
-           id="flowRegion6702" /><flowPara
-           id="flowPara6706">Select</flowPara></flowRoot>    </g>
-    <g
-       transform="matrix(0.56140018,0,0,0.56140018,215.27148,802.15582)"
+       transform="matrix(0.56140018,0,0,0.56140018,158.57857,809.24244)"
        id="g6720">
       <rect
          style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
@@ -2003,18 +1975,18 @@
     <path
        sodipodi:nodetypes="cc"
        style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-mid:none"
-       d="m 88.582677,998.79959 0.588446,-0.0774"
+       d="m 88.582677,1005.9023 0.588446,-0.093"
        id="path7429"
        inkscape:connector-type="polyline"
        inkscape:connection-start="#g6768"
        inkscape:connector-curvature="0" />
     <flowRoot
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3594541px;line-height:122%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.35945415px;line-height:122.00000286%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        id="flowRoot8724"
        xml:space="preserve"
-       transform="matrix(0.56140019,0,0,0.56140019,-101.54462,557.11682)"><flowRegion
+       transform="matrix(0.56140019,0,0,0.56140019,-101.54462,564.20344)"><flowRegion
          id="flowRegion8726"><rect
-           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3594541px;line-height:122%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr;text-anchor:middle;fill:#000000;fill-opacity:1;"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.35945415px;line-height:122.00000286%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1"
            y="752.14441"
            x="39.286312"
            height="22.868153"
@@ -2023,131 +1995,124 @@
          id="flowPara8730" /></flowRoot>    <path
        sodipodi:nodetypes="cc"
        style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-mid:none"
-       d="m 165.60285,861.02365 -23.87057,0"
+       d="m 165.60285,868.11027 -23.87057,0"
        id="path49768"
        inkscape:connector-type="polyline"
        inkscape:connector-curvature="0" />
     <g
-       transform="matrix(0.28070009,0,0,0.28070009,-43.527845,557.56261)"
+       transform="matrix(0.28070009,0,0,0.28070009,-43.527845,564.64923)"
        id="g18053" />
     <g
-       transform="matrix(0.56140018,0,0,0.56140018,69.995892,749.00621)"
+       transform="matrix(0.56140018,0,0,0.56140018,36.863129,725.57078)"
        id="g2655">
       <rect
-         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
+         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
          id="rect2657"
-         width="77.952736"
-         height="35.433075"
-         x="14.173247"
-         y="237.40155"
+         width="75.738647"
+         height="37.869316"
+         x="16.387346"
+         y="234.96532"
          ry="0" />
       <flowRoot
          xml:space="preserve"
          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.35945415px;line-height:122.00000286%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
          id="flowRoot2659"
-         transform="translate(53.052936,259.79934)"><flowRegion
+         transform="translate(54.153341,258.90309)"><flowRegion
            id="flowRegion2661" /><flowPara
            id="flowPara2665">Slider</flowPara></flowRoot>    </g>
     <path
        style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 88.582677,970.86616 77.579323,0"
+       d="m 88.582677,977.95278 77.579323,0"
        id="path22338"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
     <path
        style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 88.815642,998.60611 77.934798,0.11604"
+       d="m 88.815642,1005.6927 77.934798,0.1161"
        id="path22338-5"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
     <path
        style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 89.171122,1024.582 77.579318,0"
+       d="m 89.171122,1031.6686 77.579318,0"
        id="path22338-1"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
     <path
        style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 95.669291,861.02365 17.716539,0"
+       d="m 88.582677,868.11027 24.803153,0"
        id="path22338-3"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
     <path
        style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ff3a49;stroke-width:0.99460661;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-mid:none;marker-end:url(#marker20517-3)"
-       d="m 127.55906,935.43309 0,-92.12598"
+       d="m 127.55906,942.51971 0,-92.12598"
        id="path6792-3"
        inkscape:connector-type="polyline"
        sodipodi:nodetypes="cc"
-       inkscape:connector-curvature="0"
-       transform="translate(-4.8818897e-6,-1.3172053e-7)" />
+       inkscape:connector-curvature="0" />
     <path
        style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ff3a49;stroke-width:0.99460661;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-mid:none;marker-end:url(#marker20517-3-0-9)"
-       d="m 42.519685,822.04727 0,-10.62992"
+       d="m 42.519685,829.13389 0,-10.62992"
        id="path6792-3-8-0"
        inkscape:connector-type="polyline"
        sodipodi:nodetypes="cc"
        inkscape:connector-curvature="0" />
     <path
        style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ff3a49;stroke-width:0.99460661;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-mid:none;marker-end:url(#marker20517-3-0-9-0)"
-       d="m 127.55906,822.04727 0,-10.62992"
+       d="m 127.55906,829.13389 0,-10.62992"
        id="path6792-3-8-0-3"
        inkscape:connector-type="polyline"
        sodipodi:nodetypes="cc"
        inkscape:connector-curvature="0" />
     <path
        style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99566931;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker24201)"
-       d="m 113.38583,882.28349 0,-38.97638"
+       d="m 88.582677,896.45673 24.803153,0 0,-46.063"
        id="path22338-0"
        inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cc" />
+       sodipodi:nodetypes="ccc" />
     <path
        style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99566931;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker24201-0)"
-       d="m 141.73228,917.71656 0,-74.40945"
+       d="m 141.73228,896.45673 0,-46.063"
        id="path22338-0-6"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
     <path
        style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ff3a49;stroke-width:0.99460661;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-mid:none;marker-end:url(#marker20517-3-0-9-0-5)"
-       d="m 95.669291,832.67719 -10.629921,0"
+       d="m 95.669291,839.76381 -10.629921,0"
        id="path6792-3-8-0-3-3"
        inkscape:connector-type="polyline"
        sodipodi:nodetypes="cc"
        inkscape:connector-curvature="0" />
-    <path
-       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 141.73228,917.71656 24.80315,0"
-       id="path22338-37"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cc" />
     <path
        style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99566931;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker24201-3)"
-       d="m 219.68504,832.67719 -7.08661,0"
+       d="m 166.53543,839.76382 -7.08661,0"
        id="path22338-0-8"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
     <path
        style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99566931;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker24201-3-5)"
-       d="m 219.68504,861.02365 -7.08661,0"
+       d="m 219.68504,868.11027 -7.08661,0"
        id="path22338-0-8-4"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
     <path
        style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99566931;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker24201-3-2)"
-       d="m 219.68504,889.37011 -7.08661,0"
+       d="m 219.68504,896.45673 -7.08661,0"
        id="path22338-0-8-46"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
     <path
        style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99566931;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker24201-3-56)"
-       d="m 223.22835,946.06302 -7.08661,0"
+       d="m 166.53544,953.14964 -7.08661,0"
        id="path22338-0-8-6"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
     <path
-       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99566931;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker24201-3-7)"
-       d="m 166.53543,832.67719 -7.08661,0"
-       id="path22338-0-8-62"
+       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99566931;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker24201-3-2-4)"
+       d="m 219.68504,924.80318 -28.34646,0 0,-17.71653"
+       id="path22338-0-8-46-8"
        inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cc" />
+       sodipodi:nodetypes="ccc" />
   </g>
 </svg>
diff --git a/documentation/components/original-drawings/slider-example1.svg b/documentation/components/original-drawings/slider-example1.svg
index 2548aa360b..17bdf0b574 100644
--- a/documentation/components/original-drawings/slider-example1.svg
+++ b/documentation/components/original-drawings/slider-example1.svg
@@ -68,9 +68,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="1"
      inkscape:pageshadow="2"
-     inkscape:zoom="1.4"
-     inkscape:cx="140.18358"
-     inkscape:cy="87.607372"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="184.27652"
+     inkscape:cy="277.48621"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      gridtolerance="10000"
@@ -101,24 +101,24 @@
      inkscape:groupmode="layer"
      id="layer1"
      style="opacity:1"
-     transform="translate(-67.505424,-64.081154)">
+     transform="translate(-4.8759656,-811.59399)">
     <rect
        style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
        id="rect3344"
        width="249"
        height="236"
-       x="67.505424"
-       y="64.081154" />
+       x="4.8759656"
+       y="811.59399" />
     <image
        sodipodi:absref="/home/magi/itmill/vaadin/documentation/components/original-drawings/../img/slider-orig.png"
        xlink:href="../img/slider-orig.png"
        width="249"
        height="236"
        id="image2463"
-       x="67.505424"
-       y="64.081154" />
+       x="4.8759656"
+       y="811.59399" />
     <g
-       transform="matrix(0.04895833,0,0,0.04895833,85.307423,133.89853)"
+       transform="matrix(0.04895833,0,0,0.04895833,22.677965,881.41142)"
        id="g1317">
       <path
          id="path6080"
-- 
cgit v1.2.3