clay-dropdown - npm Package Compare versions

Comparing version 2.13.0 to 2.14.0

lib/ClayActionsDropdown.js

@@ -237,3 +237,3 @@ 'use strict';
   */
-	itemsIconAlignment: _metalState.Config.oneOf(['left', 'right']),
+	itemsIconAlignment: _metalState.Config.oneOf(['left', 'right', 'left-right']),
 
@@ -240,0 +240,0 @@ /**

lib/ClayActionsDropdown.soy.js

@@ -43,14 +43,32 @@ 'use strict';
 
-  var $templateAlias1 = _metalSoy2.default.getTemplate('ClayDropdownBase.incrementaldom', 'render');
+  var $templateAlias2 = _metalSoy2.default.getTemplate('ClayDropdownBase.incrementaldom', 'render');
 
-  var $templateAlias2 = _metalSoy2.default.getTemplate('ClayIcon.incrementaldom', 'render');
+  var $templateAlias1 = _metalSoy2.default.getTemplate('ClayIcon.incrementaldom', 'render');
 
   /**
-   * @param {$render.Params} opt_data
+   * @param {{
+   *  items: !Array<?>,
+   *  spritemap: (!goog.soy.data.SanitizedContent|string),
+   *  _handleButtonClick: (*|null|undefined),
+   *  _handleItemClick: (*|null|undefined),
+   *  button: (?),
+   *  caption: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  disabled: (boolean|null|undefined),
+   *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  expanded: (boolean|null|undefined),
+   *  helpText: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  preferredAlign: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  toggle: (*|null|undefined),
+   *  triggerAriaLabel: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  triggerClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined)
+   * }} opt_data
    * @param {Object<string, *>=} opt_ijData
    * @param {Object<string, *>=} opt_ijData_deprecated
    * @return {void}
-   * @suppress {checkTypes|uselessCode}
+   * @suppress {checkTypes}
    */
-  var $render = function $render(opt_data, opt_ijData, opt_ijData_deprecated) {
+  function $render(opt_data, opt_ijData, opt_ijData_deprecated) {
     opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -91,20 +109,20 @@ /** @type {!Array<?>} */
     var triggerTitle = soy.asserts.assertType(opt_data.triggerTitle == null || goog.isString(opt_data.triggerTitle) || opt_data.triggerTitle instanceof goog.soy.data.SanitizedContent, 'triggerTitle', opt_data.triggerTitle, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var dropdownElementClasses__soy28 = '';
-    dropdownElementClasses__soy28 += 'dropdown-action';
-    dropdownElementClasses__soy28 += elementClasses ? ' ' + elementClasses : '';
-    var trigger__soy35 = function trigger__soy35() {
-      $templateAlias2({ spritemap: spritemap, symbol: 'ellipsis-v' }, opt_ijData);
+    var dropdownElementClasses__soy21 = '';
+    dropdownElementClasses__soy21 += 'dropdown-action';
+    dropdownElementClasses__soy21 += elementClasses ? ' ' + elementClasses : '';
+    var trigger__soy30 = function trigger__soy30() {
+      $templateAlias1({ spritemap: spritemap, symbol: 'ellipsis-v' }, null, opt_ijData);
     };
-    var param67 = '';
+    var param54 = '';
     if (triggerTitle != null) {
-      param67 += triggerTitle;
+      param54 += triggerTitle;
     } else {
-      var msg_1_6305962755687847469__soy2038 = '';
+      var msg_2408__soy2409 = '';
       /** @desc  */
       var MSG_EXTERNAL_6305962755687847469 = goog.getMsg('actions');
-      msg_1_6305962755687847469__soy2038 += MSG_EXTERNAL_6305962755687847469;
-      param67 += msg_1_6305962755687847469__soy2038;
+      msg_2408__soy2409 += MSG_EXTERNAL_6305962755687847469;
+      param54 += msg_2408__soy2409;
     }
-    $templateAlias1({ button: button, caption: caption, disabled: disabled, elementClasses: dropdownElementClasses__soy28, events: { buttonClicked: _handleButtonClick, itemClicked: _handleItemClick, toggle: toggle }, expanded: expanded, helpText: helpText, id: id, items: items, itemsIconAlignment: itemsIconAlignment, label: trigger__soy35, preferredAlign: preferredAlign, ref: 'dropdown', spritemap: spritemap, triggerAriaLabel: triggerAriaLabel, triggerClasses: triggerClasses, triggerTitle: param67 }, opt_ijData);
-  };
+    $templateAlias2({ button: button, caption: caption, disabled: disabled, elementClasses: dropdownElementClasses__soy21, events: { buttonClicked: _handleButtonClick, itemClicked: _handleItemClick, toggle: toggle }, expanded: expanded, helpText: helpText, id: id, items: items, itemsIconAlignment: itemsIconAlignment, label: trigger__soy30, preferredAlign: preferredAlign, ref: 'dropdown', spritemap: spritemap, triggerAriaLabel: triggerAriaLabel, triggerClasses: triggerClasses, triggerTitle: param54 }, null, opt_ijData);
+  }
   exports.render = $render;
@@ -117,3 +135,3 @@ /**
    *  _handleItemClick: (*|null|undefined),
-   *  button: (?|undefined),
+   *  button: (?),
    *  caption: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -130,3 +148,3 @@ *  disabled: (boolean|null|undefined),
    *  triggerClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
-   *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined)
    * }}
@@ -133,0 +151,0 @@ */

lib/ClayCreationMenuDropdown.js

@@ -219,3 +219,3 @@ 'use strict';
   */
-	itemsIconAlignment: _metalState.Config.oneOf(['left', 'right']),
+	itemsIconAlignment: _metalState.Config.oneOf(['left', 'right', 'left-right']),
 
@@ -222,0 +222,0 @@ /**

lib/ClayCreationMenuDropdown.soy.js

@@ -43,15 +43,37 @@ 'use strict';
 
-  var $templateAlias1 = _metalSoy2.default.getTemplate('ClayDropdownBase.incrementaldom', 'render');
+  var $templateAlias2 = _metalSoy2.default.getTemplate('ClayDropdownBase.incrementaldom', 'render');
 
-  var $templateAlias2 = _metalSoy2.default.getTemplate('ClayIcon.incrementaldom', 'render');
+  var $templateAlias1 = _metalSoy2.default.getTemplate('ClayIcon.incrementaldom', 'render');
 
   /**
-   * @param {$render.Params} opt_data
+   * @param {{
+   *  spritemap: (!goog.soy.data.SanitizedContent|string),
+   *  _handleButtonClick: (*|null|undefined),
+   *  _handleItemClick: (*|null|undefined),
+   *  disabled: (boolean|null|undefined),
+   *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  expanded: (boolean|null|undefined),
+   *  helpText: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  maxPrimaryItems: (null|number|undefined),
+   *  maxSecondaryItems: (null|number|undefined),
+   *  maxTotalItems: (null|number|undefined),
+   *  preferredAlign: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  primaryItems: (!Array<?>|null|undefined),
+   *  secondaryItems: (!Array<?>|null|undefined),
+   *  toggle: (*|null|undefined),
+   *  triggerAriaLabel: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  triggerClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  viewMoreURL: (!goog.soy.data.SanitizedContent|null|string|undefined)
+   * }} opt_data
    * @param {Object<string, *>=} opt_ijData
    * @param {Object<string, *>=} opt_ijData_deprecated
    * @return {void}
-   * @suppress {checkTypes|uselessCode}
+   * @suppress {checkTypes}
    */
-  var $render = function $render(opt_data, opt_ijData, opt_ijData_deprecated) {
+  function $render(opt_data, opt_ijData, opt_ijData_deprecated) {
     opt_ijData = opt_ijData_deprecated || opt_ijData;
+    var $$temp;
     /** @type {!goog.soy.data.SanitizedContent|string} */
@@ -106,3 +128,3 @@ var spritemap = soy.asserts.assertType(goog.isString(opt_data.spritemap) || opt_data.spritemap instanceof goog.soy.data.SanitizedContent, 'spritemap', opt_data.spritemap, '!goog.soy.data.SanitizedContent|string');
     var tempDefaultMaxSecondaryItems__soy109 = maxSecondaryItems ? totalSecondaryItems__soy103 > maxSecondaryItems ? maxSecondaryItems : totalSecondaryItems__soy103 : totalSecondaryItems__soy103 > 7 ? 7 : totalSecondaryItems__soy103;
-    var defaultMaxTotalItems__soy111 = maxTotalItems != null ? maxTotalItems : 15;
+    var defaultMaxTotalItems__soy111 = ($$temp = maxTotalItems) == null ? 15 : $$temp;
     var defaultMaxSecondaryItems__soy113 = tempDefaultMaxSecondaryItems__soy109 > defaultMaxTotalItems__soy111 - defaultMaxPrimaryItems__soy107 ? defaultMaxTotalItems__soy111 - defaultMaxPrimaryItems__soy107 : tempDefaultMaxSecondaryItems__soy109;
@@ -115,25 +137,25 @@ var showingItems__soy115 = totalSecondaryItems__soy103 == 0 ? totalPrimaryItems__soy97 > defaultMaxTotalItems__soy111 ? defaultMaxTotalItems__soy111 : totalPrimaryItems__soy97 : totalPrimaryItems__soy97 > defaultMaxPrimaryItems__soy107 ? totalSecondaryItems__soy103 > defaultMaxSecondaryItems__soy113 ? defaultMaxPrimaryItems__soy107 + defaultMaxSecondaryItems__soy113 : defaultMaxPrimaryItems__soy107 + totalSecondaryItems__soy103 : totalSecondaryItems__soy103 > defaultMaxSecondaryItems__soy113 ? totalPrimaryItems__soy97 + defaultMaxSecondaryItems__soy113 : totalPrimaryItems__soy97 + totalSecondaryItems__soy103;
     var showMoreButton__soy125 = showingItems__soy115 < totalItems__soy105 ? viewMoreURL != null ? { buttonStyle: 'secondary', href: viewMoreURL, label: 'More' } : { label: 'More', style: 'secondary' } : null;
-    var trigger__soy132 = function trigger__soy132() {
-      $templateAlias2({ spritemap: spritemap, symbol: 'plus' }, opt_ijData);
+    var trigger__soy127 = function trigger__soy127() {
+      $templateAlias1({ spritemap: spritemap, symbol: 'plus' }, null, opt_ijData);
     };
-    var param149 = '';
+    var param136 = '';
     if (showMoreButton__soy125) {
-      var msg_2_8004490453579465583__soy2040 = '';
+      var msg_2411__soy2412 = '';
       /** @desc Says how many items of the total are being showed */
       var MSG_EXTERNAL_8004490453579465583 = goog.getMsg('showing-{$showingItems}-of-{$totalItems}-elements', { 'showingItems': showingItems__soy115, 'totalItems': totalItems__soy105 });
-      msg_2_8004490453579465583__soy2040 += MSG_EXTERNAL_8004490453579465583;
-      param149 += msg_2_8004490453579465583__soy2040;
+      msg_2411__soy2412 += MSG_EXTERNAL_8004490453579465583;
+      param136 += msg_2411__soy2412;
     }
-    var param179 = '';
+    var param168 = '';
     if (triggerTitle) {
-      param179 += triggerTitle;
+      param168 += triggerTitle;
     } else {
-      var msg_3_7387635272539030076__soy2042 = '';
+      var msg_2414__soy2415 = '';
       /** @desc  */
       var MSG_EXTERNAL_7387635272539030076 = goog.getMsg('new');
-      msg_3_7387635272539030076__soy2042 += MSG_EXTERNAL_7387635272539030076;
-      param179 += msg_3_7387635272539030076__soy2042;
+      msg_2414__soy2415 += MSG_EXTERNAL_7387635272539030076;
+      param168 += msg_2414__soy2415;
     }
-    $templateAlias1({ button: showMoreButton__soy125, caption: param149, disabled: disabled, elementClasses: elementClasses, events: { buttonClicked: _handleButtonClick, itemClicked: _handleItemClick, toggle: toggle }, expanded: expanded, helpText: showMoreButton__soy125 ? helpText : null, id: id, items: items__soy123, itemsIconAlignment: itemsIconAlignment, label: trigger__soy132, preferredAlign: preferredAlign, ref: 'dropdown', spritemap: spritemap, style: 'primary', triggerAriaLabel: triggerAriaLabel, triggerClasses: triggerClasses, triggerTitle: param179 }, opt_ijData);
-  };
+    $templateAlias2({ button: showMoreButton__soy125, caption: param136, disabled: disabled, elementClasses: elementClasses, events: { buttonClicked: _handleButtonClick, itemClicked: _handleItemClick, toggle: toggle }, expanded: expanded, helpText: showMoreButton__soy125 ? helpText : null, id: id, items: items__soy123, itemsIconAlignment: itemsIconAlignment, label: trigger__soy127, preferredAlign: preferredAlign, ref: 'dropdown', spritemap: spritemap, style: 'primary', triggerAriaLabel: triggerAriaLabel, triggerClasses: triggerClasses, triggerTitle: param168 }, null, opt_ijData);
+  }
   exports.render = $render;
@@ -161,3 +183,3 @@ /**
    *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined),
-   *  viewMoreURL: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  viewMoreURL: (!goog.soy.data.SanitizedContent|null|string|undefined)
    * }}
@@ -164,0 +186,0 @@ */

lib/ClayDropdown.js

@@ -237,3 +237,3 @@ 'use strict';
   */
-	itemsIconAlignment: _metalState.Config.oneOf(['left', 'right']),
+	itemsIconAlignment: _metalState.Config.oneOf(['left', 'right', 'left-right']),
 
@@ -240,0 +240,0 @@ /**

lib/ClayDropdown.soy.js

@@ -43,14 +43,37 @@ 'use strict';
 
-  var $templateAlias1 = _metalSoy2.default.getTemplate('ClayDropdownBase.incrementaldom', 'render');
+  var $templateAlias2 = _metalSoy2.default.getTemplate('ClayDropdownBase.incrementaldom', 'render');
 
-  var $templateAlias2 = _metalSoy2.default.getTemplate('ClayIcon.incrementaldom', 'render');
+  var $templateAlias1 = _metalSoy2.default.getTemplate('ClayIcon.incrementaldom', 'render');
 
   /**
-   * @param {$render.Params} opt_data
+   * @param {{
+   *  items: !Array<?>,
+   *  spritemap: (!goog.soy.data.SanitizedContent|string),
+   *  _handleButtonClick: (*|null|undefined),
+   *  _handleItemClick: (*|null|undefined),
+   *  button: (?),
+   *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  disabled: (boolean|null|undefined),
+   *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  expanded: (boolean|null|undefined),
+   *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
+   *  preferredAlign: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  searchable: (boolean|null|undefined),
+   *  showToggleIcon: (boolean|null|undefined),
+   *  style: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  toggle: (*|null|undefined),
+   *  triggerAriaLabel: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  triggerClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  triggerSize: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined)
+   * }} opt_data
    * @param {Object<string, *>=} opt_ijData
    * @param {Object<string, *>=} opt_ijData_deprecated
    * @return {void}
-   * @suppress {checkTypes|uselessCode}
+   * @suppress {checkTypes}
    */
-  var $render = function $render(opt_data, opt_ijData, opt_ijData_deprecated) {
+  function $render(opt_data, opt_ijData, opt_ijData_deprecated) {
     opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -101,5 +124,5 @@ /** @type {!Array<?>} */
     var triggerTitle = soy.asserts.assertType(opt_data.triggerTitle == null || goog.isString(opt_data.triggerTitle) || opt_data.triggerTitle instanceof goog.soy.data.SanitizedContent, 'triggerTitle', opt_data.triggerTitle, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var trigger__soy234 = function trigger__soy234() {
+    var trigger__soy209 = function trigger__soy209() {
       if (icon) {
-        $templateAlias2({ elementClasses: label ? 'inline-item inline-item-before' : '', spritemap: spritemap, symbol: icon }, opt_ijData);
+        $templateAlias1({ elementClasses: label ? 'inline-item inline-item-before' : '', spritemap: spritemap, symbol: icon }, null, opt_ijData);
       }
@@ -110,7 +133,7 @@ if (label) {
       if ((!(showToggleIcon != null) || showToggleIcon) && !icon) {
-        $templateAlias2({ elementClasses: 'inline-item inline-item-after', spritemap: spritemap, symbol: 'caret-bottom' }, opt_ijData);
+        $templateAlias1({ elementClasses: 'inline-item inline-item-after', spritemap: spritemap, symbol: 'caret-bottom' }, null, opt_ijData);
       }
     };
-    $templateAlias1({ button: button, contentRenderer: contentRenderer, disabled: disabled, elementClasses: elementClasses, events: { buttonClicked: _handleButtonClick, itemClicked: _handleItemClick, toggle: toggle }, expanded: expanded, id: id, items: items, itemsIconAlignment: itemsIconAlignment, label: trigger__soy234, preferredAlign: preferredAlign, ref: 'dropdown', searchable: searchable, spritemap: spritemap, style: style, triggerAriaLabel: triggerAriaLabel, triggerClasses: triggerClasses, triggerSize: triggerSize, triggerTitle: triggerTitle }, opt_ijData);
-  };
+    $templateAlias2({ button: button, contentRenderer: contentRenderer, disabled: disabled, elementClasses: elementClasses, events: { buttonClicked: _handleButtonClick, itemClicked: _handleItemClick, toggle: toggle }, expanded: expanded, id: id, items: items, itemsIconAlignment: itemsIconAlignment, label: trigger__soy209, preferredAlign: preferredAlign, ref: 'dropdown', searchable: searchable, spritemap: spritemap, style: style, triggerAriaLabel: triggerAriaLabel, triggerClasses: triggerClasses, triggerSize: triggerSize, triggerTitle: triggerTitle }, null, opt_ijData);
+  }
   exports.render = $render;
@@ -123,3 +146,3 @@ /**
    *  _handleItemClick: (*|null|undefined),
-   *  button: (?|undefined),
+   *  button: (?),
    *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -141,3 +164,3 @@ *  disabled: (boolean|null|undefined),
    *  triggerSize: (!goog.soy.data.SanitizedContent|null|string|undefined),
-   *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined)
    * }}
@@ -144,0 +167,0 @@ */

lib/ClayDropdownBase.js

@@ -52,8 +52,5 @@ 'use strict';
 
-var KEY_DOWN = 'ArrowDown';
-var KEY_UP = 'ArrowUp';
-var KEY_ENTER = 'Enter';
+var KEY_ESCAPE = 'Escape';
+var KEY_TAB = 'Tab';
 
-var KEY_NAVIGATION = [KEY_DOWN, KEY_UP, KEY_ENTER];
-
 /**
@@ -132,2 +129,24 @@ * Flattens all items into an array of arrays.
 		/**
+   * Reassembles flattened items into the correct items structure.
+   * This method is used in conjunction with `flatten(..., true)`
+   * @param {Array} flattenedItems
+   * @private
+   * @return {Array}
+   */
+
+	}, {
+		key: '_assembleFromFlattenedGroups',
+		value: function _assembleFromFlattenedGroups(flattenedItems) {
+			return this.items.map(function (item, i) {
+				if (item.items) {
+					item.items = flattenedItems[i];
+				} else {
+					item = flattenedItems[i][0];
+				}
+
+				return item;
+			});
+		}
+
+		/**
    * Toggles the dropdown, closing it when open or opening it when closed.
@@ -159,91 +178,2 @@ * @protected
 		/**
-   * Handles document click in order to hide menu.
-   * @param {!Event} event
-   * @protected
-   */
-
-	}, {
-		key: '_handleDocClick',
-		value: function _handleDocClick(event) {
-			if (this.element.contains(event.target) || this.refs.portal && this.refs.portal.element.contains(event.target)) {
-				return;
-			}
-			this.toggle();
-		}
-
-		/**
-   * Handles footer button click.
-   * @param {!Event} event
-   * @protected
-   */
-
-	}, {
-		key: '_handleButtonClick',
-		value: function _handleButtonClick(event) {
-			this.emit('buttonClicked', event);
-		}
-
-		/**
-   * Continues the propagation of the item clicked event
-   * @param {!Event} event
-   * @protected
-   * @return {Boolean} If the event has been prevented or not.
-   */
-
-	}, {
-		key: '_handleItemClick',
-		value: function _handleItemClick(event) {
-			var element = event.delegateTarget;
-			var elementIndex = this._getDropdownItemIndex(element);
-			var flatenItems = flatten(this.items);
-			var item = flatenItems[elementIndex];
-
-			return !this.emit({
-				data: {
-					item: item
-				},
-				name: 'itemClicked',
-				originalEvent: event
-			});
-		}
-
-		/**
-   * Increments to the index to the next item.
-   * @param {Array} items
-   * @param {Number} active
-   * @param {Number} subActive
-   * @param {Boolean} reverse
-   * @private
-   * @return {Object}
-   */
-
-	}, {
-		key: '_incrementActiveItemIndex',
-		value: function _incrementActiveItemIndex(items, active, subActive, reverse) {
-			var totalItems = items.length;
-
-			subActive = reverse ? subActive - 1 : subActive + 1;
-
-			if (reverse) {
-				if (subActive < 0) {
-					var nextActive = active - 1;
-
-					active = nextActive < 0 ? totalItems - 1 : nextActive;
-
-					subActive = items[active].length - 1;
-				}
-			} else {
-				if (subActive === items[active].length) {
-					var _nextActive = active + 1;
-
-					active = _nextActive === totalItems ? 0 : _nextActive;
-
-					subActive = 0;
-				}
-			}
-
-			return { active: active, subActive: subActive };
-		}
-
-		/**
    * Gets the indexes of the next active item.
@@ -286,82 +216,30 @@ * @param {Array} items
 		/**
-   * Sets the next item in the list as active.
-   * @param {Boolean} reverse
-   * @private
+   * Handles document click in order to hide menu.
+   * @param {!Event} event
+   * @protected
    */
 
 	}, {
-		key: '_setNextActive',
-		value: function _setNextActive(reverse) {
-			var items = flatten(this.items, true);
-			var activeSubIndex = -1;
-
-			var activeIndex = items.findIndex(function (item) {
-				var subIndex = item.findIndex(function (item) {
-					return item.active;
-				});
-
-				if (subIndex !== -1) {
-					activeSubIndex = subIndex;
-
-					return true;
-				}
-			});
-
-			var _getNextIndexes2 = this._getNextIndexes(items, activeIndex, activeSubIndex, reverse),
-			    active = _getNextIndexes2.active,
-			    subActive = _getNextIndexes2.subActive;
-
-			if (items[activeIndex] && items[activeIndex][activeSubIndex]) {
-				items[activeIndex][activeSubIndex].active = false;
+		key: '_handleDocClick',
+		value: function _handleDocClick(event) {
+			if (this.element.contains(event.target) || this.refs.portal && this.refs.portal.element.contains(event.target)) {
+				return;
 			}
-
-			items[active][subActive].active = true;
-
-			this.items = this._assembleFromFlattenedGroups(items);
+			this.toggle();
 		}
 
 		/**
-   * Reassembles flattened items into the correct items structure.
-   * This method is used in conjunction with `flatten(..., true)`
-   * @param {Array} flattenedItems
-   * @private
-   * @return {Array}
-   */
-
-	}, {
-		key: '_assembleFromFlattenedGroups',
-		value: function _assembleFromFlattenedGroups(flattenedItems) {
-			return this.items.map(function (item, i) {
-				if (item.items) {
-					item.items = flattenedItems[i];
-				} else {
-					item = flattenedItems[i][0];
-				}
-
-				return item;
-			});
-		}
-
-		/**
-   * Handle key events.
+   * Handles footer button click.
    * @param {!Event} event
-   * @private
+   * @protected
    */
 
 	}, {
-		key: '_handleKeyNavigation',
-		value: function _handleKeyNavigation(event) {
-			if (KEY_NAVIGATION.includes(event.key)) {
-				event.preventDefault();
-
-				if (event.key === KEY_DOWN || event.key === KEY_UP) {
-					this._setNextActive(event.key === KEY_UP);
-				} else if (event.key === KEY_ENTER) {
-					this._handleEnterKey(event);
-				}
-			}
+		key: '_handleButtonClick',
+		value: function _handleButtonClick(event) {
+			this.emit('buttonClicked', event);
 		}
 
 		/**
-   * Continues the propagation of the enter key event
+   * Continues the propagation of the item clicked event
    * @param {!Event} event
@@ -373,9 +251,12 @@ * @protected
 	}, {
-		key: '_handleEnterKey',
-		value: function _handleEnterKey(event) {
+		key: '_handleItemClick',
+		value: function _handleItemClick(event) {
+			var element = event.delegateTarget;
+			var elementIndex = this._getDropdownItemIndex(element);
+			var flatenItems = flatten(this.items);
+			var item = flatenItems[elementIndex];
+
 			return !this.emit({
 				data: {
-					item: flatten(this.items).find(function (item) {
-						return item.active;
-					})
+					item: item
 				},
@@ -388,2 +269,29 @@ name: 'itemClicked',
 		/**
+   * Handles the item key down event
+   * @param {!Event} event
+   * @protected
+   */
+
+	}, {
+		key: '_handleItemKeyDown',
+		value: function _handleItemKeyDown(event) {
+			if (event.key === KEY_TAB) {
+				var element = event.delegateTarget;
+				var elementIndex = this._getDropdownItemIndex(element);
+				var totalElements = element.parentElement.querySelectorAll('li :not([role="presentation"])').length;
+
+				if (elementIndex === 0 && event.shiftKey || elementIndex === totalElements && !event.shiftKey) {
+					event.preventDefault();
+					this.refs.triggerButton.focus();
+				} else if (elementIndex === totalElements - 1 && !event.shiftKey) {
+					this.toggle();
+					this.refs.triggerButton.focus();
+				}
+			} else if (event.key === KEY_ESCAPE) {
+				this.toggle();
+				this.refs.triggerButton.focus();
+			}
+		}
+
+		/**
    * Handle click key code esc and close dropdown.
@@ -463,2 +371,26 @@ * @param {!Event} event
 		/**
+   * Handles the key down event over the trigger
+   * @param {!Event} event
+   * @protected
+   */
+
+	}, {
+		key: '_handleTriggerKeyDown',
+		value: function _handleTriggerKeyDown(event) {
+			if (event.key === KEY_TAB) {
+				if (event.shiftKey && this.expanded) {
+					this.toggle();
+				} else {
+					var item = this.refs.portal.refs.item0;
+
+					item = item.refs.item0 || item;
+
+					if (item) {
+						item.element.focus();
+					}
+				}
+			}
+		}
+
+		/**
    * Handles blur window in order to hide menu.
@@ -478,2 +410,77 @@ * @private
 		/**
+   * Increments to the index to the next item.
+   * @param {Array} items
+   * @param {Number} active
+   * @param {Number} subActive
+   * @param {Boolean} reverse
+   * @private
+   * @return {Object}
+   */
+
+	}, {
+		key: '_incrementActiveItemIndex',
+		value: function _incrementActiveItemIndex(items, active, subActive, reverse) {
+			var totalItems = items.length;
+
+			subActive = reverse ? subActive - 1 : subActive + 1;
+
+			if (reverse) {
+				if (subActive < 0) {
+					var nextActive = active - 1;
+
+					active = nextActive < 0 ? totalItems - 1 : nextActive;
+
+					subActive = items[active].length - 1;
+				}
+			} else {
+				if (subActive === items[active].length) {
+					var _nextActive = active + 1;
+
+					active = _nextActive === totalItems ? 0 : _nextActive;
+
+					subActive = 0;
+				}
+			}
+
+			return { active: active, subActive: subActive };
+		}
+
+		/**
+   * Sets the next item in the list as active.
+   * @param {Boolean} reverse
+   * @private
+   */
+
+	}, {
+		key: '_setNextActive',
+		value: function _setNextActive(reverse) {
+			var items = flatten(this.items, true);
+			var activeSubIndex = -1;
+
+			var activeIndex = items.findIndex(function (item) {
+				var subIndex = item.findIndex(function (item) {
+					return item.active;
+				});
+
+				if (subIndex !== -1) {
+					activeSubIndex = subIndex;
+
+					return true;
+				}
+			});
+
+			var _getNextIndexes2 = this._getNextIndexes(items, activeIndex, activeSubIndex, reverse),
+			    active = _getNextIndexes2.active,
+			    subActive = _getNextIndexes2.subActive;
+
+			if (items[activeIndex] && items[activeIndex][activeSubIndex]) {
+				items[activeIndex][activeSubIndex].active = false;
+			}
+
+			items[active][subActive].active = true;
+
+			this.items = this._assembleFromFlattenedGroups(items);
+		}
+
+		/**
    * Set preferred alignment with Align API.
@@ -518,3 +525,3 @@ * @private
 			if (this.expanded) {
-				this._eventHandler.add(_metalDom2.default.on(document, 'click', this._handleDocClick.bind(this), true), _metalDom2.default.on(document, 'keyup', this._handleKeyup.bind(this), true), _metalDom2.default.on(document, 'keydown', this._handleKeyNavigation.bind(this), true), _metalDom2.default.on(document, 'touchend', this._handleDocClick.bind(this), true), _metalDom2.default.on(window, 'blur', this._handleWinBlur.bind(this), true));
+				this._eventHandler.add(_metalDom2.default.on(document, 'click', this._handleDocClick.bind(this), true), _metalDom2.default.on(document, 'touchend', this._handleDocClick.bind(this), true), _metalDom2.default.on(window, 'blur', this._handleWinBlur.bind(this), true));
 			} else if (this._eventHandler.eventHandles_.length) {
@@ -682,3 +689,3 @@ this._eventHandler.removeAllListeners();
   */
-	itemsIconAlignment: _metalState.Config.oneOf(['left', 'right']),
+	itemsIconAlignment: _metalState.Config.oneOf(['left', 'right', 'left-right']),
 
@@ -685,0 +692,0 @@ /**

lib/ClayDropdownBase.soy.js

@@ -47,19 +47,45 @@ 'use strict';
 
-  var $templateAlias1 = _metalSoy2.default.getTemplate('ClayButton.incrementaldom', 'render');
+  var $templateAlias2 = _metalSoy2.default.getTemplate('ClayButton.incrementaldom', 'render');
 
-  var $templateAlias3 = _metalSoy2.default.getTemplate('ClayDropdownItem.incrementaldom', 'render');
+  var $templateAlias1 = _metalSoy2.default.getTemplate('ClayDropdownItem.incrementaldom', 'render');
 
-  var $templateAlias4 = _metalSoy2.default.getTemplate('ClayLink.incrementaldom', 'render');
+  var $templateAlias3 = _metalSoy2.default.getTemplate('ClayLink.incrementaldom', 'render');
 
-  var $templateAlias2 = _metalSoy2.default.getTemplate('ClayPortal.incrementaldom', 'render');
+  var $templateAlias4 = _metalSoy2.default.getTemplate('ClayPortal.incrementaldom', 'render');
 
   /**
-   * @param {$render.Params} opt_data
+   * @param {{
+   *  items: !Array<?>,
+   *  label: (!goog.soy.data.SanitizedContent|function()|string),
+   *  _handleButtonClick: (*|null|undefined),
+   *  _handleItemClick: (*|null|undefined),
+   *  _handleItemKeyDown: (*|null|undefined),
+   *  _handleSearch: (*|null|undefined),
+   *  _handleTriggerKeyDown: (*|null|undefined),
+   *  button: (?),
+   *  caption: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  disabled: (boolean|null|undefined),
+   *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  expanded: (boolean|null|undefined),
+   *  helpText: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  portalElementId: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  searchable: (boolean|null|undefined),
+   *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  style: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  triggerAriaLabel: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  triggerClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  triggerSize: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined)
+   * }} opt_data
    * @param {Object<string, *>=} opt_ijData
    * @param {Object<string, *>=} opt_ijData_deprecated
    * @return {void}
-   * @suppress {checkTypes|uselessCode}
+   * @suppress {checkTypes}
    */
-  var $render = function $render(opt_data, opt_ijData, opt_ijData_deprecated) {
+  function $render(opt_data, opt_ijData, opt_ijData_deprecated) {
     opt_ijData = opt_ijData_deprecated || opt_ijData;
+    var $$temp;
     /** @type {!Array<?>} */
@@ -74,3 +100,7 @@ var items = soy.asserts.assertType(goog.isArray(opt_data.items), 'items', opt_data.items, '!Array<?>');
     /** @type {*|null|undefined} */
+    var _handleItemKeyDown = opt_data._handleItemKeyDown;
+    /** @type {*|null|undefined} */
     var _handleSearch = opt_data._handleSearch;
+    /** @type {*|null|undefined} */
+    var _handleTriggerKeyDown = opt_data._handleTriggerKeyDown;
     /** @type {?} */
@@ -110,3 +140,3 @@ var button = opt_data.button;
     var triggerTitle = soy.asserts.assertType(opt_data.triggerTitle == null || goog.isString(opt_data.triggerTitle) || opt_data.triggerTitle instanceof goog.soy.data.SanitizedContent, 'triggerTitle', opt_data.triggerTitle, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var attributes__soy299 = function attributes__soy299() {
+    var attributes__soy284 = function attributes__soy284() {
       incrementalDom.attr('class', 'dropdown' + (elementClasses ? ' ' + elementClasses : '') + (expanded ? ' show' : ''));
@@ -118,8 +148,8 @@ if (id) {
     incrementalDom.elementOpenStart('div');
-    attributes__soy299();
+    attributes__soy284();
     incrementalDom.elementOpenEnd();
-    $trigger({ ariaLabel: triggerAriaLabel, classes: triggerClasses, disabled: disabled, expanded: expanded, label: label, size: triggerSize, style: style, title: triggerTitle }, opt_ijData);
-    $sections({ _handleButtonClick: _handleButtonClick, _handleItemClick: _handleItemClick, _handleSearch: _handleSearch, button: button, caption: caption, contentRenderer: contentRenderer != null ? contentRenderer : '', expanded: expanded, helpText: helpText, items: items, itemsIconAlignment: itemsIconAlignment, portalElementId: portalElementId, searchable: searchable, spritemap: spritemap }, opt_ijData);
+    $trigger({ _handleTriggerKeyDown: _handleTriggerKeyDown, ariaLabel: triggerAriaLabel, classes: triggerClasses, disabled: disabled, expanded: expanded, label: label, size: triggerSize, style: style, title: triggerTitle }, null, opt_ijData);
+    $sections({ _handleButtonClick: _handleButtonClick, _handleItemClick: _handleItemClick, _handleItemKeyDown: _handleItemKeyDown, _handleSearch: _handleSearch, button: button, caption: caption, contentRenderer: ($$temp = contentRenderer) == null ? '' : $$temp, expanded: expanded, helpText: helpText, items: items, itemsIconAlignment: itemsIconAlignment, portalElementId: portalElementId, searchable: searchable, spritemap: spritemap }, null, opt_ijData);
     incrementalDom.elementClose('div');
-  };
+  }
   exports.render = $render;
@@ -132,4 +162,6 @@ /**
    *  _handleItemClick: (*|null|undefined),
+   *  _handleItemKeyDown: (*|null|undefined),
    *  _handleSearch: (*|null|undefined),
-   *  button: (?|undefined),
+   *  _handleTriggerKeyDown: (*|null|undefined),
+   *  button: (?),
    *  caption: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -150,3 +182,3 @@ *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  triggerSize: (!goog.soy.data.SanitizedContent|null|string|undefined),
-   *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined)
    * }}
@@ -160,9 +192,17 @@ */
   /**
-   * @param {$items.Params} opt_data
+   * @param {{
+   *  items: !Array<?>,
+   *  _handleItemClick: (*|null|undefined),
+   *  _handleItemKeyDown: (*|null|undefined),
+   *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  maxItems: (null|number|undefined),
+   *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined)
+   * }} opt_data
    * @param {Object<string, *>=} opt_ijData
    * @param {Object<string, *>=} opt_ijData_deprecated
    * @return {void}
-   * @suppress {checkTypes|uselessCode}
+   * @suppress {checkTypes}
    */
-  var $items = function $items(opt_data, opt_ijData, opt_ijData_deprecated) {
+  function $items(opt_data, opt_ijData, opt_ijData_deprecated) {
     opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -173,2 +213,4 @@ /** @type {!Array<?>} */
     var _handleItemClick = opt_data._handleItemClick;
+    /** @type {*|null|undefined} */
+    var _handleItemKeyDown = opt_data._handleItemKeyDown;
     /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -182,25 +224,23 @@ var contentRenderer = soy.asserts.assertType(opt_data.contentRenderer == null || goog.isString(opt_data.contentRenderer) || opt_data.contentRenderer instanceof goog.soy.data.SanitizedContent, 'contentRenderer', opt_data.contentRenderer, '!goog.soy.data.SanitizedContent|null|string|undefined');
     var spritemap = soy.asserts.assertType(opt_data.spritemap == null || goog.isString(opt_data.spritemap) || opt_data.spritemap instanceof goog.soy.data.SanitizedContent, 'spritemap', opt_data.spritemap, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var index336_RangeEnd = maxItems && maxItems < items.length ? maxItems : items.length;
-    var index336ListLen = Math.max(0, Math.ceil((index336_RangeEnd - 0) / 1));
-    for (var index336Index = 0; index336Index < index336ListLen; index336Index++) {
-      var index336Data = 0 + index336Index * 1;
-      var item__soy339 = items[index336Data];
-      var variant__soy358 = '';
-      var $tmp;
+    var index341Limit = maxItems && maxItems < items.length ? maxItems : items.length;
+    for (var index341 = 0; index341 < index341Limit; index341++) {
+      var item__soy343 = items[index341];
+      var variant__soy345 = '';
+      var $tmp = null;
       if (contentRenderer != null && contentRenderer != '') {
         $tmp = contentRenderer;
-      } else if (item__soy339.contentRenderer != null && item__soy339.contentRenderer != '') {
-        $tmp = item__soy339.contentRenderer;
-      } else if (item__soy339.type) {
-        $tmp = item__soy339.type;
+      } else if (item__soy343.contentRenderer != null && item__soy343.contentRenderer != '') {
+        $tmp = item__soy343.contentRenderer;
+      } else if (item__soy343.type) {
+        $tmp = item__soy343.type;
       } else {
         $tmp = 'item';
       }
-      variant__soy358 += $tmp;
-      $templateAlias3({ active: item__soy339.active, checked: item__soy339.checked, contentRenderer: variant__soy358, data: item__soy339.data, disabled: item__soy339.disabled, events: { itemClicked: _handleItemClick }, href: item__soy339.href, icon: item__soy339.icon, inputName: item__soy339.inputName, inputValue: item__soy339.inputValue, items: item__soy339.items, itemsIconAlignment: itemsIconAlignment, label: item__soy339.label ? '' + item__soy339.label : '', maxItems: item__soy339.maxItems, separator: item__soy339.separator, spritemap: spritemap, target: item__soy339.target, title: item__soy339.title, type: item__soy339.type }, opt_ijData);
-      if (item__soy339.separator) {
-        $templateAlias3({ contentRenderer: 'separator' }, opt_ijData);
+      variant__soy345 += $tmp;
+      $templateAlias1({ active: item__soy343.active, checked: item__soy343.checked, contentRenderer: variant__soy345, data: item__soy343.data, disabled: item__soy343.disabled, events: { itemClicked: _handleItemClick, itemKeyDown: _handleItemKeyDown }, href: item__soy343.href, icon: item__soy343.icon, icons: item__soy343.icons, inputName: item__soy343.inputName, inputValue: item__soy343.inputValue, items: item__soy343.items, itemsIconAlignment: itemsIconAlignment, label: item__soy343.label ? '' + item__soy343.label : '', maxItems: item__soy343.maxItems, ref: 'item' + index341, separator: item__soy343.separator, spritemap: spritemap, target: item__soy343.target, title: item__soy343.title, type: item__soy343.type }, null, opt_ijData);
+      if (item__soy343.separator) {
+        $templateAlias1({ contentRenderer: 'separator' }, null, opt_ijData);
       }
     }
-  };
+  }
   exports.items = $items;
@@ -211,6 +251,7 @@ /**
    *  _handleItemClick: (*|null|undefined),
+   *  _handleItemKeyDown: (*|null|undefined),
    *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  maxItems: (null|number|undefined),
-   *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined)
    * }}
@@ -224,9 +265,12 @@ */
   /**
-   * @param {$search.Params} opt_data
+   * @param {{
+   *  spritemap: (!goog.soy.data.SanitizedContent|string),
+   *  _handleSearch: (*|null|undefined)
+   * }} opt_data
    * @param {Object<string, *>=} opt_ijData
    * @param {Object<string, *>=} opt_ijData_deprecated
    * @return {void}
-   * @suppress {checkTypes|uselessCode}
+   * @suppress {checkTypes}
    */
-  var $search = function $search(opt_data, opt_ijData, opt_ijData_deprecated) {
+  function $search(opt_data, opt_ijData, opt_ijData_deprecated) {
     opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -259,3 +303,3 @@ /** @type {!goog.soy.data.SanitizedContent|string} */
     incrementalDom.elementOpenEnd();
-    $templateAlias1({ icon: 'search', spritemap: spritemap, style: 'link' }, opt_ijData);
+    $templateAlias2({ icon: 'search', spritemap: spritemap, style: 'link' }, null, opt_ijData);
     incrementalDom.elementClose('span');
@@ -266,3 +310,3 @@ incrementalDom.elementClose('div');
     incrementalDom.elementClose('form');
-  };
+  }
   exports.search = $search;
@@ -272,3 +316,3 @@ /**
    *  spritemap: (!goog.soy.data.SanitizedContent|string),
-   *  _handleSearch: (*|null|undefined),
+   *  _handleSearch: (*|null|undefined)
    * }}
@@ -282,10 +326,26 @@ */
   /**
-   * @param {$sections.Params} opt_data
+   * @param {{
+   *  items: !Array<?>,
+   *  _handleButtonClick: (*|null|undefined),
+   *  _handleItemClick: (*|null|undefined),
+   *  _handleItemKeyDown: (*|null|undefined),
+   *  _handleSearch: (*|null|undefined),
+   *  button: (?),
+   *  caption: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  expanded: (boolean|null|undefined),
+   *  helpText: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  portalElementId: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  searchable: (boolean|null|undefined),
+   *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined)
+   * }} opt_data
    * @param {Object<string, *>=} opt_ijData
    * @param {Object<string, *>=} opt_ijData_deprecated
    * @return {void}
-   * @suppress {checkTypes|uselessCode}
+   * @suppress {checkTypes}
    */
-  var $sections = function $sections(opt_data, opt_ijData, opt_ijData_deprecated) {
+  function $sections(opt_data, opt_ijData, opt_ijData_deprecated) {
     opt_ijData = opt_ijData_deprecated || opt_ijData;
+    var $$temp;
     /** @type {!Array<?>} */
@@ -298,2 +358,4 @@ var items = soy.asserts.assertType(goog.isArray(opt_data.items), 'items', opt_data.items, '!Array<?>');
     /** @type {*|null|undefined} */
+    var _handleItemKeyDown = opt_data._handleItemKeyDown;
+    /** @type {*|null|undefined} */
     var _handleSearch = opt_data._handleSearch;
@@ -318,17 +380,9 @@ /** @type {?} */
     var spritemap = soy.asserts.assertType(opt_data.spritemap == null || goog.isString(opt_data.spritemap) || opt_data.spritemap instanceof goog.soy.data.SanitizedContent, 'spritemap', opt_data.spritemap, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var dropdownMenu__soy501 = function dropdownMenu__soy501() {
-      var listAttributes__soy428 = function listAttributes__soy428() {
-        var $tmp;
-        if (itemsIconAlignment == 'left') {
-          $tmp = ' dropdown-menu-indicator-start';
-        } else if (itemsIconAlignment == 'right') {
-          $tmp = ' dropdown-menu-indicator-end';
-        } else {
-          $tmp = '';
-        }
-        incrementalDom.attr('class', 'dropdown-menu' + $tmp + (expanded ? ' show' : ''));
+    var dropdownMenu__soy423 = function dropdownMenu__soy423() {
+      var listAttributes__soy425 = function listAttributes__soy425() {
+        incrementalDom.attr('class', 'dropdown-menu' + (itemsIconAlignment == 'left' || itemsIconAlignment == 'left-right' ? ' dropdown-menu-indicator-start' : '') + (itemsIconAlignment == 'right' || itemsIconAlignment == 'left-right' ? ' dropdown-menu-indicator-end' : '') + (expanded ? ' show' : ''));
         incrementalDom.attr('ref', 'menu');
       };
       incrementalDom.elementOpenStart('div');
-      listAttributes__soy428();
+      listAttributes__soy425();
       incrementalDom.elementOpenEnd();
@@ -344,8 +398,8 @@ if (helpText) {
       if (searchable && spritemap) {
-        $search({ _handleSearch: _handleSearch, spritemap: spritemap }, opt_ijData);
+        $search(opt_data, null, opt_ijData);
       }
-      var listItemsContent__soy454 = function listItemsContent__soy454() {
-        soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayDropdownBase.Content.idom'), contentRenderer, false)({ _handleItemClick: _handleItemClick, contentRenderer: contentRenderer, items: items, itemsIconAlignment: itemsIconAlignment, spritemap: spritemap }, opt_ijData);
+      var listItemsContent__soy456 = function listItemsContent__soy456() {
+        soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayDropdownBase.Content.idom'), contentRenderer, false)(opt_data, null, opt_ijData);
       };
-      var captionContent__soy463 = function captionContent__soy463() {
+      var captionContent__soy467 = function captionContent__soy467() {
         if (caption) {
@@ -364,5 +418,5 @@ incrementalDom.elementOpenStart('div');
         incrementalDom.elementOpenEnd();
-        listItemsContent__soy454();
+        listItemsContent__soy456();
         incrementalDom.elementClose('div');
-        captionContent__soy463();
+        captionContent__soy467();
         incrementalDom.elementOpenStart('div');
@@ -372,6 +426,5 @@ incrementalDom.attr('class', 'dropdown-section');
         if (button.href != null) {
-          $templateAlias4({ buttonStyle: button.buttonStyle, elementClasses: 'btn-block', events: { click: _handleButtonClick }, href: button.href, label: button.label, ref: 'dropdownButton' }, opt_ijData);
+          $templateAlias3({ buttonStyle: button.buttonStyle, elementClasses: 'btn-block', events: { click: _handleButtonClick }, href: button.href, label: button.label, ref: 'dropdownButton' }, null, opt_ijData);
         } else {
-          var $tmp$$1 = button.type;
-          $templateAlias1({ block: true, events: { click: _handleButtonClick }, label: button.label, ref: 'dropdownButton', style: button.style, type: $tmp$$1 != null ? $tmp$$1 : 'button' }, opt_ijData);
+          $templateAlias2({ block: true, events: { click: _handleButtonClick }, label: button.label, ref: 'dropdownButton', style: button.style, type: ($$temp = button.type) == null ? 'button' : $$temp }, null, opt_ijData);
         }
@@ -381,12 +434,12 @@ incrementalDom.elementClose('div');
       } else {
-        listItemsContent__soy454();
-        captionContent__soy463();
+        listItemsContent__soy456();
+        captionContent__soy467();
       }
       incrementalDom.elementClose('div');
     };
-    var param506 = function param506() {
-      dropdownMenu__soy501();
+    var param514 = function param514() {
+      dropdownMenu__soy423();
     };
-    $templateAlias2({ content: param506, portalElement: '#' + portalElementId, ref: 'portal' }, opt_ijData);
-  };
+    $templateAlias4({ content: param514, portalElement: '#' + portalElementId, ref: 'portal' }, null, opt_ijData);
+  }
   exports.sections = $sections;
@@ -398,4 +451,5 @@ /**
    *  _handleItemClick: (*|null|undefined),
+   *  _handleItemKeyDown: (*|null|undefined),
    *  _handleSearch: (*|null|undefined),
-   *  button: (?|undefined),
+   *  button: (?),
    *  caption: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -408,3 +462,3 @@ *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  searchable: (boolean|null|undefined),
-   *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined)
    * }}
@@ -418,12 +472,24 @@ */
   /**
-   * @param {$trigger.Params} opt_data
+   * @param {{
+   *  label: (!goog.soy.data.SanitizedContent|function()|string),
+   *  _handleTriggerKeyDown: (*|null|undefined),
+   *  ariaLabel: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  classes: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  disabled: (boolean|null|undefined),
+   *  expanded: (boolean|null|undefined),
+   *  size: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  style: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  title: (!goog.soy.data.SanitizedContent|null|string|undefined)
+   * }} opt_data
    * @param {Object<string, *>=} opt_ijData
    * @param {Object<string, *>=} opt_ijData_deprecated
    * @return {void}
-   * @suppress {checkTypes|uselessCode}
+   * @suppress {checkTypes}
    */
-  var $trigger = function $trigger(opt_data, opt_ijData, opt_ijData_deprecated) {
+  function $trigger(opt_data, opt_ijData, opt_ijData_deprecated) {
     opt_ijData = opt_ijData_deprecated || opt_ijData;
     /** @type {!goog.soy.data.SanitizedContent|function()|string} */
     var label = soy.asserts.assertType(goog.isFunction(opt_data.label) || goog.isString(opt_data.label) || opt_data.label instanceof goog.soy.data.SanitizedContent, 'label', opt_data.label, '!goog.soy.data.SanitizedContent|function()|string');
+    /** @type {*|null|undefined} */
+    var _handleTriggerKeyDown = opt_data._handleTriggerKeyDown;
     /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -443,3 +509,3 @@ var ariaLabel = soy.asserts.assertType(opt_data.ariaLabel == null || goog.isString(opt_data.ariaLabel) || opt_data.ariaLabel instanceof goog.soy.data.SanitizedContent, 'ariaLabel', opt_data.ariaLabel, '!goog.soy.data.SanitizedContent|null|string|undefined');
     var title = soy.asserts.assertType(opt_data.title == null || goog.isString(opt_data.title) || opt_data.title instanceof goog.soy.data.SanitizedContent, 'title', opt_data.title, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var buttonAttributes__soy566 = function buttonAttributes__soy566() {
+    var buttonAttributes__soy532 = function buttonAttributes__soy532() {
       if (expanded) {
@@ -459,2 +525,3 @@ incrementalDom.attr('aria-expanded', 'true');
         incrementalDom.attr('data-onclick', 'toggle');
+        incrementalDom.attr('data-onkeydown', _handleTriggerKeyDown);
       }
@@ -468,7 +535,7 @@ incrementalDom.attr('ref', 'triggerButton');
     incrementalDom.elementOpenStart('button');
-    buttonAttributes__soy566();
+    buttonAttributes__soy532();
     incrementalDom.elementOpenEnd();
     soyIdom.print(label);
     incrementalDom.elementClose('button');
-  };
+  }
   exports.trigger = $trigger;
@@ -478,2 +545,3 @@ /**
    *  label: (!goog.soy.data.SanitizedContent|function()|string),
+   *  _handleTriggerKeyDown: (*|null|undefined),
    *  ariaLabel: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -485,3 +553,3 @@ *  classes: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  style: (!goog.soy.data.SanitizedContent|null|string|undefined),
-   *  title: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  title: (!goog.soy.data.SanitizedContent|null|string|undefined)
    * }}
@@ -495,9 +563,17 @@ */
   /**
-   * @param {__deltemplate__ClayDropdownBase_Content_.Params} opt_data
+   * @param {{
+   *  _handleItemClick: (*|null|undefined),
+   *  _handleItemKeyDown: (*|null|undefined),
+   *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  items: (!Array<?>|null|undefined),
+   *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  maxItems: (null|number|undefined)
+   * }} opt_data
    * @param {Object<string, *>=} opt_ijData
    * @param {Object<string, *>=} opt_ijData_deprecated
    * @return {void}
-   * @suppress {checkTypes|uselessCode}
+   * @suppress {checkTypes}
    */
-  var __deltemplate__ClayDropdownBase_Content_ = function __deltemplate__ClayDropdownBase_Content_(opt_data, opt_ijData, opt_ijData_deprecated) {
+  function __deltemplate_s585_c28eeb45(opt_data, opt_ijData, opt_ijData_deprecated) {
     opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -507,2 +583,4 @@ opt_data = opt_data || {};
     var _handleItemClick = opt_data._handleItemClick;
+    /** @type {*|null|undefined} */
+    var _handleItemKeyDown = opt_data._handleItemKeyDown;
     /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -520,10 +598,11 @@ var contentRenderer = soy.asserts.assertType(opt_data.contentRenderer == null || goog.isString(opt_data.contentRenderer) || opt_data.contentRenderer instanceof goog.soy.data.SanitizedContent, 'contentRenderer', opt_data.contentRenderer, '!goog.soy.data.SanitizedContent|null|string|undefined');
       incrementalDom.elementOpenEnd();
-      $items({ _handleItemClick: _handleItemClick, items: items, itemsIconAlignment: itemsIconAlignment, spritemap: spritemap }, opt_ijData);
+      $items(opt_data, null, opt_ijData);
       incrementalDom.elementClose('ul');
     }
-  };
-  exports.__deltemplate__ClayDropdownBase_Content_ = __deltemplate__ClayDropdownBase_Content_;
+  }
+  exports.__deltemplate_s585_c28eeb45 = __deltemplate_s585_c28eeb45;
   /**
    * @typedef {{
    *  _handleItemClick: (*|null|undefined),
+   *  _handleItemKeyDown: (*|null|undefined),
    *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -533,20 +612,21 @@ *  items: (!Array<?>|null|undefined),
    *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  maxItems: (null|number|undefined)
    * }}
    */
-  __deltemplate__ClayDropdownBase_Content_.Params;
+  __deltemplate_s585_c28eeb45.Params;
   if (goog.DEBUG) {
-    __deltemplate__ClayDropdownBase_Content_.soyTemplateName = 'ClayDropdownBase.__deltemplate__ClayDropdownBase_Content_';
+    __deltemplate_s585_c28eeb45.soyTemplateName = 'ClayDropdownBase.__deltemplate_s585_c28eeb45';
   }
-  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayDropdownBase.Content.idom'), '', 0, __deltemplate__ClayDropdownBase_Content_);
+  soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayDropdownBase.Content.idom'), '', 0, __deltemplate_s585_c28eeb45);
 
-  exports.render.params = ["items", "label", "_handleButtonClick", "_handleItemClick", "_handleSearch", "button", "caption", "contentRenderer", "disabled", "elementClasses", "expanded", "helpText", "id", "itemsIconAlignment", "portalElementId", "searchable", "spritemap", "style", "triggerAriaLabel", "triggerClasses", "triggerSize", "triggerTitle"];
-  exports.render.types = { "items": "list<?>", "label": "html|string", "_handleButtonClick": "any", "_handleItemClick": "any", "_handleSearch": "any", "button": "?", "caption": "string", "contentRenderer": "string", "disabled": "bool", "elementClasses": "string", "expanded": "bool", "helpText": "string", "id": "string", "itemsIconAlignment": "string", "portalElementId": "string", "searchable": "bool", "spritemap": "string", "style": "string", "triggerAriaLabel": "string", "triggerClasses": "string", "triggerSize": "string", "triggerTitle": "string" };
-  exports.items.params = ["items", "_handleItemClick", "contentRenderer", "itemsIconAlignment", "maxItems", "spritemap"];
-  exports.items.types = { "items": "list<?>", "_handleItemClick": "any", "contentRenderer": "string", "itemsIconAlignment": "string", "maxItems": "int", "spritemap": "string" };
+  exports.render.params = ["items", "label", "_handleButtonClick", "_handleItemClick", "_handleItemKeyDown", "_handleSearch", "_handleTriggerKeyDown", "button", "caption", "contentRenderer", "disabled", "elementClasses", "expanded", "helpText", "id", "itemsIconAlignment", "portalElementId", "searchable", "spritemap", "style", "triggerAriaLabel", "triggerClasses", "triggerSize", "triggerTitle"];
+  exports.render.types = { "items": "list<?>", "label": "html|string", "_handleButtonClick": "any", "_handleItemClick": "any", "_handleItemKeyDown": "any", "_handleSearch": "any", "_handleTriggerKeyDown": "any", "button": "?", "caption": "string", "contentRenderer": "string", "disabled": "bool", "elementClasses": "string", "expanded": "bool", "helpText": "string", "id": "string", "itemsIconAlignment": "string", "portalElementId": "string", "searchable": "bool", "spritemap": "string", "style": "string", "triggerAriaLabel": "string", "triggerClasses": "string", "triggerSize": "string", "triggerTitle": "string" };
+  exports.items.params = ["items", "_handleItemClick", "_handleItemKeyDown", "contentRenderer", "itemsIconAlignment", "maxItems", "spritemap"];
+  exports.items.types = { "items": "list<?>", "_handleItemClick": "any", "_handleItemKeyDown": "any", "contentRenderer": "string", "itemsIconAlignment": "string", "maxItems": "int", "spritemap": "string" };
   exports.search.params = ["spritemap", "_handleSearch"];
   exports.search.types = { "spritemap": "string", "_handleSearch": "any" };
-  exports.sections.params = ["items", "_handleButtonClick", "_handleItemClick", "_handleSearch", "button", "caption", "contentRenderer", "expanded", "helpText", "itemsIconAlignment", "portalElementId", "searchable", "spritemap"];
-  exports.sections.types = { "items": "list<?>", "_handleButtonClick": "any", "_handleItemClick": "any", "_handleSearch": "any", "button": "?", "caption": "string", "contentRenderer": "string", "expanded": "bool", "helpText": "string", "itemsIconAlignment": "string", "portalElementId": "string", "searchable": "bool", "spritemap": "string" };
-  exports.trigger.params = ["label", "ariaLabel", "classes", "disabled", "expanded", "size", "style", "title"];
-  exports.trigger.types = { "label": "html|string", "ariaLabel": "string", "classes": "string", "disabled": "bool", "expanded": "bool", "size": "string", "style": "string", "title": "string" };
+  exports.sections.params = ["items", "_handleButtonClick", "_handleItemClick", "_handleItemKeyDown", "_handleSearch", "button", "caption", "contentRenderer", "expanded", "helpText", "itemsIconAlignment", "portalElementId", "searchable", "spritemap"];
+  exports.sections.types = { "items": "list<?>", "_handleButtonClick": "any", "_handleItemClick": "any", "_handleItemKeyDown": "any", "_handleSearch": "any", "button": "?", "caption": "string", "contentRenderer": "string", "expanded": "bool", "helpText": "string", "itemsIconAlignment": "string", "portalElementId": "string", "searchable": "bool", "spritemap": "string" };
+  exports.trigger.params = ["label", "_handleTriggerKeyDown", "ariaLabel", "classes", "disabled", "expanded", "size", "style", "title"];
+  exports.trigger.types = { "label": "html|string", "_handleTriggerKeyDown": "any", "ariaLabel": "string", "classes": "string", "disabled": "bool", "expanded": "bool", "size": "string", "style": "string", "title": "string" };
   exports.templates = templates = exports;
@@ -553,0 +633,0 @@ return exports;

lib/ClayDropdownItem.js

@@ -75,2 +75,15 @@ 'use strict';
 		/**
+   * Continues the propagation of the item clicked event
+   * @param {!Event} event
+   * @protected
+   * @return {Boolean} If the event has been prevented or not.
+   */
+
+	}, {
+		key: '_handleItemKeyDown',
+		value: function _handleItemKeyDown(event) {
+			return !this.emit('itemKeyDown', event);
+		}
+
+		/**
    * @inheritDoc
@@ -166,2 +179,3 @@ */
   * @default undefined
+  * @deprecated since version 2.13.x
   * @instance
@@ -174,2 +188,11 @@ * @memberof ClayDropdownItem
 	/**
+  * Icons of the item.
+  * @default undefined
+  * @instance
+  * @memberof ClayDropdownItem
+  * @type {?(object|undefined)}
+  */
+	icons: _validators.itemShape.icons,
+
+	/**
   * Name of the item input in case is selectable.
@@ -208,3 +231,3 @@ * @default undefined
   */
-	itemsIconAlignment: _metalState.Config.oneOf(['left', 'right']),
+	itemsIconAlignment: _metalState.Config.oneOf(['left', 'right', 'left-right']),
 
@@ -211,0 +234,0 @@ /**

lib/validators.js

@@ -17,2 +17,6 @@ 'use strict';
 	icon: _metalState.Config.string(),
+	icons: _metalState.Config.shapeOf({
+		left: _metalState.Config.string(),
+		right: _metalState.Config.string()
+	}),
 	inputName: _metalState.Config.string(),
@@ -19,0 +23,0 @@ inputValue: _metalState.Config.string(),

package.json

 {
   "name": "clay-dropdown",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "Clay Dropdown Component",
@@ -31,9 +31,9 @@ "license": "BSD-3-Clause",
   "dependencies": {
-    "clay-button": "^2.13.0",
-    "clay-checkbox": "^2.13.0",
-    "clay-component": "^2.13.0",
-    "clay-icon": "^2.13.0",
-    "clay-link": "^2.13.0",
-    "clay-portal": "^2.13.0",
-    "clay-radio": "^2.13.0",
+    "clay-button": "^2.14.0",
+    "clay-checkbox": "^2.14.0",
+    "clay-component": "^2.14.0",
+    "clay-icon": "^2.14.0",
+    "clay-link": "^2.14.0",
+    "clay-portal": "^2.14.0",
+    "clay-radio": "^2.14.0",
     "metal": "^2.16.0",
@@ -54,8 +54,8 @@ "metal-component": "^2.16.0",
     "babel-preset-env": "^1.6.0",
-    "browserslist-config-clay": "^2.13.0",
-    "clay-css": "^2.13.0",
+    "browserslist-config-clay": "^2.14.0",
+    "clay-css": "^2.14.0",
     "metal-dom": "^2.13.2",
-    "metal-tools-soy": "^6.0.0",
+    "metal-tools-soy": "^4.3.2",
     "webpack": "^3.0.0",
-    "webpack-config-clay": "^2.13.0"
+    "webpack-config-clay": "^2.14.0"
   },
@@ -65,3 +65,3 @@ "browserslist": [
   ],
-  "gitHead": "fef2c15a6c6a85daa328f93e4cb25d9ee4bb86dc"
+  "gitHead": "cc93f63941787d174b5871282dc36ccf15ee85f5"
 }

src/ClayActionsDropdown.js

@@ -178,3 +178,3 @@ import 'clay-icon';
 	 */
-	itemsIconAlignment: Config.oneOf(['left', 'right']),
+	itemsIconAlignment: Config.oneOf(['left', 'right', 'left-right']),
 
@@ -181,0 +181,0 @@ /**

src/ClayActionsDropdown.soy.js

@@ -23,15 +23,33 @@ /* jshint ignore:start */
 
-var $templateAlias1 = Soy.getTemplate('ClayDropdownBase.incrementaldom', 'render');
+var $templateAlias2 = Soy.getTemplate('ClayDropdownBase.incrementaldom', 'render');
 
-var $templateAlias2 = Soy.getTemplate('ClayIcon.incrementaldom', 'render');
+var $templateAlias1 = Soy.getTemplate('ClayIcon.incrementaldom', 'render');
 
 
 /**
- * @param {$render.Params} opt_data
+ * @param {{
+ *  items: !Array<?>,
+ *  spritemap: (!goog.soy.data.SanitizedContent|string),
+ *  _handleButtonClick: (*|null|undefined),
+ *  _handleItemClick: (*|null|undefined),
+ *  button: (?),
+ *  caption: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  disabled: (boolean|null|undefined),
+ *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  expanded: (boolean|null|undefined),
+ *  helpText: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  preferredAlign: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  toggle: (*|null|undefined),
+ *  triggerAriaLabel: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  triggerClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ * }} opt_data
  * @param {Object<string, *>=} opt_ijData
  * @param {Object<string, *>=} opt_ijData_deprecated
  * @return {void}
- * @suppress {checkTypes|uselessCode}
+ * @suppress {checkTypes}
  */
-var $render = function(opt_data, opt_ijData, opt_ijData_deprecated) {
+function $render(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -72,20 +90,20 @@ /** @type {!Array<?>} */
   var triggerTitle = soy.asserts.assertType(opt_data.triggerTitle == null || (goog.isString(opt_data.triggerTitle) || opt_data.triggerTitle instanceof goog.soy.data.SanitizedContent), 'triggerTitle', opt_data.triggerTitle, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var dropdownElementClasses__soy28 = '';
-  dropdownElementClasses__soy28 += 'dropdown-action';
-  dropdownElementClasses__soy28 += elementClasses ? ' ' + elementClasses : '';
-  var trigger__soy35 = function() {
-    $templateAlias2({spritemap: spritemap, symbol: 'ellipsis-v'}, opt_ijData);
+  var dropdownElementClasses__soy21 = '';
+  dropdownElementClasses__soy21 += 'dropdown-action';
+  dropdownElementClasses__soy21 += elementClasses ? ' ' + elementClasses : '';
+  var trigger__soy30 = function() {
+    $templateAlias1({spritemap: spritemap, symbol: 'ellipsis-v'}, null, opt_ijData);
   };
-  var param67 = '';
+  var param54 = '';
   if ((triggerTitle != null)) {
-    param67 += triggerTitle;
+    param54 += triggerTitle;
   } else {
-    var msg_1_6305962755687847469__soy2038 = '';
+    var msg_2408__soy2409 = '';
     /** @desc  */
     var MSG_EXTERNAL_6305962755687847469 = goog.getMsg('actions');
-    msg_1_6305962755687847469__soy2038 += MSG_EXTERNAL_6305962755687847469;
-    param67 += msg_1_6305962755687847469__soy2038;
+    msg_2408__soy2409 += MSG_EXTERNAL_6305962755687847469;
+    param54 += msg_2408__soy2409;
   }
-  $templateAlias1({button: button, caption: caption, disabled: disabled, elementClasses: dropdownElementClasses__soy28, events: {buttonClicked: _handleButtonClick, itemClicked: _handleItemClick, toggle: toggle}, expanded: expanded, helpText: helpText, id: id, items: items, itemsIconAlignment: itemsIconAlignment, label: trigger__soy35, preferredAlign: preferredAlign, ref: 'dropdown', spritemap: spritemap, triggerAriaLabel: triggerAriaLabel, triggerClasses: triggerClasses, triggerTitle: param67}, opt_ijData);
-};
+  $templateAlias2({button: button, caption: caption, disabled: disabled, elementClasses: dropdownElementClasses__soy21, events: {buttonClicked: _handleButtonClick, itemClicked: _handleItemClick, toggle: toggle}, expanded: expanded, helpText: helpText, id: id, items: items, itemsIconAlignment: itemsIconAlignment, label: trigger__soy30, preferredAlign: preferredAlign, ref: 'dropdown', spritemap: spritemap, triggerAriaLabel: triggerAriaLabel, triggerClasses: triggerClasses, triggerTitle: param54}, null, opt_ijData);
+}
 exports.render = $render;
@@ -98,3 +116,3 @@ /**
  *  _handleItemClick: (*|null|undefined),
- *  button: (?|undefined),
+ *  button: (?),
  *  caption: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -111,3 +129,3 @@ *  disabled: (boolean|null|undefined),
  *  triggerClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
- *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }}
@@ -114,0 +132,0 @@ */

src/ClayCreationMenuDropdown.js

@@ -160,3 +160,3 @@ import 'clay-icon';
 	 */
-	itemsIconAlignment: Config.oneOf(['left', 'right']),
+	itemsIconAlignment: Config.oneOf(['left', 'right', 'left-right']),
 
@@ -163,0 +163,0 @@ /**

src/ClayCreationMenuDropdown.soy.js

@@ -23,16 +23,38 @@ /* jshint ignore:start */
 
-var $templateAlias1 = Soy.getTemplate('ClayDropdownBase.incrementaldom', 'render');
+var $templateAlias2 = Soy.getTemplate('ClayDropdownBase.incrementaldom', 'render');
 
-var $templateAlias2 = Soy.getTemplate('ClayIcon.incrementaldom', 'render');
+var $templateAlias1 = Soy.getTemplate('ClayIcon.incrementaldom', 'render');
 
 
 /**
- * @param {$render.Params} opt_data
+ * @param {{
+ *  spritemap: (!goog.soy.data.SanitizedContent|string),
+ *  _handleButtonClick: (*|null|undefined),
+ *  _handleItemClick: (*|null|undefined),
+ *  disabled: (boolean|null|undefined),
+ *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  expanded: (boolean|null|undefined),
+ *  helpText: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  maxPrimaryItems: (null|number|undefined),
+ *  maxSecondaryItems: (null|number|undefined),
+ *  maxTotalItems: (null|number|undefined),
+ *  preferredAlign: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  primaryItems: (!Array<?>|null|undefined),
+ *  secondaryItems: (!Array<?>|null|undefined),
+ *  toggle: (*|null|undefined),
+ *  triggerAriaLabel: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  triggerClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  viewMoreURL: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ * }} opt_data
  * @param {Object<string, *>=} opt_ijData
  * @param {Object<string, *>=} opt_ijData_deprecated
  * @return {void}
- * @suppress {checkTypes|uselessCode}
+ * @suppress {checkTypes}
  */
-var $render = function(opt_data, opt_ijData, opt_ijData_deprecated) {
+function $render(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
+  var $$temp;
   /** @type {!goog.soy.data.SanitizedContent|string} */
@@ -87,3 +109,3 @@ var spritemap = soy.asserts.assertType(goog.isString(opt_data.spritemap) || opt_data.spritemap instanceof goog.soy.data.SanitizedContent, 'spritemap', opt_data.spritemap, '!goog.soy.data.SanitizedContent|string');
   var tempDefaultMaxSecondaryItems__soy109 = maxSecondaryItems ? (totalSecondaryItems__soy103 > maxSecondaryItems ? maxSecondaryItems : totalSecondaryItems__soy103) : totalSecondaryItems__soy103 > 7 ? 7 : totalSecondaryItems__soy103;
-  var defaultMaxTotalItems__soy111 = maxTotalItems != null ? maxTotalItems : 15;
+  var defaultMaxTotalItems__soy111 = ($$temp = maxTotalItems) == null ? 15 : $$temp;
   var defaultMaxSecondaryItems__soy113 = tempDefaultMaxSecondaryItems__soy109 > defaultMaxTotalItems__soy111 - defaultMaxPrimaryItems__soy107 ? defaultMaxTotalItems__soy111 - defaultMaxPrimaryItems__soy107 : tempDefaultMaxSecondaryItems__soy109;
@@ -96,25 +118,25 @@ var showingItems__soy115 = totalSecondaryItems__soy103 == 0 ? (totalPrimaryItems__soy97 > defaultMaxTotalItems__soy111 ? defaultMaxTotalItems__soy111 : totalPrimaryItems__soy97) : totalPrimaryItems__soy97 > defaultMaxPrimaryItems__soy107 ? (totalSecondaryItems__soy103 > defaultMaxSecondaryItems__soy113 ? defaultMaxPrimaryItems__soy107 + defaultMaxSecondaryItems__soy113 : defaultMaxPrimaryItems__soy107 + totalSecondaryItems__soy103) : totalSecondaryItems__soy103 > defaultMaxSecondaryItems__soy113 ? totalPrimaryItems__soy97 + defaultMaxSecondaryItems__soy113 : totalPrimaryItems__soy97 + totalSecondaryItems__soy103;
   var showMoreButton__soy125 = showingItems__soy115 < totalItems__soy105 ? ((viewMoreURL != null) ? {buttonStyle: 'secondary', href: viewMoreURL, label: 'More'} : {label: 'More', style: 'secondary'}) : null;
-  var trigger__soy132 = function() {
-    $templateAlias2({spritemap: spritemap, symbol: 'plus'}, opt_ijData);
+  var trigger__soy127 = function() {
+    $templateAlias1({spritemap: spritemap, symbol: 'plus'}, null, opt_ijData);
   };
-  var param149 = '';
+  var param136 = '';
   if (showMoreButton__soy125) {
-    var msg_2_8004490453579465583__soy2040 = '';
+    var msg_2411__soy2412 = '';
     /** @desc Says how many items of the total are being showed */
     var MSG_EXTERNAL_8004490453579465583 = goog.getMsg('showing-{$showingItems}-of-{$totalItems}-elements', {'showingItems': showingItems__soy115, 'totalItems': totalItems__soy105});
-    msg_2_8004490453579465583__soy2040 += MSG_EXTERNAL_8004490453579465583;
-    param149 += msg_2_8004490453579465583__soy2040;
+    msg_2411__soy2412 += MSG_EXTERNAL_8004490453579465583;
+    param136 += msg_2411__soy2412;
   }
-  var param179 = '';
+  var param168 = '';
   if (triggerTitle) {
-    param179 += triggerTitle;
+    param168 += triggerTitle;
   } else {
-    var msg_3_7387635272539030076__soy2042 = '';
+    var msg_2414__soy2415 = '';
     /** @desc  */
     var MSG_EXTERNAL_7387635272539030076 = goog.getMsg('new');
-    msg_3_7387635272539030076__soy2042 += MSG_EXTERNAL_7387635272539030076;
-    param179 += msg_3_7387635272539030076__soy2042;
+    msg_2414__soy2415 += MSG_EXTERNAL_7387635272539030076;
+    param168 += msg_2414__soy2415;
   }
-  $templateAlias1({button: showMoreButton__soy125, caption: param149, disabled: disabled, elementClasses: elementClasses, events: {buttonClicked: _handleButtonClick, itemClicked: _handleItemClick, toggle: toggle}, expanded: expanded, helpText: showMoreButton__soy125 ? helpText : null, id: id, items: items__soy123, itemsIconAlignment: itemsIconAlignment, label: trigger__soy132, preferredAlign: preferredAlign, ref: 'dropdown', spritemap: spritemap, style: 'primary', triggerAriaLabel: triggerAriaLabel, triggerClasses: triggerClasses, triggerTitle: param179}, opt_ijData);
-};
+  $templateAlias2({button: showMoreButton__soy125, caption: param136, disabled: disabled, elementClasses: elementClasses, events: {buttonClicked: _handleButtonClick, itemClicked: _handleItemClick, toggle: toggle}, expanded: expanded, helpText: showMoreButton__soy125 ? helpText : null, id: id, items: items__soy123, itemsIconAlignment: itemsIconAlignment, label: trigger__soy127, preferredAlign: preferredAlign, ref: 'dropdown', spritemap: spritemap, style: 'primary', triggerAriaLabel: triggerAriaLabel, triggerClasses: triggerClasses, triggerTitle: param168}, null, opt_ijData);
+}
 exports.render = $render;
@@ -142,3 +164,3 @@ /**
  *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined),
- *  viewMoreURL: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  viewMoreURL: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }}
@@ -145,0 +167,0 @@ */

src/ClayDropdown.js

@@ -178,3 +178,3 @@ import 'clay-icon';
 	 */
-	itemsIconAlignment: Config.oneOf(['left', 'right']),
+	itemsIconAlignment: Config.oneOf(['left', 'right', 'left-right']),
 
@@ -181,0 +181,0 @@ /**

src/ClayDropdown.soy.js

@@ -23,15 +23,38 @@ /* jshint ignore:start */
 
-var $templateAlias1 = Soy.getTemplate('ClayDropdownBase.incrementaldom', 'render');
+var $templateAlias2 = Soy.getTemplate('ClayDropdownBase.incrementaldom', 'render');
 
-var $templateAlias2 = Soy.getTemplate('ClayIcon.incrementaldom', 'render');
+var $templateAlias1 = Soy.getTemplate('ClayIcon.incrementaldom', 'render');
 
 
 /**
- * @param {$render.Params} opt_data
+ * @param {{
+ *  items: !Array<?>,
+ *  spritemap: (!goog.soy.data.SanitizedContent|string),
+ *  _handleButtonClick: (*|null|undefined),
+ *  _handleItemClick: (*|null|undefined),
+ *  button: (?),
+ *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  disabled: (boolean|null|undefined),
+ *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  expanded: (boolean|null|undefined),
+ *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
+ *  preferredAlign: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  searchable: (boolean|null|undefined),
+ *  showToggleIcon: (boolean|null|undefined),
+ *  style: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  toggle: (*|null|undefined),
+ *  triggerAriaLabel: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  triggerClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  triggerSize: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ * }} opt_data
  * @param {Object<string, *>=} opt_ijData
  * @param {Object<string, *>=} opt_ijData_deprecated
  * @return {void}
- * @suppress {checkTypes|uselessCode}
+ * @suppress {checkTypes}
  */
-var $render = function(opt_data, opt_ijData, opt_ijData_deprecated) {
+function $render(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -82,5 +105,5 @@ /** @type {!Array<?>} */
   var triggerTitle = soy.asserts.assertType(opt_data.triggerTitle == null || (goog.isString(opt_data.triggerTitle) || opt_data.triggerTitle instanceof goog.soy.data.SanitizedContent), 'triggerTitle', opt_data.triggerTitle, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var trigger__soy234 = function() {
+  var trigger__soy209 = function() {
     if (icon) {
-      $templateAlias2({elementClasses: label ? 'inline-item inline-item-before' : '', spritemap: spritemap, symbol: icon}, opt_ijData);
+      $templateAlias1({elementClasses: label ? 'inline-item inline-item-before' : '', spritemap: spritemap, symbol: icon}, null, opt_ijData);
     }
@@ -91,7 +114,7 @@ if (label) {
     if ((!(showToggleIcon != null) || showToggleIcon) && !icon) {
-      $templateAlias2({elementClasses: 'inline-item inline-item-after', spritemap: spritemap, symbol: 'caret-bottom'}, opt_ijData);
+      $templateAlias1({elementClasses: 'inline-item inline-item-after', spritemap: spritemap, symbol: 'caret-bottom'}, null, opt_ijData);
     }
   };
-  $templateAlias1({button: button, contentRenderer: contentRenderer, disabled: disabled, elementClasses: elementClasses, events: {buttonClicked: _handleButtonClick, itemClicked: _handleItemClick, toggle: toggle}, expanded: expanded, id: id, items: items, itemsIconAlignment: itemsIconAlignment, label: trigger__soy234, preferredAlign: preferredAlign, ref: 'dropdown', searchable: searchable, spritemap: spritemap, style: style, triggerAriaLabel: triggerAriaLabel, triggerClasses: triggerClasses, triggerSize: triggerSize, triggerTitle: triggerTitle}, opt_ijData);
-};
+  $templateAlias2({button: button, contentRenderer: contentRenderer, disabled: disabled, elementClasses: elementClasses, events: {buttonClicked: _handleButtonClick, itemClicked: _handleItemClick, toggle: toggle}, expanded: expanded, id: id, items: items, itemsIconAlignment: itemsIconAlignment, label: trigger__soy209, preferredAlign: preferredAlign, ref: 'dropdown', searchable: searchable, spritemap: spritemap, style: style, triggerAriaLabel: triggerAriaLabel, triggerClasses: triggerClasses, triggerSize: triggerSize, triggerTitle: triggerTitle}, null, opt_ijData);
+}
 exports.render = $render;
@@ -104,3 +127,3 @@ /**
  *  _handleItemClick: (*|null|undefined),
- *  button: (?|undefined),
+ *  button: (?),
  *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -122,3 +145,3 @@ *  disabled: (boolean|null|undefined),
  *  triggerSize: (!goog.soy.data.SanitizedContent|null|string|undefined),
- *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }}
@@ -125,0 +148,0 @@ */

src/ClayDropdownBase.js

@@ -17,8 +17,5 @@ import 'clay-button';
 
-const KEY_DOWN = 'ArrowDown';
-const KEY_UP = 'ArrowUp';
-const KEY_ENTER = 'Enter';
+const KEY_ESCAPE = 'Escape';
+const KEY_TAB = 'Tab';
 
-const KEY_NAVIGATION = [KEY_DOWN, KEY_UP, KEY_ENTER];
-
 /**
@@ -74,2 +71,21 @@ * Flattens all items into an array of arrays.
 	/**
+	 * Reassembles flattened items into the correct items structure.
+	 * This method is used in conjunction with `flatten(..., true)`
+	 * @param {Array} flattenedItems
+	 * @private
+	 * @return {Array}
+	 */
+	_assembleFromFlattenedGroups(flattenedItems) {
+		return this.items.map((item, i) => {
+			if (item.items) {
+				item.items = flattenedItems[i];
+			} else {
+				item = flattenedItems[i][0];
+			}
+
+			return item;
+		});
+	}
+
+	/**
 	 * Toggles the dropdown, closing it when open or opening it when closed.
@@ -100,83 +116,2 @@ * @protected
 	/**
-	 * Handles document click in order to hide menu.
-	 * @param {!Event} event
-	 * @protected
-	 */
-	_handleDocClick(event) {
-		if (
-			this.element.contains(event.target) ||
-			(this.refs.portal &&
-				this.refs.portal.element.contains(event.target))
-		) {
-			return;
-		}
-		this.toggle();
-	}
-
-	/**
-	 * Handles footer button click.
-	 * @param {!Event} event
-	 * @protected
-	 */
-	_handleButtonClick(event) {
-		this.emit('buttonClicked', event);
-	}
-
-	/**
-	 * Continues the propagation of the item clicked event
-	 * @param {!Event} event
-	 * @protected
-	 * @return {Boolean} If the event has been prevented or not.
-	 */
-	_handleItemClick(event) {
-		const element = event.delegateTarget;
-		const elementIndex = this._getDropdownItemIndex(element);
-		const flatenItems = flatten(this.items);
-		const item = flatenItems[elementIndex];
-
-		return !this.emit({
-			data: {
-				item: item,
-			},
-			name: 'itemClicked',
-			originalEvent: event,
-		});
-	}
-
-	/**
-	 * Increments to the index to the next item.
-	 * @param {Array} items
-	 * @param {Number} active
-	 * @param {Number} subActive
-	 * @param {Boolean} reverse
-	 * @private
-	 * @return {Object}
-	 */
-	_incrementActiveItemIndex(items, active, subActive, reverse) {
-		const totalItems = items.length;
-
-		subActive = reverse ? subActive - 1 : subActive + 1;
-
-		if (reverse) {
-			if (subActive < 0) {
-				const nextActive = active - 1;
-
-				active = nextActive < 0 ? totalItems - 1 : nextActive;
-
-				subActive = items[active].length - 1;
-			}
-		} else {
-			if (subActive === items[active].length) {
-				const nextActive = active + 1;
-
-				active = nextActive === totalItems ? 0 : nextActive;
-
-				subActive = 0;
-			}
-		}
-
-		return {active, subActive};
-	}
-
-	/**
 	 * Gets the indexes of the next active item.
@@ -220,74 +155,28 @@ * @param {Array} items
 	/**
-	 * Sets the next item in the list as active.
-	 * @param {Boolean} reverse
-	 * @private
+	 * Handles document click in order to hide menu.
+	 * @param {!Event} event
+	 * @protected
 	 */
-	_setNextActive(reverse) {
-		const items = flatten(this.items, true);
-		let activeSubIndex = -1;
-
-		const activeIndex = items.findIndex(item => {
-			const subIndex = item.findIndex(item => item.active);
-
-			if (subIndex !== -1) {
-				activeSubIndex = subIndex;
-
-				return true;
-			}
-		});
-
-		const {active, subActive} = this._getNextIndexes(
-			items,
-			activeIndex,
-			activeSubIndex,
-			reverse
-		);
-
-		if (items[activeIndex] && items[activeIndex][activeSubIndex]) {
-			items[activeIndex][activeSubIndex].active = false;
+	_handleDocClick(event) {
+		if (
+			this.element.contains(event.target) ||
+			(this.refs.portal &&
+				this.refs.portal.element.contains(event.target))
+		) {
+			return;
 		}
-
-		items[active][subActive].active = true;
-
-		this.items = this._assembleFromFlattenedGroups(items);
+		this.toggle();
 	}
 
 	/**
-	 * Reassembles flattened items into the correct items structure.
-	 * This method is used in conjunction with `flatten(..., true)`
-	 * @param {Array} flattenedItems
-	 * @private
-	 * @return {Array}
-	 */
-	_assembleFromFlattenedGroups(flattenedItems) {
-		return this.items.map((item, i) => {
-			if (item.items) {
-				item.items = flattenedItems[i];
-			} else {
-				item = flattenedItems[i][0];
-			}
-
-			return item;
-		});
-	}
-
-	/**
-	 * Handle key events.
+	 * Handles footer button click.
 	 * @param {!Event} event
-	 * @private
+	 * @protected
 	 */
-	_handleKeyNavigation(event) {
-		if (KEY_NAVIGATION.includes(event.key)) {
-			event.preventDefault();
-
-			if (event.key === KEY_DOWN || event.key === KEY_UP) {
-				this._setNextActive(event.key === KEY_UP);
-			} else if (event.key === KEY_ENTER) {
-				this._handleEnterKey(event);
-			}
-		}
+	_handleButtonClick(event) {
+		this.emit('buttonClicked', event);
 	}
 
 	/**
-	 * Continues the propagation of the enter key event
+	 * Continues the propagation of the item clicked event
 	 * @param {!Event} event
@@ -297,6 +186,11 @@ * @protected
 	 */
-	_handleEnterKey(event) {
+	_handleItemClick(event) {
+		const element = event.delegateTarget;
+		const elementIndex = this._getDropdownItemIndex(element);
+		const flatenItems = flatten(this.items);
+		const item = flatenItems[elementIndex];
+
 		return !this.emit({
 			data: {
-				item: flatten(this.items).find(item => item.active),
+				item: item,
 			},
@@ -309,2 +203,31 @@ name: 'itemClicked',
 	/**
+	 * Handles the item key down event
+	 * @param {!Event} event
+	 * @protected
+	 */
+	_handleItemKeyDown(event) {
+		if (event.key === KEY_TAB) {
+			const element = event.delegateTarget;
+			const elementIndex = this._getDropdownItemIndex(element);
+			const totalElements = element.parentElement.querySelectorAll(
+				'li :not([role="presentation"])'
+			).length;
+
+			if (
+				(elementIndex === 0 && event.shiftKey) ||
+				(elementIndex === totalElements && !event.shiftKey)
+			) {
+				event.preventDefault();
+				this.refs.triggerButton.focus();
+			} else if (elementIndex === totalElements - 1 && !event.shiftKey) {
+				this.toggle();
+				this.refs.triggerButton.focus();
+			}
+		} else if (event.key === KEY_ESCAPE) {
+			this.toggle();
+			this.refs.triggerButton.focus();
+		}
+	}
+
+	/**
 	 * Handle click key code esc and close dropdown.
@@ -394,2 +317,23 @@ * @param {!Event} event
 	/**
+	 * Handles the key down event over the trigger
+	 * @param {!Event} event
+	 * @protected
+	 */
+	_handleTriggerKeyDown(event) {
+		if (event.key === KEY_TAB) {
+			if (event.shiftKey && this.expanded) {
+				this.toggle();
+			} else {
+				let item = this.refs.portal.refs.item0;
+
+				item = item.refs.item0 || item;
+
+				if (item) {
+					item.element.focus();
+				}
+			}
+		}
+	}
+
+	/**
 	 * Handles blur window in order to hide menu.
@@ -406,2 +350,72 @@ * @private
 	/**
+	 * Increments to the index to the next item.
+	 * @param {Array} items
+	 * @param {Number} active
+	 * @param {Number} subActive
+	 * @param {Boolean} reverse
+	 * @private
+	 * @return {Object}
+	 */
+	_incrementActiveItemIndex(items, active, subActive, reverse) {
+		const totalItems = items.length;
+
+		subActive = reverse ? subActive - 1 : subActive + 1;
+
+		if (reverse) {
+			if (subActive < 0) {
+				const nextActive = active - 1;
+
+				active = nextActive < 0 ? totalItems - 1 : nextActive;
+
+				subActive = items[active].length - 1;
+			}
+		} else {
+			if (subActive === items[active].length) {
+				const nextActive = active + 1;
+
+				active = nextActive === totalItems ? 0 : nextActive;
+
+				subActive = 0;
+			}
+		}
+
+		return {active, subActive};
+	}
+
+	/**
+	 * Sets the next item in the list as active.
+	 * @param {Boolean} reverse
+	 * @private
+	 */
+	_setNextActive(reverse) {
+		const items = flatten(this.items, true);
+		let activeSubIndex = -1;
+
+		const activeIndex = items.findIndex(item => {
+			const subIndex = item.findIndex(item => item.active);
+
+			if (subIndex !== -1) {
+				activeSubIndex = subIndex;
+
+				return true;
+			}
+		});
+
+		const {active, subActive} = this._getNextIndexes(
+			items,
+			activeIndex,
+			activeSubIndex,
+			reverse
+		);
+
+		if (items[activeIndex] && items[activeIndex][activeSubIndex]) {
+			items[activeIndex][activeSubIndex].active = false;
+		}
+
+		items[active][subActive].active = true;
+
+		this.items = this._assembleFromFlattenedGroups(items);
+	}
+
+	/**
 	 * Set preferred alignment with Align API.
@@ -447,11 +461,4 @@ * @private
 				),
-				dom.on(document, 'keyup', this._handleKeyup.bind(this), true),
 				dom.on(
 					document,
-					'keydown',
-					this._handleKeyNavigation.bind(this),
-					true
-				),
-				dom.on(
-					document,
 					'touchend',
@@ -619,3 +626,3 @@ this._handleDocClick.bind(this),
 	 */
-	itemsIconAlignment: Config.oneOf(['left', 'right']),
+	itemsIconAlignment: Config.oneOf(['left', 'right', 'left-right']),
 
@@ -622,0 +629,0 @@ /**

src/ClayDropdownBase.soy.js

@@ -27,20 +27,46 @@ /* jshint ignore:start */
 
-var $templateAlias1 = Soy.getTemplate('ClayButton.incrementaldom', 'render');
+var $templateAlias2 = Soy.getTemplate('ClayButton.incrementaldom', 'render');
 
-var $templateAlias3 = Soy.getTemplate('ClayDropdownItem.incrementaldom', 'render');
+var $templateAlias1 = Soy.getTemplate('ClayDropdownItem.incrementaldom', 'render');
 
-var $templateAlias4 = Soy.getTemplate('ClayLink.incrementaldom', 'render');
+var $templateAlias3 = Soy.getTemplate('ClayLink.incrementaldom', 'render');
 
-var $templateAlias2 = Soy.getTemplate('ClayPortal.incrementaldom', 'render');
+var $templateAlias4 = Soy.getTemplate('ClayPortal.incrementaldom', 'render');
 
 
 /**
- * @param {$render.Params} opt_data
+ * @param {{
+ *  items: !Array<?>,
+ *  label: (!goog.soy.data.SanitizedContent|function()|string),
+ *  _handleButtonClick: (*|null|undefined),
+ *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
+ *  _handleSearch: (*|null|undefined),
+ *  _handleTriggerKeyDown: (*|null|undefined),
+ *  button: (?),
+ *  caption: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  disabled: (boolean|null|undefined),
+ *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  expanded: (boolean|null|undefined),
+ *  helpText: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  portalElementId: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  searchable: (boolean|null|undefined),
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  style: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  triggerAriaLabel: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  triggerClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  triggerSize: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ * }} opt_data
  * @param {Object<string, *>=} opt_ijData
  * @param {Object<string, *>=} opt_ijData_deprecated
  * @return {void}
- * @suppress {checkTypes|uselessCode}
+ * @suppress {checkTypes}
  */
-var $render = function(opt_data, opt_ijData, opt_ijData_deprecated) {
+function $render(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
+  var $$temp;
   /** @type {!Array<?>} */
@@ -55,3 +81,7 @@ var items = soy.asserts.assertType(goog.isArray(opt_data.items), 'items', opt_data.items, '!Array<?>');
   /** @type {*|null|undefined} */
+  var _handleItemKeyDown = opt_data._handleItemKeyDown;
+  /** @type {*|null|undefined} */
   var _handleSearch = opt_data._handleSearch;
+  /** @type {*|null|undefined} */
+  var _handleTriggerKeyDown = opt_data._handleTriggerKeyDown;
   /** @type {?} */
@@ -91,3 +121,3 @@ var button = opt_data.button;
   var triggerTitle = soy.asserts.assertType(opt_data.triggerTitle == null || (goog.isString(opt_data.triggerTitle) || opt_data.triggerTitle instanceof goog.soy.data.SanitizedContent), 'triggerTitle', opt_data.triggerTitle, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var attributes__soy299 = function() {
+  var attributes__soy284 = function() {
     incrementalDom.attr('class', 'dropdown' + (elementClasses ? ' ' + elementClasses : '') + (expanded ? ' show' : ''));
@@ -99,8 +129,8 @@ if (id) {
   incrementalDom.elementOpenStart('div');
-      attributes__soy299();
+      attributes__soy284();
   incrementalDom.elementOpenEnd();
-  $trigger({ariaLabel: triggerAriaLabel, classes: triggerClasses, disabled: disabled, expanded: expanded, label: label, size: triggerSize, style: style, title: triggerTitle}, opt_ijData);
-  $sections({_handleButtonClick: _handleButtonClick, _handleItemClick: _handleItemClick, _handleSearch: _handleSearch, button: button, caption: caption, contentRenderer: contentRenderer != null ? contentRenderer : '', expanded: expanded, helpText: helpText, items: items, itemsIconAlignment: itemsIconAlignment, portalElementId: portalElementId, searchable: searchable, spritemap: spritemap}, opt_ijData);
+    $trigger({_handleTriggerKeyDown: _handleTriggerKeyDown, ariaLabel: triggerAriaLabel, classes: triggerClasses, disabled: disabled, expanded: expanded, label: label, size: triggerSize, style: style, title: triggerTitle}, null, opt_ijData);
+    $sections({_handleButtonClick: _handleButtonClick, _handleItemClick: _handleItemClick, _handleItemKeyDown: _handleItemKeyDown, _handleSearch: _handleSearch, button: button, caption: caption, contentRenderer: ($$temp = contentRenderer) == null ? '' : $$temp, expanded: expanded, helpText: helpText, items: items, itemsIconAlignment: itemsIconAlignment, portalElementId: portalElementId, searchable: searchable, spritemap: spritemap}, null, opt_ijData);
   incrementalDom.elementClose('div');
-};
+}
 exports.render = $render;
@@ -113,4 +143,6 @@ /**
  *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
  *  _handleSearch: (*|null|undefined),
- *  button: (?|undefined),
+ *  _handleTriggerKeyDown: (*|null|undefined),
+ *  button: (?),
  *  caption: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -131,3 +163,3 @@ *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  triggerSize: (!goog.soy.data.SanitizedContent|null|string|undefined),
- *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  triggerTitle: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }}
@@ -142,9 +174,17 @@ */
 /**
- * @param {$items.Params} opt_data
+ * @param {{
+ *  items: !Array<?>,
+ *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
+ *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  maxItems: (null|number|undefined),
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ * }} opt_data
  * @param {Object<string, *>=} opt_ijData
  * @param {Object<string, *>=} opt_ijData_deprecated
  * @return {void}
- * @suppress {checkTypes|uselessCode}
+ * @suppress {checkTypes}
  */
-var $items = function(opt_data, opt_ijData, opt_ijData_deprecated) {
+function $items(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -155,2 +195,4 @@ /** @type {!Array<?>} */
   var _handleItemClick = opt_data._handleItemClick;
+  /** @type {*|null|undefined} */
+  var _handleItemKeyDown = opt_data._handleItemKeyDown;
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -164,25 +206,23 @@ var contentRenderer = soy.asserts.assertType(opt_data.contentRenderer == null || (goog.isString(opt_data.contentRenderer) || opt_data.contentRenderer instanceof goog.soy.data.SanitizedContent), 'contentRenderer', opt_data.contentRenderer, '!goog.soy.data.SanitizedContent|null|string|undefined');
   var spritemap = soy.asserts.assertType(opt_data.spritemap == null || (goog.isString(opt_data.spritemap) || opt_data.spritemap instanceof goog.soy.data.SanitizedContent), 'spritemap', opt_data.spritemap, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var index336_RangeEnd = maxItems && maxItems < (items.length) ? maxItems : (items.length);
-  var index336ListLen = Math.max(0, Math.ceil((index336_RangeEnd - 0) / 1));
-  for (var index336Index = 0; index336Index < index336ListLen; index336Index++) {
-    var index336Data = 0 + index336Index * 1;
-    var item__soy339 = items[index336Data];
-    var variant__soy358 = '';
-    var $tmp;
-    if ((contentRenderer != null) && contentRenderer != '') {
-      $tmp = contentRenderer;
-    } else if ((item__soy339.contentRenderer != null) && item__soy339.contentRenderer != '') {
-      $tmp = item__soy339.contentRenderer;
-    } else if (item__soy339.type) {
-      $tmp = item__soy339.type;
-    } else {
-      $tmp = 'item';
+  var index341Limit = maxItems && maxItems < (items.length) ? maxItems : (items.length);
+  for (var index341 = 0; index341 < index341Limit; index341++) {
+    var item__soy343 = items[index341];
+    var variant__soy345 = '';
+    var $tmp = null;
+if ((contentRenderer != null) && contentRenderer != '') {
+  $tmp = contentRenderer;
+} else if ((item__soy343.contentRenderer != null) && item__soy343.contentRenderer != '') {
+  $tmp = item__soy343.contentRenderer;
+} else if (item__soy343.type) {
+  $tmp = item__soy343.type;
+} else {
+  $tmp = 'item';
+}
+variant__soy345 += $tmp;
+    $templateAlias1({active: item__soy343.active, checked: item__soy343.checked, contentRenderer: variant__soy345, data: item__soy343.data, disabled: item__soy343.disabled, events: {itemClicked: _handleItemClick, itemKeyDown: _handleItemKeyDown}, href: item__soy343.href, icon: item__soy343.icon, icons: item__soy343.icons, inputName: item__soy343.inputName, inputValue: item__soy343.inputValue, items: item__soy343.items, itemsIconAlignment: itemsIconAlignment, label: item__soy343.label ? '' + item__soy343.label : '', maxItems: item__soy343.maxItems, ref: 'item' + index341, separator: item__soy343.separator, spritemap: spritemap, target: item__soy343.target, title: item__soy343.title, type: item__soy343.type}, null, opt_ijData);
+    if (item__soy343.separator) {
+      $templateAlias1({contentRenderer: 'separator'}, null, opt_ijData);
     }
-    variant__soy358 += $tmp;
-    $templateAlias3({active: item__soy339.active, checked: item__soy339.checked, contentRenderer: variant__soy358, data: item__soy339.data, disabled: item__soy339.disabled, events: {itemClicked: _handleItemClick}, href: item__soy339.href, icon: item__soy339.icon, inputName: item__soy339.inputName, inputValue: item__soy339.inputValue, items: item__soy339.items, itemsIconAlignment: itemsIconAlignment, label: item__soy339.label ? '' + item__soy339.label : '', maxItems: item__soy339.maxItems, separator: item__soy339.separator, spritemap: spritemap, target: item__soy339.target, title: item__soy339.title, type: item__soy339.type}, opt_ijData);
-    if (item__soy339.separator) {
-      $templateAlias3({contentRenderer: 'separator'}, opt_ijData);
-    }
   }
-};
+}
 exports.items = $items;
@@ -193,6 +233,7 @@ /**
  *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
  *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  maxItems: (null|number|undefined),
- *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }}
@@ -207,9 +248,12 @@ */
 /**
- * @param {$search.Params} opt_data
+ * @param {{
+ *  spritemap: (!goog.soy.data.SanitizedContent|string),
+ *  _handleSearch: (*|null|undefined)
+ * }} opt_data
  * @param {Object<string, *>=} opt_ijData
  * @param {Object<string, *>=} opt_ijData_deprecated
  * @return {void}
- * @suppress {checkTypes|uselessCode}
+ * @suppress {checkTypes}
  */
-var $search = function(opt_data, opt_ijData, opt_ijData_deprecated) {
+function $search(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -221,30 +265,30 @@ /** @type {!goog.soy.data.SanitizedContent|string} */
   incrementalDom.elementOpen('form');
-  incrementalDom.elementOpenStart('div');
-      incrementalDom.attr('class', 'dropdown-section');
-  incrementalDom.elementOpenEnd();
-  incrementalDom.elementOpenStart('div');
-      incrementalDom.attr('class', 'input-group input-group-sm');
-  incrementalDom.elementOpenEnd();
-  incrementalDom.elementOpenStart('div');
-      incrementalDom.attr('class', 'input-group-item');
-  incrementalDom.elementOpenEnd();
-  incrementalDom.elementOpenStart('input');
-      incrementalDom.attr('aria-label', 'Search for...');
-      incrementalDom.attr('class', 'form-control input-group-inset input-group-inset-after');
-      incrementalDom.attr('data-oninput', _handleSearch);
-      incrementalDom.attr('placeholder', 'Search for...');
-      incrementalDom.attr('type', 'text');
-      incrementalDom.attr('ref', 'searchInput');
-  incrementalDom.elementOpenEnd();
-  incrementalDom.elementClose('input');
-  incrementalDom.elementOpenStart('span');
-      incrementalDom.attr('class', 'input-group-inset-item input-group-inset-item-after');
-  incrementalDom.elementOpenEnd();
-  $templateAlias1({icon: 'search', spritemap: spritemap, style: 'link'}, opt_ijData);
-  incrementalDom.elementClose('span');
-  incrementalDom.elementClose('div');
-  incrementalDom.elementClose('div');
-  incrementalDom.elementClose('div');
+    incrementalDom.elementOpenStart('div');
+        incrementalDom.attr('class', 'dropdown-section');
+    incrementalDom.elementOpenEnd();
+      incrementalDom.elementOpenStart('div');
+          incrementalDom.attr('class', 'input-group input-group-sm');
+      incrementalDom.elementOpenEnd();
+        incrementalDom.elementOpenStart('div');
+            incrementalDom.attr('class', 'input-group-item');
+        incrementalDom.elementOpenEnd();
+          incrementalDom.elementOpenStart('input');
+              incrementalDom.attr('aria-label', 'Search for...');
+              incrementalDom.attr('class', 'form-control input-group-inset input-group-inset-after');
+              incrementalDom.attr('data-oninput', _handleSearch);
+              incrementalDom.attr('placeholder', 'Search for...');
+              incrementalDom.attr('type', 'text');
+              incrementalDom.attr('ref', 'searchInput');
+          incrementalDom.elementOpenEnd();
+          incrementalDom.elementClose('input');
+          incrementalDom.elementOpenStart('span');
+              incrementalDom.attr('class', 'input-group-inset-item input-group-inset-item-after');
+          incrementalDom.elementOpenEnd();
+            $templateAlias2({icon: 'search', spritemap: spritemap, style: 'link'}, null, opt_ijData);
+          incrementalDom.elementClose('span');
+        incrementalDom.elementClose('div');
+      incrementalDom.elementClose('div');
+    incrementalDom.elementClose('div');
   incrementalDom.elementClose('form');
-};
+}
 exports.search = $search;
@@ -254,3 +298,3 @@ /**
  *  spritemap: (!goog.soy.data.SanitizedContent|string),
- *  _handleSearch: (*|null|undefined),
+ *  _handleSearch: (*|null|undefined)
  * }}
@@ -265,10 +309,26 @@ */
 /**
- * @param {$sections.Params} opt_data
+ * @param {{
+ *  items: !Array<?>,
+ *  _handleButtonClick: (*|null|undefined),
+ *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
+ *  _handleSearch: (*|null|undefined),
+ *  button: (?),
+ *  caption: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  expanded: (boolean|null|undefined),
+ *  helpText: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  portalElementId: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  searchable: (boolean|null|undefined),
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ * }} opt_data
  * @param {Object<string, *>=} opt_ijData
  * @param {Object<string, *>=} opt_ijData_deprecated
  * @return {void}
- * @suppress {checkTypes|uselessCode}
+ * @suppress {checkTypes}
  */
-var $sections = function(opt_data, opt_ijData, opt_ijData_deprecated) {
+function $sections(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
+  var $$temp;
   /** @type {!Array<?>} */
@@ -281,2 +341,4 @@ var items = soy.asserts.assertType(goog.isArray(opt_data.items), 'items', opt_data.items, '!Array<?>');
   /** @type {*|null|undefined} */
+  var _handleItemKeyDown = opt_data._handleItemKeyDown;
+  /** @type {*|null|undefined} */
   var _handleSearch = opt_data._handleSearch;
@@ -301,71 +363,62 @@ /** @type {?} */
   var spritemap = soy.asserts.assertType(opt_data.spritemap == null || (goog.isString(opt_data.spritemap) || opt_data.spritemap instanceof goog.soy.data.SanitizedContent), 'spritemap', opt_data.spritemap, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var dropdownMenu__soy501 = function() {
-    var listAttributes__soy428 = function() {
-      var $tmp;
-      if (itemsIconAlignment == 'left') {
-        $tmp = ' dropdown-menu-indicator-start';
-      } else if (itemsIconAlignment == 'right') {
-        $tmp = ' dropdown-menu-indicator-end';
-      } else {
-        $tmp = '';
-      }
-      incrementalDom.attr('class', 'dropdown-menu' + $tmp + (expanded ? ' show' : ''));
+  var dropdownMenu__soy423 = function() {
+    var listAttributes__soy425 = function() {
+      incrementalDom.attr('class', 'dropdown-menu' + (itemsIconAlignment == 'left' || itemsIconAlignment == 'left-right' ? ' dropdown-menu-indicator-start' : '') + (itemsIconAlignment == 'right' || itemsIconAlignment == 'left-right' ? ' dropdown-menu-indicator-end' : '') + (expanded ? ' show' : ''));
       incrementalDom.attr('ref', 'menu');
     };
     incrementalDom.elementOpenStart('div');
-        listAttributes__soy428();
+        listAttributes__soy425();
     incrementalDom.elementOpenEnd();
-    if (helpText) {
-      incrementalDom.elementOpenStart('div');
-          incrementalDom.attr('class', 'alert alert-fluid alert-info');
-          incrementalDom.attr('role', 'alert');
-      incrementalDom.elementOpenEnd();
-      soyIdom.print(helpText);
-      incrementalDom.elementClose('div');
-    }
-    if (searchable && spritemap) {
-      $search({_handleSearch: _handleSearch, spritemap: spritemap}, opt_ijData);
-    }
-    var listItemsContent__soy454 = function() {
-      soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayDropdownBase.Content.idom'), contentRenderer, false)({_handleItemClick: _handleItemClick, contentRenderer: contentRenderer, items: items, itemsIconAlignment: itemsIconAlignment, spritemap: spritemap}, opt_ijData);
-    };
-    var captionContent__soy463 = function() {
-      if (caption) {
+      if (helpText) {
         incrementalDom.elementOpenStart('div');
-            incrementalDom.attr('class', 'dropdown-caption');
+            incrementalDom.attr('class', 'alert alert-fluid alert-info');
+            incrementalDom.attr('role', 'alert');
         incrementalDom.elementOpenEnd();
-        soyIdom.print(caption);
+          soyIdom.print(helpText);
         incrementalDom.elementClose('div');
       }
-    };
-    if (button) {
-      incrementalDom.elementOpen('form');
-      incrementalDom.elementOpenStart('div');
-          incrementalDom.attr('class', 'inline-scroller');
-      incrementalDom.elementOpenEnd();
-      listItemsContent__soy454();
-      incrementalDom.elementClose('div');
-      captionContent__soy463();
-      incrementalDom.elementOpenStart('div');
-          incrementalDom.attr('class', 'dropdown-section');
-      incrementalDom.elementOpenEnd();
-      if ((button.href != null)) {
-        $templateAlias4({buttonStyle: button.buttonStyle, elementClasses: 'btn-block', events: {click: _handleButtonClick}, href: button.href, label: button.label, ref: 'dropdownButton'}, opt_ijData);
+      if (searchable && spritemap) {
+        $search(opt_data, null, opt_ijData);
+      }
+      var listItemsContent__soy456 = function() {
+        soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayDropdownBase.Content.idom'), contentRenderer, false)(opt_data, null, opt_ijData);
+      };
+      var captionContent__soy467 = function() {
+        if (caption) {
+          incrementalDom.elementOpenStart('div');
+              incrementalDom.attr('class', 'dropdown-caption');
+          incrementalDom.elementOpenEnd();
+            soyIdom.print(caption);
+          incrementalDom.elementClose('div');
+        }
+      };
+      if (button) {
+        incrementalDom.elementOpen('form');
+          incrementalDom.elementOpenStart('div');
+              incrementalDom.attr('class', 'inline-scroller');
+          incrementalDom.elementOpenEnd();
+            listItemsContent__soy456();
+          incrementalDom.elementClose('div');
+          captionContent__soy467();
+          incrementalDom.elementOpenStart('div');
+              incrementalDom.attr('class', 'dropdown-section');
+          incrementalDom.elementOpenEnd();
+            if ((button.href != null)) {
+              $templateAlias3({buttonStyle: button.buttonStyle, elementClasses: 'btn-block', events: {click: _handleButtonClick}, href: button.href, label: button.label, ref: 'dropdownButton'}, null, opt_ijData);
+            } else {
+              $templateAlias2({block: true, events: {click: _handleButtonClick}, label: button.label, ref: 'dropdownButton', style: button.style, type: ($$temp = button.type) == null ? 'button' : $$temp}, null, opt_ijData);
+            }
+          incrementalDom.elementClose('div');
+        incrementalDom.elementClose('form');
       } else {
-        var $tmp$$1 = button.type;
-        $templateAlias1({block: true, events: {click: _handleButtonClick}, label: button.label, ref: 'dropdownButton', style: button.style, type: $tmp$$1 != null ? $tmp$$1 : 'button'}, opt_ijData);
+        listItemsContent__soy456();
+        captionContent__soy467();
       }
-      incrementalDom.elementClose('div');
-      incrementalDom.elementClose('form');
-    } else {
-      listItemsContent__soy454();
-      captionContent__soy463();
-    }
     incrementalDom.elementClose('div');
   };
-  var param506 = function() {
-    dropdownMenu__soy501();
+  var param514 = function() {
+    dropdownMenu__soy423();
   };
-  $templateAlias2({content: param506, portalElement: '#' + portalElementId, ref: 'portal'}, opt_ijData);
-};
+  $templateAlias4({content: param514, portalElement: '#' + portalElementId, ref: 'portal'}, null, opt_ijData);
+}
 exports.sections = $sections;
@@ -377,4 +430,5 @@ /**
  *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
  *  _handleSearch: (*|null|undefined),
- *  button: (?|undefined),
+ *  button: (?),
  *  caption: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -387,3 +441,3 @@ *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  searchable: (boolean|null|undefined),
- *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }}
@@ -398,12 +452,24 @@ */
 /**
- * @param {$trigger.Params} opt_data
+ * @param {{
+ *  label: (!goog.soy.data.SanitizedContent|function()|string),
+ *  _handleTriggerKeyDown: (*|null|undefined),
+ *  ariaLabel: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  classes: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  disabled: (boolean|null|undefined),
+ *  expanded: (boolean|null|undefined),
+ *  size: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  style: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  title: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ * }} opt_data
  * @param {Object<string, *>=} opt_ijData
  * @param {Object<string, *>=} opt_ijData_deprecated
  * @return {void}
- * @suppress {checkTypes|uselessCode}
+ * @suppress {checkTypes}
  */
-var $trigger = function(opt_data, opt_ijData, opt_ijData_deprecated) {
+function $trigger(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
   /** @type {!goog.soy.data.SanitizedContent|function()|string} */
   var label = soy.asserts.assertType(goog.isFunction(opt_data.label) || (goog.isString(opt_data.label) || opt_data.label instanceof goog.soy.data.SanitizedContent), 'label', opt_data.label, '!goog.soy.data.SanitizedContent|function()|string');
+  /** @type {*|null|undefined} */
+  var _handleTriggerKeyDown = opt_data._handleTriggerKeyDown;
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -423,3 +489,3 @@ var ariaLabel = soy.asserts.assertType(opt_data.ariaLabel == null || (goog.isString(opt_data.ariaLabel) || opt_data.ariaLabel instanceof goog.soy.data.SanitizedContent), 'ariaLabel', opt_data.ariaLabel, '!goog.soy.data.SanitizedContent|null|string|undefined');
   var title = soy.asserts.assertType(opt_data.title == null || (goog.isString(opt_data.title) || opt_data.title instanceof goog.soy.data.SanitizedContent), 'title', opt_data.title, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var buttonAttributes__soy566 = function() {
+  var buttonAttributes__soy532 = function() {
     if (expanded) {
@@ -439,2 +505,3 @@ incrementalDom.attr('aria-expanded', 'true');
       incrementalDom.attr('data-onclick', 'toggle');
+      incrementalDom.attr('data-onkeydown', _handleTriggerKeyDown);
     }
@@ -448,7 +515,7 @@ incrementalDom.attr('ref', 'triggerButton');
   incrementalDom.elementOpenStart('button');
-      buttonAttributes__soy566();
+      buttonAttributes__soy532();
   incrementalDom.elementOpenEnd();
-  soyIdom.print(label);
+    soyIdom.print(label);
   incrementalDom.elementClose('button');
-};
+}
 exports.trigger = $trigger;
@@ -458,2 +525,3 @@ /**
  *  label: (!goog.soy.data.SanitizedContent|function()|string),
+ *  _handleTriggerKeyDown: (*|null|undefined),
  *  ariaLabel: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -465,3 +533,3 @@ *  classes: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  style: (!goog.soy.data.SanitizedContent|null|string|undefined),
- *  title: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  title: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }}
@@ -476,9 +544,17 @@ */
 /**
- * @param {__deltemplate__ClayDropdownBase_Content_.Params} opt_data
+ * @param {{
+ *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
+ *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  items: (!Array<?>|null|undefined),
+ *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  maxItems: (null|number|undefined)
+ * }} opt_data
  * @param {Object<string, *>=} opt_ijData
  * @param {Object<string, *>=} opt_ijData_deprecated
  * @return {void}
- * @suppress {checkTypes|uselessCode}
+ * @suppress {checkTypes}
  */
-var __deltemplate__ClayDropdownBase_Content_ = function(opt_data, opt_ijData, opt_ijData_deprecated) {
+function __deltemplate_s585_c28eeb45(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -488,2 +564,4 @@ opt_data = opt_data || {};
   var _handleItemClick = opt_data._handleItemClick;
+  /** @type {*|null|undefined} */
+  var _handleItemKeyDown = opt_data._handleItemKeyDown;
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -501,10 +579,11 @@ var contentRenderer = soy.asserts.assertType(opt_data.contentRenderer == null || (goog.isString(opt_data.contentRenderer) || opt_data.contentRenderer instanceof goog.soy.data.SanitizedContent), 'contentRenderer', opt_data.contentRenderer, '!goog.soy.data.SanitizedContent|null|string|undefined');
     incrementalDom.elementOpenEnd();
-    $items({_handleItemClick: _handleItemClick, items: items, itemsIconAlignment: itemsIconAlignment, spritemap: spritemap}, opt_ijData);
+      $items(opt_data, null, opt_ijData);
     incrementalDom.elementClose('ul');
   }
-};
-exports.__deltemplate__ClayDropdownBase_Content_ = __deltemplate__ClayDropdownBase_Content_;
+}
+exports.__deltemplate_s585_c28eeb45 = __deltemplate_s585_c28eeb45;
 /**
  * @typedef {{
  *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
  *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -514,20 +593,21 @@ *  items: (!Array<?>|null|undefined),
  *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  maxItems: (null|number|undefined)
  * }}
  */
-__deltemplate__ClayDropdownBase_Content_.Params;
+__deltemplate_s585_c28eeb45.Params;
 if (goog.DEBUG) {
-  __deltemplate__ClayDropdownBase_Content_.soyTemplateName = 'ClayDropdownBase.__deltemplate__ClayDropdownBase_Content_';
+  __deltemplate_s585_c28eeb45.soyTemplateName = 'ClayDropdownBase.__deltemplate_s585_c28eeb45';
 }
-soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayDropdownBase.Content.idom'), '', 0, __deltemplate__ClayDropdownBase_Content_);
+soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayDropdownBase.Content.idom'), '', 0, __deltemplate_s585_c28eeb45);
 
-exports.render.params = ["items","label","_handleButtonClick","_handleItemClick","_handleSearch","button","caption","contentRenderer","disabled","elementClasses","expanded","helpText","id","itemsIconAlignment","portalElementId","searchable","spritemap","style","triggerAriaLabel","triggerClasses","triggerSize","triggerTitle"];
-exports.render.types = {"items":"list<?>","label":"html|string","_handleButtonClick":"any","_handleItemClick":"any","_handleSearch":"any","button":"?","caption":"string","contentRenderer":"string","disabled":"bool","elementClasses":"string","expanded":"bool","helpText":"string","id":"string","itemsIconAlignment":"string","portalElementId":"string","searchable":"bool","spritemap":"string","style":"string","triggerAriaLabel":"string","triggerClasses":"string","triggerSize":"string","triggerTitle":"string"};
-exports.items.params = ["items","_handleItemClick","contentRenderer","itemsIconAlignment","maxItems","spritemap"];
-exports.items.types = {"items":"list<?>","_handleItemClick":"any","contentRenderer":"string","itemsIconAlignment":"string","maxItems":"int","spritemap":"string"};
+exports.render.params = ["items","label","_handleButtonClick","_handleItemClick","_handleItemKeyDown","_handleSearch","_handleTriggerKeyDown","button","caption","contentRenderer","disabled","elementClasses","expanded","helpText","id","itemsIconAlignment","portalElementId","searchable","spritemap","style","triggerAriaLabel","triggerClasses","triggerSize","triggerTitle"];
+exports.render.types = {"items":"list<?>","label":"html|string","_handleButtonClick":"any","_handleItemClick":"any","_handleItemKeyDown":"any","_handleSearch":"any","_handleTriggerKeyDown":"any","button":"?","caption":"string","contentRenderer":"string","disabled":"bool","elementClasses":"string","expanded":"bool","helpText":"string","id":"string","itemsIconAlignment":"string","portalElementId":"string","searchable":"bool","spritemap":"string","style":"string","triggerAriaLabel":"string","triggerClasses":"string","triggerSize":"string","triggerTitle":"string"};
+exports.items.params = ["items","_handleItemClick","_handleItemKeyDown","contentRenderer","itemsIconAlignment","maxItems","spritemap"];
+exports.items.types = {"items":"list<?>","_handleItemClick":"any","_handleItemKeyDown":"any","contentRenderer":"string","itemsIconAlignment":"string","maxItems":"int","spritemap":"string"};
 exports.search.params = ["spritemap","_handleSearch"];
 exports.search.types = {"spritemap":"string","_handleSearch":"any"};
-exports.sections.params = ["items","_handleButtonClick","_handleItemClick","_handleSearch","button","caption","contentRenderer","expanded","helpText","itemsIconAlignment","portalElementId","searchable","spritemap"];
-exports.sections.types = {"items":"list<?>","_handleButtonClick":"any","_handleItemClick":"any","_handleSearch":"any","button":"?","caption":"string","contentRenderer":"string","expanded":"bool","helpText":"string","itemsIconAlignment":"string","portalElementId":"string","searchable":"bool","spritemap":"string"};
-exports.trigger.params = ["label","ariaLabel","classes","disabled","expanded","size","style","title"];
-exports.trigger.types = {"label":"html|string","ariaLabel":"string","classes":"string","disabled":"bool","expanded":"bool","size":"string","style":"string","title":"string"};
+exports.sections.params = ["items","_handleButtonClick","_handleItemClick","_handleItemKeyDown","_handleSearch","button","caption","contentRenderer","expanded","helpText","itemsIconAlignment","portalElementId","searchable","spritemap"];
+exports.sections.types = {"items":"list<?>","_handleButtonClick":"any","_handleItemClick":"any","_handleItemKeyDown":"any","_handleSearch":"any","button":"?","caption":"string","contentRenderer":"string","expanded":"bool","helpText":"string","itemsIconAlignment":"string","portalElementId":"string","searchable":"bool","spritemap":"string"};
+exports.trigger.params = ["label","_handleTriggerKeyDown","ariaLabel","classes","disabled","expanded","size","style","title"];
+exports.trigger.types = {"label":"html|string","_handleTriggerKeyDown":"any","ariaLabel":"string","classes":"string","disabled":"bool","expanded":"bool","size":"string","style":"string","title":"string"};
 templates = exports;
@@ -534,0 +614,0 @@ return exports;

src/ClayDropdownItem.js

@@ -30,2 +30,12 @@ import 'clay-button';
 	/**
+	 * Continues the propagation of the item clicked event
+	 * @param {!Event} event
+	 * @protected
+	 * @return {Boolean} If the event has been prevented or not.
+	 */
+	_handleItemKeyDown(event) {
+		return !this.emit('itemKeyDown', event);
+	}
+
+	/**
 	 * @inheritDoc
@@ -113,2 +123,3 @@ */
 	 * @default undefined
+	 * @deprecated since version 2.13.x
 	 * @instance
@@ -121,2 +132,11 @@ * @memberof ClayDropdownItem
 	/**
+	 * Icons of the item.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayDropdownItem
+	 * @type {?(object|undefined)}
+	 */
+	icons: itemShape.icons,
+
+	/**
 	 * Name of the item input in case is selectable.
@@ -155,3 +175,3 @@ * @default undefined
 	 */
-	itemsIconAlignment: Config.oneOf(['left', 'right']),
+	itemsIconAlignment: Config.oneOf(['left', 'right', 'left-right']),
 
@@ -158,0 +178,0 @@ /**

src/ClayDropdownItem.soy.js

@@ -27,27 +27,51 @@ /* jshint ignore:start */
 
-var $templateAlias5 = Soy.getTemplate('ClayButton.incrementaldom', 'render');
+var $templateAlias3 = Soy.getTemplate('ClayButton.incrementaldom', 'render');
 
-var $templateAlias1 = Soy.getTemplate('ClayCheckbox.incrementaldom', 'render');
+var $templateAlias4 = Soy.getTemplate('ClayCheckbox.incrementaldom', 'render');
 
-var $templateAlias3 = Soy.getTemplate('ClayDropdownBase.incrementaldom', 'items');
+var $templateAlias5 = Soy.getTemplate('ClayDropdownBase.incrementaldom', 'items');
 
-var $templateAlias6 = Soy.getTemplate('ClayIcon.incrementaldom', 'render');
+var $templateAlias1 = Soy.getTemplate('ClayIcon.incrementaldom', 'render');
 
-var $templateAlias4 = Soy.getTemplate('ClayLink.incrementaldom', 'render');
+var $templateAlias2 = Soy.getTemplate('ClayLink.incrementaldom', 'render');
 
-var $templateAlias2 = Soy.getTemplate('ClayRadio.incrementaldom', 'render');
+var $templateAlias6 = Soy.getTemplate('ClayRadio.incrementaldom', 'render');
 
 
 /**
- * @param {$render.Params} opt_data
+ * @param {{
+ *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
+ *  active: (boolean|null|undefined),
+ *  checked: (boolean|null|undefined),
+ *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  disabled: (boolean|null|undefined),
+ *  href: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icons: (?),
+ *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  items: (!Array<?>|null|undefined),
+ *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  label: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  maxItems: (null|number|undefined),
+ *  separator: (boolean|null|undefined),
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  target: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  title: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  type: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ * }} opt_data
  * @param {Object<string, *>=} opt_ijData
  * @param {Object<string, *>=} opt_ijData_deprecated
  * @return {void}
- * @suppress {checkTypes|uselessCode}
+ * @suppress {checkTypes}
  */
-var $render = function(opt_data, opt_ijData, opt_ijData_deprecated) {
+function $render(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
+  var $$temp;
   opt_data = opt_data || {};
   /** @type {*|null|undefined} */
   var _handleItemClick = opt_data._handleItemClick;
+  /** @type {*|null|undefined} */
+  var _handleItemKeyDown = opt_data._handleItemKeyDown;
   /** @type {boolean|null|undefined} */
@@ -65,2 +89,4 @@ var active = soy.asserts.assertType(opt_data.active == null || (goog.isBoolean(opt_data.active) || opt_data.active === 1 || opt_data.active === 0), 'active', opt_data.active, 'boolean|null|undefined');
   var icon = soy.asserts.assertType(opt_data.icon == null || (goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent), 'icon', opt_data.icon, '!goog.soy.data.SanitizedContent|null|string|undefined');
+  /** @type {?} */
+  var icons = opt_data.icons;
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -88,5 +114,5 @@ var inputName = soy.asserts.assertType(opt_data.inputName == null || (goog.isString(opt_data.inputName) || opt_data.inputName instanceof goog.soy.data.SanitizedContent), 'inputName', opt_data.inputName, '!goog.soy.data.SanitizedContent|null|string|undefined');
   var type = soy.asserts.assertType(opt_data.type == null || (goog.isString(opt_data.type) || opt_data.type instanceof goog.soy.data.SanitizedContent), 'type', opt_data.type, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var variant__soy794 = contentRenderer != null ? contentRenderer : 'item';
-  soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayDropdownItem.Item.idom'), variant__soy794, false)({_handleItemClick: _handleItemClick, active: active, checked: checked, disabled: disabled, href: href, icon: icon, inputName: inputName, inputValue: inputValue, items: items, itemsIconAlignment: itemsIconAlignment, label: label ? '' + label : '', maxItems: maxItems, separator: separator, spritemap: spritemap, target: target, title: title, type: type}, opt_ijData);
-};
+  var variant__soy814 = ($$temp = contentRenderer) == null ? 'item' : $$temp;
+  soy.$$getDelegateFn(soy.$$getDelTemplateId('ClayDropdownItem.Item.idom'), variant__soy814, false)({_handleItemClick: _handleItemClick, _handleItemKeyDown: _handleItemKeyDown, active: active, checked: checked, disabled: disabled, href: href, icon: icon, icons: icons, inputName: inputName, inputValue: inputValue, items: items, itemsIconAlignment: itemsIconAlignment, label: label ? '' + label : '', maxItems: maxItems, separator: separator, spritemap: spritemap, target: target, title: title, type: type}, null, opt_ijData);
+}
 exports.render = $render;
@@ -96,2 +122,3 @@ /**
  *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
  *  active: (boolean|null|undefined),
@@ -103,2 +130,3 @@ *  checked: (boolean|null|undefined),
  *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icons: (?),
  *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -114,3 +142,3 @@ *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  title: (!goog.soy.data.SanitizedContent|null|string|undefined),
- *  type: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  type: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }}
@@ -125,9 +153,29 @@ */
 /**
- * @param {__deltemplate__ClayDropdownItem_Item_.Params} opt_data
+ * @param {{
+ *  label: (!goog.soy.data.SanitizedContent|string),
+ *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
+ *  active: (boolean|null|undefined),
+ *  checked: (boolean|null|undefined),
+ *  disabled: (boolean|null|undefined),
+ *  href: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icons: (?),
+ *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  items: (!Array<?>|null|undefined),
+ *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  maxItems: (null|number|undefined),
+ *  separator: (boolean|null|undefined),
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  target: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  title: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  type: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ * }} opt_data
  * @param {Object<string, *>=} opt_ijData
  * @param {Object<string, *>=} opt_ijData_deprecated
  * @return {void}
- * @suppress {checkTypes|uselessCode}
+ * @suppress {checkTypes}
  */
-var __deltemplate__ClayDropdownItem_Item_ = function(opt_data, opt_ijData, opt_ijData_deprecated) {
+function __deltemplate_s837_3e6ffd21(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -138,2 +186,4 @@ /** @type {!goog.soy.data.SanitizedContent|string} */
   var _handleItemClick = opt_data._handleItemClick;
+  /** @type {*|null|undefined} */
+  var _handleItemKeyDown = opt_data._handleItemKeyDown;
   /** @type {boolean|null|undefined} */
@@ -149,2 +199,4 @@ var active = soy.asserts.assertType(opt_data.active == null || (goog.isBoolean(opt_data.active) || opt_data.active === 1 || opt_data.active === 0), 'active', opt_data.active, 'boolean|null|undefined');
   var icon = soy.asserts.assertType(opt_data.icon == null || (goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent), 'icon', opt_data.icon, '!goog.soy.data.SanitizedContent|null|string|undefined');
+  /** @type {?} */
+  var icons = opt_data.icons;
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -170,50 +222,79 @@ var inputName = soy.asserts.assertType(opt_data.inputName == null || (goog.isString(opt_data.inputName) || opt_data.inputName instanceof goog.soy.data.SanitizedContent), 'inputName', opt_data.inputName, '!goog.soy.data.SanitizedContent|null|string|undefined');
   var type = soy.asserts.assertType(opt_data.type == null || (goog.isString(opt_data.type) || opt_data.type instanceof goog.soy.data.SanitizedContent), 'type', opt_data.type, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var itemContent__soy905 = function() {
-    var elementClasses__soy844 = '';
-    elementClasses__soy844 += 'dropdown-item';
-    elementClasses__soy844 += active ? ' active' : '';
-    elementClasses__soy844 += disabled ? ' disabled' : '';
-    var labelContent__soy872 = function() {
-      var iconContent__soy856 = function() {
+  var itemContent__soy858 = function() {
+    var elementClasses__soy860 = '';
+    elementClasses__soy860 += 'dropdown-item';
+    elementClasses__soy860 += active ? ' active' : '';
+    elementClasses__soy860 += disabled ? ' disabled' : '';
+    var labelContent__soy871 = function() {
+      var iconContent__soy873 = function() {
         if (icon && spritemap) {
+          var classes__soy878 = '';
+          var $tmp = null;
+if (itemsIconAlignment == 'left') {
+  $tmp = 'dropdown-item-indicator-start';
+} else if (itemsIconAlignment == 'right') {
+  $tmp = 'dropdown-item-indicator-end';
+} else {
+  $tmp = '';
+}
+classes__soy878 += $tmp;
           incrementalDom.elementOpenStart('span');
-              incrementalDom.attr('class', 'dropdown-item-indicator');
+              incrementalDom.attr('class', classes__soy878);
           incrementalDom.elementOpenEnd();
-          $templateAlias6({spritemap: spritemap, symbol: icon}, opt_ijData);
+            $templateAlias1({spritemap: spritemap, symbol: icon}, null, opt_ijData);
           incrementalDom.elementClose('span');
         }
       };
-      if (icon && itemsIconAlignment == 'left') {
-        iconContent__soy856();
+      if (icons && icons.left && spritemap) {
+        incrementalDom.elementOpenStart('span');
+            incrementalDom.attr('class', 'dropdown-item-indicator-start');
+        incrementalDom.elementOpenEnd();
+          $templateAlias1({spritemap: spritemap, symbol: icons.left}, null, opt_ijData);
+        incrementalDom.elementClose('span');
+      } else {
+        if (icon && itemsIconAlignment == 'left') {
+          iconContent__soy873();
+        }
       }
       soyIdom.print(label);
-      if (icon && itemsIconAlignment == 'right') {
-        iconContent__soy856();
+      if (icons && icons.right && spritemap) {
+        incrementalDom.elementOpenStart('span');
+            incrementalDom.attr('class', 'dropdown-item-indicator-end');
+        incrementalDom.elementOpenEnd();
+          $templateAlias1({spritemap: spritemap, symbol: icons.right}, null, opt_ijData);
+        incrementalDom.elementClose('span');
+      } else {
+        if (icon && itemsIconAlignment == 'right') {
+          iconContent__soy873();
+        }
       }
     };
     if (href) {
-      var $tmp;
+      var $tmp$$1 = null;
       if (disabled) {
-        $tmp = 'javascript:;';
+        $tmp$$1 = 'javascript:;';
       } else if (href) {
-        $tmp = href;
+        $tmp$$1 = href;
       } else {
-        $tmp = '';
+        $tmp$$1 = '';
       }
-      $templateAlias4({elementClasses: elementClasses__soy844, href: '' + $tmp, label: labelContent__soy872, target: target, title: title}, opt_ijData);
+      $templateAlias2({elementClasses: elementClasses__soy860, href: '' + $tmp$$1, label: labelContent__soy871, target: target, title: title}, null, opt_ijData);
     } else {
-      $templateAlias5({ariaLabel: label, disabled: disabled, elementClasses: elementClasses__soy844, label: labelContent__soy872, size: 'sm', spritemap: spritemap, style: 'link'}, opt_ijData);
+      $templateAlias3({ariaLabel: label, disabled: disabled, elementClasses: elementClasses__soy860, label: labelContent__soy871, size: 'sm', spritemap: spritemap, style: 'link'}, null, opt_ijData);
     }
   };
-  var itemAttributes__soy910 = function() {
-    incrementalDom.attr('data-onclick', _handleItemClick);
+  var itemAttributes__soy962 = function() {
+    if (!disabled) {
+      incrementalDom.attr('data-onclick', _handleItemClick);
+    }
+    incrementalDom.attr('data-onkeydown', _handleItemKeyDown);
     incrementalDom.attr('tabindex', '-1');
   };
   incrementalDom.elementOpenStart('li');
-      itemAttributes__soy910();
+      itemAttributes__soy962();
   incrementalDom.elementOpenEnd();
-  itemContent__soy905();
+    itemContent__soy858();
   incrementalDom.elementClose('li');
-};
-exports.__deltemplate__ClayDropdownItem_Item_ = __deltemplate__ClayDropdownItem_Item_;
+}
+exports.__deltemplate_s837_3e6ffd21 = __deltemplate_s837_3e6ffd21;
 /**
@@ -223,2 +304,3 @@ * @typedef {{
  *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
  *  active: (boolean|null|undefined),
@@ -229,2 +311,3 @@ *  checked: (boolean|null|undefined),
  *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icons: (?),
  *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -239,20 +322,40 @@ *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  title: (!goog.soy.data.SanitizedContent|null|string|undefined),
- *  type: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  type: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }}
  */
-__deltemplate__ClayDropdownItem_Item_.Params;
+__deltemplate_s837_3e6ffd21.Params;
 if (goog.DEBUG) {
-  __deltemplate__ClayDropdownItem_Item_.soyTemplateName = 'ClayDropdownItem.__deltemplate__ClayDropdownItem_Item_';
+  __deltemplate_s837_3e6ffd21.soyTemplateName = 'ClayDropdownItem.__deltemplate_s837_3e6ffd21';
 }
-soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayDropdownItem.Item.idom'), '', 0, __deltemplate__ClayDropdownItem_Item_);
+soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayDropdownItem.Item.idom'), '', 0, __deltemplate_s837_3e6ffd21);
 
 
 /**
- * @param {__deltemplate__ClayDropdownItem_Item_checkbox.Params} opt_data
+ * @param {{
+ *  label: (!goog.soy.data.SanitizedContent|string),
+ *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
+ *  active: (boolean|null|undefined),
+ *  checked: (boolean|null|undefined),
+ *  disabled: (boolean|null|undefined),
+ *  href: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icons: (?),
+ *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  items: (!Array<?>|null|undefined),
+ *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  maxItems: (null|number|undefined),
+ *  separator: (boolean|null|undefined),
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  target: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  title: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  type: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ * }} opt_data
  * @param {Object<string, *>=} opt_ijData
  * @param {Object<string, *>=} opt_ijData_deprecated
  * @return {void}
- * @suppress {checkTypes|uselessCode}
+ * @suppress {checkTypes}
  */
-var __deltemplate__ClayDropdownItem_Item_checkbox = function(opt_data, opt_ijData, opt_ijData_deprecated) {
+function __deltemplate_s977_27296c4e(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -263,2 +366,4 @@ /** @type {!goog.soy.data.SanitizedContent|string} */
   var _handleItemClick = opt_data._handleItemClick;
+  /** @type {*|null|undefined} */
+  var _handleItemKeyDown = opt_data._handleItemKeyDown;
   /** @type {boolean|null|undefined} */
@@ -274,2 +379,4 @@ var active = soy.asserts.assertType(opt_data.active == null || (goog.isBoolean(opt_data.active) || opt_data.active === 1 || opt_data.active === 0), 'active', opt_data.active, 'boolean|null|undefined');
   var icon = soy.asserts.assertType(opt_data.icon == null || (goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent), 'icon', opt_data.icon, '!goog.soy.data.SanitizedContent|null|string|undefined');
+  /** @type {?} */
+  var icons = opt_data.icons;
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -295,17 +402,20 @@ var inputName = soy.asserts.assertType(opt_data.inputName == null || (goog.isString(opt_data.inputName) || opt_data.inputName instanceof goog.soy.data.SanitizedContent), 'inputName', opt_data.inputName, '!goog.soy.data.SanitizedContent|null|string|undefined');
   var type = soy.asserts.assertType(opt_data.type == null || (goog.isString(opt_data.type) || opt_data.type instanceof goog.soy.data.SanitizedContent), 'type', opt_data.type, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var checkbox__soy944 = function() {
-    $templateAlias1({checked: checked, disabled: disabled, inline: true, label: label, name: inputName, value: inputValue}, opt_ijData);
+  var checkbox__soy998 = function() {
+    $templateAlias4({checked: checked, disabled: disabled, inline: true, label: label, name: inputName, value: inputValue}, null, opt_ijData);
   };
-  var itemAttributes__soy953 = function() {
+  var itemAttributes__soy1009 = function() {
     incrementalDom.attr('class', 'dropdown-item' + (active || checked ? ' active' : ''));
-    incrementalDom.attr('data-onclick', _handleItemClick);
+    if (!disabled) {
+      incrementalDom.attr('data-onchange', _handleItemClick);
+    }
+    incrementalDom.attr('data-onkeydown', _handleItemKeyDown);
     incrementalDom.attr('tabindex', '-1');
   };
   incrementalDom.elementOpenStart('li');
-      itemAttributes__soy953();
+      itemAttributes__soy1009();
   incrementalDom.elementOpenEnd();
-  checkbox__soy944();
+    checkbox__soy998();
   incrementalDom.elementClose('li');
-};
-exports.__deltemplate__ClayDropdownItem_Item_checkbox = __deltemplate__ClayDropdownItem_Item_checkbox;
+}
+exports.__deltemplate_s977_27296c4e = __deltemplate_s977_27296c4e;
 /**
@@ -315,2 +425,3 @@ * @typedef {{
  *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
  *  active: (boolean|null|undefined),
@@ -321,2 +432,3 @@ *  checked: (boolean|null|undefined),
  *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icons: (?),
  *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -331,20 +443,41 @@ *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  title: (!goog.soy.data.SanitizedContent|null|string|undefined),
- *  type: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  type: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }}
  */
-__deltemplate__ClayDropdownItem_Item_checkbox.Params;
+__deltemplate_s977_27296c4e.Params;
 if (goog.DEBUG) {
-  __deltemplate__ClayDropdownItem_Item_checkbox.soyTemplateName = 'ClayDropdownItem.__deltemplate__ClayDropdownItem_Item_checkbox';
+  __deltemplate_s977_27296c4e.soyTemplateName = 'ClayDropdownItem.__deltemplate_s977_27296c4e';
 }
-soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayDropdownItem.Item.idom'), 'checkbox', 0, __deltemplate__ClayDropdownItem_Item_checkbox);
+soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayDropdownItem.Item.idom'), 'checkbox', 0, __deltemplate_s977_27296c4e);
 
 
 /**
- * @param {__deltemplate__ClayDropdownItem_Item_group.Params} opt_data
+ * @param {{
+ *  label: (!goog.soy.data.SanitizedContent|string),
+ *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
+ *  active: (boolean|null|undefined),
+ *  checked: (boolean|null|undefined),
+ *  disabled: (boolean|null|undefined),
+ *  href: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icons: (?),
+ *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  items: (!Array<?>|null|undefined),
+ *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  maxItems: (null|number|undefined),
+ *  separator: (boolean|null|undefined),
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  target: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  title: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  type: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ * }} opt_data
  * @param {Object<string, *>=} opt_ijData
  * @param {Object<string, *>=} opt_ijData_deprecated
  * @return {void}
- * @suppress {checkTypes|uselessCode}
+ * @suppress {checkTypes}
  */
-var __deltemplate__ClayDropdownItem_Item_group = function(opt_data, opt_ijData, opt_ijData_deprecated) {
+function __deltemplate_s1028_4a8d8c89(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -355,2 +488,4 @@ /** @type {!goog.soy.data.SanitizedContent|string} */
   var _handleItemClick = opt_data._handleItemClick;
+  /** @type {*|null|undefined} */
+  var _handleItemKeyDown = opt_data._handleItemKeyDown;
   /** @type {boolean|null|undefined} */
@@ -366,2 +501,4 @@ var active = soy.asserts.assertType(opt_data.active == null || (goog.isBoolean(opt_data.active) || opt_data.active === 1 || opt_data.active === 0), 'active', opt_data.active, 'boolean|null|undefined');
   var icon = soy.asserts.assertType(opt_data.icon == null || (goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent), 'icon', opt_data.icon, '!goog.soy.data.SanitizedContent|null|string|undefined');
+  /** @type {?} */
+  var icons = opt_data.icons;
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -392,10 +529,10 @@ var inputName = soy.asserts.assertType(opt_data.inputName == null || (goog.isString(opt_data.inputName) || opt_data.inputName instanceof goog.soy.data.SanitizedContent), 'inputName', opt_data.inputName, '!goog.soy.data.SanitizedContent|null|string|undefined');
     incrementalDom.elementOpenEnd();
-    soyIdom.print(label);
+      soyIdom.print(label);
     incrementalDom.elementClose('li');
   }
   if (items) {
-    $templateAlias3({_handleItemClick: _handleItemClick, items: items, itemsIconAlignment: itemsIconAlignment, maxItems: maxItems, spritemap: spritemap}, opt_ijData);
+    $templateAlias5(opt_data, null, opt_ijData);
   }
-};
-exports.__deltemplate__ClayDropdownItem_Item_group = __deltemplate__ClayDropdownItem_Item_group;
+}
+exports.__deltemplate_s1028_4a8d8c89 = __deltemplate_s1028_4a8d8c89;
 /**
@@ -405,2 +542,3 @@ * @typedef {{
  *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
  *  active: (boolean|null|undefined),
@@ -411,2 +549,3 @@ *  checked: (boolean|null|undefined),
  *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icons: (?),
  *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -422,19 +561,40 @@ *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  type: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  contentRenderer: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }}
  */
-__deltemplate__ClayDropdownItem_Item_group.Params;
+__deltemplate_s1028_4a8d8c89.Params;
 if (goog.DEBUG) {
-  __deltemplate__ClayDropdownItem_Item_group.soyTemplateName = 'ClayDropdownItem.__deltemplate__ClayDropdownItem_Item_group';
+  __deltemplate_s1028_4a8d8c89.soyTemplateName = 'ClayDropdownItem.__deltemplate_s1028_4a8d8c89';
 }
-soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayDropdownItem.Item.idom'), 'group', 0, __deltemplate__ClayDropdownItem_Item_group);
+soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayDropdownItem.Item.idom'), 'group', 0, __deltemplate_s1028_4a8d8c89);
 
 
 /**
- * @param {__deltemplate__ClayDropdownItem_Item_radio.Params} opt_data
+ * @param {{
+ *  label: (!goog.soy.data.SanitizedContent|string),
+ *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
+ *  active: (boolean|null|undefined),
+ *  checked: (boolean|null|undefined),
+ *  disabled: (boolean|null|undefined),
+ *  href: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icons: (?),
+ *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  items: (!Array<?>|null|undefined),
+ *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  maxItems: (null|number|undefined),
+ *  separator: (boolean|null|undefined),
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  target: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  title: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  type: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ * }} opt_data
  * @param {Object<string, *>=} opt_ijData
  * @param {Object<string, *>=} opt_ijData_deprecated
  * @return {void}
- * @suppress {checkTypes|uselessCode}
+ * @suppress {checkTypes}
  */
-var __deltemplate__ClayDropdownItem_Item_radio = function(opt_data, opt_ijData, opt_ijData_deprecated) {
+function __deltemplate_s1067_e71956db(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -445,2 +605,4 @@ /** @type {!goog.soy.data.SanitizedContent|string} */
   var _handleItemClick = opt_data._handleItemClick;
+  /** @type {*|null|undefined} */
+  var _handleItemKeyDown = opt_data._handleItemKeyDown;
   /** @type {boolean|null|undefined} */
@@ -456,2 +618,4 @@ var active = soy.asserts.assertType(opt_data.active == null || (goog.isBoolean(opt_data.active) || opt_data.active === 1 || opt_data.active === 0), 'active', opt_data.active, 'boolean|null|undefined');
   var icon = soy.asserts.assertType(opt_data.icon == null || (goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent), 'icon', opt_data.icon, '!goog.soy.data.SanitizedContent|null|string|undefined');
+  /** @type {?} */
+  var icons = opt_data.icons;
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -477,17 +641,20 @@ var inputName = soy.asserts.assertType(opt_data.inputName == null || (goog.isString(opt_data.inputName) || opt_data.inputName instanceof goog.soy.data.SanitizedContent), 'inputName', opt_data.inputName, '!goog.soy.data.SanitizedContent|null|string|undefined');
   var type = soy.asserts.assertType(opt_data.type == null || (goog.isString(opt_data.type) || opt_data.type instanceof goog.soy.data.SanitizedContent), 'type', opt_data.type, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var radio__soy1023 = function() {
-    $templateAlias2({checked: checked, disabled: disabled, inline: true, label: label, name: inputName, value: inputValue}, opt_ijData);
+  var radio__soy1088 = function() {
+    $templateAlias6({checked: checked, disabled: disabled, inline: true, label: label, name: inputName, value: inputValue}, null, opt_ijData);
   };
-  var itemAttributes__soy1032 = function() {
+  var itemAttributes__soy1099 = function() {
     incrementalDom.attr('class', 'dropdown-item' + (active || checked ? ' active' : ''));
-    incrementalDom.attr('data-onclick', _handleItemClick);
+    if (!disabled) {
+      incrementalDom.attr('data-onchange', _handleItemClick);
+    }
+    incrementalDom.attr('data-onkeydown', _handleItemKeyDown);
     incrementalDom.attr('tabindex', '-1');
   };
   incrementalDom.elementOpenStart('li');
-      itemAttributes__soy1032();
+      itemAttributes__soy1099();
   incrementalDom.elementOpenEnd();
-  radio__soy1023();
+    radio__soy1088();
   incrementalDom.elementClose('li');
-};
-exports.__deltemplate__ClayDropdownItem_Item_radio = __deltemplate__ClayDropdownItem_Item_radio;
+}
+exports.__deltemplate_s1067_e71956db = __deltemplate_s1067_e71956db;
 /**
@@ -497,2 +664,3 @@ * @typedef {{
  *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
  *  active: (boolean|null|undefined),
@@ -503,2 +671,3 @@ *  checked: (boolean|null|undefined),
  *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icons: (?),
  *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -513,20 +682,40 @@ *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  title: (!goog.soy.data.SanitizedContent|null|string|undefined),
- *  type: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  type: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }}
  */
-__deltemplate__ClayDropdownItem_Item_radio.Params;
+__deltemplate_s1067_e71956db.Params;
 if (goog.DEBUG) {
-  __deltemplate__ClayDropdownItem_Item_radio.soyTemplateName = 'ClayDropdownItem.__deltemplate__ClayDropdownItem_Item_radio';
+  __deltemplate_s1067_e71956db.soyTemplateName = 'ClayDropdownItem.__deltemplate_s1067_e71956db';
 }
-soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayDropdownItem.Item.idom'), 'radio', 0, __deltemplate__ClayDropdownItem_Item_radio);
+soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayDropdownItem.Item.idom'), 'radio', 0, __deltemplate_s1067_e71956db);
 
 
 /**
- * @param {__deltemplate__ClayDropdownItem_Item_radiogroup.Params} opt_data
+ * @param {{
+ *  label: (!goog.soy.data.SanitizedContent|string),
+ *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
+ *  active: (boolean|null|undefined),
+ *  checked: (boolean|null|undefined),
+ *  disabled: (boolean|null|undefined),
+ *  href: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icons: (?),
+ *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  items: (!Array<?>|null|undefined),
+ *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  maxItems: (null|number|undefined),
+ *  separator: (boolean|null|undefined),
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  target: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  title: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  type: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ * }} opt_data
  * @param {Object<string, *>=} opt_ijData
  * @param {Object<string, *>=} opt_ijData_deprecated
  * @return {void}
- * @suppress {checkTypes|uselessCode}
+ * @suppress {checkTypes}
  */
-var __deltemplate__ClayDropdownItem_Item_radiogroup = function(opt_data, opt_ijData, opt_ijData_deprecated) {
+function __deltemplate_s1118_efbc8015(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -537,2 +726,4 @@ /** @type {!goog.soy.data.SanitizedContent|string} */
   var _handleItemClick = opt_data._handleItemClick;
+  /** @type {*|null|undefined} */
+  var _handleItemKeyDown = opt_data._handleItemKeyDown;
   /** @type {boolean|null|undefined} */
@@ -548,2 +739,4 @@ var active = soy.asserts.assertType(opt_data.active == null || (goog.isBoolean(opt_data.active) || opt_data.active === 1 || opt_data.active === 0), 'active', opt_data.active, 'boolean|null|undefined');
   var icon = soy.asserts.assertType(opt_data.icon == null || (goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent), 'icon', opt_data.icon, '!goog.soy.data.SanitizedContent|null|string|undefined');
+  /** @type {?} */
+  var icons = opt_data.icons;
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -574,3 +767,3 @@ var inputName = soy.asserts.assertType(opt_data.inputName == null || (goog.isString(opt_data.inputName) || opt_data.inputName instanceof goog.soy.data.SanitizedContent), 'inputName', opt_data.inputName, '!goog.soy.data.SanitizedContent|null|string|undefined');
     incrementalDom.elementOpenEnd();
-    soyIdom.print(label);
+      soyIdom.print(label);
     incrementalDom.elementClose('li');
@@ -582,12 +775,12 @@ }
   incrementalDom.elementOpenEnd();
-  if (items) {
-    incrementalDom.elementOpenStart('ul');
-        incrementalDom.attr('class', 'list-unstyled');
-    incrementalDom.elementOpenEnd();
-    $templateAlias3({_handleItemClick: _handleItemClick, contentRenderer: 'radio', items: items, itemsIconAlignment: itemsIconAlignment, maxItems: maxItems, spritemap: spritemap}, opt_ijData);
-    incrementalDom.elementClose('ul');
-  }
+    if (items) {
+      incrementalDom.elementOpenStart('ul');
+          incrementalDom.attr('class', 'list-unstyled');
+      incrementalDom.elementOpenEnd();
+        $templateAlias5({_handleItemClick: _handleItemClick, _handleItemKeyDown: _handleItemKeyDown, contentRenderer: 'radio', items: items, itemsIconAlignment: itemsIconAlignment, maxItems: maxItems, spritemap: spritemap}, null, opt_ijData);
+      incrementalDom.elementClose('ul');
+    }
   incrementalDom.elementClose('li');
-};
-exports.__deltemplate__ClayDropdownItem_Item_radiogroup = __deltemplate__ClayDropdownItem_Item_radiogroup;
+}
+exports.__deltemplate_s1118_efbc8015 = __deltemplate_s1118_efbc8015;
 /**
@@ -597,2 +790,3 @@ * @typedef {{
  *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
  *  active: (boolean|null|undefined),
@@ -603,2 +797,3 @@ *  checked: (boolean|null|undefined),
  *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icons: (?),
  *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -613,20 +808,40 @@ *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  title: (!goog.soy.data.SanitizedContent|null|string|undefined),
- *  type: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  type: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }}
  */
-__deltemplate__ClayDropdownItem_Item_radiogroup.Params;
+__deltemplate_s1118_efbc8015.Params;
 if (goog.DEBUG) {
-  __deltemplate__ClayDropdownItem_Item_radiogroup.soyTemplateName = 'ClayDropdownItem.__deltemplate__ClayDropdownItem_Item_radiogroup';
+  __deltemplate_s1118_efbc8015.soyTemplateName = 'ClayDropdownItem.__deltemplate_s1118_efbc8015';
 }
-soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayDropdownItem.Item.idom'), 'radiogroup', 0, __deltemplate__ClayDropdownItem_Item_radiogroup);
+soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayDropdownItem.Item.idom'), 'radiogroup', 0, __deltemplate_s1118_efbc8015);
 
 
 /**
- * @param {__deltemplate__ClayDropdownItem_Item_separator.Params} opt_data
+ * @param {{
+ *  label: (!goog.soy.data.SanitizedContent|string),
+ *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
+ *  active: (boolean|null|undefined),
+ *  checked: (boolean|null|undefined),
+ *  disabled: (boolean|null|undefined),
+ *  href: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icons: (?),
+ *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  items: (!Array<?>|null|undefined),
+ *  itemsIconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  maxItems: (null|number|undefined),
+ *  separator: (boolean|null|undefined),
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  target: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  title: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  type: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ * }} opt_data
  * @param {Object<string, *>=} opt_ijData
  * @param {Object<string, *>=} opt_ijData_deprecated
  * @return {void}
- * @suppress {checkTypes|uselessCode}
+ * @suppress {checkTypes}
  */
-var __deltemplate__ClayDropdownItem_Item_separator = function(opt_data, opt_ijData, opt_ijData_deprecated) {
+function __deltemplate_s1160_03a3ad8c(opt_data, opt_ijData, opt_ijData_deprecated) {
   opt_ijData = opt_ijData_deprecated || opt_ijData;
@@ -637,2 +852,4 @@ /** @type {!goog.soy.data.SanitizedContent|string} */
   var _handleItemClick = opt_data._handleItemClick;
+  /** @type {*|null|undefined} */
+  var _handleItemKeyDown = opt_data._handleItemKeyDown;
   /** @type {boolean|null|undefined} */
@@ -648,2 +865,4 @@ var active = soy.asserts.assertType(opt_data.active == null || (goog.isBoolean(opt_data.active) || opt_data.active === 1 || opt_data.active === 0), 'active', opt_data.active, 'boolean|null|undefined');
   var icon = soy.asserts.assertType(opt_data.icon == null || (goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent), 'icon', opt_data.icon, '!goog.soy.data.SanitizedContent|null|string|undefined');
+  /** @type {?} */
+  var icons = opt_data.icons;
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -675,4 +894,4 @@ var inputName = soy.asserts.assertType(opt_data.inputName == null || (goog.isString(opt_data.inputName) || opt_data.inputName instanceof goog.soy.data.SanitizedContent), 'inputName', opt_data.inputName, '!goog.soy.data.SanitizedContent|null|string|undefined');
   incrementalDom.elementClose('li');
-};
-exports.__deltemplate__ClayDropdownItem_Item_separator = __deltemplate__ClayDropdownItem_Item_separator;
+}
+exports.__deltemplate_s1160_03a3ad8c = __deltemplate_s1160_03a3ad8c;
 /**
@@ -682,2 +901,3 @@ * @typedef {{
  *  _handleItemClick: (*|null|undefined),
+ *  _handleItemKeyDown: (*|null|undefined),
  *  active: (boolean|null|undefined),
@@ -688,2 +908,3 @@ *  checked: (boolean|null|undefined),
  *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icons: (?),
  *  inputName: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -698,13 +919,13 @@ *  inputValue: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  title: (!goog.soy.data.SanitizedContent|null|string|undefined),
- *  type: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  type: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }}
  */
-__deltemplate__ClayDropdownItem_Item_separator.Params;
+__deltemplate_s1160_03a3ad8c.Params;
 if (goog.DEBUG) {
-  __deltemplate__ClayDropdownItem_Item_separator.soyTemplateName = 'ClayDropdownItem.__deltemplate__ClayDropdownItem_Item_separator';
+  __deltemplate_s1160_03a3ad8c.soyTemplateName = 'ClayDropdownItem.__deltemplate_s1160_03a3ad8c';
 }
-soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayDropdownItem.Item.idom'), 'separator', 0, __deltemplate__ClayDropdownItem_Item_separator);
+soy.$$registerDelegateFn(soy.$$getDelTemplateId('ClayDropdownItem.Item.idom'), 'separator', 0, __deltemplate_s1160_03a3ad8c);
 
-exports.render.params = ["_handleItemClick","active","checked","contentRenderer","disabled","href","icon","inputName","inputValue","items","itemsIconAlignment","label","maxItems","separator","spritemap","target","title","type"];
-exports.render.types = {"_handleItemClick":"any","active":"bool","checked":"bool","contentRenderer":"string","disabled":"bool","href":"string","icon":"string","inputName":"string","inputValue":"string","items":"list<?>","itemsIconAlignment":"string","label":"string","maxItems":"int","separator":"bool","spritemap":"string","target":"string","title":"string","type":"string"};
+exports.render.params = ["_handleItemClick","_handleItemKeyDown","active","checked","contentRenderer","disabled","href","icon","icons","inputName","inputValue","items","itemsIconAlignment","label","maxItems","separator","spritemap","target","title","type"];
+exports.render.types = {"_handleItemClick":"any","_handleItemKeyDown":"any","active":"bool","checked":"bool","contentRenderer":"string","disabled":"bool","href":"string","icon":"string","icons":"?","inputName":"string","inputValue":"string","items":"list<?>","itemsIconAlignment":"string","label":"string","maxItems":"int","separator":"bool","spritemap":"string","target":"string","title":"string","type":"string"};
 templates = exports;
@@ -711,0 +932,0 @@ return exports;

src/validators.js

@@ -10,2 +10,6 @@ import {Config} from 'metal-state';
 	icon: Config.string(),
+	icons: Config.shapeOf({
+		left: Config.string(),
+		right: Config.string(),
+	}),
 	inputName: Config.string(),
@@ -12,0 +16,0 @@ inputValue: Config.string(),

No alert changes

Improved metrics

Total package byte prevSize

926969

increased by6.74%

Lines of code

9170

increased by9.41%

Dependency changes

• Updatedclay-button@^2.14.0

• Updatedclay-checkbox@^2.14.0

• Updatedclay-component@^2.14.0

• Updatedclay-icon@^2.14.0

• Updatedclay-link@^2.14.0

• Updatedclay-portal@^2.14.0

• Updatedclay-radio@^2.14.0