@carbon/charts 0.41.89 → 0.41.93

package/styles/vendor/carbon-components/html/dropdown/dropdown.html

@@ -6,155 +6,277 @@
 -->
 <div class="bx--form-item">
   <div class="bx--dropdown__wrapper ">
-    <span id="example-qlz1ek2hlfs-label" class="bx--label">Dropdown label</span>
-    <div class="bx--form__helper-text">Optional helper text.</div>
+    <span id="example-bi7xbskkgv-label" class="bx--label">Dropdown label</span>
     <div data-dropdown data-value
       class="bx--dropdown   ">
-      <button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-qlz1ek2hlfs-menu" aria-labelledby="example-qlz1ek2hlfs-label example-qlz1ek2hlfs-value" type="button">
-        <span class="bx--dropdown-text__inner" id="example-qlz1ek2hlfs-value"> Dropdown option </span>
+      <button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false"
+        aria-controls="example-bi7xbskkgv-menu"
+        aria-labelledby="example-bi7xbskkgv-label example-bi7xbskkgv-value" type="button">
+        <span class="bx--dropdown-text__inner" id="example-bi7xbskkgv-value"> Dropdown
+          option </span>
         <span class="bx--dropdown__arrow-container">
-          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
+          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg>
         </span>
       </button>
-      <ul class="bx--dropdown-list" id="example-qlz1ek2hlfs-menu" role="menu" tabindex="0" id="example-qlz1ek2hlfs-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-qlz1ek2hlfs-label">
-        <li data-option data-value="all" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-qlz1ek2hlfs-item0">Option 1</a>
+      <ul class="bx--dropdown-list" id="example-bi7xbskkgv-menu" role="menu" tabindex="-1"
+        id="example-bi7xbskkgv-menu" aria-hidden="true" aria-labelledby="example-bi7xbskkgv-label">
+        <li data-option data-value="all" class="bx--dropdown-item" title="Option 1">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="true"
+            id="example-bi7xbskkgv-item0">Option 1</a>
         </li>
-        <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-qlz1ek2hlfs-item1">Option 2</a>
+        <li data-option data-value="cloudFoundry" class="bx--dropdown-item" title="Option 2">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-bi7xbskkgv-item1">Option 2</a>
         </li>
-        <li data-option data-value="staging" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-qlz1ek2hlfs-item2">Option 3</a>
+        <li data-option data-value="staging" class="bx--dropdown-item" title="Option 3">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-bi7xbskkgv-item2">Option 3</a>
         </li>
-        <li data-option data-value="dea" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-qlz1ek2hlfs-item3">Option 4</a>
+        <li data-option data-value="dea" class="bx--dropdown-item" title="Option 4">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-bi7xbskkgv-item3">Option 4</a>
         </li>
-        <li data-option data-value="router" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-qlz1ek2hlfs-item4">Option 5</a>
+        <li data-option data-value="router" class="bx--dropdown-item" title="Option 5">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-bi7xbskkgv-item4">Option 5</a>
         </li>
-        <li data-option data-value="loremipsum" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-qlz1ek2hlfs-item5">An example option that is really long to show what should be done to handle long text</a>
+        <li data-option data-value="loremipsum" class="bx--dropdown-item" title="An example option that is really long to show what should be done to handle long text">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-bi7xbskkgv-item5">An example option that is really long to show what should be done to handle long text</a>
         </li>
       </ul>
     </div>
+    <div class="bx--form__helper-text">Optional helper text.</div>
   </div>
 </div>
 
 <div class="bx--form-item">
   <div class="bx--dropdown__wrapper ">
-    <span id="example-rzmbrltvfq-label" class="bx--label">Dropdown label</span>
-    <div class="bx--form__helper-text">Optional helper text here; if message is more than one line text
-      should wrap (~100 character count maximum)</div>
+    <span id="example-fvzds9esr7s-label" class="bx--label">Dropdown label</span>
     <div data-dropdown data-value
       class="bx--dropdown   ">
-      <button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-rzmbrltvfq-menu" aria-labelledby="example-rzmbrltvfq-label example-rzmbrltvfq-value" type="button">
-        <span class="bx--dropdown-text__inner" id="example-rzmbrltvfq-value"> Dropdown option </span>
+      <button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false"
+        aria-controls="example-fvzds9esr7s-menu" aria-labelledby="example-fvzds9esr7s-label example-fvzds9esr7s-value"
+        type="button">
+        <span class="bx--dropdown-text__inner" id="example-fvzds9esr7s-value"> Dropdown
+          option </span>
         <span class="bx--dropdown__arrow-container">
-          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
+          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg>
         </span>
       </button>
-      <ul class="bx--dropdown-list"  role="menu" tabindex="0" id="example-rzmbrltvfq-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-rzmbrltvfq-label">
-        <li data-option data-value="all" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-rzmbrltvfq-item0">Option 1</a>
+      <ul class="bx--dropdown-list" role="menu" tabindex="-1" id="example-fvzds9esr7s-menu"
+        aria-hidden="true" aria-labelledby="example-fvzds9esr7s-label">
+        <li data-option data-value="all" class="bx--dropdown-item" title="Option 1">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="true"
+            id="example-fvzds9esr7s-item0">Option 1</a>
         </li>
-        <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-rzmbrltvfq-item1">Option 2</a>
+        <li data-option data-value="cloudFoundry" class="bx--dropdown-item" title="Option 2">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-fvzds9esr7s-item1">Option 2</a>
         </li>
-        <li data-option data-value="staging" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-rzmbrltvfq-item2">Option 3</a>
+        <li data-option data-value="staging" class="bx--dropdown-item" title="Option 3">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-fvzds9esr7s-item2">Option 3</a>
         </li>
-        <li data-option data-value="dea" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-rzmbrltvfq-item3">Option 4</a>
+        <li data-option data-value="dea" class="bx--dropdown-item" title="Option 4">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-fvzds9esr7s-item3">Option 4</a>
         </li>
-        <li data-option data-value="router" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-rzmbrltvfq-item4">Option 5</a>
+        <li data-option data-value="router" class="bx--dropdown-item" title="Option 5">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-fvzds9esr7s-item4">Option 5</a>
         </li>
-        <li data-option data-value="loremipsum" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-rzmbrltvfq-item5">An example option that is really long to show what should be done to handle long text</a>
+        <li data-option data-value="loremipsum" class="bx--dropdown-item" title="An example option that is really long to show what should be done to handle long text">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-fvzds9esr7s-item5">An example option that is really long to show what should be done to handle long text</a>
         </li>
       </ul>
     </div>
+    <div class="bx--form__helper-text">Optional helper text here; if message is more than one line text
+      should wrap (~100 character count maximum)</div>
   </div>
 </div>
 
 <div class="bx--form-item">
   <div class="bx--dropdown__wrapper ">
-    <span id="example-abon5kuvwea-label" class="bx--label bx--label--disabled" aria-disabled="true">Dropdown label</span>
-    <div class="bx--form__helper-text bx--form__helper-text--disabled" aria-disabled="true">Optional helper text
-      here; if message is more than one line text
-      should wrap (~100 character count maximum)</div>
+    <span id="example-cotg8n7ekyb-label" class="bx--label bx--label--disabled"
+      aria-disabled="true">Dropdown label</span>
     <div data-dropdown data-value
       class="bx--dropdown bx--dropdown--disabled">
-      <button disabled class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-abon5kuvwea-menu" aria-labelledby="example-abon5kuvwea-label example-abon5kuvwea-value" type="button">
-        <span class="bx--dropdown-text__inner" id="example-abon5kuvwea-value"> Dropdown option </span>
+      <button disabled class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false"
+        aria-controls="example-cotg8n7ekyb-menu"
+        aria-labelledby="example-cotg8n7ekyb-label example-cotg8n7ekyb-value" type="button">
+        <span class="bx--dropdown-text__inner" id="example-cotg8n7ekyb-value">
+          Dropdown option </span>
         <span class="bx--dropdown__arrow-container">
-          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
+          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg>
         </span>
       </button>
       <!-- Note: remove `tabindex` from disabled dropdown lists -->
-      <ul class="bx--dropdown-list" id="example-abon5kuvwea-menu" role="menu" id="example-abon5kuvwea-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-abon5kuvwea-label">
-        <li data-option data-value="all" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-abon5kuvwea-item0">Option 1</a>
+      <ul class="bx--dropdown-list" id="example-cotg8n7ekyb-menu" role="menu"
+        id="example-cotg8n7ekyb-menu" aria-hidden="true" aria-labelledby="example-cotg8n7ekyb-label">
+        <li data-option data-value="all" class="bx--dropdown-item" title="Option 1">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="true"
+            id="example-cotg8n7ekyb-item0">Option 1</a>
         </li>
-        <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-abon5kuvwea-item1">Option 2</a>
+        <li data-option data-value="cloudFoundry" class="bx--dropdown-item" title="Option 2">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-cotg8n7ekyb-item1">Option 2</a>
         </li>
-        <li data-option data-value="staging" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-abon5kuvwea-item2">Option 3</a>
+        <li data-option data-value="staging" class="bx--dropdown-item" title="Option 3">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-cotg8n7ekyb-item2">Option 3</a>
         </li>
-        <li data-option data-value="dea" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-abon5kuvwea-item3">Option 4</a>
+        <li data-option data-value="dea" class="bx--dropdown-item" title="Option 4">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-cotg8n7ekyb-item3">Option 4</a>
         </li>
-        <li data-option data-value="router" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-abon5kuvwea-item4">Option 5</a>
+        <li data-option data-value="router" class="bx--dropdown-item" title="Option 5">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-cotg8n7ekyb-item4">Option 5</a>
         </li>
-        <li data-option data-value="loremipsum" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-abon5kuvwea-item5">An example option that is really long to show what should be done to handle long text</a>
+        <li data-option data-value="loremipsum" class="bx--dropdown-item" title="An example option that is really long to show what should be done to handle long text">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-cotg8n7ekyb-item5">An example option that is really long to show what should be done to handle long text</a>
         </li>
       </ul>
     </div>
+    <div class="bx--form__helper-text bx--form__helper-text--disabled" aria-disabled="true">
+      Optional helper text
+      here; if message is more than one line text
+      should wrap (~100 character count maximum)</div>
   </div>
 </div>
 
 <div class="bx--form-item">
-  <div class="bx--dropdown__wrapper ">
-    <span id="example-1pbujkco76q-label" class="bx--label">Dropdown label</span>
-    <div class="bx--form__helper-text">Optional helper text
-      here; if message is more than one line text
-      should wrap (~100 character count maximum)</div>
+  <div
+    class="bx--dropdown__wrapper ">
+    <span id="example-dd769vzo7y9-label" class="bx--label">Dropdown label</span>
     <div data-dropdown data-value
       class="bx--dropdown bx--dropdown--invalid  "
       data-invalid>
-      <button  class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="example-1pbujkco76q-menu" aria-labelledby="example-1pbujkco76q-label example-1pbujkco76q-value" type="button">
-        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__invalid-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.2 1 1 4.2 1 8s3.2 7 7 7 7-3.1 7-7-3.1-7-7-7zm-.5 3h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z"></path><path d="M7.5 4h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z" data-icon-path="inner-path" opacity="0"></path></svg>
-        <span class="bx--dropdown-text__inner" id="example-1pbujkco76q-value"> Dropdown option </span>
+      <button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false"
+        aria-controls="example-dd769vzo7y9-menu"
+        aria-labelledby="example-dd769vzo7y9-label example-dd769vzo7y9-value" type="button">
+        <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--dropdown__invalid-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.1,7-7S11.9,1,8,1z M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2	c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z"></path><path d="M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8	c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z" data-icon-path="inner-path" opacity="0"></path></svg>
+        <span class="bx--dropdown-text__inner" id="example-dd769vzo7y9-value"> Dropdown
+          option </span>
         <span class="bx--dropdown__arrow-container">
-          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
+          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg>
         </span>
       </button>
-      <ul class="bx--dropdown-list" id="example-1pbujkco76q-menu" role="menu" tabindex="0" id="example-1pbujkco76q-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="example-1pbujkco76q-label">
-        <li data-option data-value="all" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="true" id="example-1pbujkco76q-item0">Option 1</a>
+      <ul class="bx--dropdown-list" id="example-dd769vzo7y9-menu" role="menu" tabindex="-1"
+        id="example-dd769vzo7y9-menu" aria-hidden="true" aria-labelledby="example-dd769vzo7y9-label">
+        <li data-option data-value="all" class="bx--dropdown-item" title="Option 1">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="true"
+            id="example-dd769vzo7y9-item0">Option 1</a>
         </li>
-        <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-1pbujkco76q-item1">Option 2</a>
+        <li data-option data-value="cloudFoundry" class="bx--dropdown-item" title="Option 2">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-dd769vzo7y9-item1">Option 2</a>
         </li>
-        <li data-option data-value="staging" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-1pbujkco76q-item2">Option 3</a>
+        <li data-option data-value="staging" class="bx--dropdown-item" title="Option 3">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-dd769vzo7y9-item2">Option 3</a>
         </li>
-        <li data-option data-value="dea" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-1pbujkco76q-item3">Option 4</a>
+        <li data-option data-value="dea" class="bx--dropdown-item" title="Option 4">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-dd769vzo7y9-item3">Option 4</a>
         </li>
-        <li data-option data-value="router" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-1pbujkco76q-item4">Option 5</a>
+        <li data-option data-value="router" class="bx--dropdown-item" title="Option 5">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-dd769vzo7y9-item4">Option 5</a>
         </li>
-        <li data-option data-value="loremipsum" class="bx--dropdown-item">
-          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="false" id="example-1pbujkco76q-item5">An example option that is really long to show what should be done to handle long text</a>
+        <li data-option data-value="loremipsum" class="bx--dropdown-item" title="An example option that is really long to show what should be done to handle long text">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-dd769vzo7y9-item5">An example option that is really long to show what should be done to handle long text</a>
         </li>
       </ul>
     </div>
     <div class="bx--form-requirement">
-      This is not a validation message
+      This is a validation message
     </div>
   </div>
 </div>
+
+<div class="bx--form-item">
+  <div class="bx--dropdown__wrapper ">
+    <span id="example-bi7xbskkgv-label" class="bx--label">Dropdown label</span>
+    <div data-dropdown data-value
+      class="bx--dropdown  bx--dropdown--show-selected   ">
+      <button class="bx--dropdown-text" aria-haspopup="true" aria-expanded="false"
+        aria-controls="example-bi7xbskkgv-menu"
+        aria-labelledby="example-bi7xbskkgv-label example-bi7xbskkgv-value" type="button">
+        <span class="bx--dropdown-text__inner" id="example-bi7xbskkgv-value"> Dropdown
+          option </span>
+        <span class="bx--dropdown__arrow-container">
+          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg>
+        </span>
+      </button>
+      <ul class="bx--dropdown-list" id="example-bi7xbskkgv-menu" role="menu" tabindex="-1"
+        id="example-bi7xbskkgv-menu" aria-hidden="true" aria-labelledby="example-bi7xbskkgv-label">
+        <li data-option data-value="all" class="bx--dropdown-item" title="Option 1">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="true"
+            id="example-bi7xbskkgv-item0">Option 1</a>
+          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" class="bx--list-box__menu-item__selected-icon" width="16" height="16" viewBox="0 0 32 32"><path d="M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z"></path></svg>
+        </li>
+        <li data-option data-value="cloudFoundry" class="bx--dropdown-item" title="Option 2">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-bi7xbskkgv-item1">Option 2</a>
+          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" class="bx--list-box__menu-item__selected-icon" width="16" height="16" viewBox="0 0 32 32"><path d="M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z"></path></svg>
+        </li>
+        <li data-option data-value="staging" class="bx--dropdown-item" title="Option 3">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-bi7xbskkgv-item2">Option 3</a>
+          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" class="bx--list-box__menu-item__selected-icon" width="16" height="16" viewBox="0 0 32 32"><path d="M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z"></path></svg>
+        </li>
+        <li data-option data-value="dea" class="bx--dropdown-item" title="Option 4">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-bi7xbskkgv-item3">Option 4</a>
+          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" class="bx--list-box__menu-item__selected-icon" width="16" height="16" viewBox="0 0 32 32"><path d="M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z"></path></svg>
+        </li>
+        <li data-option data-value="router" class="bx--dropdown-item" title="Option 5">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-bi7xbskkgv-item4">Option 5</a>
+          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" class="bx--list-box__menu-item__selected-icon" width="16" height="16" viewBox="0 0 32 32"><path d="M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z"></path></svg>
+        </li>
+        <li data-option data-value="loremipsum" class="bx--dropdown-item" title="An example option that is really long to show what should be done to handle long text">
+          <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
+            aria-checked="false"
+            id="example-bi7xbskkgv-item5">An example option that is really long to show what should be done to handle long text</a>
+          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" class="bx--list-box__menu-item__selected-icon" width="16" height="16" viewBox="0 0 32 32"><path d="M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z"></path></svg>
+        </li>
+      </ul>
+    </div>
+    <div class="bx--form__helper-text">Optional helper text.</div>
+  </div>
+</div>

package/styles/vendor/carbon-components/html/file-uploader/file-uploader--example-upload-states.html

@@ -9,41 +9,44 @@
   <strong class="bx--file--label">Account
     photo</strong>
   <p class="bx--label-description">Only .jpg and .png files. 500kb max file size.</p>
-  <div class="bx--file" data-file>
-    <label for="your-file-importer-id-here"
-      class="bx--file-btn bx--btn bx--btn--primary"
-      role="button" tabindex="0">Add file</label>
-    <input type="file" class="bx--file-input" id="your-file-importer-id-here" data-file-uploader
-      data-target="[data-file-container]" multiple />
+  <div class="bx--file" data-file data-file-demo-state-manager>
+    <label for="prepopulated-file-uploader" class="bx--file-browse-btn" role="button" tabindex="0">
+      <div data-file-drop-container class="bx--file__drop-container">
+        Drag and drop files here or
+        upload
+        <input type="file" class="bx--file-input" id="prepopulated-file-uploader" data-file-uploader
+          data-target="[data-file-container]" multiple />
+      </div>
+    </label>
     <div data-file-container class="bx--file-container">
       <div class="bx--file__selected-file">
         <p class="bx--file-filename">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero vero
           sapiente illum reprehenderit molestiae perferendis voluptatem temporibus laudantium ducimus magni voluptatum
           veniam, odit nesciunt corporis numquam maxime sunt excepturi sint!</p>
-        <span data-for="your-file-importer-id-here" class="bx--file__state-container">
-          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--file-complete" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zM7 11L4.3 8.3l.9-.8L7 9.3l4-3.9.9.8L7 11z"></path><path d="M7 11L4.3 8.3l.9-.8L7 9.3l4-3.9.9.8L7 11z" data-icon-path="inner-path" opacity="0"></path></svg>
+        <span data-for="prepopulated-file-uploader" class="bx--file__state-container">
+          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--file-complete" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7s7-3.1,7-7C15,4.1,11.9,1,8,1z M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z"></path><path d="M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z" data-icon-path="inner-path" opacity="0"></path></svg>
         </span>
       </div>
-      <div class="bx--file__selected-file--invalid__wrapper">
-        <div class="bx--file__selected-file bx--file__selected-file--invalid" data-invalid>
-          <p class="bx--file-filename">color.jpeg</p>
-          <span data-for="your-file-importer-id-here" class="bx--file__state-container">
-            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--file--invalid" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.2 1 1 4.2 1 8s3.2 7 7 7 7-3.1 7-7-3.1-7-7-7zm-.5 3h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z"></path><path d="M7.5 4h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z" data-icon-path="inner-path" opacity="0"></path></svg>
-            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--file--close" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
-          </span>
-        </div>
+      <div class="bx--file__selected-file bx--file__selected-file--invalid" data-invalid>
+        <p class="bx--file-filename">color.jpeg</p>
+        <span data-for="prepopulated-file-uploader" class="bx--file__state-container">
+          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--file--invalid" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.1,7-7S11.9,1,8,1z M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2	c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z"></path><path d="M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8	c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z" data-icon-path="inner-path" opacity="0"></path></svg>
+          <svg focusable="true" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-label="Remove uploaded file" class="bx--file-close" width="16" height="16" viewBox="0 0 32 32" role="img" tabindex="0"><path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></path></svg>
+        </span>
         <div class="bx--form-requirement">
-          File size exceeds limit
+          <div class="bx--form-requirement__title">File size exceeds limit.</div>
+          <p class="bx--form-requirement__supplement">500 kb max file size. Select a new file and try
+            again.</p>
         </div>
       </div>
       <div class="bx--file__selected-file">
         <p class="bx--file-filename">color.jpeg</p>
-        <span data-for="your-file-importer-id-here" class="bx--file__state-container">
+        <span data-for="prepopulated-file-uploader" class="bx--file__state-container">
           <div class="bx--inline-loading__animation">
             <div data-inline-loading-spinner="" class="bx--loading bx--loading--small">
               <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
-                <circle class="bx--loading__background" cx="0" cy="0" r="37.5"></circle>
-                <circle class="bx--loading__stroke" cx="0" cy="0" r="37.5"></circle>
+                <circle class="bx--loading__background" cx="0" cy="0" r="26.8125"></circle>
+                <circle class="bx--loading__stroke" cx="0" cy="0" r="26.8125"></circle>
               </svg>
             </div>
           </div>

package/styles/vendor/carbon-components/html/file-uploader/file-uploader--legacy-with-example-upload-states.html

@@ -0,0 +1,53 @@
+<!--
+  Copyright IBM Corp. 2016, 2018
+
+  This source code is licensed under the Apache-2.0 license found in the
+  LICENSE file in the root directory of this source tree.
+-->
+
+<div class="bx--form-item">
+  <strong class="bx--file--label">Account
+    photo</strong>
+  <p class="bx--label-description">Only .jpg and .png files. 500kb max file size.</p>
+  <div class="bx--file" data-file data-file-demo-state-manager>
+    <label for="legacy-file-uploader" class="bx--file-btn bx--btn bx--btn--primary"
+      role="button" tabindex="0">Add file</label>
+    <input type="file" class="bx--file-input" id="legacy-file-uploader" data-file-uploader
+      data-target="[data-file-container]" multiple />
+    <div data-file-container data-file-drop-container class="bx--file-container">
+      <div class="bx--file__selected-file">
+        <p class="bx--file-filename">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero vero
+          sapiente illum reprehenderit molestiae perferendis voluptatem temporibus laudantium ducimus magni voluptatum
+          veniam, odit nesciunt corporis numquam maxime sunt excepturi sint!</p>
+        <span data-for="legacy-file-uploader-states" class="bx--file__state-container">
+          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--file-complete" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7s7-3.1,7-7C15,4.1,11.9,1,8,1z M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z"></path><path d="M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z" data-icon-path="inner-path" opacity="0"></path></svg>
+        </span>
+      </div>
+      <div class="bx--file__selected-file bx--file__selected-file--invalid" data-invalid>
+        <p class="bx--file-filename">color.jpeg</p>
+        <span data-for="legacy-file-uploader-states" class="bx--file__state-container">
+          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--file--invalid" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.1,7-7S11.9,1,8,1z M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2	c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z"></path><path d="M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8	c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z" data-icon-path="inner-path" opacity="0"></path></svg>
+          <svg focusable="true" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-label="Remove uploaded file" class="bx--file-close" width="16" height="16" viewBox="0 0 32 32" role="img" tabindex="0"><path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></path></svg>
+        </span>
+        <div class="bx--form-requirement">
+          <div class="bx--form-requirement__title">File size exceeds limit.</div>
+          <p class="bx--form-requirement__supplement">500 kb max file size. Select a new file and try
+            again.</p>
+        </div>
+      </div>
+      <div class="bx--file__selected-file">
+        <p class="bx--file-filename">color.jpeg</p>
+        <span data-for="legacy-file-uploader-states" class="bx--file__state-container">
+          <div class="bx--inline-loading__animation">
+            <div data-inline-loading-spinner="" class="bx--loading bx--loading--small">
+              <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
+                <circle class="bx--loading__background" cx="0" cy="0" r="26.8125"></circle>
+                <circle class="bx--loading__stroke" cx="0" cy="0" r="26.8125"></circle>
+              </svg>
+            </div>
+          </div>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>

package/styles/vendor/carbon-components/html/file-uploader/file-uploader--legacy.html

@@ -0,0 +1,20 @@
+<!--
+  Copyright IBM Corp. 2016, 2018
+
+  This source code is licensed under the Apache-2.0 license found in the
+  LICENSE file in the root directory of this source tree.
+-->
+
+<div class="bx--form-item">
+  <strong class="bx--file--label">Account
+    photo</strong>
+  <p class="bx--label-description">Only .jpg and .png files. 500kb max file size.</p>
+  <div class="bx--file" data-file data-file-demo-state-manager>
+    <label for="legacy-file-uploader" class="bx--file-btn bx--btn bx--btn--primary"
+      role="button" tabindex="0">Add file</label>
+    <input type="file" class="bx--file-input" id="legacy-file-uploader" data-file-uploader
+      data-target="[data-file-container]" multiple />
+    <div data-file-container data-file-drop-container class="bx--file-container">
+    </div>
+  </div>
+</div>

package/styles/vendor/carbon-components/html/file-uploader/file-uploader.html

@@ -9,12 +9,15 @@
   <strong class="bx--file--label">Account
     photo</strong>
   <p class="bx--label-description">Only .jpg and .png files. 500kb max file size.</p>
-  <div class="bx--file" data-file>
-    <label for="your-file-importer-id-here"
-      class="bx--file-btn bx--btn bx--btn--primary"
-      role="button" tabindex="0">Add file</label>
-    <input type="file" class="bx--file-input" id="your-file-importer-id-here" data-file-uploader
-      data-target="[data-file-container]" multiple />
+  <div class="bx--file" data-file data-file-demo-state-manager>
+    <label for="file-uploader" class="bx--file-browse-btn" role="button" tabindex="0">
+      <div data-file-drop-container class="bx--file__drop-container">
+        Drag and drop files here or
+        upload
+        <input type="file" class="bx--file-input" id="file-uploader" data-file-uploader
+          data-target="[data-file-container]" multiple />
+      </div>
+    </label>
     <div data-file-container class="bx--file-container">
     </div>
   </div>

package/styles/vendor/carbon-components/html/form/form--light.html

@@ -7,20 +7,20 @@
 
 <div class="bx--form-item">
   <label for="text-input-3" class="bx--label">Text Input label</label>
-  <div class="bx--form__helper-text">
-    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
-  </div>
   <input id="text-input-3" type="text"
     class="bx--text-input bx--text-input--light"
     placeholder="Optional placeholder text">
+  <div class="bx--form__helper-text">
+    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+  </div>
 </div>
 <div class="bx--form-item">
   <label for="text-area-2" class="bx--label">Text Area label</label>
+  <textarea id="text-area-2" class="bx--text-area bx--text-area--light"
+    rows="4" cols="50" placeholder="Placeholder text."></textarea>
   <div class="bx--form__helper-text">
     Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
   </div>
-  <textarea id="text-area-2" class="bx--text-area bx--text-area--light"
-    rows="4" cols="50" placeholder="Placeholder text."></textarea>
 </div>
 <div class="bx--form-item">
   <div
@@ -34,7 +34,7 @@
         <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>          <optgroup class="bx--select-optgroup" label="Category 1">
           <option class="bx--select-option" value="option1" >Option 1 </option>           <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>          <optgroup class="bx--select-optgroup" label="Category 2">
           <option class="bx--select-option" value="option1" >Option 1 </option>           <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
-      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
+      <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z"></path></svg>
     </div>
   </div>
 </div>