Update OOjs UI to v0.11.1

Release notes: https://git.wikimedia.org/blob/oojs%2Fui.git/v0.11.1/History.md Change-Id: I8774390ed8393801212f2270a786984687794aeb
2015-05-04 17:48:51 -07:00 · 2015-05-04 17:48:51 -07:00 · 9ca24dc486
commit 9ca24dc486
parent 2b11da9a1c
43 changed files with 876 additions and 88 deletions
--- a/composer.json
+++ b/composer.json
@ -20,7 +20,7 @@
 		"ext-iconv": "*",
 		"leafo/lessphp": "0.5.0",
 		"liuggio/statsd-php-client": "1.0.12",
-		"oojs/oojs-ui": "0.11.0",
+		"oojs/oojs-ui": "0.11.1",
 		"php": ">=5.3.3",
 		"psr/log": "1.0.0",
 		"wikimedia/cdb": "1.0.1",
--- a/resources/lib/oojs-ui/i18n/ps.json
+++ b/resources/lib/oojs-ui/i18n/ps.json
@ -6,5 +6,13 @@
 	},
 	"ooui-outline-control-move-down": "توکی ښکته راوړل",
 	"ooui-outline-control-move-up": "توکی پورته راوړل",
-	"ooui-toolbar-more": "نور"
+	"ooui-outline-control-remove": "توکی غورځول",
+	"ooui-toolbar-more": "نور",
+	"ooui-toolgroup-expand": "نور",
+	"ooui-toolgroup-collapse": "لږ تر لږ",
+	"ooui-dialog-message-accept": "ښه",
+	"ooui-dialog-message-reject": "ناگارل",
+	"ooui-dialog-process-error": "يوه ستونزه رامنځ ته شوه",
+	"ooui-dialog-process-dismiss": "تړل",
+	"ooui-dialog-process-retry": "بيا هڅه"
 }
--- a/resources/lib/oojs-ui/oojs-ui-mediawiki-noimages.css
+++ b/resources/lib/oojs-ui/oojs-ui-mediawiki-noimages.css
@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.11.0
+ * OOjs UI v0.11.1
 * https://www.mediawiki.org/wiki/OOjs_UI
 *
 * Copyright 2011–2015 OOjs Team and other contributors.
 * Released under the MIT license
 * http://oojs.mit-license.org
 *
- * Date: 2015-04-30T01:42:35Z
+ * Date: 2015-05-05T00:40:57Z
 */
@-webkit-keyframes oo-ui-progressBarWidget-slide {
 	from {
@ -459,6 +459,15 @@
 .oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
 	box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25);
 }
+.oo-ui-indexLayout > .oo-ui-menuLayout-menu {
+	height: 3em;
+}
+.oo-ui-indexLayout > .oo-ui-menuLayout-content {
+	top: 3em;
+}
+.oo-ui-indexLayout-stackLayout > .oo-ui-panelLayout {
+	padding: 1.5em;
+}
 .oo-ui-fieldLayout {
 	display: block;
 	margin-bottom: 1em;
@ -1525,11 +1534,11 @@
 	border-width: 9px;
 }
 .oo-ui-popupWidget-transitioning .oo-ui-popupWidget-popup {
-	-webkit-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
-	   -moz-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
-	    -ms-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
-	     -o-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
-	        transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
+	-webkit-transition: width 0.1s ease-in-out, height 0.1s ease-in-out, left 0.1s ease-in-out;
+	   -moz-transition: width 0.1s ease-in-out, height 0.1s ease-in-out, left 0.1s ease-in-out;
+	    -ms-transition: width 0.1s ease-in-out, height 0.1s ease-in-out, left 0.1s ease-in-out;
+	     -o-transition: width 0.1s ease-in-out, height 0.1s ease-in-out, left 0.1s ease-in-out;
+	        transition: width 0.1s ease-in-out, height 0.1s ease-in-out, left 0.1s ease-in-out;
 }
 .oo-ui-popupWidget-head {
 	height: 2.5em;
@ -1813,11 +1822,11 @@
 	border: solid 1px #cccccc;
 	box-shadow: inset 0 0 0 0 #347bff;
 	border-radius: 0.1em;
-	-webkit-transition: box-shadow 0.1s;
-	   -moz-transition: box-shadow 0.1s;
-	    -ms-transition: box-shadow 0.1s;
-	     -o-transition: box-shadow 0.1s;
-	        transition: box-shadow 0.1s;
+	-webkit-transition: box-shadow 0.1s ease-in-out;
+	   -moz-transition: box-shadow 0.1s ease-in-out;
+	    -ms-transition: box-shadow 0.1s ease-in-out;
+	     -o-transition: box-shadow 0.1s ease-in-out;
+	        transition: box-shadow 0.1s ease-in-out;
 	-webkit-box-sizing: border-box;
 	   -moz-box-sizing: border-box;
 	        box-sizing: border-box;
@ -1831,11 +1840,11 @@
 }
 .oo-ui-textInputWidget.oo-ui-widget-enabled input,
 .oo-ui-textInputWidget.oo-ui-widget-enabled textarea {
-	-webkit-transition: border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
-	   -moz-transition: border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
-	    -ms-transition: border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
-	     -o-transition: border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
-	        transition: border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
+	-webkit-transition: border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
+	   -moz-transition: border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
+	    -ms-transition: border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
+	     -o-transition: border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
+	        transition: border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
 }
 .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
 .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus {
@ -2135,6 +2144,42 @@
 	margin: 0.5em 0 0.5em 0.5em;
 	opacity: 0.2;
 }
+.oo-ui-tabSelectWidget {
+	text-align: left;
+	white-space: nowrap;
+	overflow: hidden;
+	background-color: #dddddd;
+}
+.oo-ui-tabOptionWidget {
+	display: inline-block;
+	vertical-align: bottom;
+	padding: 0.35em 1em;
+	margin: 0.5em 0 0 0.75em;
+	border: 1px solid transparent;
+	border-bottom: none;
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	color: #666666;
+	font-weight: bold;
+}
+.oo-ui-tabOptionWidget:hover {
+	background-color: rgba(255, 255, 255, 0.3);
+}
+.oo-ui-tabOptionWidget:active {
+	background-color: rgba(255, 255, 255, 0.8);
+}
+.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label {
+	padding-right: 1.5em;
+}
+.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
+	opacity: 0.5;
+}
+.oo-ui-selectWidget-pressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
+.oo-ui-selectWidget-depressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
+.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected:hover {
+	background-color: #ffffff;
+	color: #333333;
+}
 .oo-ui-comboBoxWidget {
 	display: inline-block;
 	position: relative;
--- a/resources/lib/oojs-ui/oojs-ui-mediawiki.js
+++ b/resources/lib/oojs-ui/oojs-ui-mediawiki.js
@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.11.0
+ * OOjs UI v0.11.1
 * https://www.mediawiki.org/wiki/OOjs_UI
 *
 * Copyright 2011–2015 OOjs Team and other contributors.
 * Released under the MIT license
 * http://oojs.mit-license.org
 *
- * Date: 2015-04-30T01:42:23Z
+ * Date: 2015-05-05T00:40:50Z
 */
 /**
 * @class
--- a/resources/lib/oojs-ui/oojs-ui.js
+++ b/resources/lib/oojs-ui/oojs-ui.js
@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.11.0
+ * OOjs UI v0.11.1
 * https://www.mediawiki.org/wiki/OOjs_UI
 *
 * Copyright 2011–2015 OOjs Team and other contributors.
 * Released under the MIT license
 * http://oojs.mit-license.org
 *
- * Date: 2015-04-30T01:42:23Z
+ * Date: 2015-05-05T00:40:50Z
 */
 ( function ( OO ) {

@ -150,6 +150,38 @@ OO.ui.contains = function ( containers, contained, matchContainers ) {
 	return false;
 };

+/**
+ * Return a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * N milliseconds. If `immediate` is passed, trigger the function on the
+ * leading edge, instead of the trailing.
+ *
+ * Ported from: http://underscorejs.org/underscore.js
+ *
+ * @param {Function} func
+ * @param {number} wait
+ * @param {boolean} immediate
+ * @return {Function}
+ */
+OO.ui.debounce = function ( func, wait, immediate ) {
+	var timeout;
+	return function () {
+		var context = this,
+			args = arguments,
+			later = function () {
+				timeout = null;
+				if ( !immediate ) {
+					func.apply( context, args );
+				}
+			};
+		if ( immediate && !timeout ) {
+			func.apply( context, args );
+		}
+		clearTimeout( timeout );
+		timeout = setTimeout( later, wait );
+	};
+};
+
 /**
 * Reconstitute a JavaScript object corresponding to a widget created by
 * the PHP implementation.
@ -5338,9 +5370,9 @@ OO.ui.IndicatorElement.prototype.getIndicatorTitle = function () {
 * @param {Object} [config] Configuration options
 * @cfg {jQuery} [$label] The label element created by the class. If this
 *  configuration is omitted, the label element will use a generated `<span>`.
- * @cfg {jQuery|string|Function} [label] The label text. The label can be specified as a plaintext string,
- *  a jQuery selection of elements, or a function that will produce a string in the future. See the
- *  [OOjs UI documentation on MediaWiki] [2] for examples.
+ * @cfg {jQuery|string|Function|OO.ui.HtmlSnippet} [label] The label text. The label can be specified
+ *  as a plaintext string, a jQuery selection of elements, or a function that will produce a string
+ *  in the future. See the [OOjs UI documentation on MediaWiki] [2] for examples.
 *  [2]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Icons,_Indicators,_and_Labels#Labels
 * @cfg {boolean} [autoFitLabel=true] Fit the label to the width of the parent element.
 *  The label will be truncated to fit if necessary.
@ -9094,7 +9126,7 @@ OO.ui.BookletLayout.prototype.setPage = function ( name ) {
 		if ( this.outlined ) {
 			selectedItem = this.outlineSelectWidget.getSelectedItem();
 			if ( selectedItem && selectedItem.getData() !== name ) {
-				this.outlineSelectWidget.selectItem( this.outlineSelectWidget.getItemFromData( name ) );
+				this.outlineSelectWidget.selectItemByData( name );
 			}
 		}
 		if ( page ) {
@ -9131,6 +9163,459 @@ OO.ui.BookletLayout.prototype.selectFirstSelectablePage = function () {
 	return this;
 };

+/**
+ * IndexLayouts contain {@link OO.ui.CardLayout card layouts} as well as
+ * {@link OO.ui.TabSelectWidget tabs} that allow users to easily navigate through the cards and
+ * select which one to display. By default, only one card is displayed at a time. When a user
+ * navigates to a new card, the index layout automatically focuses on the first focusable element,
+ * unless the default setting is changed.
+ *
+ * TODO: This class is similar to BookletLayout, we may want to refactor to reduce duplication
+ *
+ *     @example
+ *     // Example of a IndexLayout that contains two CardLayouts.
+ *
+ *     function CardOneLayout( name, config ) {
+ *         CardOneLayout.super.call( this, name, config );
+ *         this.$element.append( '<p>First card</p>' );
+ *     }
+ *     OO.inheritClass( CardOneLayout, OO.ui.CardLayout );
+ *     CardOneLayout.prototype.setupTabItem = function () {
+ *         this.tabItem.setLabel( 'Card One' );
+ *     };
+ *
+ *     function CardTwoLayout( name, config ) {
+ *         CardTwoLayout.super.call( this, name, config );
+ *         this.$element.append( '<p>Second card</p>' );
+ *     }
+ *     OO.inheritClass( CardTwoLayout, OO.ui.CardLayout );
+ *     CardTwoLayout.prototype.setupTabItem = function () {
+ *         this.tabItem.setLabel( 'Card Two' );
+ *     };
+ *
+ *     var card1 = new CardOneLayout( 'one' ),
+ *         card2 = new CardTwoLayout( 'two' );
+ *
+ *     var index = new OO.ui.IndexLayout();
+ *
+ *     index.addCards ( [ card1, card2 ] );
+ *     $( 'body' ).append( index.$element );
+ *
+ * @class
+ * @extends OO.ui.MenuLayout
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @cfg {boolean} [continuous=false] Show all cards, one after another
+ * @cfg {boolean} [autoFocus=true] Focus on the first focusable element when a new card is displayed.
+ */
+OO.ui.IndexLayout = function OoUiIndexLayout( config ) {
+	// Configuration initialization
+	config = $.extend( {}, config, { menuPosition: 'top' } );
+
+	// Parent constructor
+	OO.ui.IndexLayout.super.call( this, config );
+
+	// Properties
+	this.currentCardName = null;
+	this.cards = {};
+	this.ignoreFocus = false;
+	this.stackLayout = new OO.ui.StackLayout( { continuous: !!config.continuous } );
+	this.$content.append( this.stackLayout.$element );
+	this.autoFocus = config.autoFocus === undefined || !!config.autoFocus;
+
+	this.tabSelectWidget = new OO.ui.TabSelectWidget();
+	this.tabPanel = new OO.ui.PanelLayout();
+	this.$menu.append( this.tabPanel.$element );
+
+	this.toggleMenu( true );
+
+	// Events
+	this.stackLayout.connect( this, { set: 'onStackLayoutSet' } );
+	this.tabSelectWidget.connect( this, { select: 'onTabSelectWidgetSelect' } );
+	if ( this.autoFocus ) {
+		// Event 'focus' does not bubble, but 'focusin' does
+		this.stackLayout.$element.on( 'focusin', this.onStackLayoutFocus.bind( this ) );
+	}
+
+	// Initialization
+	this.$element.addClass( 'oo-ui-indexLayout' );
+	this.stackLayout.$element.addClass( 'oo-ui-indexLayout-stackLayout' );
+	this.tabPanel.$element
+		.addClass( 'oo-ui-indexLayout-tabPanel' )
+		.append( this.tabSelectWidget.$element );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.IndexLayout, OO.ui.MenuLayout );
+
+/* Events */
+
+/**
+ * A 'set' event is emitted when a card is {@link #setCard set} to be displayed by the index layout.
+ * @event set
+ * @param {OO.ui.CardLayout} card Current card
+ */
+
+/**
+ * An 'add' event is emitted when cards are {@link #addCards added} to the index layout.
+ *
+ * @event add
+ * @param {OO.ui.CardLayout[]} card Added cards
+ * @param {number} index Index cards were added at
+ */
+
+/**
+ * A 'remove' event is emitted when cards are {@link #clearCards cleared} or
+ * {@link #removeCards removed} from the index.
+ *
+ * @event remove
+ * @param {OO.ui.CardLayout[]} cards Removed cards
+ */
+
+/* Methods */
+
+/**
+ * Handle stack layout focus.
+ *
+ * @private
+ * @param {jQuery.Event} e Focusin event
+ */
+OO.ui.IndexLayout.prototype.onStackLayoutFocus = function ( e ) {
+	var name, $target;
+
+	// Find the card that an element was focused within
+	$target = $( e.target ).closest( '.oo-ui-cardLayout' );
+	for ( name in this.cards ) {
+		// Check for card match, exclude current card to find only card changes
+		if ( this.cards[ name ].$element[ 0 ] === $target[ 0 ] && name !== this.currentCardName ) {
+			this.setCard( name );
+			break;
+		}
+	}
+};
+
+/**
+ * Handle stack layout set events.
+ *
+ * @private
+ * @param {OO.ui.PanelLayout|null} card The card panel that is now the current panel
+ */
+OO.ui.IndexLayout.prototype.onStackLayoutSet = function ( card ) {
+	var layout = this;
+	if ( card ) {
+		card.scrollElementIntoView( { complete: function () {
+			if ( layout.autoFocus ) {
+				layout.focus();
+			}
+		} } );
+	}
+};
+
+/**
+ * Focus the first input in the current card.
+ *
+ * If no card is selected, the first selectable card will be selected.
+ * If the focus is already in an element on the current card, nothing will happen.
+ * @param {number} [itemIndex] A specific item to focus on
+ */
+OO.ui.IndexLayout.prototype.focus = function ( itemIndex ) {
+	var $input, card,
+		items = this.stackLayout.getItems();
+
+	if ( itemIndex !== undefined && items[ itemIndex ] ) {
+		card = items[ itemIndex ];
+	} else {
+		card = this.stackLayout.getCurrentItem();
+	}
+
+	if ( !card ) {
+		this.selectFirstSelectableCard();
+		card = this.stackLayout.getCurrentItem();
+	}
+	if ( !card ) {
+		return;
+	}
+	// Only change the focus if is not already in the current card
+	if ( !card.$element.find( ':focus' ).length ) {
+		$input = card.$element.find( ':input:first' );
+		if ( $input.length ) {
+			$input[ 0 ].focus();
+		}
+	}
+};
+
+/**
+ * Find the first focusable input in the index layout and focus
+ * on it.
+ */
+OO.ui.IndexLayout.prototype.focusFirstFocusable = function () {
+	var i, len,
+		found = false,
+		items = this.stackLayout.getItems(),
+		checkAndFocus = function () {
+			if ( OO.ui.isFocusableElement( $( this ) ) ) {
+				$( this ).focus();
+				found = true;
+				return false;
+			}
+		};
+
+	for ( i = 0, len = items.length; i < len; i++ ) {
+		if ( found ) {
+			break;
+		}
+		// Find all potentially focusable elements in the item
+		// and check if they are focusable
+		items[i].$element
+			.find( 'input, select, textarea, button, object' )
+			.each( checkAndFocus );
+	}
+};
+
+/**
+ * Handle tab widget select events.
+ *
+ * @private
+ * @param {OO.ui.OptionWidget|null} item Selected item
+ */
+OO.ui.IndexLayout.prototype.onTabSelectWidgetSelect = function ( item ) {
+	if ( item ) {
+		this.setCard( item.getData() );
+	}
+};
+
+/**
+ * Get the card closest to the specified card.
+ *
+ * @param {OO.ui.CardLayout} card Card to use as a reference point
+ * @return {OO.ui.CardLayout|null} Card closest to the specified card
+ */
+OO.ui.IndexLayout.prototype.getClosestCard = function ( card ) {
+	var next, prev, level,
+		cards = this.stackLayout.getItems(),
+		index = $.inArray( card, cards );
+
+	if ( index !== -1 ) {
+		next = cards[ index + 1 ];
+		prev = cards[ index - 1 ];
+		// Prefer adjacent cards at the same level
+		level = this.tabSelectWidget.getItemFromData( card.getName() ).getLevel();
+		if (
+			prev &&
+			level === this.tabSelectWidget.getItemFromData( prev.getName() ).getLevel()
+		) {
+			return prev;
+		}
+		if (
+			next &&
+			level === this.tabSelectWidget.getItemFromData( next.getName() ).getLevel()
+		) {
+			return next;
+		}
+	}
+	return prev || next || null;
+};
+
+/**
+ * Get the tabs widget.
+ *
+ * @return {OO.ui.TabSelectWidget} Tabs widget
+ */
+OO.ui.IndexLayout.prototype.getTabs = function () {
+	return this.tabSelectWidget;
+};
+
+/**
+ * Get a card by its symbolic name.
+ *
+ * @param {string} name Symbolic name of card
+ * @return {OO.ui.CardLayout|undefined} Card, if found
+ */
+OO.ui.IndexLayout.prototype.getCard = function ( name ) {
+	return this.cards[ name ];
+};
+
+/**
+ * Get the current card.
+ *
+ * @return {OO.ui.CardLayout|undefined} Current card, if found
+ */
+OO.ui.IndexLayout.prototype.getCurrentCard = function () {
+	var name = this.getCurrentCardName();
+	return name ? this.getCard( name ) : undefined;
+};
+
+/**
+ * Get the symbolic name of the current card.
+ *
+ * @return {string|null} Symbolic name of the current card
+ */
+OO.ui.IndexLayout.prototype.getCurrentCardName = function () {
+	return this.currentCardName;
+};
+
+/**
+ * Add cards to the index layout
+ *
+ * When cards are added with the same names as existing cards, the existing cards will be
+ * automatically removed before the new cards are added.
+ *
+ * @param {OO.ui.CardLayout[]} cards Cards to add
+ * @param {number} index Index of the insertion point
+ * @fires add
+ * @chainable
+ */
+OO.ui.IndexLayout.prototype.addCards = function ( cards, index ) {
+	var i, len, name, card, item, currentIndex,
+		stackLayoutCards = this.stackLayout.getItems(),
+		remove = [],
+		items = [];
+
+	// Remove cards with same names
+	for ( i = 0, len = cards.length; i < len; i++ ) {
+		card = cards[ i ];
+		name = card.getName();
+
+		if ( Object.prototype.hasOwnProperty.call( this.cards, name ) ) {
+			// Correct the insertion index
+			currentIndex = $.inArray( this.cards[ name ], stackLayoutCards );
+			if ( currentIndex !== -1 && currentIndex + 1 < index ) {
+				index--;
+			}
+			remove.push( this.cards[ name ] );
+		}
+	}
+	if ( remove.length ) {
+		this.removeCards( remove );
+	}
+
+	// Add new cards
+	for ( i = 0, len = cards.length; i < len; i++ ) {
+		card = cards[ i ];
+		name = card.getName();
+		this.cards[ card.getName() ] = card;
+		item = new OO.ui.TabOptionWidget( { data: name } );
+		card.setTabItem( item );
+		items.push( item );
+	}
+
+	if ( items.length ) {
+		this.tabSelectWidget.addItems( items, index );
+		this.selectFirstSelectableCard();
+	}
+	this.stackLayout.addItems( cards, index );
+	this.emit( 'add', cards, index );
+
+	return this;
+};
+
+/**
+ * Remove the specified cards from the index layout.
+ *
+ * To remove all cards from the index, you may wish to use the #clearCards method instead.
+ *
+ * @param {OO.ui.CardLayout[]} cards An array of cards to remove
+ * @fires remove
+ * @chainable
+ */
+OO.ui.IndexLayout.prototype.removeCards = function ( cards ) {
+	var i, len, name, card,
+		items = [];
+
+	for ( i = 0, len = cards.length; i < len; i++ ) {
+		card = cards[ i ];
+		name = card.getName();
+		delete this.cards[ name ];
+		items.push( this.tabSelectWidget.getItemFromData( name ) );
+		card.setTabItem( null );
+	}
+	if ( items.length ) {
+		this.tabSelectWidget.removeItems( items );
+		this.selectFirstSelectableCard();
+	}
+	this.stackLayout.removeItems( cards );
+	this.emit( 'remove', cards );
+
+	return this;
+};
+
+/**
+ * Clear all cards from the index layout.
+ *
+ * To remove only a subset of cards from the index, use the #removeCards method.
+ *
+ * @fires remove
+ * @chainable
+ */
+OO.ui.IndexLayout.prototype.clearCards = function () {
+	var i, len,
+		cards = this.stackLayout.getItems();
+
+	this.cards = {};
+	this.currentCardName = null;
+	this.tabSelectWidget.clearItems();
+	for ( i = 0, len = cards.length; i < len; i++ ) {
+		cards[ i ].setTabItem( null );
+	}
+	this.stackLayout.clearItems();
+
+	this.emit( 'remove', cards );
+
+	return this;
+};
+
+/**
+ * Set the current card by symbolic name.
+ *
+ * @fires set
+ * @param {string} name Symbolic name of card
+ */
+OO.ui.IndexLayout.prototype.setCard = function ( name ) {
+	var selectedItem,
+		$focused,
+		card = this.cards[ name ];
+
+	if ( name !== this.currentCardName ) {
+		selectedItem = this.tabSelectWidget.getSelectedItem();
+		if ( selectedItem && selectedItem.getData() !== name ) {
+			this.tabSelectWidget.selectItemByData( name );
+		}
+		if ( card ) {
+			if ( this.currentCardName && this.cards[ this.currentCardName ] ) {
+				this.cards[ this.currentCardName ].setActive( false );
+				// Blur anything focused if the next card doesn't have anything focusable - this
+				// is not needed if the next card has something focusable because once it is focused
+				// this blur happens automatically
+				if ( this.autoFocus && !card.$element.find( ':input' ).length ) {
+					$focused = this.cards[ this.currentCardName ].$element.find( ':focus' );
+					if ( $focused.length ) {
+						$focused[ 0 ].blur();
+					}
+				}
+			}
+			this.currentCardName = name;
+			this.stackLayout.setItem( card );
+			card.setActive( true );
+			this.emit( 'set', card );
+		}
+	}
+};
+
+/**
+ * Select the first selectable card.
+ *
+ * @chainable
+ */
+OO.ui.IndexLayout.prototype.selectFirstSelectableCard = function () {
+	if ( !this.tabSelectWidget.getSelectedItem() ) {
+		this.tabSelectWidget.selectItem( this.tabSelectWidget.getFirstSelectableItem() );
+	}
+
+	return this;
+};
+
 /**
 * PanelLayouts expand to cover the entire area of their parent. They can be configured with scrolling, padding,
 * and a frame, and are often used together with {@link OO.ui.StackLayout StackLayouts}.
@ -9187,6 +9672,145 @@ OO.ui.PanelLayout = function OoUiPanelLayout( config ) {

 OO.inheritClass( OO.ui.PanelLayout, OO.ui.Layout );

+/**
+ * CardLayouts are used within {@link OO.ui.IndexLayout index layouts} to create cards that users can select and display
+ * from the index's optional {@link OO.ui.TabSelectWidget tab} navigation. Cards are usually not instantiated directly,
+ * rather extended to include the required content and functionality.
+ *
+ * Each card must have a unique symbolic name, which is passed to the constructor. In addition, the card's tab
+ * item is customized (with a label) using the #setupTabItem method. See
+ * {@link OO.ui.IndexLayout IndexLayout} for an example.
+ *
+ * @class
+ * @extends OO.ui.PanelLayout
+ *
+ * @constructor
+ * @param {string} name Unique symbolic name of card
+ * @param {Object} [config] Configuration options
+ */
+OO.ui.CardLayout = function OoUiCardLayout( name, config ) {
+	// Allow passing positional parameters inside the config object
+	if ( OO.isPlainObject( name ) && config === undefined ) {
+		config = name;
+		name = config.name;
+	}
+
+	// Configuration initialization
+	config = $.extend( { scrollable: true }, config );
+
+	// Parent constructor
+	OO.ui.CardLayout.super.call( this, config );
+
+	// Properties
+	this.name = name;
+	this.tabItem = null;
+	this.active = false;
+
+	// Initialization
+	this.$element.addClass( 'oo-ui-cardLayout' );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.CardLayout, OO.ui.PanelLayout );
+
+/* Events */
+
+/**
+ * An 'active' event is emitted when the card becomes active. Cards become active when they are
+ * shown in a index layout that is configured to display only one card at a time.
+ *
+ * @event active
+ * @param {boolean} active Card is active
+ */
+
+/* Methods */
+
+/**
+ * Get the symbolic name of the card.
+ *
+ * @return {string} Symbolic name of card
+ */
+OO.ui.CardLayout.prototype.getName = function () {
+	return this.name;
+};
+
+/**
+ * Check if card is active.
+ *
+ * Cards become active when they are shown in a {@link OO.ui.IndexLayout index layout} that is configured to display
+ * only one card at a time. Additional CSS is applied to the card's tab item to reflect the active state.
+ *
+ * @return {boolean} Card is active
+ */
+OO.ui.CardLayout.prototype.isActive = function () {
+	return this.active;
+};
+
+/**
+ * Get tab item.
+ *
+ * The tab item allows users to access the card from the index's tab
+ * navigation. The tab item itself can be customized (with a label, level, etc.) using the #setupTabItem method.
+ *
+ * @return {OO.ui.TabOptionWidget|null} Tab option widget
+ */
+OO.ui.CardLayout.prototype.getTabItem = function () {
+	return this.tabItem;
+};
+
+/**
+ * Set or unset the tab item.
+ *
+ * Specify a {@link OO.ui.TabOptionWidget tab option} to set it,
+ * or `null` to clear the tab item. To customize the tab item itself (e.g., to set a label or tab
+ * level), use #setupTabItem instead of this method.
+ *
+ * @param {OO.ui.TabOptionWidget|null} tabItem Tab option widget, null to clear
+ * @chainable
+ */
+OO.ui.CardLayout.prototype.setTabItem = function ( tabItem ) {
+	this.tabItem = tabItem || null;
+	if ( tabItem ) {
+		this.setupTabItem();
+	}
+	return this;
+};
+
+/**
+ * Set up the tab item.
+ *
+ * Use this method to customize the tab item (e.g., to add a label or tab level). To set or unset
+ * the tab item itself (with a {@link OO.ui.TabOptionWidget tab option} or `null`), use
+ * the #setTabItem method instead.
+ *
+ * @param {OO.ui.TabOptionWidget} tabItem Tab option widget to set up
+ * @chainable
+ */
+OO.ui.CardLayout.prototype.setupTabItem = function () {
+	return this;
+};
+
+/**
+ * Set the card to its 'active' state.
+ *
+ * Cards become active when they are shown in a index layout that is configured to display only one card at a time. Additional
+ * CSS is applied to the tab item to reflect the card's active state. Outside of the index
+ * context, setting the active state on a card does nothing.
+ *
+ * @param {boolean} value Card is active
+ * @fires active
+ */
+OO.ui.CardLayout.prototype.setActive = function ( active ) {
+	active = !!active;
+
+	if ( active !== this.active ) {
+		this.active = active;
+		this.$element.toggleClass( 'oo-ui-cardLayout-active', this.active );
+		this.emit( 'active', this.active );
+	}
+};
+
 /**
 * PageLayouts are used within {@link OO.ui.BookletLayout booklet layouts} to create pages that users can select and display
 * from the booklet's optional {@link OO.ui.OutlineSelectWidget outline} navigation. Pages are usually not instantiated directly,
@ -10209,7 +10833,7 @@ OO.ui.ItemWidget.prototype.setElementGroup = function ( group ) {
 /**
 * OutlineControlsWidget is a set of controls for an {@link OO.ui.OutlineSelectWidget outline select widget}.
 * Controls include moving items up and down, removing items, and adding different kinds of items.
- * ####Currently, this class is only used by {@link OO.ui.BookletLayout BookletLayouts}.####
+ * ####Currently, this class is only used by {@link OO.ui.BookletLayout booklet layouts}.####
 *
 * @class
 * @extends OO.ui.Widget
@ -10899,7 +11523,7 @@ OO.ui.ActionWidget.prototype.toggle = function () {
 *         popup: {
 *             $content: $( '<p>Additional options here.</p>' ),
 *             padded: true,
- *             align: 'left'
+ *             align: 'force-left'
 *         }
 *     } );
 *     // Append the button to the DOM.
@ -11834,10 +12458,7 @@ OO.ui.DropdownInputWidget.prototype.onMenuSelect = function ( item ) {
 * @inheritdoc
 */
 OO.ui.DropdownInputWidget.prototype.setValue = function ( value ) {
-	var item = this.dropdownWidget.getMenu().getItemFromData( value );
-	if ( item ) {
-		this.dropdownWidget.getMenu().selectItem( item );
-	}
+	this.dropdownWidget.getMenu().selectItemByData( value );
 	OO.ui.DropdownInputWidget.super.prototype.setValue.call( this, value );
 	return this;
 };
@ -12089,6 +12710,7 @@ OO.ui.TextInputWidget = function OoUiTextInputWidget( config ) {
 	this.$icon.on( 'mousedown', this.onIconMouseDown.bind( this ) );
 	this.$indicator.on( 'mousedown', this.onIndicatorMouseDown.bind( this ) );
 	this.on( 'labelChange', this.updatePosition.bind( this ) );
+	this.connect( this, { change: 'onChange' } );

 	// Initialization
 	this.$element
@ -12105,7 +12727,7 @@ OO.ui.TextInputWidget = function OoUiTextInputWidget( config ) {
 		this.$input.attr( 'autofocus', 'autofocus' );
 	}
 	if ( config.required ) {
-		this.$input.attr( 'required', 'true' );
+		this.$input.attr( 'required', 'required' );
 	}
 	if ( this.label || config.autosize ) {
 		this.installParentChangeDetector();
@ -12194,25 +12816,14 @@ OO.ui.TextInputWidget.prototype.onElementAttach = function () {
 };

 /**
- * @inheritdoc
+ * Handle change events.
+ *
+ * @param {string} value
+ * @private
 */
-OO.ui.TextInputWidget.prototype.onEdit = function () {
-	this.adjustSize();
-
-	// Parent method
-	return OO.ui.TextInputWidget.super.prototype.onEdit.call( this );
-};
-
-/**
- * @inheritdoc
- */
-OO.ui.TextInputWidget.prototype.setValue = function ( value ) {
-	// Parent method
-	OO.ui.TextInputWidget.super.prototype.setValue.call( this, value );
-
+OO.ui.TextInputWidget.prototype.onChange = function () {
 	this.setValidityFlag();
 	this.adjustSize();
-	return this;
 };

 /**
@ -12418,6 +13029,11 @@ OO.ui.TextInputWidget.prototype.setValidation = function ( validate ) {
 OO.ui.TextInputWidget.prototype.setValidityFlag = function () {
 	var widget = this;
 	this.isValid().done( function ( valid ) {
+		if ( !valid ) {
+			widget.$input.attr( 'aria-invalid', 'true' );
+		} else {
+			widget.$input.removeAttr( 'aria-invalid' );
+		}
 		widget.setFlags( { invalid: !valid } );
 	} );
 };
@ -13416,6 +14032,38 @@ OO.ui.OutlineOptionWidget.prototype.setLevel = function ( level ) {
 	return this;
 };

+/**
+ * TabOptionWidget is an item in a {@link OO.ui.TabSelectWidget TabSelectWidget}.
+ *
+ * Currently, this class is only used by {@link OO.ui.IndexLayout index layouts}, which contain
+ * {@link OO.ui.CardLayout card layouts}. See {@link OO.ui.IndexLayout IndexLayout}
+ * for an example.
+ *
+ * @class
+ * @extends OO.ui.OptionWidget
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ */
+OO.ui.TabOptionWidget = function OoUiTabOptionWidget( config ) {
+	// Configuration initialization
+	config = config || {};
+
+	// Parent constructor
+	OO.ui.TabOptionWidget.super.call( this, config );
+
+	// Initialization
+	this.$element.addClass( 'oo-ui-tabOptionWidget' );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.TabOptionWidget, OO.ui.OptionWidget );
+
+/* Static Properties */
+
+OO.ui.TabOptionWidget.static.highlightable = false;
+
 /**
 * PopupWidget is a container for content. The popup is overlaid and positioned absolutely.
 * By default, each popup has an anchor that points toward its origin.
@ -14484,6 +15132,22 @@ OO.ui.SelectWidget.prototype.highlightItem = function ( item ) {
 	return this;
 };

+/**
+ * Programmatically select an option by its data. If the `data` parameter is omitted,
+ * or if the item does not exist, all options will be deselected.
+ *
+ * @param {Object|string} [data] Value of the item to select, omit to deselect all
+ * @fires select
+ * @chainable
+ */
+OO.ui.SelectWidget.prototype.selectItemByData = function ( data ) {
+	var itemFromData = this.getItemFromData( data );
+	if ( data === undefined || !itemFromData ) {
+		return this.selectItem();
+	}
+	return this.selectItem( itemFromData );
+};
+
 /**
 * Programmatically select an option by its reference. If the `item` parameter is omitted,
 * all options will be deselected.
@ -15167,7 +15831,7 @@ OO.ui.TextInputMenuSelectWidget.prototype.position = function () {
 * OutlineSelectWidget is a structured list that contains {@link OO.ui.OutlineOptionWidget outline options}
 * A set of controls can be provided with an {@link OO.ui.OutlineControlsWidget outline controls} widget.
 *
- * ####Currently, this class is only used by {@link OO.ui.BookletLayout BookletLayouts}.####
+ * ####Currently, this class is only used by {@link OO.ui.BookletLayout booklet layouts}.####
 *
 * @class
 * @extends OO.ui.SelectWidget
@ -15198,6 +15862,40 @@ OO.ui.OutlineSelectWidget = function OoUiOutlineSelectWidget( config ) {
 OO.inheritClass( OO.ui.OutlineSelectWidget, OO.ui.SelectWidget );
 OO.mixinClass( OO.ui.OutlineSelectWidget, OO.ui.TabIndexedElement );

+/**
+ * TabSelectWidget is a list that contains {@link OO.ui.TabOptionWidget tab options}
+ *
+ * ####Currently, this class is only used by {@link OO.ui.IndexLayout index layouts}.####
+ *
+ * @class
+ * @extends OO.ui.SelectWidget
+ * @mixins OO.ui.TabIndexedElement
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ */
+OO.ui.TabSelectWidget = function OoUiTabSelectWidget( config ) {
+	// Parent constructor
+	OO.ui.TabSelectWidget.super.call( this, config );
+
+	// Mixin constructors
+	OO.ui.TabIndexedElement.call( this, config );
+
+	// Events
+	this.$element.on( {
+		focus: this.bindKeyDownListener.bind( this ),
+		blur: this.unbindKeyDownListener.bind( this )
+	} );
+
+	// Initialization
+	this.$element.addClass( 'oo-ui-tabSelectWidget' );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.TabSelectWidget, OO.ui.SelectWidget );
+OO.mixinClass( OO.ui.TabSelectWidget, OO.ui.TabIndexedElement );
+
 /**
 * ToggleSwitches are switches that slide on and off. Their state is represented by a Boolean
 * value (`true` for ‘on’, and `false` otherwise, the default). The ‘off’ state is represented
--- a/resources/lib/oojs-ui/themes/mediawiki/icons-interactions.json
+++ b/resources/lib/oojs-ui/themes/mediawiki/icons-interactions.json
@ -12,8 +12,8 @@
 			"ltr": "images/icons/browser-ltr.svg",
 			"rtl": "images/icons/browser-rtl.svg"
 		} },
+		"clear": { "file": "images/icons/clear.svg" },
 		"clock": { "file": "images/icons/clock.svg" },
-		"closeInput": { "file": "images/icons/closeInput.svg" },
 		"funnel": { "file": {
 			"ltr": "images/icons/funnel-ltr.svg",
 			"rtl": "images/icons/funnel-rtl.svg"
@ -31,10 +31,6 @@
 			"ltr": "images/icons/logOut-ltr.svg",
 			"rtl": "images/icons/logOut-rtl.svg"
 		} },
-		"magnifyingGlass": { "file": {
-			"ltr": "images/icons/magnifyingGlass-ltr.svg",
-			"rtl": "images/icons/magnifyingGlass-rtl.svg"
-		} },
 		"newWindow": { "file": {
 			"ltr": "images/icons/newWindow-ltr.svg",
 			"rtl": "images/icons/newWindow-rtl.svg"
--- a/resources/lib/oojs-ui/themes/mediawiki/icons-moderation.json
+++ b/resources/lib/oojs-ui/themes/mediawiki/icons-moderation.json
@ -20,7 +20,7 @@
 		}
 	},
 	"images": {
-		"block": { "file": "images/icons/block.svg" },
+		"block": { "file": "images/icons/block.svg", "variants": [ "destructive" ] },
 		"blockUndo": { "file": {
 			"ltr": "images/icons/blockUndo-ltr.svg",
 			"rtl": "images/icons/blockUndo-rtl.svg"
--- a/resources/lib/oojs-ui/themes/mediawiki/icons.json
+++ b/resources/lib/oojs-ui/themes/mediawiki/icons.json
@ -24,9 +24,9 @@
 		"add": { "file": "images/icons/add.svg", "variants": [ "constructive" ] },
 		"advanced": { "file": "images/icons/advanced.svg" },
 		"alert": { "file": "images/icons/alert.svg", "variants": [ "warning" ] },
+		"cancel": { "file": "images/icons/cancel.svg" },
 		"check": { "file": "images/icons/check.svg", "variants": [ "constructive", "progressive" ] },
 		"circle": { "file": "images/icons/circle.svg", "variants": [ "constructive" ] },
-		"clear": { "file": "images/icons/clear.svg" },
 		"close": { "file": {
 			"ltr": "images/icons/close-ltr.svg",
 			"rtl": "images/icons/close-rtl.svg"
@ -60,7 +60,10 @@
 			"rtl": "images/icons/arched-arrow-rtl.svg"
 		} },
 		"remove": { "file": "images/icons/remove.svg", "variants": [ "destructive" ] },
-		"search": { "file": "images/icons/search.svg" },
+		"search": { "file": {
+			"ltr": "images/icons/search-ltr.svg",
+			"rtl": "images/icons/search-rtl.svg"
+		} },
 		"settings": { "file": "images/icons/settings.svg" },
 		"tag": { "file": "images/icons/tag.svg" },
 		"undo": { "file": {
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/block-destructive.png
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/block-destructive.png
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/block-destructive.svg
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/block-destructive.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><style>* { fill: #D11D13 }</style>
+    <path d="M12 4c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm5 9h-10v-2h10v2z" id="path4"/>
+</svg>
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/cancel-invert.png
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/cancel-invert.png
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/cancel-invert.svg
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/cancel-invert.svg
@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><style>* { fill: #FFFFFF }</style>
-    <g id="clear">
+    <g id="cancel">
        <path id="circle-with-strike" d="M11.999 5.022c-3.853 0-6.977 3.124-6.977 6.978 0 3.853 3.124 6.978 6.977 6.978 3.854 0 6.979-3.125 6.979-6.978 0-3.854-3.125-6.978-6.979-6.978zm-5.113 6.978c0-1.092.572-3.25.93-2.929l7.113 7.113c.488.525-1.837.931-2.93.931-2.825-.001-5.113-2.291-5.113-5.115zm9.298 2.929l-7.114-7.113c-.445-.483 1.837-.931 2.929-.931 2.827 0 5.115 2.289 5.115 5.114 0 1.093-.364 3.543-.93 2.93z"/>
    </g>
 </svg>
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/cancel.png
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/cancel.png
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/cancel.svg
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/cancel.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g id="cancel">
+        <path id="circle-with-strike" d="M11.999 5.022c-3.853 0-6.977 3.124-6.977 6.978 0 3.853 3.124 6.978 6.977 6.978 3.854 0 6.979-3.125 6.979-6.978 0-3.854-3.125-6.978-6.979-6.978zm-5.113 6.978c0-1.092.572-3.25.93-2.929l7.113 7.113c.488.525-1.837.931-2.93.931-2.825-.001-5.113-2.291-5.113-5.115zm9.298 2.929l-7.114-7.113c-.445-.483 1.837-.931 2.929-.931 2.827 0 5.115 2.289 5.115 5.114 0 1.093-.364 3.543-.93 2.93z"/>
+    </g>
+</svg>
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/clear.png
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/clear.png
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/clear.svg
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/clear.svg
@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <g id="clear">
-        <path id="circle-with-strike" d="M11.999 5.022c-3.853 0-6.977 3.124-6.977 6.978 0 3.853 3.124 6.978 6.977 6.978 3.854 0 6.979-3.125 6.979-6.978 0-3.854-3.125-6.978-6.979-6.978zm-5.113 6.978c0-1.092.572-3.25.93-2.929l7.113 7.113c.488.525-1.837.931-2.93.931-2.825-.001-5.113-2.291-5.113-5.115zm9.298 2.929l-7.114-7.113c-.445-.483 1.837-.931 2.929-.931 2.827 0 5.115 2.289 5.115 5.114 0 1.093-.364 3.543-.93 2.93z"/>
-    </g>
+  <g id="clear">
+    <path id="circle-with-cross" d="M12 5c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 11l-1 1-3-3-3 3-1-1 3-3-3-3 1-1 3 3 3-3 1 1-3 3 3 3z"/>
+  </g>
 </svg>
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/closeInput.png
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/closeInput.png
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/closeInput.svg
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/closeInput.svg
@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M12 5c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 11l-1 1-3-3-3 3-1-1 3-3-3-3 1-1 3 3 3-3 1 1-3 3 3 3z"/>
-</svg>
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/magnifyingGlass-ltr.png
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/magnifyingGlass-ltr.png
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/magnifyingGlass-ltr.svg
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/magnifyingGlass-ltr.svg
@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M16.4 16.4c1-1.2 1.6-2.7 1.6-4.4 0-3.9-3.1-7-7-7s-7 3.1-7 7 3.1 7 7 7c1.2 0 2.3-.3 3.2-.8l2.8 2.8c1.4 1.4 2.5 1.5 4 0l-4.6-4.6zm-10.4-4.4c0-2.8 2.2-5 5-5s5 2.2 5 5-2.2 5-5 5-5-2.3-5-5z"/>
-</svg>
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/magnifyingGlass-rtl.png
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/magnifyingGlass-rtl.png
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/magnifyingGlass-rtl.svg
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/magnifyingGlass-rtl.svg
@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M8.6 16.4c-1-1.2-1.6-2.7-1.6-4.4 0-3.9 3.1-7 7-7s7 3.1 7 7-3.1 7-7 7c-1.2 0-2.3-.3-3.2-.8l-2.8 2.8c-1.4 1.4-2.5 1.5-4 0l4.6-4.6zm10.4-4.4c0-2.8-2.2-5-5-5s-5 2.2-5 5 2.2 5 5 5 5-2.3 5-5z" id="path414"/>
-</svg>
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-invert.png
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-invert.png
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-invert.svg
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-invert.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><style>* { fill: #FFFFFF }</style>
-    <g id="search">
-        <path id="magnifying-glass" d="M16.021 15.96l-2.374-2.375-.169-.099c.403-.566.643-1.26.643-2.009-.001-1.92-1.558-3.477-3.477-3.477-1.921 0-3.478 1.557-3.478 3.478 0 1.92 1.557 3.477 3.478 3.477.749 0 1.442-.239 2.01-.643l.098.169 2.375 2.374c.19.189.543.143.79-.104s.293-.601.104-.791zm-5.377-2.27c-1.221 0-2.213-.991-2.213-2.213 0-1.221.992-2.213 2.213-2.213 1.222 0 2.213.992 2.213 2.213-.001 1.222-.992 2.213-2.213 2.213z"/>
-    </g>
-</svg>
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-ltr-invert.png
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-ltr-invert.png
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-ltr-invert.svg
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-ltr-invert.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><style>* { fill: #FFFFFF }</style>
+    <g id="search">
+        <path id="magnifying-glass" d="M 10.5,4 C 6.9101491,4 4,6.9101491 4,10.5 c 0,3.589851 2.9101491,6.5 6.5,6.5 1.02211,0 1.983324,-0.235899 2.84375,-0.65625 L 16,19 c 1.4,1.4 2.5,1.5 4,0 L 15.5625,14.5625 C 16.462737,13.447115 17,12.044969 17,10.5 17,6.9101491 14.089851,4 10.5,4 z m 0,2 C 12.985281,6 15,8.0147186 15,10.5 15,12.985281 12.985281,15 10.5,15 8.0147186,15 6,12.985281 6,10.5 6,8.0147186 8.0147186,6 10.5,6 z"/>
+    </g>
+</svg>
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-ltr.png
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-ltr.png
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-ltr.svg
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-ltr.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g id="search">
+        <path id="magnifying-glass" d="M 10.5,4 C 6.9101491,4 4,6.9101491 4,10.5 c 0,3.589851 2.9101491,6.5 6.5,6.5 1.02211,0 1.983324,-0.235899 2.84375,-0.65625 L 16,19 c 1.4,1.4 2.5,1.5 4,0 L 15.5625,14.5625 C 16.462737,13.447115 17,12.044969 17,10.5 17,6.9101491 14.089851,4 10.5,4 z m 0,2 C 12.985281,6 15,8.0147186 15,10.5 15,12.985281 12.985281,15 10.5,15 8.0147186,15 6,12.985281 6,10.5 6,8.0147186 8.0147186,6 10.5,6 z"/>
+    </g>
+</svg>
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-rtl-invert.png
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-rtl-invert.png
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-rtl-invert.svg
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-rtl-invert.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><style>* { fill: #FFFFFF }</style>
+    <g id="search">
+        <path id="magnifying-glass" d="m 13.5,4 c 3.589851,0 6.5,2.9101491 6.5,6.5 0,3.589851 -2.910149,6.5 -6.5,6.5 -1.02211,0 -1.983324,-0.235899 -2.84375,-0.65625 L 8,19 C 6.6,20.4 5.5,20.5 4,19 L 8.4375,14.5625 C 7.537263,13.447115 7,12.044969 7,10.5 7,6.9101491 9.910149,4 13.5,4 z m 0,2 C 11.014719,6 9,8.0147186 9,10.5 9,12.985281 11.014719,15 13.5,15 15.985281,15 18,12.985281 18,10.5 18,8.0147186 15.985281,6 13.5,6 z"/>
+    </g>
+</svg>
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-rtl.png
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-rtl.png
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-rtl.svg
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/search-rtl.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g id="search">
+        <path id="magnifying-glass" d="m 13.5,4 c 3.589851,0 6.5,2.9101491 6.5,6.5 0,3.589851 -2.910149,6.5 -6.5,6.5 -1.02211,0 -1.983324,-0.235899 -2.84375,-0.65625 L 8,19 C 6.6,20.4 5.5,20.5 4,19 L 8.4375,14.5625 C 7.537263,13.447115 7,12.044969 7,10.5 7,6.9101491 9.910149,4 13.5,4 z m 0,2 C 11.014719,6 9,8.0147186 9,10.5 9,12.985281 11.014719,15 13.5,15 15.985281,15 18,12.985281 18,10.5 18,8.0147186 15.985281,6 13.5,6 z"/>
+    </g>
+</svg>
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/search.png
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/search.png
--- a/resources/lib/oojs-ui/themes/mediawiki/images/icons/search.svg
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/icons/search.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <g id="search">
-        <path id="magnifying-glass" d="M16.021 15.96l-2.374-2.375-.169-.099c.403-.566.643-1.26.643-2.009-.001-1.92-1.558-3.477-3.477-3.477-1.921 0-3.478 1.557-3.478 3.478 0 1.92 1.557 3.477 3.478 3.477.749 0 1.442-.239 2.01-.643l.098.169 2.375 2.374c.19.189.543.143.79-.104s.293-.601.104-.791zm-5.377-2.27c-1.221 0-2.213-.991-2.213-2.213 0-1.221.992-2.213 2.213-2.213 1.222 0 2.213.992 2.213 2.213-.001 1.222-.992 2.213-2.213 2.213z"/>
-    </g>
-</svg>
--- a/resources/lib/oojs-ui/themes/mediawiki/images/indicators/search-ltr-invert.png
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/indicators/search-ltr-invert.png
--- a/resources/lib/oojs-ui/themes/mediawiki/images/indicators/search-ltr-invert.svg
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/indicators/search-ltr-invert.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><style>* { fill: #FFFFFF }</style>
+    <g id="search">
+        <path id="path3051" d="M10.369 9.474l-2.374-2.375-.169-.099c.403-.566.643-1.26.643-2.009-.001-1.92-1.558-3.477-3.477-3.477-1.921 0-3.478 1.557-3.478 3.478 0 1.92 1.557 3.477 3.478 3.477.749 0 1.442-.239 2.01-.643l.098.169 2.375 2.374c.19.189.543.143.79-.104s.293-.601.104-.791zm-5.377-2.27c-1.221 0-2.213-.991-2.213-2.213 0-1.221.992-2.213 2.213-2.213 1.222 0 2.213.992 2.213 2.213-.001 1.222-.992 2.213-2.213 2.213z"/>
+    </g>
+</svg>
--- a/resources/lib/oojs-ui/themes/mediawiki/images/indicators/search-ltr.png
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/indicators/search-ltr.png
--- a/resources/lib/oojs-ui/themes/mediawiki/images/indicators/search-ltr.svg
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/indicators/search-ltr.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <g id="search">
+        <path id="path3051" d="M10.369 9.474l-2.374-2.375-.169-.099c.403-.566.643-1.26.643-2.009-.001-1.92-1.558-3.477-3.477-3.477-1.921 0-3.478 1.557-3.478 3.478 0 1.92 1.557 3.477 3.478 3.477.749 0 1.442-.239 2.01-.643l.098.169 2.375 2.374c.19.189.543.143.79-.104s.293-.601.104-.791zm-5.377-2.27c-1.221 0-2.213-.991-2.213-2.213 0-1.221.992-2.213 2.213-2.213 1.222 0 2.213.992 2.213 2.213-.001 1.222-.992 2.213-2.213 2.213z"/>
+    </g>
+</svg>
--- a/resources/lib/oojs-ui/themes/mediawiki/images/indicators/search-rtl-invert.png
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/indicators/search-rtl-invert.png
--- a/resources/lib/oojs-ui/themes/mediawiki/images/indicators/search-rtl-invert.svg
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/indicators/search-rtl-invert.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><style>* { fill: #FFFFFF }</style>
+    <g id="search">
+        <path id="path3051" d="M1.631 9.474l2.374-2.375.169-.099c-.403-.566-.643-1.26-.643-2.009.001-1.92 1.558-3.477 3.477-3.477 1.921 0 3.478 1.557 3.478 3.478 0 1.92-1.557 3.477-3.478 3.477-.749 0-1.442-.239-2.01-.643l-.098.169-2.375 2.374c-.19.189-.543.143-.79-.104s-.293-.601-.104-.791zm5.377-2.27c1.221 0 2.213-.991 2.213-2.213 0-1.221-.992-2.213-2.213-2.213-1.222 0-2.213.992-2.213 2.213.001 1.222.992 2.213 2.213 2.213z"/>
+    </g>
+</svg>
--- a/resources/lib/oojs-ui/themes/mediawiki/images/indicators/search-rtl.png
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/indicators/search-rtl.png
--- a/resources/lib/oojs-ui/themes/mediawiki/images/indicators/search-rtl.svg
+++ b/resources/lib/oojs-ui/themes/mediawiki/images/indicators/search-rtl.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <g id="search">
+        <path id="path3051" d="M1.631 9.474l2.374-2.375.169-.099c-.403-.566-.643-1.26-.643-2.009.001-1.92 1.558-3.477 3.477-3.477 1.921 0 3.478 1.557 3.478 3.478 0 1.92-1.557 3.477-3.478 3.477-.749 0-1.442-.239-2.01-.643l-.098.169-2.375 2.374c-.19.189-.543.143-.79-.104s-.293-.601-.104-.791zm5.377-2.27c1.221 0 2.213-.991 2.213-2.213 0-1.221-.992-2.213-2.213-2.213-1.222 0-2.213.992-2.213 2.213.001 1.222.992 2.213 2.213 2.213z"/>
+    </g>
+</svg>
--- a/resources/lib/oojs-ui/themes/mediawiki/indicators.json
+++ b/resources/lib/oojs-ui/themes/mediawiki/indicators.json
@ -20,6 +20,10 @@
 			"ltr": "images/indicators/arrow-rtl.svg",
 			"rtl": "images/indicators/arrow-ltr.svg"
 		} },
-		"required": { "file": "images/indicators/required.svg" }
+		"required": { "file": "images/indicators/required.svg" },
+		"search": { "file": {
+			"ltr": "images/indicators/search-ltr.svg",
+			"rtl": "images/indicators/search-rtl.svg"
+		} }
 	}
 }