@carbon/charts 0.41.91 → 0.41.95

package/styles/vendor/carbon-components/scripts/carbon-components.js

@@ -24,16 +24,59 @@ var CarbonComponents = (function (exports) {
    * // @todo given that the default value is so long, is it appropriate to put in the JSDoc?
    * @property {string} [selectorTabbable]
    *   A selector selecting tabbable/focusable nodes.
-   *   By default selectorTabbable refereneces links, areas, inputs, buttons, selects, textareas,
+   *   By default selectorTabbable references links, areas, inputs, buttons, selects, textareas,
    *   iframes, objects, embeds, or elements explicitly using tabindex or contenteditable attributes
    *   as long as the element is not `disabled` or the `tabindex="-1"`.
+   * @property {string} [selectorFocusable]
+   *   CSS selector that selects major nodes that are click focusable
+   *   This property is identical to selectorTabbable with the exception of
+   *   the `:not([tabindex='-1'])` pseudo class
    */
   var settings = {
     prefix: 'bx',
-    selectorTabbable: "\n    a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n    button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n    textarea:not([disabled]):not([tabindex='-1']),\n    iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true]\n  "
+    selectorTabbable: "\n    a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n    button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n    textarea:not([disabled]):not([tabindex='-1']),\n    iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true]\n  ",
+    selectorFocusable: "\n    a[href], area[href], input:not([disabled]),\n    button:not([disabled]),select:not([disabled]),\n    textarea:not([disabled]),\n    iframe, object, embed, *[tabindex], *[contenteditable=true]\n  "
   };
   var settings_1 = settings;
 
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+
+      if (enumerableOnly) {
+        symbols = symbols.filter(function (sym) {
+          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+      }
+
+      keys.push.apply(keys, symbols);
+    }
+
+    return keys;
+  }
+
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          _defineProperty(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+    }
+
+    return target;
+  }
+
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
@@ -71,40 +114,6 @@ var CarbonComponents = (function (exports) {
     return obj;
   }
 
-  function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-
-    if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      if (enumerableOnly) symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-      keys.push.apply(keys, symbols);
-    }
-
-    return keys;
-  }
-
-  function _objectSpread2(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-
-      if (i % 2) {
-        ownKeys(source, true).forEach(function (key) {
-          _defineProperty(target, key, source[key]);
-        });
-      } else if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-      } else {
-        ownKeys(source).forEach(function (key) {
-          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-      }
-    }
-
-    return target;
-  }
-
   function _inherits(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
       throw new TypeError("Super expression must either be null or a function");
@@ -136,6 +145,19 @@ var CarbonComponents = (function (exports) {
     return _setPrototypeOf(o, p);
   }
 
+  function _isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+
+    try {
+      Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
   function _assertThisInitialized(self) {
     if (self === void 0) {
       throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
@@ -152,6 +174,25 @@ var CarbonComponents = (function (exports) {
     return _assertThisInitialized(self);
   }
 
+  function _createSuper(Derived) {
+    var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+    return function _createSuperInternal() {
+      var Super = _getPrototypeOf(Derived),
+          result;
+
+      if (hasNativeReflectConstruct) {
+        var NewTarget = _getPrototypeOf(this).constructor;
+
+        result = Reflect.construct(Super, arguments, NewTarget);
+      } else {
+        result = Super.apply(this, arguments);
+      }
+
+      return _possibleConstructorReturn(this, result);
+    };
+  }
+
   function _superPropBase(object, property) {
     while (!Object.prototype.hasOwnProperty.call(object, property)) {
       object = _getPrototypeOf(object);
@@ -183,19 +224,15 @@ var CarbonComponents = (function (exports) {
   }
 
   function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
   function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
   }
 
   function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) {
-      for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
-
-      return arr2;
-    }
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
   }
 
   function _arrayWithHoles(arr) {
@@ -203,17 +240,21 @@ var CarbonComponents = (function (exports) {
   }
 
   function _iterableToArray(iter) {
-    if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
   }
 
   function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+    if (_i == null) return;
     var _arr = [];
     var _n = true;
     var _d = false;
-    var _e = undefined;
+
+    var _s, _e;
 
     try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
         _arr.push(_s.value);
 
         if (i && _arr.length === i) break;
@@ -232,12 +273,29 @@ var CarbonComponents = (function (exports) {
     return _arr;
   }
 
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+
   function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance");
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
 
   function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
 
   /**
@@ -283,9 +341,7 @@ var CarbonComponents = (function (exports) {
 
     return flatten(mixinfns).reduce(function (Class, mixinfn) {
       return mixinfn(Class);
-    },
-    /*#__PURE__*/
-    function () {
+    }, /*#__PURE__*/function () {
       function _class() {
         _classCallCheck(this, _class);
       }
@@ -301,11 +357,11 @@ var CarbonComponents = (function (exports) {
    * LICENSE file in the root directory of this source tree.
    */
   function createComponent (ToMix) {
-    var CreateComponent =
-    /*#__PURE__*/
-    function (_ToMix) {
+    var CreateComponent = /*#__PURE__*/function (_ToMix) {
       _inherits(CreateComponent, _ToMix);
 
+      var _super = _createSuper(CreateComponent);
+
       /**
        * The component instances managed by this component.
        * Releasing this component also releases the components in `this.children`.
@@ -327,7 +383,7 @@ var CarbonComponents = (function (exports) {
 
         _classCallCheck(this, CreateComponent);
 
-        _this = _possibleConstructorReturn(this, _getPrototypeOf(CreateComponent).call(this, element, options));
+        _this = _super.call(this, element, options);
 
         _defineProperty(_assertThisInitialized(_this), "children", []);
 
@@ -343,7 +399,7 @@ var CarbonComponents = (function (exports) {
         _this.element = element;
         /**
          * The component options.
-         * @type {Object}
+         * @type {object}
          */
 
         _this.options = Object.assign(Object.create(_this.constructor.options), options);
@@ -360,11 +416,11 @@ var CarbonComponents = (function (exports) {
 
       _createClass(CreateComponent, [{
         key: "release",
-
+        value:
         /**
          * Releases this component's instance from the associated element.
          */
-        value: function release() {
+        function release() {
           for (var child = this.children.pop(); child; child = this.children.pop()) {
             child.release();
           }
@@ -396,20 +452,20 @@ var CarbonComponents = (function (exports) {
      * Mix-in class to instantiate components by searching for their root elements.
      * @class InitComponentBySearch
      */
-    var InitComponentBySearch =
-    /*#__PURE__*/
-    function (_ToMix) {
+    var InitComponentBySearch = /*#__PURE__*/function (_ToMix) {
       _inherits(InitComponentBySearch, _ToMix);
 
+      var _super = _createSuper(InitComponentBySearch);
+
       function InitComponentBySearch() {
         _classCallCheck(this, InitComponentBySearch);
 
-        return _possibleConstructorReturn(this, _getPrototypeOf(InitComponentBySearch).apply(this, arguments));
+        return _super.apply(this, arguments);
       }
 
       _createClass(InitComponentBySearch, null, [{
         key: "init",
-
+        value:
         /**
          * Instantiates component in the given node.
          * If the given element indicates that it's an component of this class, instantiates it.
@@ -418,7 +474,7 @@ var CarbonComponents = (function (exports) {
          * @param {object} [options] The component options.
          * @param {boolean} [options.selectorInit] The CSS selector to find components.
          */
-        value: function init() {
+        function init() {
           var _this = this;
 
           var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
@@ -458,14 +514,12 @@ var CarbonComponents = (function (exports) {
      * @class Handles
      * @implements Handle
      */
-    var Handles =
-    /*#__PURE__*/
-    function (_ToMix) {
+    var Handles = /*#__PURE__*/function (_ToMix) {
       _inherits(Handles, _ToMix);
 
-      function Handles() {
-        var _getPrototypeOf2;
+      var _super = _createSuper(Handles);
 
+      function Handles() {
         var _this;
 
         _classCallCheck(this, Handles);
@@ -474,7 +528,7 @@ var CarbonComponents = (function (exports) {
           args[_key] = arguments[_key];
         }
 
-        _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Handles)).call.apply(_getPrototypeOf2, [this].concat(args)));
+        _this = _super.call.apply(_super, [this].concat(args));
 
         _defineProperty(_assertThisInitialized(_this), "handles", new Set());
 
@@ -483,13 +537,13 @@ var CarbonComponents = (function (exports) {
 
       _createClass(Handles, [{
         key: "manage",
-
+        value:
         /**
          * Manages the given handle.
          * @param {Handle} handle The handle to manage.
          * @returns {Handle} The given handle.
          */
-        value: function manage(handle) {
+        function manage(handle) {
           this.handles.add(handle);
           return handle;
         }
@@ -551,11 +605,11 @@ var CarbonComponents = (function (exports) {
     mixed: 'mixed'
   };
 
-  var Checkbox =
-  /*#__PURE__*/
-  function (_mixin) {
+  var Checkbox = /*#__PURE__*/function (_mixin) {
     _inherits(Checkbox, _mixin);
 
+    var _super = _createSuper(Checkbox);
+
     /**
      * Checkbox UI.
      * @extends CreateComponent
@@ -568,7 +622,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, Checkbox);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Checkbox).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _this.manage(on(_this.element, 'click', function (event) {
         _this._handleClick(event);
@@ -708,7 +762,7 @@ var CarbonComponents = (function (exports) {
 
     }], [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor, {@linkcode Checkbox.create .create()}, or {@linkcode Checkbox.init .init()},
@@ -724,7 +778,7 @@ var CarbonComponents = (function (exports) {
        * @property {string} attribContainedCheckboxState The attribute name for the checked state of contained checkbox.
        * @property {string} attribContainedCheckboxDisabled The attribute name for the disabled state of contained checkbox.
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           selectorInit: ".".concat(prefix, "--checkbox"),
@@ -760,20 +814,20 @@ var CarbonComponents = (function (exports) {
      * Mix-in class to manage events associated with states.
      * @class EventedState
      */
-    var EventedState =
-    /*#__PURE__*/
-    function (_ToMix) {
+    var EventedState = /*#__PURE__*/function (_ToMix) {
       _inherits(EventedState, _ToMix);
 
+      var _super = _createSuper(EventedState);
+
       function EventedState() {
         _classCallCheck(this, EventedState);
 
-        return _possibleConstructorReturn(this, _getPrototypeOf(EventedState).apply(this, arguments));
+        return _super.apply(this, arguments);
       }
 
       _createClass(EventedState, [{
         key: "_changeState",
-
+        value:
         /* eslint-disable jsdoc/check-param-names */
 
         /**
@@ -785,7 +839,7 @@ var CarbonComponents = (function (exports) {
          * @param {EventedState~changeStateCallback} callback The callback called once changing state is finished or is canceled.
          * @private
          */
-        value: function _changeState() {
+        function _changeState() {
           throw new Error('_changeState() should be overriden to perform actual change in state.');
         }
         /**
@@ -863,7 +917,7 @@ var CarbonComponents = (function (exports) {
          * Classes inheriting {@link EventedState `EventedState`} should override this function.
          * @function EventedState#shouldStateBeChanged
          * @param {string} [state] The new state. Can be an omitted, which means toggling.
-         * @param {Object} [detail]
+         * @param {object} [detail]
          *   The object that should be put to event details that is fired before/after changing state.
          *   Can have a `group` property, which specifies what state to be changed.
          * @returns {boolean}
@@ -927,15 +981,15 @@ var CarbonComponents = (function (exports) {
     return undefined;
   }
 
-  var toArray = function toArray(arrayLike) {
+  var toArray$b = function toArray(arrayLike) {
     return Array.prototype.slice.call(arrayLike);
   };
 
-  var FileUploader =
-  /*#__PURE__*/
-  function (_mixin) {
+  var FileUploader = /*#__PURE__*/function (_mixin) {
     _inherits(FileUploader, _mixin);
 
+    var _super = _createSuper(FileUploader);
+
     /**
      * File uploader.
      * @extends CreateComponent
@@ -952,7 +1006,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, FileUploader);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(FileUploader).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _defineProperty(_assertThisInitialized(_this), "_changeState", function (state, detail, callback) {
         if (state === 'delete-filename-fileuploader') {
@@ -965,18 +1019,54 @@ var CarbonComponents = (function (exports) {
       });
 
       _defineProperty(_assertThisInitialized(_this), "_handleDeleteButton", function (evt) {
-        var target = eventMatches(evt, "[data-for=".concat(_this.inputId, "]"));
+        var target = eventMatches(evt, _this.options.selectorCloseButton);
 
         if (target) {
-          _this._changeState('delete-filename-fileuploader', {
+          _this.changeState('delete-filename-fileuploader', {
             initialEvt: evt,
-            filenameElement: target.parentNode
+            filenameElement: target.closest(_this.options.selectorSelectedFile)
           });
         }
       });
 
+      _defineProperty(_assertThisInitialized(_this), "_handleDragDrop", function (evt) {
+        var isOfSelf = _this.element.contains(evt.target); // In IE11 `evt.dataTransfer.types` is a `DOMStringList` instead of an array
+
+
+        if (Array.prototype.indexOf.call(evt.dataTransfer.types, 'Files') >= 0 && !eventMatches(evt, _this.options.selectorOtherDropContainers)) {
+          var inArea = isOfSelf && eventMatches(evt, _this.options.selectorDropContainer);
+
+          if (evt.type === 'dragover') {
+            evt.preventDefault();
+            var dropEffect = inArea ? 'copy' : 'none';
+
+            if (Array.isArray(evt.dataTransfer.types)) {
+              // IE11 throws a "permission denied" error accessing `.effectAllowed`
+              evt.dataTransfer.effectAllowed = dropEffect;
+            }
+
+            evt.dataTransfer.dropEffect = dropEffect;
+
+            _this.dropContainer.classList.toggle(_this.options.classDragOver, Boolean(inArea));
+          }
+
+          if (evt.type === 'dragleave') {
+            _this.dropContainer.classList.toggle(_this.options.classDragOver, false);
+          }
+
+          if (inArea && evt.type === 'drop') {
+            evt.preventDefault();
+
+            _this._displayFilenames(evt.dataTransfer.files);
+
+            _this.dropContainer.classList.remove(_this.options.classDragOver);
+          }
+        }
+      });
+
       _this.input = _this.element.querySelector(_this.options.selectorInput);
       _this.container = _this.element.querySelector(_this.options.selectorContainer);
+      _this.dropContainer = _this.element.querySelector(_this.options.selectorDropContainer);
 
       if (!_this.input) {
         throw new TypeError('Cannot find the file input box.');
@@ -994,6 +1084,12 @@ var CarbonComponents = (function (exports) {
 
       _this.manage(on(_this.container, 'click', _this._handleDeleteButton));
 
+      _this.manage(on(_this.element.ownerDocument, 'dragleave', _this._handleDragDrop));
+
+      _this.manage(on(_this.dropContainer, 'dragover', _this._handleDragDrop));
+
+      _this.manage(on(_this.dropContainer, 'drop', _this._handleDragDrop));
+
       return _this;
     }
 
@@ -1005,7 +1101,7 @@ var CarbonComponents = (function (exports) {
     }, {
       key: "_uploadHTML",
       value: function _uploadHTML() {
-        return "\n      <div data-loading class=\"".concat(this.options.classLoading, "\">\n        <svg class=\"").concat(this.options.classLoadingSvg, "\" viewBox=\"-42 -42 84 84\">\n          <circle cx=\"0\" cy=\"0\" r=\"37.5\" />\n        </svg>\n      </div>");
+        return "\n      <div class=\"".concat(this.options.classLoadingAnimation, "\">\n        <div data-inline-loading-spinner class=\"").concat(this.options.classLoading, "\">\n          <svg class=\"").concat(this.options.classLoadingSvg, "\" viewBox=\"-75 -75 150 150\">\n            <circle class=\"").concat(this.options.classLoadingBackground, "\" cx=\"0\" cy=\"0\" r=\"37.5\" />\n            <circle class=\"").concat(this.options.classLoadingStroke, "\" cx=\"0\" cy=\"0\" r=\"37.5\" />\n          </svg>\n        </div>\n      </div>");
       }
     }, {
       key: "_closeButtonHTML",
@@ -1015,12 +1111,12 @@ var CarbonComponents = (function (exports) {
     }, {
       key: "_checkmarkHTML",
       value: function _checkmarkHTML() {
-        return "\n      <svg class=\"".concat(this.options.classFileComplete, "\" viewBox=\"0 0 16 16\" fill-rule=\"evenodd\" width=\"16\" height=\"16\">\n       <path d=\"M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z\"/>\n      </svg>");
+        return "\n      <svg focusable=\"false\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        style=\"will-change: transform;\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"".concat(this.options.classFileComplete, "\"\n        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n        aria-hidden=\"true\">\n        <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>\n        <path d=\"M7 11L4.3 8.3l.9-.8L7 9.3l4-3.9.9.8L7 11z\" data-icon-path=\"inner-path\" opacity=\"0\"></path>\n      </svg>\n    ");
       }
     }, {
       key: "_getStateContainers",
       value: function _getStateContainers() {
-        var stateContainers = toArray(this.element.querySelectorAll("[data-for=".concat(this.inputId, "]")));
+        var stateContainers = toArray$b(this.element.querySelectorAll("[data-for=".concat(this.inputId, "]")));
 
         if (stateContainers.length === 0) {
           throw new TypeError('State container elements not found; invoke _displayFilenames() first');
@@ -1034,6 +1130,7 @@ var CarbonComponents = (function (exports) {
       }
       /**
        * Inject selected files into DOM. Invoked on change event.
+       * @param {File[]} files The files to upload.
        */
 
     }, {
@@ -1041,8 +1138,9 @@ var CarbonComponents = (function (exports) {
       value: function _displayFilenames() {
         var _this2 = this;
 
+        var files = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.input.files;
         var container = this.element.querySelector(this.options.selectorContainer);
-        var HTMLString = toArray(this.input.files).map(function (file) {
+        var HTMLString = toArray$b(files).map(function (file) {
           return _this2._filenamesHTML(file.name, _this2.inputId);
         }).join('');
         container.insertAdjacentHTML('afterbegin', HTMLString);
@@ -1117,13 +1215,20 @@ var CarbonComponents = (function (exports) {
           selectorInput: "input[type=\"file\"].".concat(prefix, "--file-input"),
           selectorContainer: '[data-file-container]',
           selectorCloseButton: ".".concat(prefix, "--file-close"),
-          classLoading: "".concat(prefix, "--loading"),
+          selectorSelectedFile: ".".concat(prefix, "--file__selected-file"),
+          selectorDropContainer: "[data-file-drop-container]",
+          selectorOtherDropContainers: '[data-drop-container]',
+          classLoading: "".concat(prefix, "--loading ").concat(prefix, "--loading--small"),
+          classLoadingAnimation: "".concat(prefix, "--inline-loading__animation"),
           classLoadingSvg: "".concat(prefix, "--loading__svg"),
+          classLoadingBackground: "".concat(prefix, "--loading__background"),
+          classLoadingStroke: "".concat(prefix, "--loading__stroke"),
           classFileName: "".concat(prefix, "--file-filename"),
           classFileClose: "".concat(prefix, "--file-close"),
           classFileComplete: "".concat(prefix, "--file-complete"),
           classSelectedFile: "".concat(prefix, "--file__selected-file"),
           classStateContainer: "".concat(prefix, "--file__state-container"),
+          classDragOver: "".concat(prefix, "--file__drop-container--drag-over"),
           eventBeforeDeleteFilenameFileuploader: 'fileuploader-before-delete-filename',
           eventAfterDeleteFilenameFileuploader: 'fileuploader-after-delete-filename'
         };
@@ -1137,15 +1242,15 @@ var CarbonComponents = (function (exports) {
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  var toArray$1 = function toArray(arrayLike) {
+  var toArray$a = function toArray(arrayLike) {
     return Array.prototype.slice.call(arrayLike);
   };
 
-  var ContentSwitcher =
-  /*#__PURE__*/
-  function (_mixin) {
+  var ContentSwitcher = /*#__PURE__*/function (_mixin) {
     _inherits(ContentSwitcher, _mixin);
 
+    var _super = _createSuper(ContentSwitcher);
+
     /**
      * Set of content switcher buttons.
      * @extends CreateComponent
@@ -1167,7 +1272,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, ContentSwitcher);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(ContentSwitcher).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _this.manage(on(_this.element, 'click', function (event) {
         _this._handleClick(event);
@@ -1213,7 +1318,7 @@ var CarbonComponents = (function (exports) {
         var itemLink = item.querySelector(this.options.selectorLink);
 
         if (itemLink) {
-          toArray$1(this.element.querySelectorAll(this.options.selectorLink)).forEach(function (link) {
+          toArray$a(this.element.querySelectorAll(this.options.selectorLink)).forEach(function (link) {
             if (link !== itemLink) {
               link.setAttribute('aria-selected', 'false');
             }
@@ -1221,12 +1326,12 @@ var CarbonComponents = (function (exports) {
           itemLink.setAttribute('aria-selected', 'true');
         }
 
-        var selectorButtons = toArray$1(this.element.querySelectorAll(this.options.selectorButton));
+        var selectorButtons = toArray$a(this.element.querySelectorAll(this.options.selectorButton));
         selectorButtons.forEach(function (button) {
           if (button !== item) {
             button.setAttribute('aria-selected', false);
             button.classList.toggle(_this2.options.classActive, false);
-            toArray$1(button.ownerDocument.querySelectorAll(button.dataset.target)).forEach(function (element) {
+            toArray$a(button.ownerDocument.querySelectorAll(button.dataset.target)).forEach(function (element) {
               element.setAttribute('hidden', '');
               element.setAttribute('aria-hidden', 'true');
             });
@@ -1234,7 +1339,7 @@ var CarbonComponents = (function (exports) {
         });
         item.classList.toggle(this.options.classActive, true);
         item.setAttribute('aria-selected', true);
-        toArray$1(item.ownerDocument.querySelectorAll(item.dataset.target)).forEach(function (element) {
+        toArray$a(item.ownerDocument.querySelectorAll(item.dataset.target)).forEach(function (element) {
           element.removeAttribute('hidden');
           element.setAttribute('aria-hidden', 'false');
         });
@@ -1278,7 +1383,7 @@ var CarbonComponents = (function (exports) {
 
     }], [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor,
@@ -1295,7 +1400,7 @@ var CarbonComponents = (function (exports) {
        *   Cancellation of this event stops selection of content switcher button.
        * @property {string} [eventAfterSelected] The name of the custom event fired after a switcher button is selected.
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           selectorInit: '[data-content-switcher]',
@@ -1314,15 +1419,15 @@ var CarbonComponents = (function (exports) {
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  var toArray$2 = function toArray(arrayLike) {
+  var toArray$9 = function toArray(arrayLike) {
     return Array.prototype.slice.call(arrayLike);
   };
 
-  var Tab =
-  /*#__PURE__*/
-  function (_ContentSwitcher) {
+  var Tab = /*#__PURE__*/function (_ContentSwitcher) {
     _inherits(Tab, _ContentSwitcher);
 
+    var _super = _createSuper(Tab);
+
     /**
      * Container of tabs.
      * @extends ContentSwitcher
@@ -1347,7 +1452,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, Tab);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Tab).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _this.manage(on(_this.element, 'keydown', function (event) {
         _this._handleKeyDown(event);
@@ -1460,7 +1565,7 @@ var CarbonComponents = (function (exports) {
         }[event.which];
 
         if (direction) {
-          var buttons = toArray$2(this.element.querySelectorAll(this.options.selectorButtonEnabled));
+          var buttons = toArray$9(this.element.querySelectorAll(this.options.selectorButtonEnabled));
           var button = this.element.querySelector(this.options.selectorButtonSelected);
           var nextIndex = Math.max(buttons.indexOf(button) + direction, -1
           /* For `button` not found in `buttons` */
@@ -1521,7 +1626,7 @@ var CarbonComponents = (function (exports) {
 
     }], [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor, {@linkcode ContentSwitcher.create .create()}, or {@linkcode Tab.init .init()},
@@ -1543,7 +1648,7 @@ var CarbonComponents = (function (exports) {
        *   Cancellation of this event stops selection of tab.
        * @property {string} [eventAfterSelected] The name of the custom event fired after a tab is selected.
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return Object.assign(Object.create(ContentSwitcher.options), {
           selectorInit: '[data-tabs]',
@@ -1566,7 +1671,7 @@ var CarbonComponents = (function (exports) {
        * Enum for navigating backward/forward.
        * @readonly
        * @member Tab.NAVIGATE
-       * @type {Object}
+       * @type {object}
        * @property {number} BACKWARD Navigating backward.
        * @property {number} FORWARD Navigating forward.
        */
@@ -1623,20 +1728,20 @@ var CarbonComponents = (function (exports) {
      * Mix-in class to launch a floating menu.
      * @class EventedShowHideState
      */
-    var EventedShowHideState =
-    /*#__PURE__*/
-    function (_ToMix) {
+    var EventedShowHideState = /*#__PURE__*/function (_ToMix) {
       _inherits(EventedShowHideState, _ToMix);
 
+      var _super = _createSuper(EventedShowHideState);
+
       function EventedShowHideState() {
         _classCallCheck(this, EventedShowHideState);
 
-        return _possibleConstructorReturn(this, _getPrototypeOf(EventedShowHideState).apply(this, arguments));
+        return _super.apply(this, arguments);
       }
 
       _createClass(EventedShowHideState, [{
         key: "show",
-
+        value:
         /**
          */
 
@@ -1645,7 +1750,7 @@ var CarbonComponents = (function (exports) {
          * @param [evtOrElem] The launching event or element.
          * @param {EventedState~changeStateCallback} [callback] The callback.
          */
-        value: function show(evtOrElem, callback) {
+        function show(evtOrElem, callback) {
           if (!evtOrElem || typeof evtOrElem === 'function') {
             callback = evtOrElem; // eslint-disable-line no-param-reassign
           }
@@ -1675,14 +1780,14 @@ var CarbonComponents = (function (exports) {
     return EventedShowHideState;
   }
 
-  var exports$1 = [eventedState, eventedShowHideState];
+  var exports$2 = [eventedState, eventedShowHideState];
 
   function trackBlur(ToMix) {
-    var TrackBlur =
-    /*#__PURE__*/
-    function (_ToMix) {
+    var TrackBlur = /*#__PURE__*/function (_ToMix) {
       _inherits(TrackBlur, _ToMix);
 
+      var _super = _createSuper(TrackBlur);
+
       /**
        * Mix-in class to add an handler for losing focus.
        * @extends Handles
@@ -1694,12 +1799,19 @@ var CarbonComponents = (function (exports) {
 
         _classCallCheck(this, TrackBlur);
 
-        _this = _possibleConstructorReturn(this, _getPrototypeOf(TrackBlur).call(this, element, options));
-        var hasFocusin = 'onfocusin' in window;
+        _this = _super.call(this, element, options);
+        var hasFocusin = ('onfocusin' in window);
         var focusinEventName = hasFocusin ? 'focusin' : 'focus';
+        var focusoutEventName = hasFocusin ? 'focusout' : 'blur';
 
         _this.manage(on(_this.element.ownerDocument, focusinEventName, function (event) {
-          if (!_this.element.contains(event.target)) {
+          if (!(_this.options.contentNode || _this.element).contains(event.target)) {
+            _this.handleBlur(event);
+          }
+        }, !hasFocusin));
+
+        _this.manage(on(_this.element.ownerDocument, focusoutEventName, function (event) {
+          if (!event.relatedTarget) {
             _this.handleBlur(event);
           }
         }, !hasFocusin));
@@ -1725,7 +1837,7 @@ var CarbonComponents = (function (exports) {
     return TrackBlur;
   }
 
-  var exports$2 = [handles, trackBlur];
+  var exports$1 = [handles, trackBlur];
 
   /**
    * Copyright IBM Corp. 2016, 2018
@@ -1734,9 +1846,7 @@ var CarbonComponents = (function (exports) {
    * LICENSE file in the root directory of this source tree.
    */
   // mdn resize function
-  var optimizedResize =
-  /* #__PURE__ */
-  function optimizedResize() {
+  var optimizedResize = /* #__PURE__ */function optimizedResize() {
     var callbacks = [];
     var running = false; // run the actual callbacks
 
@@ -1789,7 +1899,7 @@ var CarbonComponents = (function (exports) {
 
   /**
    * The structure for the position of floating menu.
-   * @typedef {Object} FloatingMenu~position
+   * @typedef {object} FloatingMenu~position
    * @property {number} left The left position.
    * @property {number} top The top position.
    * @property {number} right The right position.
@@ -1798,14 +1908,14 @@ var CarbonComponents = (function (exports) {
 
   /**
    * The structure for the size of floating menu.
-   * @typedef {Object} FloatingMenu~size
+   * @typedef {object} FloatingMenu~size
    * @property {number} width The width.
    * @property {number} height The height.
    */
 
   /**
    * The structure for the position offset of floating menu.
-   * @typedef {Object} FloatingMenu~offset
+   * @typedef {object} FloatingMenu~offset
    * @property {number} top The top position.
    * @property {number} left The left position.
    */
@@ -1870,11 +1980,11 @@ var CarbonComponents = (function (exports) {
     }), _DIRECTION_LEFT$DIREC)[direction];
   };
 
-  var FloatingMenu =
-  /*#__PURE__*/
-  function (_mixin) {
+  var FloatingMenu = /*#__PURE__*/function (_mixin) {
     _inherits(FloatingMenu, _mixin);
 
+    var _super = _createSuper(FloatingMenu);
+
     /**
      * Floating menu.
      * @extends CreateComponent
@@ -1905,7 +2015,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, FloatingMenu);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(FloatingMenu).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       var attribDirectionValue = _this.element.getAttribute(_this.options.attribDirection);
 
@@ -1918,23 +2028,53 @@ var CarbonComponents = (function (exports) {
         _this.element.setAttribute(_this.options.attribDirection, _this.options.direction);
       }
 
+      _this.manage(on(_this.element.ownerDocument, 'keydown', function (event) {
+        _this._handleKeydown(event);
+      }));
+
       return _this;
     }
     /**
-     * Focuses back on the trigger button if this component loses focus.
+     * Handles key press on document.
+     * @param {Event} event The triggering event.
+     * @private
      */
 
 
     _createClass(FloatingMenu, [{
+      key: "_handleKeydown",
+      value: function _handleKeydown(event) {
+        var key = event.which;
+        var _this$options = this.options,
+            triggerNode = _this$options.triggerNode,
+            refNode = _this$options.refNode;
+        var isOfMenu = this.element.contains(event.target);
+
+        switch (key) {
+          // Esc
+          case 27:
+            this.changeState('hidden', getLaunchingDetails(event), function () {
+              if (isOfMenu) {
+                (triggerNode || refNode).focus();
+              }
+            });
+            break;
+        }
+      }
+      /**
+       * Focuses back on the trigger button if this component loses focus.
+       */
+
+    }, {
       key: "handleBlur",
       value: function handleBlur(event) {
         if (this.element.classList.contains(this.options.classShown)) {
           this.changeState('hidden', getLaunchingDetails(event));
-          var _this$options = this.options,
-              refNode = _this$options.refNode,
-              triggerNode = _this$options.triggerNode;
+          var _this$options2 = this.options,
+              refNode = _this$options2.refNode,
+              triggerNode = _this$options2.triggerNode;
 
-          if (this.element.contains(event.relatedTarget) && refNode && event.target !== refNode) {
+          if ((event.relatedTarget === null || this.element.contains(event.relatedTarget)) && refNode && event.target !== refNode) {
             HTMLElement.prototype.focus.call(triggerNode || refNode); // SVGElement in IE11 does not have `.focus()` method
           }
         }
@@ -1958,13 +2098,13 @@ var CarbonComponents = (function (exports) {
       key: "_getPos",
       value: function _getPos() {
         var element = this.element;
-        var _this$options2 = this.options,
-            refNode = _this$options2.refNode,
-            offset = _this$options2.offset,
-            direction = _this$options2.direction;
+        var _this$options3 = this.options,
+            refNode = _this$options3.refNode,
+            offset = _this$options3.offset,
+            direction = _this$options3.direction;
 
         if (!refNode) {
-          throw new Error('Cannot find the refernce node for positioning floating menu.');
+          throw new Error('Cannot find the reference node for positioning floating menu.');
         }
 
         return getFloatingPosition({
@@ -2048,19 +2188,14 @@ var CarbonComponents = (function (exports) {
         var _this2 = this;
 
         var shown = state === 'shown';
-        var _this$options3 = this.options,
-            refNode = _this$options3.refNode,
-            classShown = _this$options3.classShown,
-            classRefShown = _this$options3.classRefShown;
+        var _this$options4 = this.options,
+            refNode = _this$options4.refNode,
+            classShown = _this$options4.classShown,
+            classRefShown = _this$options4.classRefShown,
+            triggerNode = _this$options4.triggerNode;
 
         if (!refNode) {
-          throw new TypeError('Cannot find the refernce node for changing the style.');
-        }
-
-        this.element.classList.toggle(classShown, shown);
-
-        if (classRefShown) {
-          refNode.classList.toggle(classRefShown, shown);
+          throw new TypeError('Cannot find the reference node for changing the style.');
         }
 
         if (state === 'shown') {
@@ -2071,12 +2206,39 @@ var CarbonComponents = (function (exports) {
           }
 
           this._getContainer().appendChild(this.element);
+        }
+
+        this.element.setAttribute('aria-hidden', (!shown).toString());
+        (triggerNode || refNode).setAttribute('aria-expanded', shown.toString());
+        this.element.classList.toggle(classShown, shown);
+
+        if (classRefShown) {
+          refNode.classList.toggle(classRefShown, shown);
+        }
 
+        if (state === 'shown') {
           this._place(); // IE11 puts focus on elements with `.focus()`, even ones without `tabindex` attribute
 
 
           if (!this.element.hasAttribute(this.options.attribAvoidFocusOnOpen)) {
-            (this.element.querySelector(this.options.selectorPrimaryFocus) || this.element).focus();
+            var primaryFocusNode = this.element.querySelector(this.options.selectorPrimaryFocus);
+            var contentNode = this.options.contentNode || this.element;
+            var tabbableNode = contentNode.querySelector(settings_1.selectorTabbable); // The programmatically focusable element may be (and typically will be) the content node itself;
+
+            var focusableNode = contentNode.matches(settings_1.selectorFocusable) ? contentNode : contentNode.querySelector(settings_1.selectorFocusable);
+
+            if (primaryFocusNode) {
+              // User defined focusable node
+              primaryFocusNode.focus();
+            } else if (tabbableNode) {
+              // First sequentially focusable node
+              tabbableNode.focus();
+            } else if (focusableNode) {
+              // First programmatic focusable node
+              focusableNode.focus();
+            } else {
+              this.element.focus();
+            }
           }
         }
 
@@ -2100,7 +2262,7 @@ var CarbonComponents = (function (exports) {
     }]);
 
     return FloatingMenu;
-  }(mixin(createComponent, exports$1, exports$2));
+  }(mixin(createComponent, exports$2, exports$1, handles));
 
   _defineProperty(FloatingMenu, "options",
   /* #__PURE_CLASS_PROPERTY__ */
@@ -2131,25 +2293,21 @@ var CarbonComponents = (function (exports) {
 
   /**
    * The CSS property names of the arrow keyed by the floating menu direction.
-   * @type {Object<string, string>}
+   * @type {object<string, string>}
    */
 
-  var triggerButtonPositionProps =
-  /* #__PURE__ */
-  function () {
+  var triggerButtonPositionProps = /* #__PURE__ */function () {
     var _ref;
 
     return _ref = {}, _defineProperty(_ref, DIRECTION_TOP, 'bottom'), _defineProperty(_ref, DIRECTION_BOTTOM, 'top'), _defineProperty(_ref, DIRECTION_LEFT, 'left'), _defineProperty(_ref, DIRECTION_RIGHT, 'right'), _ref;
   }();
   /**
    * Determines how the position of arrow should affect the floating menu position.
-   * @type {Object<string, number>}
+   * @type {object<string, number>}
    */
 
 
-  var triggerButtonPositionFactors =
-  /* #__PURE__ */
-  function () {
+  var triggerButtonPositionFactors = /* #__PURE__ */function () {
     var _ref2;
 
     return _ref2 = {}, _defineProperty(_ref2, DIRECTION_TOP, -2), _defineProperty(_ref2, DIRECTION_BOTTOM, -1), _defineProperty(_ref2, DIRECTION_LEFT, -2), _defineProperty(_ref2, DIRECTION_RIGHT, -1), _ref2;
@@ -2163,7 +2321,7 @@ var CarbonComponents = (function (exports) {
    */
 
 
-  var getMenuOffset = function getMenuOffset(menuBody, direction, trigger) {
+  var getMenuOffset$1 = function getMenuOffset(menuBody, direction, trigger) {
     var triggerButtonPositionProp = triggerButtonPositionProps[direction];
     var triggerButtonPositionFactor = triggerButtonPositionFactors[direction];
 
@@ -2201,11 +2359,11 @@ var CarbonComponents = (function (exports) {
     return undefined;
   };
 
-  var OverflowMenu =
-  /*#__PURE__*/
-  function (_mixin) {
+  var OverflowMenu = /*#__PURE__*/function (_mixin) {
     _inherits(OverflowMenu, _mixin);
 
+    var _super = _createSuper(OverflowMenu);
+
     /**
      * Overflow menu.
      * @extends CreateComponent
@@ -2226,7 +2384,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, OverflowMenu);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(OverflowMenu).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _defineProperty(_assertThisInitialized(_this), "getCurrentNavigation", function () {
         var focused = _this.element.ownerDocument.activeElement;
@@ -2293,15 +2451,6 @@ var CarbonComponents = (function (exports) {
     _createClass(OverflowMenu, [{
       key: "changeState",
       value: function changeState(state, detail, callback) {
-        // @todo Can clean up to use `this.triggerNode` once non-compliant code is deprecated
-        var triggerElement = this.triggerNode ? 'triggerNode' : 'element';
-
-        if (state === 'hidden') {
-          this[triggerElement].setAttribute('aria-expanded', 'false');
-        } else {
-          this[triggerElement].setAttribute('aria-expanded', 'true');
-        }
-
         if (!this.optionMenu) {
           var optionMenu = this.element.querySelector(this.options.selectorOptionMenu);
 
@@ -2315,7 +2464,8 @@ var CarbonComponents = (function (exports) {
             classShown: this.options.classMenuShown,
             classRefShown: this.options.classShown,
             offset: this.options.objMenuOffset,
-            triggerNode: this.triggerNode
+            triggerNode: this.triggerNode,
+            contentNode: this.element.querySelector(this.options.selectorContent)
           });
           this.children.push(this.optionMenu);
         }
@@ -2374,13 +2524,13 @@ var CarbonComponents = (function (exports) {
 
     }, {
       key: "_handleKeyPress",
-
+      value:
       /**
        * Handles key press on document.
        * @param {Event} event The triggering event.
        * @private
        */
-      value: function _handleKeyPress(event) {
+      function _handleKeyPress(event) {
         var _this3 = this;
 
         var key = event.which;
@@ -2394,16 +2544,7 @@ var CarbonComponents = (function (exports) {
         var triggerElement = triggerNode ? 'triggerNode' : 'element';
 
         switch (key) {
-          // Esc
-          case 27:
-            this.changeState('hidden', getLaunchingDetails(event), function () {
-              if (isOfMenu) {
-                _this3[triggerElement].focus();
-              }
-            });
-            break;
           // Enter || Space bar
-
           case 13:
           case 32:
             {
@@ -2448,9 +2589,6 @@ var CarbonComponents = (function (exports) {
               this.navigate(direction);
             }
             break;
-
-          default:
-            break;
         }
       }
     }], [{
@@ -2461,18 +2599,19 @@ var CarbonComponents = (function (exports) {
           selectorInit: '[data-overflow-menu]',
           selectorOptionMenu: ".".concat(prefix, "--overflow-menu-options"),
           selectorTrigger: 'button[aria-haspopup]',
-          selectorItem: "\n        .".concat(prefix, "--overflow-menu-options--open >\n        .").concat(prefix, "--overflow-menu-options__option:not(.").concat(prefix, "--overflow-menu-options__option--disabled) >\n        .").concat(prefix, "--overflow-menu-options__btn\n      "),
+          selectorContent: ".".concat(prefix, "--overflow-menu-options__content"),
+          selectorItem: "\n        .".concat(prefix, "--overflow-menu-options--open\n        .").concat(prefix, "--overflow-menu-options__option:not(.").concat(prefix, "--overflow-menu-options__option--disabled) >\n        .").concat(prefix, "--overflow-menu-options__btn\n      "),
           classShown: "".concat(prefix, "--overflow-menu--open"),
           classMenuShown: "".concat(prefix, "--overflow-menu-options--open"),
           classMenuFlip: "".concat(prefix, "--overflow-menu--flip"),
-          objMenuOffset: getMenuOffset,
-          objMenuOffsetFlip: getMenuOffset
+          objMenuOffset: getMenuOffset$1,
+          objMenuOffsetFlip: getMenuOffset$1
         };
       }
     }]);
 
     return OverflowMenu;
-  }(mixin(createComponent, initComponentBySearch, exports$1, handles));
+  }(mixin(createComponent, initComponentBySearch, exports$2, handles));
 
   _defineProperty(OverflowMenu, "components",
   /* #__PURE_CLASS_PROPERTY__ */
@@ -2483,20 +2622,20 @@ var CarbonComponents = (function (exports) {
      * Mix-in class to instantiate components events on launcher button.
      * @class InitComponentByLauncher
      */
-    var InitComponentByLauncher =
-    /*#__PURE__*/
-    function (_ToMix) {
+    var InitComponentByLauncher = /*#__PURE__*/function (_ToMix) {
       _inherits(InitComponentByLauncher, _ToMix);
 
+      var _super = _createSuper(InitComponentByLauncher);
+
       function InitComponentByLauncher() {
         _classCallCheck(this, InitComponentByLauncher);
 
-        return _possibleConstructorReturn(this, _getPrototypeOf(InitComponentByLauncher).apply(this, arguments));
+        return _super.apply(this, arguments);
       }
 
       _createClass(InitComponentByLauncher, null, [{
         key: "init",
-
+        value:
         /**
          * `true` suggests that this component is lazily initialized upon an action/event, etc.
          * @type {boolean}
@@ -2513,7 +2652,7 @@ var CarbonComponents = (function (exports) {
          * @param {string} [options.attribInitTarget] The attribute name in the launcher buttons to find target component.
          * @returns {Handle} The handle to remove the event listener to handle clicking.
          */
-        value: function init() {
+        function init() {
           var _this = this;
 
           var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
@@ -2577,11 +2716,11 @@ var CarbonComponents = (function (exports) {
     return InitComponentByLauncher;
   }
 
-  var Modal =
-  /*#__PURE__*/
-  function (_mixin) {
+  var Modal = /*#__PURE__*/function (_mixin) {
     _inherits(Modal, _mixin);
 
+    var _super = _createSuper(Modal);
+
     /**
      * Modal dialog.
      * @extends CreateComponent
@@ -2610,14 +2749,16 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, Modal);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Modal).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _defineProperty(_assertThisInitialized(_this), "_handleFocusinListener", void 0);
 
       _defineProperty(_assertThisInitialized(_this), "_handleKeydownListener", void 0);
 
       _defineProperty(_assertThisInitialized(_this), "_handleFocusin", function (evt) {
-        if (_this.element.classList.contains(_this.options.classVisible) && !_this.element.contains(evt.target) && _this.options.selectorsFloatingMenus.every(function (selector) {
+        var focusWrapNode = _this.element.querySelector(_this.options.selectorModalContainer) || _this.element;
+
+        if (_this.element.classList.contains(_this.options.classVisible) && !focusWrapNode.contains(evt.target) && _this.options.selectorsFloatingMenus.every(function (selector) {
           return !eventMatches(evt, selector);
         })) {
           _this.element.querySelector(settings_1.selectorTabbable).focus();
@@ -2638,12 +2779,12 @@ var CarbonComponents = (function (exports) {
 
     _createClass(Modal, [{
       key: "createdByLauncher",
-
+      value:
       /**
        * A method that runs when `.init()` is called from `initComponentByLauncher`.
        * @param {Event} evt The event fired on the launcher button.
        */
-      value: function createdByLauncher(evt) {
+      function createdByLauncher(evt) {
         this.show(evt);
       }
       /**
@@ -2697,7 +2838,7 @@ var CarbonComponents = (function (exports) {
         }
 
         if (state === 'shown') {
-          var hasFocusin = 'onfocusin' in this.element.ownerDocument.defaultView;
+          var hasFocusin = ('onfocusin' in this.element.ownerDocument.defaultView);
           var focusinEventName = hasFocusin ? 'focusin' : 'focus';
           this._handleFocusinListener = this.manage(on(this.element.ownerDocument, focusinEventName, this._handleFocusin, !hasFocusin));
         }
@@ -2754,7 +2895,7 @@ var CarbonComponents = (function (exports) {
 
     }], [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor, {@linkcode Modal.create .create()}, or {@linkcode Modal.init .init()},
@@ -2766,6 +2907,7 @@ var CarbonComponents = (function (exports) {
        * @property {string} [selectorPrimaryFocus] The CSS selector to determine the element to put focus when modal gets open.
        * @property {string} [selectorFocusOnClose] The CSS selector to determine the element to put focus when modal closes.
        *   If undefined, focus returns to the previously focused element prior to the modal opening.
+       * @property {string} [selectorModalContainer] The CSS selector for the content container of the modal for focus wrap feature.
        * @property {string} attribInitTarget The attribute name in the launcher buttons to find target modal dialogs.
        * @property {string[]} [selectorsFloatingMenu]
        *   The CSS selectors of floating menus.
@@ -2786,13 +2928,14 @@ var CarbonComponents = (function (exports) {
        *   The name of the custom event telling that modal is sure hidden
        *   without being canceled by the event handler named by `eventBeforeHidden` option (`modal-beinghidden`).
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           selectorInit: '[data-modal]',
           selectorModalClose: '[data-modal-close]',
           selectorPrimaryFocus: '[data-modal-primary-focus]',
           selectorsFloatingMenus: [".".concat(prefix, "--overflow-menu-options"), ".".concat(prefix, "--tooltip"), '.flatpickr-calendar'],
+          selectorModalContainer: ".".concat(prefix, "--modal-container"),
           classVisible: 'is-visible',
           classBody: "".concat(prefix, "--body--with-modal-open"),
           attribInitTarget: 'data-modal-target',
@@ -2806,17 +2949,17 @@ var CarbonComponents = (function (exports) {
     }]);
 
     return Modal;
-  }(mixin(createComponent, initComponentByLauncher, exports$1, handles));
+  }(mixin(createComponent, initComponentByLauncher, exports$2, handles));
 
   _defineProperty(Modal, "components",
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  var Loading =
-  /*#__PURE__*/
-  function (_mixin) {
+  var Loading = /*#__PURE__*/function (_mixin) {
     _inherits(Loading, _mixin);
 
+    var _super = _createSuper(Loading);
+
     /**
      * Spinner indicating loading state.
      * @extends CreateComponent
@@ -2831,7 +2974,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, Loading);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Loading).call(this, element, options));
+      _this = _super.call(this, element, options);
       _this.active = _this.options.active; // Initialize spinner
 
       _this.set(_this.active);
@@ -2925,7 +3068,7 @@ var CarbonComponents = (function (exports) {
 
     }], [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor, {@linkcode Loading.create .create()}, or {@linkcode Loading.init .init()},
@@ -2934,7 +3077,7 @@ var CarbonComponents = (function (exports) {
        * @type {object}
        * @property {string} selectorInit The CSS selector to find spinners.
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           selectorInit: '[data-loading]',
@@ -2975,11 +3118,11 @@ var CarbonComponents = (function (exports) {
     }
   }
 
-  var InlineLoading =
-  /*#__PURE__*/
-  function (_mixin) {
+  var InlineLoading = /*#__PURE__*/function (_mixin) {
     _inherits(InlineLoading, _mixin);
 
+    var _super = _createSuper(InlineLoading);
+
     /**
      * Spinner indicating loading state.
      * @extends CreateComponent
@@ -2994,7 +3137,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, InlineLoading);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(InlineLoading).call(this, element, options)); // Sets the initial state
+      _this = _super.call(this, element, options); // Sets the initial state
 
       var initialState = _this.options.initialState;
 
@@ -3026,22 +3169,30 @@ var CarbonComponents = (function (exports) {
         var _this$options = this.options,
             selectorSpinner = _this$options.selectorSpinner,
             selectorFinished = _this$options.selectorFinished,
+            selectorError = _this$options.selectorError,
             selectorTextActive = _this$options.selectorTextActive,
-            selectorTextFinished = _this$options.selectorTextFinished;
+            selectorTextFinished = _this$options.selectorTextFinished,
+            selectorTextError = _this$options.selectorTextError;
         var spinner = elem.querySelector(selectorSpinner);
         var finished = elem.querySelector(selectorFinished);
+        var error = elem.querySelector(selectorError);
         var textActive = elem.querySelector(selectorTextActive);
         var textFinished = elem.querySelector(selectorTextFinished);
+        var textError = elem.querySelector(selectorTextError);
 
         if (spinner) {
           spinner.classList.toggle(this.options.classLoadingStop, state !== states.ACTIVE);
-          toggleAttribute(spinner, 'hidden', state === states.FINISHED);
+          toggleAttribute(spinner, 'hidden', state !== states.INACTIVE && state !== states.ACTIVE);
         }
 
         if (finished) {
           toggleAttribute(finished, 'hidden', state !== states.FINISHED);
         }
 
+        if (error) {
+          toggleAttribute(error, 'hidden', state !== states.ERROR);
+        }
+
         if (textActive) {
           toggleAttribute(textActive, 'hidden', state !== states.ACTIVE);
         }
@@ -3050,16 +3201,20 @@ var CarbonComponents = (function (exports) {
           toggleAttribute(textFinished, 'hidden', state !== states.FINISHED);
         }
 
+        if (textError) {
+          toggleAttribute(textError, 'hidden', state !== states.ERROR);
+        }
+
         return this;
       }
       /**
        * The list of states.
-       * @type {Object<string, string>}
+       * @type {object<string, string>}
        */
 
     }], [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor, {@linkcode InlineLoading.create .create()},
@@ -3070,18 +3225,22 @@ var CarbonComponents = (function (exports) {
        * @property {string} selectorInit The CSS selector to find inline loading components.
        * @property {string} selectorSpinner The CSS selector to find the spinner.
        * @property {string} selectorFinished The CSS selector to find the "finished" icon.
+       * @property {string} selectorError The CSS selector to find the "error" icon.
        * @property {string} selectorTextActive The CSS selector to find the text describing the active state.
        * @property {string} selectorTextFinished The CSS selector to find the text describing the finished state.
+       * @property {string} selectorTextError The CSS selector to find the text describing the error state.
        * @property {string} classLoadingStop The CSS class for spinner's stopped state.
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           selectorInit: '[data-inline-loading]',
           selectorSpinner: '[data-inline-loading-spinner]',
           selectorFinished: '[data-inline-loading-finished]',
+          selectorError: '[data-inline-loading-error]',
           selectorTextActive: '[data-inline-loading-text-active]',
           selectorTextFinished: '[data-inline-loading-text-finished]',
+          selectorTextError: '[data-inline-loading-text-error]',
           classLoadingStop: "".concat(prefix, "--loading--stop")
         };
       }
@@ -3095,22 +3254,23 @@ var CarbonComponents = (function (exports) {
   {
     INACTIVE: 'inactive',
     ACTIVE: 'active',
-    FINISHED: 'finished'
+    FINISHED: 'finished',
+    ERROR: 'error'
   });
 
   _defineProperty(InlineLoading, "components",
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  var toArray$3 = function toArray(arrayLike) {
+  var toArray$8 = function toArray(arrayLike) {
     return Array.prototype.slice.call(arrayLike);
   };
 
-  var Dropdown =
-  /*#__PURE__*/
-  function (_mixin) {
+  var Dropdown = /*#__PURE__*/function (_mixin) {
     _inherits(Dropdown, _mixin);
 
+    var _super = _createSuper(Dropdown);
+
     /**
      * A selector with drop downs.
      * @extends CreateComponent
@@ -3133,7 +3293,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, Dropdown);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Dropdown).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _this.manage(on(_this.element.ownerDocument, 'click', function (event) {
         _this._toggle(event);
@@ -3149,7 +3309,24 @@ var CarbonComponents = (function (exports) {
         if (item) {
           _this.select(item);
         }
-      }));
+      })); // When using the active descendant approach we use a class to give focus styles during keyboard (up/down arrows)
+      // navigation instead of relying on the :focus selector. This leaves the potential to have multiple items when
+      // switching interactions between keyboard and mouse users. To more closely align with Carbon React implementation,
+      // we want the focus class to move as the user hovers over items. This also updates the location of focus based on
+      // the last hovered item if the user switches back to using the keyboard.
+
+
+      if ( // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
+      _this.element.querySelector(_this.options.selectorTrigger) && _this.element.querySelector(_this.options.selectorMenu)) {
+        // Using the latest HTML structure that supports the aria-activedescendant attribute
+        _this.manage(on(_this.element, 'mouseover', function (event) {
+          var item = eventMatches(event, _this.options.selectorItem);
+
+          if (item) {
+            _this._updateFocus(item);
+          }
+        }));
+      }
 
       return _this;
     }
@@ -3172,9 +3349,63 @@ var CarbonComponents = (function (exports) {
           this.navigate(direction);
           event.preventDefault(); // Prevents up/down keys from scrolling container
         } else {
+          // get selected item
+          // in v10.0, the anchor elements fire click events on Enter keypress when a dropdown item is selected
+          // in v10.5 (#3586), focus is no longer placed on the dropdown items and is instead kept fixed on the ul menu
+          // so we need to manually call getCurrentNavigation and select the item
+          var item = this.getCurrentNavigation();
+
+          if (item && isOpen && (event.which === 13 || event.which === 32) && !this.element.ownerDocument.activeElement.matches(this.options.selectorItem)) {
+            event.preventDefault();
+            this.select(item);
+          }
+
           this._toggle(event);
         }
       }
+      /**
+       * When using aria-activedescendant we want to make sure attributes and classes
+       * are properly cleaned up when the dropdown is closed
+       * @private
+       */
+
+    }, {
+      key: "_focusCleanup",
+      value: function _focusCleanup() {
+        // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
+        var triggerNode = this.element.querySelector(this.options.selectorTrigger); // only want to grab the listNode IF it's using the latest a11y HTML structure
+
+        var listNode = triggerNode ? this.element.querySelector(this.options.selectorMenu) : null;
+
+        if (listNode) {
+          listNode.removeAttribute('aria-activedescendant');
+          var focusedItem = this.element.querySelector(this.options.selectorItemFocused);
+
+          if (focusedItem) {
+            focusedItem.classList.remove(this.options.classFocused);
+          }
+        }
+      }
+      /**
+       * Update focus using aria-activedescendant HTML structure
+       * @param {HTMLElement} itemToFocus The element to be focused.
+       */
+
+    }, {
+      key: "_updateFocus",
+      value: function _updateFocus(itemToFocus) {
+        // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
+        var triggerNode = this.element.querySelector(this.options.selectorTrigger); // only want to grab the listNode IF it's using the latest a11y HTML structure
+
+        var listNode = triggerNode ? this.element.querySelector(this.options.selectorMenu) : null;
+        var previouslyFocused = listNode.querySelector(this.options.selectorItemFocused);
+        itemToFocus.classList.add(this.options.classFocused);
+        listNode.setAttribute('aria-activedescendant', itemToFocus.id);
+
+        if (previouslyFocused) {
+          previouslyFocused.classList.remove(this.options.classFocused);
+        }
+      }
       /**
        * Opens and closes the dropdown menu.
        * @param {Event} [event] The event triggering this method.
@@ -3191,13 +3422,14 @@ var CarbonComponents = (function (exports) {
 
         if (isDisabled) {
           return;
-        }
+        } // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
+
 
         var triggerNode = this.element.querySelector(this.options.selectorTrigger);
 
         if ( // User presses down arrow
-        event.which === 40 && !event.target.matches(this.options.selectorItem) || // User presses space or enter and the trigger is not a button
-        !triggerNode && [13, 32].indexOf(event.which) >= 0 && !event.target.matches(this.options.selectorItem) || // User presses esc
+        event.which === 40 && !event.target.matches(this.options.selectorItem) || // User presses space or enter and the trigger is not a button OR event is not fired by trigger
+        (!triggerNode || !triggerNode.contains(event.target)) && [13, 32].indexOf(event.which) >= 0 && !event.target.matches(this.options.selectorItem) || // User presses esc
         event.which === 27 || // User clicks
         event.type === 'click') {
           var isOpen = this.element.classList.contains(this.options.classOpen);
@@ -3216,7 +3448,7 @@ var CarbonComponents = (function (exports) {
               _this2.element.classList[action](_this2.options.classOpen);
             }
           });
-          var listItems = toArray$3(this.element.querySelectorAll(this.options.selectorItem)); // only want to grab the listNode IF it's using the latest a11y HTML structure
+          var listItems = toArray$8(this.element.querySelectorAll(this.options.selectorItem)); // only want to grab the listNode IF it's using the latest a11y HTML structure
 
           var listNode = triggerNode ? this.element.querySelector(this.options.selectorMenu) : null; // @todo remove conditionals for elements existing once legacy structure is depreciated
 
@@ -3229,22 +3461,23 @@ var CarbonComponents = (function (exports) {
             (listNode || this.element).focus();
 
             if (listNode) {
-              var selectedNode = listNode.querySelector(this.options.selectorItemSelected);
+              var selectedNode = listNode.querySelector(this.options.selectorLinkSelected);
               listNode.setAttribute('aria-activedescendant', (selectedNode || listItems[0]).id);
               (selectedNode || listItems[0]).classList.add(this.options.classFocused);
             }
           } else if (changedState && (isOfSelf || actions.remove)) {
             // toggled close
-            (triggerNode || this.element).focus();
+            // timer is used to call focus AFTER the click event on
+            // trigger button (which is caused by keypress e.g. during keyboard navigation)
+            setTimeout(function () {
+              return (triggerNode || _this2.element).focus();
+            }, 0);
 
             if (triggerNode) {
               triggerNode.setAttribute('aria-expanded', 'false');
             }
 
-            if (listNode) {
-              listNode.removeAttribute('aria-activedescendant');
-              this.element.querySelector(this.options.selectorItemFocused).classList.remove(this.options.classFocused);
-            }
+            this._focusCleanup();
           } // @todo remove once legacy structure is depreciated
 
 
@@ -3257,6 +3490,12 @@ var CarbonComponents = (function (exports) {
               }
             });
           }
+
+          var menuListNode = this.element.querySelector(this.options.selectorMenu);
+
+          if (menuListNode) {
+            menuListNode.tabIndex = this.element.classList.contains(this.options.classOpen) ? '0' : '-1';
+          }
         }
       }
       /**
@@ -3268,6 +3507,7 @@ var CarbonComponents = (function (exports) {
       value: function getCurrentNavigation() {
         var focusedNode; // Using the latest semantic markup structure where trigger is a button
         // @todo remove conditional once legacy structure is depreciated
+        // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
 
         if (this.element.querySelector(this.options.selectorTrigger)) {
           var listNode = this.element.querySelector(this.options.selectorMenu);
@@ -3289,8 +3529,8 @@ var CarbonComponents = (function (exports) {
     }, {
       key: "navigate",
       value: function navigate(direction) {
-        var items = toArray$3(this.element.querySelectorAll(this.options.selectorItem));
-        var start = this.getCurrentNavigation() || this.element.querySelector(this.options.selectorItemSelected);
+        var items = toArray$8(this.element.querySelectorAll(this.options.selectorItem));
+        var start = this.getCurrentNavigation() || this.element.querySelector(this.options.selectorLinkSelected);
 
         var getNextItem = function getNextItem(old) {
           var handleUnderflow = function handleUnderflow(i, l) {
@@ -3306,16 +3546,15 @@ var CarbonComponents = (function (exports) {
           return items[handleUnderflow(handleOverflow(index, items.length), items.length)];
         };
 
+        var isShowSelected = this.element.classList.contains(this.options.classShowSelected);
+
         for (var current = getNextItem(start); current && current !== start; current = getNextItem(current)) {
-          if (!current.matches(this.options.selectorItemHidden) && !current.parentNode.matches(this.options.selectorItemHidden) && !current.matches(this.options.selectorItemSelected)) {
+          if (!current.matches(this.options.selectorItemHidden) && !current.parentNode.matches(this.options.selectorItemHidden) && (isShowSelected || !isShowSelected && !current.parentElement.matches(this.options.selectorItemSelected))) {
             // Using the latest semantic markup structure where trigger is a button
             // @todo remove conditional once legacy structure is depreciated
+            // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
             if (this.element.querySelector(this.options.selectorTrigger)) {
-              var listNode = this.element.querySelector(this.options.selectorMenu);
-              var previouslyFocused = listNode.querySelector(this.options.selectorItemFocused);
-              current.classList.add(this.options.classFocused);
-              listNode.setAttribute('aria-activedescendant', current.id);
-              previouslyFocused.classList.remove(this.options.classFocused);
+              this._updateFocus(current);
             } else {
               current.focus();
             }
@@ -3347,6 +3586,7 @@ var CarbonComponents = (function (exports) {
 
         if (this.element.dispatchEvent(eventStart)) {
           if (this.element.dataset.dropdownType !== 'navigation') {
+            // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
             var selectorText = !this.element.querySelector(this.options.selectorTrigger) && this.element.dataset.dropdownType !== 'inline' ? this.options.selectorText : this.options.selectorTextInner;
             var text = this.element.querySelector(selectorText);
 
@@ -3354,13 +3594,13 @@ var CarbonComponents = (function (exports) {
               text.innerHTML = itemToSelect.innerHTML;
             }
 
-            itemToSelect.classList.add(this.options.classSelected);
+            itemToSelect.parentElement.classList.add(this.options.classSelected);
           }
 
           this.element.dataset.value = itemToSelect.parentElement.dataset.value;
-          toArray$3(this.element.querySelectorAll(this.options.selectorItemSelected)).forEach(function (item) {
+          toArray$8(this.element.querySelectorAll(this.options.selectorLinkSelected)).forEach(function (item) {
             if (itemToSelect !== item) {
-              item.classList.remove(_this3.options.classSelected);
+              item.parentElement.classList.remove(_this3.options.classSelected);
             }
           });
           this.element.dispatchEvent(new CustomEvent(this.options.eventAfterSelected, {
@@ -3380,6 +3620,8 @@ var CarbonComponents = (function (exports) {
       key: "handleBlur",
       value: function handleBlur() {
         this.element.classList.remove(this.options.classOpen);
+
+        this._focusCleanup();
       }
       /**
        * The map associating DOM element and selector instance.
@@ -3389,7 +3631,7 @@ var CarbonComponents = (function (exports) {
 
     }], [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor, {@linkcode Dropdown.create .create()}, or {@linkcode Dropdown.init .init()},
@@ -3397,7 +3639,9 @@ var CarbonComponents = (function (exports) {
        * @member Dropdown.options
        * @type {object}
        * @property {string} selectorInit The CSS selector to find selectors.
-       * @property {string} [selectorTrigger] The CSS selector to find trigger button when using a11y compliant markup.
+       * @property {string} [selectorTrigger]
+       *   The CSS selector to find the trigger button when using a11y compliant markup.
+       *   NOTE: Does NOT match the trigger button in older markup.
        * @property {string} [selectorMenu] The CSS selector to find menu list when using a11y compliant markup.
        * @property {string} [selectorText] The CSS selector to find the element showing the selected item.
        * @property {string} [selectorTextInner] The CSS selector to find the element showing the selected item, used for inline mode.
@@ -3407,6 +3651,8 @@ var CarbonComponents = (function (exports) {
        *   Used to skip dropdown items for keyboard navigation.
        * @property {string} [selectorItemSelected] The CSS selector to find the clickable area in the selected dropdown item.
        * @property {string} [selectorItemFocused] The CSS selector to find the clickable area in the focused dropdown item.
+       * @property {string} [selectorLinkSelected] The CSS selector to target the link node of the selected dropdown item.
+       * @property {string} [classShowSelected] The CSS class for the show selected modifier of the dropdown.
        * @property {string} [classSelected] The CSS class for the selected dropdown item.
        * @property {string} [classFocused] The CSS class for the focused dropdown item.
        * @property {string} [classOpen] The CSS class for the open state.
@@ -3416,11 +3662,12 @@ var CarbonComponents = (function (exports) {
        *   Cancellation of this event stops selection of drop down item.
        * @property {string} [eventAfterSelected] The name of the custom event fired after a drop down item is selected.
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           selectorInit: '[data-dropdown]',
           selectorTrigger: "button.".concat(prefix, "--dropdown-text"),
+          // NOTE: Does NOT match the trigger button in older markup.
           selectorMenu: ".".concat(prefix, "--dropdown-list"),
           selectorText: ".".concat(prefix, "--dropdown-text"),
           selectorTextInner: ".".concat(prefix, "--dropdown-text__inner"),
@@ -3428,6 +3675,8 @@ var CarbonComponents = (function (exports) {
           selectorItemSelected: ".".concat(prefix, "--dropdown--selected"),
           selectorItemFocused: ".".concat(prefix, "--dropdown--focused"),
           selectorItemHidden: "[hidden],[aria-hidden=\"true\"]",
+          selectorLinkSelected: ".".concat(prefix, "--dropdown--selected .").concat(prefix, "--dropdown-link"),
+          classShowSelected: "".concat(prefix, "--dropdown--show-selected"),
           classSelected: "".concat(prefix, "--dropdown--selected"),
           classFocused: "".concat(prefix, "--dropdown--focused"),
           classOpen: "".concat(prefix, "--dropdown--open"),
@@ -3440,7 +3689,7 @@ var CarbonComponents = (function (exports) {
        * Enum for navigating backward/forward.
        * @readonly
        * @member Dropdown.NAVIGATE
-       * @type {Object}
+       * @type {object}
        * @property {number} BACKWARD Navigating backward.
        * @property {number} FORWARD Navigating forward.
        */
@@ -3448,7 +3697,7 @@ var CarbonComponents = (function (exports) {
     }]);
 
     return Dropdown;
-  }(mixin(createComponent, initComponentBySearch, exports$2));
+  }(mixin(createComponent, initComponentBySearch, exports$1));
 
   _defineProperty(Dropdown, "components",
   /* #__PURE_CLASS_PROPERTY__ */
@@ -3461,11 +3710,11 @@ var CarbonComponents = (function (exports) {
     FORWARD: 1
   });
 
-  var NumberInput =
-  /*#__PURE__*/
-  function (_mixin) {
+  var NumberInput = /*#__PURE__*/function (_mixin) {
     _inherits(NumberInput, _mixin);
 
+    var _super = _createSuper(NumberInput);
+
     /**
      * Number input UI.
      * @extends CreateComponent
@@ -3478,7 +3727,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, NumberInput);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(NumberInput).call(this, element, options)); // Broken DOM tree is seen with up/down arrows <svg> in IE, which breaks event delegation.
+      _this = _super.call(this, element, options); // Broken DOM tree is seen with up/down arrows <svg> in IE, which breaks event delegation.
       // <svg> does not have `Element.classList` in IE11
 
       _this.manage(on(_this.element.querySelector('.up-icon'), 'click', function (event) {
@@ -3502,11 +3751,38 @@ var CarbonComponents = (function (exports) {
       value: function _handleClick(event) {
         var numberInput = this.element.querySelector(this.options.selectorInput);
         var target = event.currentTarget.getAttribute('class').split(' ');
+        var min = Number(numberInput.min);
+        var max = Number(numberInput.max);
+        var step = Number(numberInput.step) || 1;
 
         if (target.indexOf('up-icon') >= 0) {
-          ++numberInput.value;
+          var nextValue = Number(numberInput.value) + step;
+
+          if (numberInput.max === '') {
+            numberInput.value = nextValue;
+          } else if (numberInput.value < max) {
+            if (nextValue > max) {
+              numberInput.value = max;
+            } else if (nextValue < min) {
+              numberInput.value = min;
+            } else {
+              numberInput.value = nextValue;
+            }
+          }
         } else if (target.indexOf('down-icon') >= 0) {
-          --numberInput.value;
+          var _nextValue = Number(numberInput.value) - step;
+
+          if (numberInput.min === '') {
+            numberInput.value = _nextValue;
+          } else if (numberInput.value > min) {
+            if (_nextValue < min) {
+              numberInput.value = min;
+            } else if (_nextValue > max) {
+              numberInput.value = max;
+            } else {
+              numberInput.value = _nextValue;
+            }
+          }
         } // Programmatic change in value (including `stepUp()`/`stepDown()`) won't fire change event
 
 
@@ -3523,7 +3799,7 @@ var CarbonComponents = (function (exports) {
 
     }], [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor,
@@ -3534,7 +3810,7 @@ var CarbonComponents = (function (exports) {
        * @property {string} selectorInit The CSS selector to find number input UIs.
        * @property {string} [selectorInput] The CSS selector to find the `<input>` element.
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           selectorInit: '[data-numberinput]',
@@ -3550,15 +3826,15 @@ var CarbonComponents = (function (exports) {
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  var toArray$4 = function toArray(arrayLike) {
+  var toArray$7 = function toArray(arrayLike) {
     return Array.prototype.slice.call(arrayLike);
   };
 
-  var DataTable =
-  /*#__PURE__*/
-  function (_mixin) {
+  var DataTable = /*#__PURE__*/function (_mixin) {
     _inherits(DataTable, _mixin);
 
+    var _super = _createSuper(DataTable);
+
     /**
      * Data Table
      * @extends CreateComponent
@@ -3579,12 +3855,12 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, DataTable);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(DataTable).call(this, _element, options));
+      _this = _super.call(this, _element, options);
 
       _defineProperty(_assertThisInitialized(_this), "_sortToggle", function (detail) {
         var element = detail.element,
             previousValue = detail.previousValue;
-        toArray$4(_this.tableHeaders).forEach(function (header) {
+        toArray$7(_this.tableHeaders).forEach(function (header) {
           var sortEl = header.querySelector(_this.options.selectorTableSort);
 
           if (sortEl !== null && sortEl !== element) {
@@ -3623,7 +3899,7 @@ var CarbonComponents = (function (exports) {
       _defineProperty(_assertThisInitialized(_this), "_selectAllToggle", function (_ref) {
         var element = _ref.element;
         var checked = element.checked;
-        var inputs = toArray$4(_this.element.querySelectorAll(_this.options.selectorCheckbox));
+        var inputs = toArray$7(_this.element.querySelectorAll(_this.options.selectorCheckbox));
         _this.state.checkboxCount = checked ? inputs.length - 1 : 0;
         inputs.forEach(function (item) {
           item.checked = checked;
@@ -3644,8 +3920,8 @@ var CarbonComponents = (function (exports) {
       });
 
       _defineProperty(_assertThisInitialized(_this), "_actionBarCancel", function () {
-        var inputs = toArray$4(_this.element.querySelectorAll(_this.options.selectorCheckbox));
-        var row = toArray$4(_this.element.querySelectorAll(_this.options.selectorTableSelected));
+        var inputs = toArray$7(_this.element.querySelectorAll(_this.options.selectorCheckbox));
+        var row = toArray$7(_this.element.querySelectorAll(_this.options.selectorTableSelected));
         row.forEach(function (item) {
           item.classList.remove(_this.options.classTableSelected);
         });
@@ -3662,8 +3938,12 @@ var CarbonComponents = (function (exports) {
       });
 
       _defineProperty(_assertThisInitialized(_this), "_actionBarToggle", function (toggleOn) {
+        var handleTransitionEnd;
+
         var transition = function transition(evt) {
-          _this.batchActionEl.removeEventListener('transitionend', transition);
+          if (handleTransitionEnd) {
+            handleTransitionEnd = _this.unmanage(handleTransitionEnd).release();
+          }
 
           if (evt.target.matches(_this.options.selectorActions)) {
             if (_this.batchActionEl.dataset.active === 'false') {
@@ -3685,7 +3965,7 @@ var CarbonComponents = (function (exports) {
         }
 
         if (_this.batchActionEl) {
-          _this.batchActionEl.addEventListener('transitionend', transition);
+          handleTransitionEnd = _this.manage(on(_this.batchActionEl, 'transitionend', transition));
         }
       });
 
@@ -3728,15 +4008,12 @@ var CarbonComponents = (function (exports) {
         });
       });
 
-      _defineProperty(_assertThisInitialized(_this), "_expandableHoverToggle", function (element) {
-        element.previousElementSibling.classList.add(_this.options.classExpandableRowHover);
+      _defineProperty(_assertThisInitialized(_this), "_expandableHoverToggle", function (evt) {
+        var element = eventMatches(evt, _this.options.selectorChildRow);
 
-        var mouseout = function mouseout() {
-          element.previousElementSibling.classList.remove(_this.options.classExpandableRowHover);
-          element.removeEventListener('mouseout', mouseout);
-        };
-
-        element.addEventListener('mouseout', mouseout);
+        if (element) {
+          element.previousElementSibling.classList.toggle(_this.options.classExpandableRowHover, evt.type === 'mouseover');
+        }
       });
 
       _defineProperty(_assertThisInitialized(_this), "_toggleState", function (element, evt) {
@@ -3774,9 +4051,9 @@ var CarbonComponents = (function (exports) {
       });
 
       _defineProperty(_assertThisInitialized(_this), "refreshRows", function () {
-        var newExpandCells = toArray$4(_this.element.querySelectorAll(_this.options.selectorExpandCells));
-        var newExpandableRows = toArray$4(_this.element.querySelectorAll(_this.options.selectorExpandableRows));
-        var newParentRows = toArray$4(_this.element.querySelectorAll(_this.options.selectorParentRows)); // check if this is a refresh or the first time
+        var newExpandCells = toArray$7(_this.element.querySelectorAll(_this.options.selectorExpandCells));
+        var newExpandableRows = toArray$7(_this.element.querySelectorAll(_this.options.selectorExpandableRows));
+        var newParentRows = toArray$7(_this.element.querySelectorAll(_this.options.selectorParentRows)); // check if this is a refresh or the first time
 
         if (_this.parentRows.length > 0) {
           var diffParentRows = newParentRows.filter(function (newRow) {
@@ -3789,7 +4066,7 @@ var CarbonComponents = (function (exports) {
             var diffExpandableRows = diffParentRows.map(function (newRow) {
               return newRow.nextElementSibling;
             });
-            var mergedExpandableRows = [].concat(_toConsumableArray(toArray$4(_this.expandableRows)), _toConsumableArray(toArray$4(diffExpandableRows)));
+            var mergedExpandableRows = [].concat(_toConsumableArray(toArray$7(_this.expandableRows)), _toConsumableArray(toArray$7(diffExpandableRows)));
             _this.expandableRows = mergedExpandableRows;
           }
         } else if (newExpandableRows.length > 0) {
@@ -3813,15 +4090,11 @@ var CarbonComponents = (function (exports) {
 
       _this.refreshRows();
 
-      _this.element.addEventListener('mouseover', function (evt) {
-        var eventElement = eventMatches(evt, _this.options.selectorChildRow);
+      _this.manage(on(_this.element, 'mouseover', _this._expandableHoverToggle));
 
-        if (eventElement) {
-          _this._expandableHoverToggle(eventElement, true);
-        }
-      });
+      _this.manage(on(_this.element, 'mouseout', _this._expandableHoverToggle));
 
-      _this.element.addEventListener('click', function (evt) {
+      _this.manage(on(_this.element, 'click', function (evt) {
         var eventElement = eventMatches(evt, _this.options.eventTrigger);
 
         var searchContainer = _this.element.querySelector(_this.options.selectorToolbarSearchContainer);
@@ -3833,9 +4106,9 @@ var CarbonComponents = (function (exports) {
         if (searchContainer) {
           _this._handleDocumentClick(evt);
         }
-      });
+      }));
 
-      _this.element.addEventListener('keydown', _this._keydownHandler);
+      _this.manage(on(_this.element, 'keydown', _this._keydownHandler));
 
       _this.state = {
         checkboxCount: 0
@@ -3931,7 +4204,7 @@ var CarbonComponents = (function (exports) {
     }]);
 
     return DataTable;
-  }(mixin(createComponent, initComponentBySearch, eventedState));
+  }(mixin(createComponent, initComponentBySearch, eventedState, handles));
 
   _defineProperty(DataTable, "components",
   /* #__PURE_CLASS_PROPERTY__ */
@@ -3948,23 +4221,18 @@ var CarbonComponents = (function (exports) {
     'action-bar-cancel': '_actionBarCancel'
   });
 
-  /**
-   * 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.
-   */
-
   var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-  function createCommonjsModule(fn, module) {
-  	return module = { exports: {} }, fn(module, module.exports), module.exports;
+  function createCommonjsModule(fn) {
+    var module = { exports: {} };
+  	return fn(module, module.exports), module.exports;
   }
 
-  var flatpickr = createCommonjsModule(function (module, exports) {
   /* flatpickr v4.6.1, @license MIT */
+
+  var flatpickr = createCommonjsModule(function (module, exports) {
   (function (global, factory) {
-       module.exports = factory() ;
+      module.exports = factory() ;
   }(commonjsGlobal, function () {
       /*! *****************************************************************************
       Copyright (c) Microsoft Corporation. All rights reserved.
@@ -5666,8 +5934,6 @@ var CarbonComponents = (function (exports) {
                               self._input.focus();
                           }
                           break;
-                      default:
-                          break;
                   }
               }
               if (self.amPM !== undefined && e.target === self.amPM) {
@@ -6141,8 +6407,6 @@ var CarbonComponents = (function (exports) {
                               .split(self.l10n.rangeSeparator)
                               .map(function (date) { return self.parseDate(date, format); });
                           break;
-                      default:
-                          break;
                   }
               }
               else
@@ -6572,7 +6836,7 @@ var CarbonComponents = (function (exports) {
     }
   });
 
-  var toArray$5 = function toArray(arrayLike) {
+  var toArray$6 = function toArray(arrayLike) {
     return Array.prototype.slice.call(arrayLike);
   };
   /**
@@ -6637,17 +6901,18 @@ var CarbonComponents = (function (exports) {
 
       return {
         onMonthChange: updateCurrentMonth,
+        onValueUpdate: updateCurrentMonth,
         onOpen: updateCurrentMonth,
         onReady: [setupElements, updateCurrentMonth, register]
       };
     };
   };
 
-  var DatePicker =
-  /*#__PURE__*/
-  function (_mixin) {
+  var DatePicker = /*#__PURE__*/function (_mixin) {
     _inherits(DatePicker, _mixin);
 
+    var _super = _createSuper(DatePicker);
+
     /**
      * DatePicker.
      * @extends CreateComponent
@@ -6660,7 +6925,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, DatePicker);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(DatePicker).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _defineProperty(_assertThisInitialized(_this), "_handleFocus", function () {
         if (_this.calendar) {
@@ -6693,8 +6958,8 @@ var CarbonComponents = (function (exports) {
           // and close the date picker dropdown when this component loses focus
 
           var w = doc.defaultView;
-          var hasFocusin = 'onfocusin' in w;
-          var hasFocusout = 'onfocusout' in w;
+          var hasFocusin = ('onfocusin' in w);
+          var hasFocusout = ('onfocusout' in w);
           var focusinEventName = hasFocusin ? 'focusin' : 'focus';
           var focusoutEventName = hasFocusout ? 'focusout' : 'blur';
 
@@ -6718,6 +6983,7 @@ var CarbonComponents = (function (exports) {
         var calendar = new flatpickr(date, Object.assign(flattenOptions(_this.options), {
           allowInput: true,
           mode: type,
+          disableMobile: true,
           positionElement: type === 'range' && _this.element.querySelector(_this.options.selectorDatePickerInputFrom),
           onClose: function onClose(selectedDates) {
             // An attempt to disable Flatpickr's focus tracking system,
@@ -6870,12 +7136,12 @@ var CarbonComponents = (function (exports) {
           calendarContainer.querySelector('.flatpickr-month').classList.add(_this.options.classMonth);
           calendarContainer.querySelector('.flatpickr-weekdays').classList.add(_this.options.classWeekdays);
           calendarContainer.querySelector('.flatpickr-days').classList.add(_this.options.classDays);
-          toArray$5(calendarContainer.querySelectorAll('.flatpickr-weekday')).forEach(function (item) {
+          toArray$6(calendarContainer.querySelectorAll('.flatpickr-weekday')).forEach(function (item) {
             var currentItem = item;
             currentItem.innerHTML = currentItem.innerHTML.replace(/\s+/g, '');
             currentItem.classList.add(_this.options.classWeekday);
           });
-          toArray$5(calendarContainer.querySelectorAll('.flatpickr-day')).forEach(function (item) {
+          toArray$6(calendarContainer.querySelectorAll('.flatpickr-day')).forEach(function (item) {
             item.classList.add(_this.options.classDay);
 
             if (item.classList.contains('today') && selectedDates.length > 0) {
@@ -7013,11 +7279,11 @@ var CarbonComponents = (function (exports) {
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  var Pagination =
-  /*#__PURE__*/
-  function (_mixin) {
+  var Pagination = /*#__PURE__*/function (_mixin) {
     _inherits(Pagination, _mixin);
 
+    var _super = _createSuper(Pagination);
+
     /**
      * Pagination component.
      * @extends CreateComponent
@@ -7045,7 +7311,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, Pagination);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Pagination).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _defineProperty(_assertThisInitialized(_this), "_emitEvent", function (evtName, detail) {
         var event = new CustomEvent("".concat(evtName), {
@@ -7152,15 +7418,15 @@ var CarbonComponents = (function (exports) {
     }
   }
 
-  var toArray$6 = function toArray(arrayLike) {
+  var toArray$5 = function toArray(arrayLike) {
     return Array.prototype.slice.call(arrayLike);
   };
 
-  var Search =
-  /*#__PURE__*/
-  function (_mixin) {
+  var Search = /*#__PURE__*/function (_mixin) {
     _inherits(Search, _mixin);
 
+    var _super = _createSuper(Search);
+
     /**
      * Search with Options.
      * @extends CreateComponent
@@ -7185,7 +7451,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, Search);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Search).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       var closeIcon = _this.element.querySelector(_this.options.selectorClearIcon);
 
@@ -7225,7 +7491,7 @@ var CarbonComponents = (function (exports) {
       value: function toggleLayout(element) {
         var _this2 = this;
 
-        toArray$6(element.querySelectorAll(this.options.selectorSearchView)).forEach(function (item) {
+        toArray$5(element.querySelectorAll(this.options.selectorSearchView)).forEach(function (item) {
           item.classList.toggle(_this2.options.classLayoutHidden);
         });
       }
@@ -7290,11 +7556,11 @@ var CarbonComponents = (function (exports) {
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  var Accordion =
-  /*#__PURE__*/
-  function (_mixin) {
+  var Accordion = /*#__PURE__*/function (_mixin) {
     _inherits(Accordion, _mixin);
 
+    var _super = _createSuper(Accordion);
+
     /**
      * Accordion.
      * @extends CreateComponent
@@ -7307,7 +7573,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, Accordion);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Accordion).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _this.manage(on(_this.element, 'click', function (event) {
         var item = eventMatches(event, _this.options.selectorAccordionItem);
@@ -7403,11 +7669,11 @@ var CarbonComponents = (function (exports) {
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  var CopyButton =
-  /*#__PURE__*/
-  function (_mixin) {
+  var CopyButton = /*#__PURE__*/function (_mixin) {
     _inherits(CopyButton, _mixin);
 
+    var _super = _createSuper(CopyButton);
+
     /**
      * CopyBtn UI.
      * @extends CreateComponent
@@ -7420,20 +7686,36 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, CopyButton);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(CopyButton).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _this.manage(on(_this.element, 'click', function () {
         return _this.handleClick();
       }));
 
+      _this.manage(on(_this.element, 'animationend', function (event) {
+        return _this.handleAnimationEnd(event);
+      }));
+
       return _this;
     }
     /**
-     * Show the feedback tooltip on click. Hide the feedback tooltip after specified timeout value.
+     * Cleanup animation classes
      */
 
 
     _createClass(CopyButton, [{
+      key: "handleAnimationEnd",
+      value: function handleAnimationEnd(event) {
+        if (event.animationName === 'hide-feedback') {
+          this.element.classList.remove(this.options.classAnimating);
+          this.element.classList.remove(this.options.classFadeOut);
+        }
+      }
+      /**
+       * Show the feedback tooltip on click. Hide the feedback tooltip after specified timeout value.
+       */
+
+    }, {
       key: "handleClick",
       value: function handleClick() {
         var _this2 = this;
@@ -7445,6 +7727,14 @@ var CarbonComponents = (function (exports) {
           setTimeout(function () {
             feedback.classList.remove(_this2.options.classShowFeedback);
           }, this.options.timeoutValue);
+        } else {
+          this.element.classList.add(this.options.classAnimating);
+          this.element.classList.add(this.options.classFadeIn);
+          setTimeout(function () {
+            _this2.element.classList.remove(_this2.options.classFadeIn);
+
+            _this2.element.classList.add(_this2.options.classFadeOut);
+          }, this.options.timeoutValue);
         }
       }
       /**
@@ -7455,7 +7745,7 @@ var CarbonComponents = (function (exports) {
 
     }], [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor, {@linkcode CopyBtn.create .create()}, or {@linkcode CopyBtn.init .init()},
@@ -7467,12 +7757,15 @@ var CarbonComponents = (function (exports) {
        * @property {string} classShowFeedback The CSS selector for showing the feedback tooltip.
        * @property {number} timeoutValue The specified timeout value before the feedback tooltip is hidden.
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           selectorInit: '[data-copy-btn]',
           feedbackTooltip: '[data-feedback]',
           classShowFeedback: "".concat(prefix, "--btn--copy__feedback--displayed"),
+          classAnimating: "".concat(prefix, "--copy-btn--animating"),
+          classFadeIn: "".concat(prefix, "--copy-btn--fade-in"),
+          classFadeOut: "".concat(prefix, "--copy-btn--fade-out"),
           timeoutValue: 2000
         };
       }
@@ -7485,11 +7778,11 @@ var CarbonComponents = (function (exports) {
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  var Notification =
-  /*#__PURE__*/
-  function (_mixin) {
+  var Notification = /*#__PURE__*/function (_mixin) {
     _inherits(Notification, _mixin);
 
+    var _super = _createSuper(Notification);
+
     /**
      * InlineNotification.
      * @extends CreateComponent
@@ -7502,7 +7795,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, Notification);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Notification).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _defineProperty(_assertThisInitialized(_this), "_changeState", function (state, callback) {
         if (state === 'delete-notification') {
@@ -7555,15 +7848,15 @@ var CarbonComponents = (function (exports) {
     eventAfterDeleteNotification: 'notification-after-delete'
   });
 
-  var toArray$7 = function toArray(arrayLike) {
+  var toArray$4 = function toArray(arrayLike) {
     return Array.prototype.slice.call(arrayLike);
   };
 
-  var Toolbar =
-  /*#__PURE__*/
-  function (_mixin) {
+  var Toolbar = /*#__PURE__*/function (_mixin) {
     _inherits(Toolbar, _mixin);
 
+    var _super = _createSuper(Toolbar);
+
     /**
      * Toolbar.
      * @extends CreateComponent
@@ -7576,7 +7869,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, Toolbar);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Toolbar).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       if (!_this.element.dataset.tableTarget) {
         console.warn('There is no table bound to this toolbar!'); // eslint-disable-line no-console
@@ -7629,7 +7922,7 @@ var CarbonComponents = (function (exports) {
         }
 
         var targetComponentElement = eventMatches(event, this.options.selectorInit);
-        toArray$7(this.element.ownerDocument.querySelectorAll(this.options.selectorSearch)).forEach(function (item) {
+        toArray$4(this.element.ownerDocument.querySelectorAll(this.options.selectorSearch)).forEach(function (item) {
           if (!targetComponentElement || !targetComponentElement.contains(item)) {
             item.classList.remove(_this2.options.classSearchActive);
           }
@@ -7674,7 +7967,7 @@ var CarbonComponents = (function (exports) {
 
     }], [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor,
@@ -7685,7 +7978,7 @@ var CarbonComponents = (function (exports) {
        * @property {string} classTallRows The CSS class for making table rows into tall rows.
        * @property {string} classSearchActive The CSS class the active state of the search input.
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           selectorInit: '[data-toolbar]',
@@ -7704,103 +7997,423 @@ var CarbonComponents = (function (exports) {
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  /**
-   * lodash (Custom Build) <https://lodash.com/>
-   * Build: `lodash modularize exports="npm" -o ./`
-   * Copyright jQuery Foundation and other contributors <https://jquery.org/>
-   * Released under MIT license <https://lodash.com/license>
-   * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
-   * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
-   */
+  function initComponentByEvent (ToMix) {
+    /**
+     * Mix-in class to instantiate components upon events.
+     * @class InitComponentByEvent
+     */
+    var InitComponentByEvent = /*#__PURE__*/function (_ToMix) {
+      _inherits(InitComponentByEvent, _ToMix);
 
-  /** Used as the `TypeError` message for "Functions" methods. */
-  var FUNC_ERROR_TEXT = 'Expected a function';
+      var _super = _createSuper(InitComponentByEvent);
 
-  /** Used as references for various `Number` constants. */
-  var NAN = 0 / 0;
+      function InitComponentByEvent() {
+        _classCallCheck(this, InitComponentByEvent);
 
-  /** `Object#toString` result references. */
-  var symbolTag = '[object Symbol]';
+        return _super.apply(this, arguments);
+      }
 
-  /** Used to match leading and trailing whitespace. */
-  var reTrim = /^\s+|\s+$/g;
+      _createClass(InitComponentByEvent, null, [{
+        key: "init",
+        value:
+        /**
+         * `true` suggests that this component is lazily initialized upon an action/event, etc.
+         * @type {boolean}
+         */
 
-  /** Used to detect bad signed hexadecimal string values. */
-  var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+        /**
+         * Instantiates this component in the given element.
+         * If the given element indicates that it's an component of this class, instantiates it.
+         * Otherwise, instantiates this component by clicking on this component in the given node.
+         * @param {Node} target The DOM node to instantiate this component in. Should be a document or an element.
+         * @param {object} [options] The component options.
+         * @param {string} [options.selectorInit] The CSS selector to find this component.
+         * @returns {Handle} The handle to remove the event listener to handle clicking.
+         */
+        function init() {
+          var _this = this;
 
-  /** Used to detect binary string values. */
-  var reIsBinary = /^0b[01]+$/i;
+          var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
+          var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+          var effectiveOptions = Object.assign(Object.create(this.options), options);
 
-  /** Used to detect octal string values. */
-  var reIsOctal = /^0o[0-7]+$/i;
+          if (!target || target.nodeType !== Node.ELEMENT_NODE && target.nodeType !== Node.DOCUMENT_NODE) {
+            throw new TypeError('DOM document or DOM element should be given to search for and initialize this widget.');
+          }
 
-  /** Built-in method references without a dependency on `root`. */
-  var freeParseInt = parseInt;
+          if (target.nodeType === Node.ELEMENT_NODE && target.matches(effectiveOptions.selectorInit)) {
+            this.create(target, options);
+          } else {
+            // To work around non-bubbling `focus` event, use `focusin` event instead of it's available, and "capture mode" otherwise
+            var hasFocusin = ('onfocusin' in (target.nodeType === Node.ELEMENT_NODE ? target.ownerDocument : target).defaultView);
+            var handles = effectiveOptions.initEventNames.map(function (name) {
+              var eventName = name === 'focus' && hasFocusin ? 'focusin' : name;
+              return on(target, eventName, function (event) {
+                var element = eventMatches(event, effectiveOptions.selectorInit); // Instantiated components handles events by themselves
 
-  /** Detect free variable `global` from Node.js. */
-  var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+                if (element && !_this.components.has(element)) {
+                  var component = _this.create(element, options);
 
-  /** Detect free variable `self`. */
-  var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+                  if (typeof component.createdByEvent === 'function') {
+                    component.createdByEvent(event);
+                  }
+                }
+              }, name === 'focus' && !hasFocusin);
+            });
+            return {
+              release: function release() {
+                for (var handle = handles.pop(); handle; handle = handles.pop()) {
+                  handle.release();
+                }
+              }
+            };
+          }
 
-  /** Used as a reference to the global object. */
-  var root = freeGlobal || freeSelf || Function('return this')();
+          return '';
+        }
+      }]);
 
-  /** Used for built-in method references. */
-  var objectProto = Object.prototype;
+      return InitComponentByEvent;
+    }(ToMix);
+
+    _defineProperty(InitComponentByEvent, "forLazyInit",
+    /* #__PURE_CLASS_PROPERTY__ */
+    true);
+
+    return InitComponentByEvent;
+  }
 
   /**
-   * Used to resolve the
-   * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
-   * of values.
+   * @param {Element} menuBody The menu body with the menu arrow.
+   * @param {string} menuDirection Where the floating menu menu should be placed relative to the trigger button.
+   * @returns {FloatingMenu~offset} The adjustment of the floating menu position, upon the position of the menu arrow.
+   * @private
    */
-  var objectToString = objectProto.toString;
 
-  /* Built-in method references for those with the same name as other `lodash` methods. */
-  var nativeMax = Math.max,
-      nativeMin = Math.min;
+  var getMenuOffset = function getMenuOffset(menuBody, menuDirection) {
+    var _DIRECTION_LEFT$DIREC, _DIRECTION_LEFT$DIREC2;
+
+    var arrowStyle = menuBody.ownerDocument.defaultView.getComputedStyle(menuBody, ':before');
+    var arrowPositionProp = (_DIRECTION_LEFT$DIREC = {}, _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_LEFT, 'right'), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_TOP, 'bottom'), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_RIGHT, 'left'), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_BOTTOM, 'top'), _DIRECTION_LEFT$DIREC)[menuDirection];
+    var menuPositionAdjustmentProp = (_DIRECTION_LEFT$DIREC2 = {}, _defineProperty(_DIRECTION_LEFT$DIREC2, DIRECTION_LEFT, 'left'), _defineProperty(_DIRECTION_LEFT$DIREC2, DIRECTION_TOP, 'top'), _defineProperty(_DIRECTION_LEFT$DIREC2, DIRECTION_RIGHT, 'left'), _defineProperty(_DIRECTION_LEFT$DIREC2, DIRECTION_BOTTOM, 'top'), _DIRECTION_LEFT$DIREC2)[menuDirection];
+    var values = [arrowPositionProp, 'border-bottom-width'].reduce(function (o, name) {
+      return _objectSpread2(_objectSpread2({}, o), {}, _defineProperty({}, name, Number((/^([\d-.]+)px$/.exec(arrowStyle.getPropertyValue(name)) || [])[1])));
+    }, {});
+    var margin = 0;
+
+    if (menuDirection !== DIRECTION_BOTTOM) {
+      var style = menuBody.ownerDocument.defaultView.getComputedStyle(menuBody);
+      margin = Number((/^([\d-.]+)px$/.exec(style.getPropertyValue('margin-top')) || [])[1]);
+    }
+
+    values[arrowPositionProp] = values[arrowPositionProp] || -6; // IE, etc.
+
+    if (Object.keys(values).every(function (name) {
+      return !isNaN(values[name]);
+    })) {
+      var arrowPosition = values[arrowPositionProp],
+          borderBottomWidth = values['border-bottom-width'];
+      return _defineProperty({
+        left: 0,
+        top: 0
+      }, menuPositionAdjustmentProp, Math.sqrt(Math.pow(borderBottomWidth, 2) * 2) - arrowPosition + margin * (menuDirection === DIRECTION_TOP ? 2 : 1));
+    }
 
+    return undefined;
+  };
   /**
-   * Gets the timestamp of the number of milliseconds that have elapsed since
-   * the Unix epoch (1 January 1970 00:00:00 UTC).
-   *
-   * @static
-   * @memberOf _
-   * @since 2.4.0
-   * @category Date
-   * @returns {number} Returns the timestamp.
-   * @example
-   *
-   * _.defer(function(stamp) {
-   *   console.log(_.now() - stamp);
-   * }, _.now());
-   * // => Logs the number of milliseconds it took for the deferred invocation.
+   * Key codes for allowed keys that will trigger opening a tooltip
+   * @type {Integer[]}
+   * @private
    */
-  var now = function() {
-    return root.Date.now();
-  };
 
-  /**
-   * Creates a debounced function that delays invoking `func` until after `wait`
-   * milliseconds have elapsed since the last time the debounced function was
-   * invoked. The debounced function comes with a `cancel` method to cancel
-   * delayed `func` invocations and a `flush` method to immediately invoke them.
-   * Provide `options` to indicate whether `func` should be invoked on the
-   * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
-   * with the last arguments provided to the debounced function. Subsequent
-   * calls to the debounced function return the result of the last `func`
-   * invocation.
-   *
-   * **Note:** If `leading` and `trailing` options are `true`, `func` is
-   * invoked on the trailing edge of the timeout only if the debounced function
-   * is invoked more than once during the `wait` timeout.
-   *
-   * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
-   * until to the next tick, similar to `setTimeout` with a timeout of `0`.
-   *
-   * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
-   * for details over the differences between `_.debounce` and `_.throttle`.
-   *
+
+  var allowedOpenKeys = [32, 13];
+
+  var Tooltip = /*#__PURE__*/function (_mixin) {
+    _inherits(Tooltip, _mixin);
+
+    var _super = _createSuper(Tooltip);
+
+    /**
+     * Tooltip.
+     * @extends CreateComponent
+     * @extends InitComponentBySearch
+     * @extends Handles
+     */
+    function Tooltip(element, options) {
+      var _this;
+
+      _classCallCheck(this, Tooltip);
+
+      _this = _super.call(this, element, options);
+
+      _defineProperty(_assertThisInitialized(_this), "_hasContextMenu", false);
+
+      _this._hookOn(element);
+
+      return _this;
+    }
+    /**
+     * A flag to detect if `oncontextmenu` event is fired right before `focus`/`blur` events.
+     * @type {boolean}
+     */
+
+
+    _createClass(Tooltip, [{
+      key: "createdByEvent",
+      value:
+      /**
+       * A method called when this widget is created upon events.
+       * @param {Event} event The event triggering the creation.
+       */
+      function createdByEvent(event) {
+        var relatedTarget = event.relatedTarget,
+            type = event.type,
+            which = event.which;
+
+        if (type === 'click' || allowedOpenKeys.includes(which)) {
+          this._handleClick({
+            relatedTarget: relatedTarget,
+            type: type,
+            details: getLaunchingDetails(event)
+          });
+        }
+      }
+      /**
+       * Changes the shown/hidden state.
+       * @param {string} state The new state.
+       * @param {object} detail The detail of the event trigging this action.
+       * @param {Function} callback Callback called when change in state completes.
+       */
+
+    }, {
+      key: "changeState",
+      value: function changeState(state, detail, callback) {
+        if (!this.tooltip) {
+          var tooltip = this.element.ownerDocument.querySelector(this.element.getAttribute(this.options.attribTooltipTarget));
+
+          if (!tooltip) {
+            throw new Error('Cannot find the target tooltip.');
+          } // Lazily create a component instance for tooltip
+
+
+          this.tooltip = FloatingMenu.create(tooltip, {
+            refNode: this.element,
+            classShown: this.options.classShown,
+            offset: this.options.objMenuOffset,
+            contentNode: tooltip.querySelector(this.options.selectorContent)
+          });
+
+          this._hookOn(tooltip);
+
+          this.children.push(this.tooltip);
+        } // Delegates the action of changing state to the tooltip.
+        // (And thus the before/after shown/hidden events are fired from the tooltip)
+
+
+        this.tooltip.changeState(state, Object.assign(detail, {
+          delegatorNode: this.element
+        }), callback);
+      }
+      /**
+       * Attaches event handlers to show the tooltip.
+       * @param {Element} element The element to attach the events to.
+       * @private
+       */
+
+    }, {
+      key: "_hookOn",
+      value: function _hookOn(element) {
+        var _this2 = this;
+
+        /**
+         * Setup the _handleClick function for displaying a tooltip
+         * @param {Event} evt - user initiated event
+         * @param {Integer[]} [allowedKeys] - allowed key codes the user may press to open the tooltip
+         * @private
+         */
+        var handleClickContextMenu = function handleClickContextMenu(evt, allowedKeys) {
+          var relatedTarget = evt.relatedTarget,
+              type = evt.type,
+              which = evt.which; // Allow user to use `space` or `enter` to open tooltip
+
+          if (typeof allowedKeys === 'undefined' || allowedKeys.includes(which)) {
+            var hadContextMenu = _this2._hasContextMenu;
+            _this2._hasContextMenu = type === 'contextmenu';
+
+            _this2._handleClick({
+              relatedTarget: relatedTarget,
+              type: type,
+              hadContextMenu: hadContextMenu,
+              details: getLaunchingDetails(evt)
+            });
+          }
+        };
+
+        this.manage(on(element, 'click', handleClickContextMenu, false));
+
+        if (this.element.tagName !== 'BUTTON') {
+          this.manage(on(this.element, 'keydown', function (event) {
+            handleClickContextMenu(event, allowedOpenKeys);
+          }, false));
+        }
+      }
+      /**
+       * Handles click/focus events.
+       * @param {object} params The parameters.
+       * @param {Element} params.relatedTarget The element that focus went to. (For `blur` event)
+       * @param {string} params.type The event type triggering this method.
+       * @param {boolean} params.hadContextMenu
+       * @param {object} params.details The event details.
+       * @private
+       */
+
+    }, {
+      key: "_handleClick",
+      value: function _handleClick(_ref2) {
+        var relatedTarget = _ref2.relatedTarget,
+            type = _ref2.type,
+            hadContextMenu = _ref2.hadContextMenu,
+            details = _ref2.details;
+        var state = {
+          click: 'shown',
+          keydown: 'shown',
+          blur: 'hidden',
+          touchleave: 'hidden',
+          touchcancel: 'hidden'
+        }[type];
+        var shouldPreventClose;
+
+        if (type === 'blur') {
+          // Note: SVGElement in IE11 does not have `.contains()`
+          var wentToSelf = relatedTarget && this.element.contains && this.element.contains(relatedTarget) || this.tooltip && this.tooltip.element.contains(relatedTarget);
+          shouldPreventClose = hadContextMenu || wentToSelf;
+        }
+
+        if (!shouldPreventClose) {
+          this.changeState(state, details);
+        }
+      }
+    }], [{
+      key: "options",
+      get: function get() {
+        var prefix = settings_1.prefix;
+        return {
+          selectorInit: '[data-tooltip-trigger]',
+          selectorContent: ".".concat(prefix, "--tooltip__content"),
+          classShown: "".concat(prefix, "--tooltip--shown"),
+          attribTooltipTarget: 'data-tooltip-target',
+          objMenuOffset: getMenuOffset,
+          initEventNames: ['click', 'keydown']
+        };
+      }
+    }]);
+
+    return Tooltip;
+  }(mixin(createComponent, initComponentByEvent, exports$2, handles));
+
+  _defineProperty(Tooltip, "components",
+  /* #__PURE_CLASS_PROPERTY__ */
+  new WeakMap());
+
+  /**
+   * lodash (Custom Build) <https://lodash.com/>
+   * Build: `lodash modularize exports="npm" -o ./`
+   * Copyright jQuery Foundation and other contributors <https://jquery.org/>
+   * Released under MIT license <https://lodash.com/license>
+   * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+   * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+   */
+
+  /** Used as the `TypeError` message for "Functions" methods. */
+  var FUNC_ERROR_TEXT = 'Expected a function';
+
+  /** Used as references for various `Number` constants. */
+  var NAN = 0 / 0;
+
+  /** `Object#toString` result references. */
+  var symbolTag = '[object Symbol]';
+
+  /** Used to match leading and trailing whitespace. */
+  var reTrim = /^\s+|\s+$/g;
+
+  /** Used to detect bad signed hexadecimal string values. */
+  var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+  /** Used to detect binary string values. */
+  var reIsBinary = /^0b[01]+$/i;
+
+  /** Used to detect octal string values. */
+  var reIsOctal = /^0o[0-7]+$/i;
+
+  /** Built-in method references without a dependency on `root`. */
+  var freeParseInt = parseInt;
+
+  /** Detect free variable `global` from Node.js. */
+  var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+  /** Detect free variable `self`. */
+  var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+  /** Used as a reference to the global object. */
+  var root = freeGlobal || freeSelf || Function('return this')();
+
+  /** Used for built-in method references. */
+  var objectProto = Object.prototype;
+
+  /**
+   * Used to resolve the
+   * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+   * of values.
+   */
+  var objectToString = objectProto.toString;
+
+  /* Built-in method references for those with the same name as other `lodash` methods. */
+  var nativeMax = Math.max,
+      nativeMin = Math.min;
+
+  /**
+   * Gets the timestamp of the number of milliseconds that have elapsed since
+   * the Unix epoch (1 January 1970 00:00:00 UTC).
+   *
+   * @static
+   * @memberOf _
+   * @since 2.4.0
+   * @category Date
+   * @returns {number} Returns the timestamp.
+   * @example
+   *
+   * _.defer(function(stamp) {
+   *   console.log(_.now() - stamp);
+   * }, _.now());
+   * // => Logs the number of milliseconds it took for the deferred invocation.
+   */
+  var now = function() {
+    return root.Date.now();
+  };
+
+  /**
+   * Creates a debounced function that delays invoking `func` until after `wait`
+   * milliseconds have elapsed since the last time the debounced function was
+   * invoked. The debounced function comes with a `cancel` method to cancel
+   * delayed `func` invocations and a `flush` method to immediately invoke them.
+   * Provide `options` to indicate whether `func` should be invoked on the
+   * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+   * with the last arguments provided to the debounced function. Subsequent
+   * calls to the debounced function return the result of the last `func`
+   * invocation.
+   *
+   * **Note:** If `leading` and `trailing` options are `true`, `func` is
+   * invoked on the trailing edge of the timeout only if the debounced function
+   * is invoked more than once during the `wait` timeout.
+   *
+   * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+   * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+   *
+   * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+   * for details over the differences between `_.debounce` and `_.throttle`.
+   *
    * @static
    * @memberOf _
    * @since 0.1.0
@@ -8055,336 +8668,167 @@ var CarbonComponents = (function (exports) {
    *
    * _.toNumber(Infinity);
    * // => Infinity
-   *
-   * _.toNumber('3.2');
-   * // => 3.2
-   */
-  function toNumber(value) {
-    if (typeof value == 'number') {
-      return value;
-    }
-    if (isSymbol(value)) {
-      return NAN;
-    }
-    if (isObject(value)) {
-      var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
-      value = isObject(other) ? (other + '') : other;
-    }
-    if (typeof value != 'string') {
-      return value === 0 ? value : +value;
-    }
-    value = value.replace(reTrim, '');
-    var isBinary = reIsBinary.test(value);
-    return (isBinary || reIsOctal.test(value))
-      ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
-      : (reIsBadHex.test(value) ? NAN : +value);
-  }
-
-  var lodash_debounce = debounce;
-
-  function initComponentByEvent (ToMix) {
-    /**
-     * Mix-in class to instantiate components upon events.
-     * @class InitComponentByEvent
-     */
-    var InitComponentByEvent =
-    /*#__PURE__*/
-    function (_ToMix) {
-      _inherits(InitComponentByEvent, _ToMix);
-
-      function InitComponentByEvent() {
-        _classCallCheck(this, InitComponentByEvent);
-
-        return _possibleConstructorReturn(this, _getPrototypeOf(InitComponentByEvent).apply(this, arguments));
-      }
-
-      _createClass(InitComponentByEvent, null, [{
-        key: "init",
-
-        /**
-         * `true` suggests that this component is lazily initialized upon an action/event, etc.
-         * @type {boolean}
-         */
-
-        /**
-         * Instantiates this component in the given element.
-         * If the given element indicates that it's an component of this class, instantiates it.
-         * Otherwise, instantiates this component by clicking on this component in the given node.
-         * @param {Node} target The DOM node to instantiate this component in. Should be a document or an element.
-         * @param {object} [options] The component options.
-         * @param {string} [options.selectorInit] The CSS selector to find this component.
-         * @returns {Handle} The handle to remove the event listener to handle clicking.
-         */
-        value: function init() {
-          var _this = this;
-
-          var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
-          var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-          var effectiveOptions = Object.assign(Object.create(this.options), options);
-
-          if (!target || target.nodeType !== Node.ELEMENT_NODE && target.nodeType !== Node.DOCUMENT_NODE) {
-            throw new TypeError('DOM document or DOM element should be given to search for and initialize this widget.');
-          }
-
-          if (target.nodeType === Node.ELEMENT_NODE && target.matches(effectiveOptions.selectorInit)) {
-            this.create(target, options);
-          } else {
-            // To work around non-bubbling `focus` event, use `focusin` event instead of it's available, and "capture mode" otherwise
-            var hasFocusin = 'onfocusin' in (target.nodeType === Node.ELEMENT_NODE ? target.ownerDocument : target).defaultView;
-            var handles = effectiveOptions.initEventNames.map(function (name) {
-              var eventName = name === 'focus' && hasFocusin ? 'focusin' : name;
-              return on(target, eventName, function (event) {
-                var element = eventMatches(event, effectiveOptions.selectorInit); // Instantiated components handles events by themselves
-
-                if (element && !_this.components.has(element)) {
-                  var component = _this.create(element, options);
-
-                  if (typeof component.createdByEvent === 'function') {
-                    component.createdByEvent(event);
-                  }
-                }
-              }, name === 'focus' && !hasFocusin);
-            });
-            return {
-              release: function release() {
-                for (var handle = handles.pop(); handle; handle = handles.pop()) {
-                  handle.release();
-                }
-              }
-            };
-          }
-
-          return '';
-        }
-      }]);
-
-      return InitComponentByEvent;
-    }(ToMix);
-
-    _defineProperty(InitComponentByEvent, "forLazyInit",
-    /* #__PURE_CLASS_PROPERTY__ */
-    true);
-
-    return InitComponentByEvent;
-  }
-
-  /**
-   * @param {Element} menuBody The menu body with the menu arrow.
-   * @param {string} menuDirection Where the floating menu menu should be placed relative to the trigger button.
-   * @returns {FloatingMenu~offset} The adjustment of the floating menu position, upon the position of the menu arrow.
-   * @private
-   */
-
-  var getMenuOffset$1 = function getMenuOffset(menuBody, menuDirection) {
-    var _DIRECTION_LEFT$DIREC, _DIRECTION_LEFT$DIREC2;
-
-    var arrowStyle = menuBody.ownerDocument.defaultView.getComputedStyle(menuBody, ':before');
-    var arrowPositionProp = (_DIRECTION_LEFT$DIREC = {}, _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_LEFT, 'right'), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_TOP, 'bottom'), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_RIGHT, 'left'), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_BOTTOM, 'top'), _DIRECTION_LEFT$DIREC)[menuDirection];
-    var menuPositionAdjustmentProp = (_DIRECTION_LEFT$DIREC2 = {}, _defineProperty(_DIRECTION_LEFT$DIREC2, DIRECTION_LEFT, 'left'), _defineProperty(_DIRECTION_LEFT$DIREC2, DIRECTION_TOP, 'top'), _defineProperty(_DIRECTION_LEFT$DIREC2, DIRECTION_RIGHT, 'left'), _defineProperty(_DIRECTION_LEFT$DIREC2, DIRECTION_BOTTOM, 'top'), _DIRECTION_LEFT$DIREC2)[menuDirection];
-    var values = [arrowPositionProp, 'border-bottom-width'].reduce(function (o, name) {
-      return _objectSpread2({}, o, _defineProperty({}, name, Number((/^([\d-.]+)px$/.exec(arrowStyle.getPropertyValue(name)) || [])[1])));
-    }, {});
-    var margin = 0;
-
-    if (menuDirection !== DIRECTION_BOTTOM) {
-      var style = menuBody.ownerDocument.defaultView.getComputedStyle(menuBody);
-      margin = Number((/^([\d-.]+)px$/.exec(style.getPropertyValue('margin-top')) || [])[1]);
+   *
+   * _.toNumber('3.2');
+   * // => 3.2
+   */
+  function toNumber(value) {
+    if (typeof value == 'number') {
+      return value;
     }
-
-    values[arrowPositionProp] = values[arrowPositionProp] || -6; // IE, etc.
-
-    if (Object.keys(values).every(function (name) {
-      return !isNaN(values[name]);
-    })) {
-      var arrowPosition = values[arrowPositionProp],
-          borderBottomWidth = values['border-bottom-width'];
-      return _defineProperty({
-        left: 0,
-        top: 0
-      }, menuPositionAdjustmentProp, Math.sqrt(Math.pow(borderBottomWidth, 2) * 2) - arrowPosition + margin * (menuDirection === DIRECTION_TOP ? 2 : 1));
+    if (isSymbol(value)) {
+      return NAN;
+    }
+    if (isObject(value)) {
+      var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+      value = isObject(other) ? (other + '') : other;
+    }
+    if (typeof value != 'string') {
+      return value === 0 ? value : +value;
     }
+    value = value.replace(reTrim, '');
+    var isBinary = reIsBinary.test(value);
+    return (isBinary || reIsOctal.test(value))
+      ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
+      : (reIsBadHex.test(value) ? NAN : +value);
+  }
 
-    return undefined;
-  };
+  var lodash_debounce = debounce;
 
-  var Tooltip =
-  /*#__PURE__*/
-  function (_mixin) {
-    _inherits(Tooltip, _mixin);
+  var TooltipSimple = /*#__PURE__*/function (_mixin) {
+    _inherits(TooltipSimple, _mixin);
+
+    var _super = _createSuper(TooltipSimple);
 
     /**
-     * Tooltip.
+     * Simple Tooltip.
      * @extends CreateComponent
      * @extends InitComponentBySearch
      * @extends Handles
+     * @param {HTMLElement} element - The element functioning as a text field.
      */
-    function Tooltip(element, options) {
+    function TooltipSimple(element, options) {
       var _this;
 
-      _classCallCheck(this, Tooltip);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Tooltip).call(this, element, options));
-
-      _defineProperty(_assertThisInitialized(_this), "_hasContextMenu", false);
-
-      _defineProperty(_assertThisInitialized(_this), "_debouncedHandleClick", lodash_debounce(_this._handleClick, 200));
-
-      _this._hookOn(element);
+      _classCallCheck(this, TooltipSimple);
 
-      return _this;
-    }
-    /**
-     * A flag to detect if `oncontextmenu` event is fired right before `focus`/`blur` events.
-     * @type {boolean}
-     */
+      _this = _super.call(this, element, options);
 
+      _defineProperty(_assertThisInitialized(_this), "tooltipFadeOut", lodash_debounce(function () {
+        var tooltipTriggerButton = _this.getTooltipTriggerButton();
 
-    _createClass(Tooltip, [{
-      key: "createdByEvent",
+        if (tooltipTriggerButton) {
+          tooltipTriggerButton.classList.remove(_this.options.classTooltipVisible);
+        }
+      }, 100));
 
-      /**
-       * A method called when this widget is created upon events.
-       * @param {Event} event The event triggering the creation.
-       */
-      value: function createdByEvent(event) {
-        var relatedTarget = event.relatedTarget,
-            type = event.type;
+      _defineProperty(_assertThisInitialized(_this), "getTooltipTriggerButton", function () {
+        return _this.element.matches(_this.options.selectorTriggerButton) ? _this.element : _this.element.querySelector(_this.options.selectorTriggerButton);
+      });
 
-        this._debouncedHandleClick({
-          relatedTarget: relatedTarget,
-          type: type === 'focusin' ? 'focus' : type,
-          details: getLaunchingDetails(event)
-        });
-      }
-      /**
-       * Changes the shown/hidden state.
-       * @param {string} state The new state.
-       * @param {object} detail The detail of the event trigging this action.
-       * @param {Function} callback Callback called when change in state completes.
-       // */
+      _defineProperty(_assertThisInitialized(_this), "allowTooltipVisibility", function (_ref) {
+        var visible = _ref.visible;
 
-    }, {
-      key: "changeState",
-      value: function changeState(state, detail, callback) {
-        if (!this.tooltip) {
-          var tooltip = this.element.ownerDocument.querySelector(this.element.getAttribute(this.options.attribTooltipTarget));
+        var tooltipTriggerButton = _this.getTooltipTriggerButton();
 
-          if (!tooltip) {
-            throw new Error('Cannot find the target tooltip.');
-          } // Lazily create a component instance for tooltip
+        if (!tooltipTriggerButton) {
+          return;
+        }
 
+        if (visible) {
+          tooltipTriggerButton.classList.remove(_this.options.classTooltipHidden);
+        } else {
+          tooltipTriggerButton.classList.add(_this.options.classTooltipHidden);
+        }
+      });
 
-          this.tooltip = FloatingMenu.create(tooltip, {
-            refNode: this.element,
-            classShown: this.options.classShown,
-            offset: this.options.objMenuOffset
+      _this.manage(on(_this.element.ownerDocument, 'keydown', function (event) {
+        // ESC
+        if (event.which === 27) {
+          _this.allowTooltipVisibility({
+            visible: false
           });
 
-          this._hookOn(tooltip);
-
-          this.children.push(this.tooltip);
-        } // Delegates the action of changing state to the tooltip.
-        // (And thus the before/after shown/hidden events are fired from the tooltip)
-
-
-        this.tooltip.changeState(state, Object.assign(detail, {
-          delegatorNode: this.element
-        }), callback);
-      }
-      /**
-       * Attaches event handlers to show/hide the tooltip.
-       * @param {Element} element The element to attach the events to.
-       * @private
-       */
+          var tooltipTriggerButton = _this.getTooltipTriggerButton();
 
-    }, {
-      key: "_hookOn",
-      value: function _hookOn(element) {
-        var _this2 = this;
+          if (tooltipTriggerButton) {
+            tooltipTriggerButton.classList.remove(_this.options.classTooltipVisible);
+          }
+        }
+      }));
 
-        var hasFocusin = 'onfocusin' in window;
-        var focusinEventName = hasFocusin ? 'focusin' : 'focus';
-        [focusinEventName, 'blur', 'touchleave', 'touchcancel'].forEach(function (name) {
-          _this2.manage(on(element, name, function (event) {
-            var relatedTarget = event.relatedTarget,
-                type = event.type;
-            var hadContextMenu = _this2._hasContextMenu;
-            _this2._hasContextMenu = type === 'contextmenu';
+      _this.manage(on(_this.element, 'mouseenter', function () {
+        _this.tooltipFadeOut.cancel();
 
-            _this2._debouncedHandleClick({
-              relatedTarget: relatedTarget,
-              type: type === 'focusin' ? 'focus' : type,
-              hadContextMenu: hadContextMenu,
-              details: getLaunchingDetails(event)
-            });
-          }, name === focusinEventName && !hasFocusin));
+        _this.allowTooltipVisibility({
+          visible: true
         });
-      }
-      /**
-       * Handles click/focus events.
-       * @param {object} params The parameters.
-       * @param {Element} params.relatedTarget The element that focus went to. (For `blur` event)
-       * @param {string} params.type The event type triggering this method.
-       * @param {boolean} params.hadContextMenu
-       * @param {object} params.details The event details.
-       * @private
-       */
 
-    }, {
-      key: "_handleClick",
-      value: function _handleClick(_ref2) {
-        var relatedTarget = _ref2.relatedTarget,
-            type = _ref2.type,
-            hadContextMenu = _ref2.hadContextMenu,
-            details = _ref2.details;
-        var state = {
-          focus: 'shown',
-          blur: 'hidden',
-          touchleave: 'hidden',
-          touchcancel: 'hidden'
-        }[type];
-        var shouldPreventClose;
+        var tooltipTriggerButton = _this.getTooltipTriggerButton();
 
-        if (type === 'blur') {
-          // Note: SVGElement in IE11 does not have `.contains()`
-          var wentToSelf = relatedTarget && this.element.contains && this.element.contains(relatedTarget) || this.tooltip && this.tooltip.element.contains(relatedTarget);
-          shouldPreventClose = hadContextMenu || wentToSelf;
+        if (tooltipTriggerButton) {
+          tooltipTriggerButton.classList.add(_this.options.classTooltipVisible);
         }
+      }));
 
-        if (!shouldPreventClose) {
-          this.changeState(state, details);
+      _this.manage(on(_this.element, 'mouseleave', _this.tooltipFadeOut));
+
+      _this.manage(on(_this.element, 'focusin', function (event) {
+        if (eventMatches(event, _this.options.selectorTriggerButton)) {
+          _this.allowTooltipVisibility({
+            visible: true
+          });
         }
-      }
-    }], [{
+      }));
+
+      return _this;
+    }
+
+    _createClass(TooltipSimple, null, [{
       key: "options",
-      get: function get() {
+      get:
+      /**
+       * The component options.
+       *
+       * If `options` is specified in the constructor,
+       * {@linkcode TooltipSimple.create .create()},
+       * or {@linkcode TooltipSimple.init .init()},
+       * properties in this object are overriden for the instance being
+       * created and how {@linkcode TooltipSimple.init .init()} works.
+       * @property {string} selectorInit The CSS selector to find simple tooltip UIs.
+       */
+      function get() {
         var prefix = settings_1.prefix;
         return {
-          selectorInit: '[data-tooltip-trigger]',
-          classShown: "".concat(prefix, "--tooltip--shown"),
-          attribTooltipTarget: 'data-tooltip-target',
-          objMenuOffset: getMenuOffset$1,
-          initEventNames: ['focus']
+          selectorInit: '[data-tooltip-definition],[data-tooltip-icon]',
+          selectorTriggerButton: ".".concat(prefix, "--tooltip__trigger.").concat(prefix, "--tooltip--a11y"),
+          classTooltipHidden: "".concat(prefix, "--tooltip--hidden"),
+          classTooltipVisible: "".concat(prefix, "--tooltip--visible")
         };
       }
+      /**
+       * The map associating DOM element and simple tooltip UI instance.
+       * @type {WeakMap}
+       */
+
     }]);
 
-    return Tooltip;
-  }(mixin(createComponent, initComponentByEvent, exports$1, handles));
+    return TooltipSimple;
+  }(mixin(createComponent, initComponentBySearch, handles));
 
-  _defineProperty(Tooltip, "components",
+  _defineProperty(TooltipSimple, "components",
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  var toArray$8 = function toArray(arrayLike) {
+  var toArray$3 = function toArray(arrayLike) {
     return Array.prototype.slice.call(arrayLike);
   };
 
-  var ProgressIndicator =
-  /*#__PURE__*/
-  function (_mixin) {
+  var ProgressIndicator = /*#__PURE__*/function (_mixin) {
     _inherits(ProgressIndicator, _mixin);
 
+    var _super = _createSuper(ProgressIndicator);
+
     /**
      * ProgressIndicator.
      * @extends CreateComponent
@@ -8405,10 +8849,10 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, ProgressIndicator);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(ProgressIndicator).call(this, element, options));
+      _this = _super.call(this, element, options);
       /**
        * The component state.
-       * @type {Object}
+       * @type {object}
        */
 
       _this.state = {
@@ -8437,7 +8881,7 @@ var CarbonComponents = (function (exports) {
     _createClass(ProgressIndicator, [{
       key: "getSteps",
       value: function getSteps() {
-        return toArray$8(this.element.querySelectorAll(this.options.selectorStepElement)).map(function (element, index) {
+        return toArray$3(this.element.querySelectorAll(this.options.selectorStepElement)).map(function (element, index) {
           return {
             element: element,
             index: index
@@ -8560,8 +9004,8 @@ var CarbonComponents = (function (exports) {
       value: function addOverflowTooltip() {
         var _this3 = this;
 
-        var stepLabels = toArray$8(this.element.querySelectorAll(this.options.selectorLabel));
-        var tooltips = toArray$8(this.element.querySelectorAll(this.options.selectorTooltip));
+        var stepLabels = toArray$3(this.element.querySelectorAll(this.options.selectorLabel));
+        var tooltips = toArray$3(this.element.querySelectorAll(this.options.selectorTooltip));
         stepLabels.forEach(function (step) {
           if (step.scrollWidth > _this3.options.maxWidth) {
             step.classList.add(_this3.options.classOverflowLabel);
@@ -8577,7 +9021,7 @@ var CarbonComponents = (function (exports) {
       }
     }], [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor,
@@ -8595,7 +9039,7 @@ var CarbonComponents = (function (exports) {
        * @property {string} [classCurrent] The className for the current step element.
        * @property {string} [classIncomplete] The className for a incomplete step element.
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           selectorInit: '[data-progress]',
@@ -8625,15 +9069,15 @@ var CarbonComponents = (function (exports) {
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  var toArray$9 = function toArray(arrayLike) {
+  var toArray$2 = function toArray(arrayLike) {
     return Array.prototype.slice.call(arrayLike);
   };
 
-  var StructuredList =
-  /*#__PURE__*/
-  function (_mixin) {
+  var StructuredList = /*#__PURE__*/function (_mixin) {
     _inherits(StructuredList, _mixin);
 
+    var _super = _createSuper(StructuredList);
+
     /**
      * StructuredList
      * @extends CreateComponent
@@ -8649,7 +9093,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, StructuredList);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(StructuredList).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _this.manage(on(_this.element, 'keydown', function (evt) {
         if (evt.which === 37 || evt.which === 38 || evt.which === 39 || evt.which === 40) {
@@ -8690,7 +9134,7 @@ var CarbonComponents = (function (exports) {
     }, {
       key: "_getInput",
       value: function _getInput(index) {
-        var rows = toArray$9(this.element.querySelectorAll(this.options.selectorRow));
+        var rows = toArray$2(this.element.querySelectorAll(this.options.selectorRow));
         return this.element.ownerDocument.querySelector(this.options.selectorListInput(rows[index].getAttribute('for')));
       }
     }, {
@@ -8706,7 +9150,7 @@ var CarbonComponents = (function (exports) {
         var _this2 = this;
 
         var selectedRow = eventMatches(evt, this.options.selectorRow);
-        toArray$9(this.element.querySelectorAll(this.options.selectorRow)).forEach(function (row) {
+        toArray$2(this.element.querySelectorAll(this.options.selectorRow)).forEach(function (row) {
           return row.classList.remove(_this2.options.classActive);
         });
 
@@ -8723,7 +9167,7 @@ var CarbonComponents = (function (exports) {
         evt.preventDefault(); // prevent spacebar from scrolling page
 
         var selectedRow = eventMatches(evt, this.options.selectorRow);
-        toArray$9(this.element.querySelectorAll(this.options.selectorRow)).forEach(function (row) {
+        toArray$2(this.element.querySelectorAll(this.options.selectorRow)).forEach(function (row) {
           return row.classList.remove(_this3.options.classActive);
         });
 
@@ -8746,7 +9190,7 @@ var CarbonComponents = (function (exports) {
         var direction = this._direction(evt);
 
         if (direction && selectedRow !== undefined) {
-          var rows = toArray$9(this.element.querySelectorAll(this.options.selectorRow));
+          var rows = toArray$2(this.element.querySelectorAll(this.options.selectorRow));
           rows.forEach(function (row) {
             return row.classList.remove(_this4.options.classActive);
           });
@@ -8798,11 +9242,11 @@ var CarbonComponents = (function (exports) {
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  var Slider =
-  /*#__PURE__*/
-  function (_mixin) {
+  var Slider = /*#__PURE__*/function (_mixin) {
     _inherits(Slider, _mixin);
 
+    var _super = _createSuper(Slider);
+
     /**
      * Slider.
      * @extends CreateComponent
@@ -8815,7 +9259,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, Slider);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Slider).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _defineProperty(_assertThisInitialized(_this), "_changeState", function (state, detail, callback) {
         callback();
@@ -9027,14 +9471,14 @@ var CarbonComponents = (function (exports) {
 
     }], [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor,
        * properties in this object are overriden for the instance being created.
        * @property {string} selectorInit The CSS selector to find slider instances.
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           selectorInit: '[data-slider]',
@@ -9058,11 +9502,11 @@ var CarbonComponents = (function (exports) {
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  var Tile =
-  /*#__PURE__*/
-  function (_mixin) {
+  var Tile = /*#__PURE__*/function (_mixin) {
     _inherits(Tile, _mixin);
 
+    var _super = _createSuper(Tile);
+
     /**
      * Tile.
      * @extends CreateComponent
@@ -9074,7 +9518,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, Tile);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Tile).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _defineProperty(_assertThisInitialized(_this), "_getClass", function (type) {
         var typeObj = {
@@ -9163,14 +9607,14 @@ var CarbonComponents = (function (exports) {
 
     }], [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor,
        * properties in this object are overriden for the instance being created.
        * @property {string} selectorInit The CSS selector to find Tile instances.
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           selectorInit: '[data-tile]',
@@ -9190,11 +9634,11 @@ var CarbonComponents = (function (exports) {
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  var CodeSnippet =
-  /*#__PURE__*/
-  function (_mixin) {
+  var CodeSnippet = /*#__PURE__*/function (_mixin) {
     _inherits(CodeSnippet, _mixin);
 
+    var _super = _createSuper(CodeSnippet);
+
     /**
      * CodeSnippet UI.
      * @extends CreateComponent
@@ -9207,7 +9651,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, CodeSnippet);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(CodeSnippet).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _this._initCodeSnippet();
 
@@ -9253,7 +9697,7 @@ var CarbonComponents = (function (exports) {
 
     }], [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor, {@linkcode CodeSnippet.create .create()},
@@ -9263,7 +9707,7 @@ var CarbonComponents = (function (exports) {
        * @type {object}
        * @property {string} selectorInit The data attribute to find code snippet UIs.
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           selectorInit: '[data-code-snippet]',
@@ -9285,11 +9729,11 @@ var CarbonComponents = (function (exports) {
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  var TextInput =
-  /*#__PURE__*/
-  function (_mixin) {
+  var TextInput = /*#__PURE__*/function (_mixin) {
     _inherits(TextInput, _mixin);
 
+    var _super = _createSuper(TextInput);
+
     /**
      * Text Input.
      * @extends CreateComponent
@@ -9302,7 +9746,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, TextInput);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(TextInput).call(this, _element, options));
+      _this = _super.call(this, _element, options);
 
       _defineProperty(_assertThisInitialized(_this), "_setIconVisibility", function (_ref) {
         var iconVisibilityOn = _ref.iconVisibilityOn,
@@ -9365,12 +9809,13 @@ var CarbonComponents = (function (exports) {
      * the SVG icon for visibility off
      * @param {boolean} obj.passwordIsVisible - The visibility of the password in the
      * input field
+     * @param {boolean} obj.selectorPasswordVisibilityTooltip
      */
 
 
     _createClass(TextInput, null, [{
       key: "options",
-
+      get:
       /**
        * The component options.
        *
@@ -9381,7 +9826,7 @@ var CarbonComponents = (function (exports) {
        * created and how {@linkcode TextInput.init .init()} works.
        * @property {string} selectorInit The CSS selector to find text input UIs.
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           selectorInit: '[data-text-input]',
@@ -9409,22 +9854,43 @@ var CarbonComponents = (function (exports) {
 
   var prefix = settings_1.prefix;
 
-  var SideNav =
-  /*#__PURE__*/
-  function (_mixin) {
+  var SideNav = /*#__PURE__*/function (_mixin) {
     _inherits(SideNav, _mixin);
 
+    var _super = _createSuper(SideNav);
+
     /**
      * The map associating DOM element and copy button UI instance.
      * @member SideNav.components
      * @type {WeakMap}
      */
+
+    /**
+     * Side nav.
+     * @extends CreateComponent
+     * @extends InitComponentBySearch
+     * @extends Handles
+     * @param {HTMLElement} element The element working as a side nav.
+     * @param {object} [options] The component options.
+     * @param {string} [options.selectorSideNavToggle]
+     *   The CSS selector to find the toggle button.
+     * @param {string} [options.selectorSideNavSubmenu] The CSS selector to find the trigger buttons for sub nav items.
+     * @param {string} [options.selectorSideNavItem] The CSS selector to find the nav items.
+     * @param {string} [options.selectorSideNavLink] The CSS selector to find the interactive potions in non-nested nav items.
+     * @param {string} [options.selectorSideNavLinkCurrent]
+     *   The CSS selector to find the interactive potion in active non-nested nav item.
+     * @param {string} [options.classSideNavExpanded] The CSS class for the expanded state.
+     * @param {string} [options.classSideNavItemActive]
+     *   The CSS class for the active/inactive state for nav items.
+     * @param {string} [options.classSideNavLinkCurrent]
+     *   The CSS class for the active/inactive state of the interactive potion in non-nested nav items.
+     */
     function SideNav(element, options) {
       var _this;
 
       _classCallCheck(this, SideNav);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(SideNav).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _defineProperty(_assertThisInitialized(_this), "_handleClick", function (evt) {
         var matchesToggle = eventMatches(evt, _this.options.selectorSideNavToggle);
@@ -9470,7 +9936,7 @@ var CarbonComponents = (function (exports) {
      * Enum for toggling side nav visibility
      * @readonly
      * @member SideNav.state
-     * @type {Object}
+     * @type {object}
      * @property {string} EXPANDED Opening/visible
      * @property {string} COLLAPSED Closing/hidden
      */
@@ -9478,11 +9944,11 @@ var CarbonComponents = (function (exports) {
 
     _createClass(SideNav, [{
       key: "isNavExpanded",
-
+      value:
       /**
        * @returns {boolean} `true` if the nav is expanded.
        */
-      value: function isNavExpanded() {
+      function isNavExpanded() {
         return this.element.classList.contains(this.options.classSideNavExpanded);
       }
       /**
@@ -9524,27 +9990,36 @@ var CarbonComponents = (function (exports) {
     classSideNavLinkCurrent: "".concat(prefix, "--side-nav__link--current")
   });
 
-  var forEach =
-  /* #__PURE__ */
-  function () {
+  var forEach$1 = /* #__PURE__ */function () {
     return Array.prototype.forEach;
   }();
 
-  var toArray$a = function toArray(arrayLike) {
+  var toArray$1 = function toArray(arrayLike) {
     return Array.prototype.slice.call(arrayLike);
   };
 
-  var HeaderSubmenu =
-  /*#__PURE__*/
-  function (_mixin) {
+  var HeaderSubmenu = /*#__PURE__*/function (_mixin) {
     _inherits(HeaderSubmenu, _mixin);
 
+    var _super = _createSuper(HeaderSubmenu);
+
+    /**
+     * Sub menus in header nav.
+     * @extends CreateComponent
+     * @extends InitComponentBySearch
+     * @extends Handles
+     * @param {HTMLElement} element The element working as a submenu in header nav.
+     * @param {object} [options] The component options.
+     * @param {string} [options.selectorTrigger] The CSS selector to find the trigger button.
+     * @param {string} [options.selectorItem] The CSS selector to find the menu items.
+     * @param {string} [options.attribExpanded] The attribute that represents the expanded/collapsed state.
+     */
     function HeaderSubmenu(element, options) {
       var _this;
 
       _classCallCheck(this, HeaderSubmenu);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(HeaderSubmenu).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _defineProperty(_assertThisInitialized(_this), "_getAction", function (event) {
         var isFlyoutMenu = eventMatches(event, _this.options.selectorFlyoutMenu);
@@ -9614,7 +10089,7 @@ var CarbonComponents = (function (exports) {
         var trigger = _this.element.querySelector(_this.options.selectorTrigger);
 
         trigger.setAttribute(_this.options.attribExpanded, shouldBeExpanded);
-        forEach.call(_this.element.querySelectorAll(_this.options.selectorItem), function (item) {
+        forEach$1.call(_this.element.querySelectorAll(_this.options.selectorItem), function (item) {
           item.tabIndex = shouldBeExpanded ? 0 : -1;
         }); // focus first submenu item
 
@@ -9629,7 +10104,7 @@ var CarbonComponents = (function (exports) {
       });
 
       _defineProperty(_assertThisInitialized(_this), "navigate", function (direction) {
-        var items = toArray$a(_this.element.querySelectorAll(_this.options.selectorItem));
+        var items = toArray$1(_this.element.querySelectorAll(_this.options.selectorItem));
 
         var start = _this.getCurrentNavigation() || _this.element.querySelector(_this.options.selectorItemSelected);
 
@@ -9769,9 +10244,6 @@ var CarbonComponents = (function (exports) {
                     event.preventDefault(); // prevents keys from scrolling page
 
                     break;
-
-                  default:
-                    break;
                 }
               }
 
@@ -9780,7 +10252,7 @@ var CarbonComponents = (function (exports) {
         }
       });
 
-      var hasFocusOut = 'onfocusout' in window;
+      var hasFocusOut = ('onfocusout' in window);
 
       _this.manage(on(_this.element, hasFocusOut ? 'focusout' : 'blur', _this._handleEvent, !hasFocusOut));
 
@@ -9803,7 +10275,7 @@ var CarbonComponents = (function (exports) {
 
     _createClass(HeaderSubmenu, null, [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor,
@@ -9814,8 +10286,11 @@ var CarbonComponents = (function (exports) {
        * @member HeaderSubmenu.options
        * @type {object}
        * @property {string} selectorInit The data attribute to find side navs.
+       * @property {string} [selectorTrigger] The CSS selector to find the trigger button.
+       * @property {string} [selectorItem] The CSS selector to find the menu items.
+       * @property {string} [attribExpanded] The attribute that represents the expanded/collapsed state.
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           selectorInit: '[data-header-submenu]',
@@ -9828,7 +10303,7 @@ var CarbonComponents = (function (exports) {
        * Enum for navigating backward/forward.
        * @readonly
        * @member HeaderSubmenu.NAVIGATE
-       * @type {Object}
+       * @type {object}
        * @property {number} BACKWARD Navigating backward.
        * @property {number} FORWARD Navigating forward.
        */
@@ -9858,21 +10333,32 @@ var CarbonComponents = (function (exports) {
     FORWARD: 1
   });
 
-  var toArray$b = function toArray(arrayLike) {
+  var toArray = function toArray(arrayLike) {
     return Array.prototype.slice.call(arrayLike);
   };
 
-  var HeaderNav =
-  /*#__PURE__*/
-  function (_mixin) {
+  var HeaderNav = /*#__PURE__*/function (_mixin) {
     _inherits(HeaderNav, _mixin);
 
+    var _super = _createSuper(HeaderNav);
+
+    /**
+     * Header nav.
+     * @extends CreateComponent
+     * @extends InitComponentBySearch
+     * @extends Handles
+     * @param {HTMLElement} element The element working as an header nav.
+     * @param {object} [options] The component options.
+     * @param {string} [options.selectorSubmenu] The CSS selector to find sub menus.
+     * @param {string} [options.selectorSubmenuLink] The CSS selector to find the trigger buttons of sub menus.
+     * @param {string} [options.selectorSubmenuItem] The CSS selector to find the sub menu items.
+     */
     function HeaderNav(element, options) {
       var _this;
 
       _classCallCheck(this, HeaderNav);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(HeaderNav).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _defineProperty(_assertThisInitialized(_this), "getCurrentNavigation", function () {
         var focused = _this.element.ownerDocument.activeElement.closest(_this.options.selectorSubmenu);
@@ -9881,7 +10367,7 @@ var CarbonComponents = (function (exports) {
       });
 
       _defineProperty(_assertThisInitialized(_this), "navigate", function (direction) {
-        var items = toArray$b(_this.element.querySelectorAll(_this.options.selectorSubmenuLink));
+        var items = toArray(_this.element.querySelectorAll(_this.options.selectorSubmenuLink));
 
         var start = _this.getCurrentNavigation();
 
@@ -9929,7 +10415,7 @@ var CarbonComponents = (function (exports) {
 
     _createClass(HeaderNav, null, [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor,
@@ -9940,8 +10426,11 @@ var CarbonComponents = (function (exports) {
        * @member HeaderNav.options
        * @type {object}
        * @property {string} selectorInit The data attribute to find side navs.
+       * @property {string} [selectorSubmenu] The CSS selector to find sub menus.
+       * @property {string} [selectorSubmenuLink] The CSS selector to find the trigger buttons of sub menus.
+       * @property {string} [selectorSubmenuItem] The CSS selector to find the sub menu items.
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           selectorInit: '[data-header-nav]',
@@ -9955,7 +10444,7 @@ var CarbonComponents = (function (exports) {
        * Enum for navigating backward/forward.
        * @readonly
        * @member Header.NAVIGATE
-       * @type {Object}
+       * @type {object}
        * @property {number} BACKWARD Navigating backward.
        * @property {number} FORWARD Navigating forward.
        */
@@ -9976,14 +10465,12 @@ var CarbonComponents = (function (exports) {
     FORWARD: 1
   });
 
-  var NavigationMenuPanel =
-  /*#__PURE__*/
-  function (_mixin) {
+  var NavigationMenuPanel = /*#__PURE__*/function (_mixin) {
     _inherits(NavigationMenuPanel, _mixin);
 
-    function NavigationMenuPanel() {
-      var _getPrototypeOf2;
+    var _super = _createSuper(NavigationMenuPanel);
 
+    function NavigationMenuPanel() {
       var _this;
 
       _classCallCheck(this, NavigationMenuPanel);
@@ -9992,7 +10479,7 @@ var CarbonComponents = (function (exports) {
         args[_key] = arguments[_key];
       }
 
-      _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(NavigationMenuPanel)).call.apply(_getPrototypeOf2, [this].concat(args)));
+      _this = _super.call.apply(_super, [this].concat(args));
 
       _defineProperty(_assertThisInitialized(_this), "createdByLauncher", function (event) {
         var isExpanded = !_this.element.hasAttribute('hidden');
@@ -10035,7 +10522,7 @@ var CarbonComponents = (function (exports) {
 
     _createClass(NavigationMenuPanel, null, [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor,
@@ -10049,7 +10536,7 @@ var CarbonComponents = (function (exports) {
        * @property {string} attribInitTarget The attribute name in the launcher buttons to find target popup nav.
        * @property {string[]} initEventNames The events that the component will handles
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           initEventNames: ['click'],
@@ -10066,17 +10553,17 @@ var CarbonComponents = (function (exports) {
     }]);
 
     return NavigationMenuPanel;
-  }(mixin(createComponent, initComponentByLauncher, exports$1, handles, eventedState));
+  }(mixin(createComponent, initComponentByLauncher, exports$2, handles, eventedState));
 
   _defineProperty(NavigationMenuPanel, "components",
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  var NavigationMenu =
-  /*#__PURE__*/
-  function (_NavigationMenuPanel) {
+  var NavigationMenu = /*#__PURE__*/function (_NavigationMenuPanel) {
     _inherits(NavigationMenu, _NavigationMenuPanel);
 
+    var _super = _createSuper(NavigationMenu);
+
     /**
      * A navigation menu
      * @extends NavigationMenuPanel
@@ -10108,7 +10595,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, NavigationMenu);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(NavigationMenu).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _defineProperty(_assertThisInitialized(_this), "getCurrentNavigation", function () {
         return _this.element.ownerDocument.activeElement;
@@ -10249,7 +10736,7 @@ var CarbonComponents = (function (exports) {
         }
       }));
 
-      var hasFocusOut = 'onfocusout' in window;
+      var hasFocusOut = ('onfocusout' in window);
 
       _this.manage(on(_this.element, hasFocusOut ? 'focusout' : 'blur', _this._handleFocusOut, !hasFocusOut));
 
@@ -10262,7 +10749,7 @@ var CarbonComponents = (function (exports) {
 
     _createClass(NavigationMenu, null, [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor,
@@ -10278,7 +10765,7 @@ var CarbonComponents = (function (exports) {
        * @property {string[]} initEventNames The events that the component
        * will handles
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return Object.assign(Object.create(NavigationMenuPanel.options), {
           selectorInit: '[data-navigation-menu]',
@@ -10300,7 +10787,7 @@ var CarbonComponents = (function (exports) {
        * Enum for navigating backward/forward.
        * @readonly
        * @member NavigationMenuPanel.NAVIGATE
-       * @type {Object}
+       * @type {object}
        * @property {number} BACKWARD Navigating backward.
        * @property {number} FORWARD Navigating forward.
        */
@@ -10329,12 +10816,12 @@ var CarbonComponents = (function (exports) {
    * @returns {Handle} The handle to release the attached event handler
    */
   function onFocusByKeyboard(node, name, callback) {
-    var hasFocusout = 'onfocusout' in window;
+    var hasFocusout = ('onfocusout' in window);
     var focusinEventName = hasFocusout ? 'focusin' : 'focus';
     var focusoutEventName = hasFocusout ? 'focusout' : 'blur';
     /**
      * Event types supported by this function
-     * @type {Object<string, string>}
+     * @type {object<string, string>}
      */
 
     var supportedEvents = {
@@ -10381,13 +10868,15 @@ var CarbonComponents = (function (exports) {
     };
   }
 
-  var ProductSwitcher =
-  /*#__PURE__*/
-  function (_NavigationMenuPanel) {
+  var seq = 0;
+
+  var ProductSwitcher = /*#__PURE__*/function (_NavigationMenuPanel) {
     _inherits(ProductSwitcher, _NavigationMenuPanel);
 
+    var _super = _createSuper(ProductSwitcher);
+
     /**
-     * A navigation menu
+     * A navigation menu.
      * @extends NavigationMenuPanel
      * @param {HTMLElement} element The element working as a selector.
      * @param {object} [options] The component options.
@@ -10403,7 +10892,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, ProductSwitcher);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(ProductSwitcher).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _defineProperty(_assertThisInitialized(_this), "current", '');
 
@@ -10439,7 +10928,7 @@ var CarbonComponents = (function (exports) {
         var launcher = event.delegateTarget;
 
         if (!launcher.id) {
-          launcher.id = "__carbon-product-switcher-launcher-".concat(Math.random().toString(36).substr(2));
+          launcher.id = "__carbon-product-switcher-launcher-".concat(seq++);
         }
 
         var current = launcher.id;
@@ -10517,7 +11006,7 @@ var CarbonComponents = (function (exports) {
 
     }], [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor,
@@ -10533,7 +11022,7 @@ var CarbonComponents = (function (exports) {
        * @property {string[]} initEventNames The events that the component
        * will handles
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return Object.assign(Object.create(NavigationMenuPanel.options), {
           selectorInit: '[data-product-switcher]',
@@ -10555,11 +11044,11 @@ var CarbonComponents = (function (exports) {
   /* #__PURE_CLASS_PROPERTY__ */
   new WeakMap());
 
-  var PaginationNav =
-  /*#__PURE__*/
-  function (_mixin) {
+  var PaginationNav = /*#__PURE__*/function (_mixin) {
     _inherits(PaginationNav, _mixin);
 
+    var _super = _createSuper(PaginationNav);
+
     /**
      * Pagination Nav component
      * @extends CreateComponent
@@ -10572,7 +11061,7 @@ var CarbonComponents = (function (exports) {
 
       _classCallCheck(this, PaginationNav);
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(PaginationNav).call(this, element, options));
+      _this = _super.call(this, element, options);
 
       _defineProperty(_assertThisInitialized(_this), "getActivePageNumber", function () {
         var pageNum;
@@ -10713,7 +11202,7 @@ var CarbonComponents = (function (exports) {
 
     _createClass(PaginationNav, null, [{
       key: "options",
-
+      get:
       /**
        * The component options.
        * If `options` is specified in the constructor, {@linkcode PaginationNav.create .create()},
@@ -10730,7 +11219,7 @@ var CarbonComponents = (function (exports) {
        * @property {string} [classActive] The CSS class for page's selected state.
        * @property {string} [classDisabled] The CSS class for page's disabled state.
        */
-      get: function get() {
+      function get() {
         var prefix = settings_1.prefix;
         return {
           selectorInit: '[data-pagination-nav]',
@@ -10762,7 +11251,8 @@ var CarbonComponents = (function (exports) {
    * LICENSE file in the root directory of this source tree.
    */
 
-  var components = /*#__PURE__*/Object.freeze({
+  var components$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
     Checkbox: Checkbox,
     FileUploader: FileUploader,
     ContentSwitcher: ContentSwitcher,
@@ -10783,6 +11273,7 @@ var CarbonComponents = (function (exports) {
     Notification: Notification,
     Toolbar: Toolbar,
     Tooltip: Tooltip,
+    TooltipSimple: TooltipSimple,
     ProgressIndicator: ProgressIndicator,
     FloatingMenu: FloatingMenu,
     StructuredList: StructuredList,
@@ -10804,7 +11295,7 @@ var CarbonComponents = (function (exports) {
    * This source code is licensed under the Apache-2.0 license found in the
    * LICENSE file in the root directory of this source tree.
    */
-  var components$1 = components;
+  var components = components$1;
   /**
    * Instantiates components automatically
    * by searching for elements with `data-component-name` (e.g. `data-loading`) attribute
@@ -10814,15 +11305,15 @@ var CarbonComponents = (function (exports) {
    */
 
   var init = function init() {
-    var componentClasses = Object.keys(components$1).map(function (key) {
-      return components$1[key];
+    var componentClasses = Object.keys(components).map(function (key) {
+      return components[key];
     }).filter(function (component) {
       return typeof component.init === 'function';
     });
 
     if (!settings_1.disableAutoInit) {
       componentClasses.forEach(function (Clz) {
-        var h = Clz.init();
+        Clz.init();
       });
     }
   };
@@ -10841,18 +11332,18 @@ var CarbonComponents = (function (exports) {
    * This source code is licensed under the Apache-2.0 license found in the
    * LICENSE file in the root directory of this source tree.
    */
-  var forEach$1 = Array.prototype.forEach;
+  var forEach = Array.prototype.forEach;
 
   var createAndReleaseComponentsUponDOMMutation = function createAndReleaseComponentsUponDOMMutation(records, componentClasses, componentClassesForWatchInit, options) {
     records.forEach(function (record) {
-      forEach$1.call(record.addedNodes, function (node) {
+      forEach.call(record.addedNodes, function (node) {
         if (node.nodeType === Node.ELEMENT_NODE) {
           componentClassesForWatchInit.forEach(function (Clz) {
             Clz.init(node, options);
           });
         }
       });
-      forEach$1.call(record.removedNodes, function (node) {
+      forEach.call(record.removedNodes, function (node) {
         if (node.nodeType === Node.ELEMENT_NODE) {
           componentClasses.forEach(function (Clz) {
             if (node.matches(Clz.options.selectorInit)) {
@@ -10862,7 +11353,7 @@ var CarbonComponents = (function (exports) {
                 instance.release();
               }
             } else {
-              forEach$1.call(node.querySelectorAll(Clz.options.selectorInit), function (element) {
+              forEach.call(node.querySelectorAll(Clz.options.selectorInit), function (element) {
                 var instance = Clz.components.get(element);
 
                 if (instance) {
@@ -10891,8 +11382,8 @@ var CarbonComponents = (function (exports) {
       throw new TypeError('DOM document or DOM element should be given to watch for DOM node to create/release components.');
     }
 
-    var componentClasses = Object.keys(components).map(function (key) {
-      return components[key];
+    var componentClasses = Object.keys(components$1).map(function (key) {
+      return components$1[key];
     }).filter(function (component) {
       return typeof component.init === 'function';
     });
@@ -10956,9 +11447,12 @@ var CarbonComponents = (function (exports) {
   exports.Tile = Tile;
   exports.Toolbar = Toolbar;
   exports.Tooltip = Tooltip;
+  exports.TooltipSimple = TooltipSimple;
   exports.settings = settings_1;
   exports.watch = watch;
 
+  Object.defineProperty(exports, '__esModule', { value: true });
+
   return exports;
 
 }({}));