Update OOjs UI to v0.2.3
[lhc/web/wiklou.git] / resources / lib / oojs-ui / oojs-ui.js
index dae6b07..d42139e 100644 (file)
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.1.0-pre (7922a50558)
+ * OOjs UI v0.2.3
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2014 OOjs Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2014-11-19T23:18:49Z
+ * Date: 2014-11-26T23:37:00Z
  */
 ( function ( OO ) {
 
@@ -101,7 +101,7 @@ OO.ui.getLocalValue = function ( obj, lang, fallback ) {
  *
  * @param {HTMLElement|HTMLElement[]} containers Container node(s) to search in
  * @param {HTMLElement} contained Node to find
- * @param {boolean} [matchContainers] Include the container(s) in the list of nodes to match, otherwise only match descendents
+ * @param {boolean} [matchContainers] Include the container(s) in the list of nodes to match, otherwise only match descendants
  * @return {boolean} The node is in the list of target nodes
  */
 OO.ui.contains = function ( containers, contained, matchContainers ) {
@@ -314,7 +314,7 @@ OO.ui.PendingElement.prototype.popPending = function () {
  * @param {Object} [config] Configuration options
  */
 OO.ui.ActionSet = function OoUiActionSet( config ) {
-       // Configuration intialization
+       // Configuration initialization
        config = config || {};
 
        // Mixin constructors
@@ -656,7 +656,7 @@ OO.ui.ActionSet.prototype.clear = function () {
 /**
  * Organize actions.
  *
- * This is called whenver organized information is requested. It will only reorganize the actions
+ * This is called whenever organized information is requested. It will only reorganize the actions
  * if something has changed since the last time it ran.
  *
  * @private
@@ -673,7 +673,7 @@ OO.ui.ActionSet.prototype.organize = function () {
                for ( i = 0, iLen = this.list.length; i < iLen; i++ ) {
                        action = this.list[i];
                        if ( action.isVisible() ) {
-                               // Populate catgeories
+                               // Populate categories
                                for ( category in this.categories ) {
                                        if ( !this.categorized[category] ) {
                                                this.categorized[category] = {};
@@ -723,6 +723,7 @@ OO.ui.ActionSet.prototype.organize = function () {
  * @cfg {string[]} [classes] CSS class names to add
  * @cfg {string} [text] Text to insert
  * @cfg {jQuery} [$content] Content elements to append (after text)
+ * @cfg {Mixed} [data] Element data
  */
 OO.ui.Element = function OoUiElement( config ) {
        // Configuration initialization
@@ -730,6 +731,7 @@ OO.ui.Element = function OoUiElement( config ) {
 
        // Properties
        this.$ = config.$ || OO.ui.Element.getJQuery( document );
+       this.data = config.data;
        this.$element = this.$( this.$.context.createElement( this.getTagName() ) );
        this.elementGroup = null;
        this.debouncedUpdateThemeClassesHandler = this.debouncedUpdateThemeClasses.bind( this );
@@ -1135,6 +1137,26 @@ OO.ui.Element.offDOMEvent = function ( el, event, callback ) {
 
 /* Methods */
 
+/**
+ * Get element data.
+ *
+ * @return {Mixed} Element data
+ */
+OO.ui.Element.prototype.getData = function () {
+       return this.data;
+};
+
+/**
+ * Set element data.
+ *
+ * @param {Mixed} Element data
+ * @chainable
+ */
+OO.ui.Element.prototype.setData = function ( data ) {
+       this.data = data;
+       return this;
+};
+
 /**
  * Check if element supports one or more methods.
  *
@@ -1158,7 +1180,7 @@ OO.ui.Element.prototype.supports = function ( methods ) {
 /**
  * Update the theme-provided classes.
  *
- * @localdoc This is called in element mixins and widget classes anytime state changes.
+ * @localdoc This is called in element mixins and widget classes any time state changes.
  *   Updating is debounced, minimizing overhead of changing multiple attributes and
  *   guaranteeing that theme updates do not occur within an element's constructor
  */
@@ -1451,8 +1473,8 @@ OO.ui.Widget.prototype.updateDisabled = function () {
  *
  * Each process (setup, ready, hold and teardown) can be extended in subclasses by overriding
  * {@link #getSetupProcess}, {@link #getReadyProcess}, {@link #getHoldProcess} and
- * {@link #getTeardownProcess} respectively. Each process is executed in series, so asynchonous
- * processing can complete. Always assume window processes are executed asychronously. See
+ * {@link #getTeardownProcess} respectively. Each process is executed in series, so asynchronous
+ * processing can complete. Always assume window processes are executed asynchronously. See
  * OO.ui.Process for more details about how to work with processes. Some events, as well as the
  * #open and #close methods, provide promises which are resolved when the window enters a new state.
  *
@@ -1494,7 +1516,7 @@ OO.ui.Window = function OoUiWindow( config ) {
        this.$frame.addClass( 'oo-ui-window-frame' );
        this.$overlay.addClass( 'oo-ui-window-overlay' );
 
-       // NOTE: Additional intitialization will occur when #setManager is called
+       // NOTE: Additional initialization will occur when #setManager is called
 };
 
 /* Setup */
@@ -1734,11 +1756,20 @@ OO.ui.Window.prototype.getSize = function () {
  * @return {number} Content height
  */
 OO.ui.Window.prototype.getContentHeight = function () {
-       // Temporarily resize the frame so getBodyHeight() can use scrollHeight measurements
-       var bodyHeight, oldHeight = this.$frame[0].style.height;
-       this.$frame[0].style.height = '1px';
+       // Temporarily resize the frame so getBodyHeight() can use scrollHeight measurements.
+       // Disable transitions first, otherwise we'll get values from when the window was animating.
+       var bodyHeight, oldHeight, oldTransition,
+               styleObj = this.$frame[0].style;
+       oldTransition = styleObj.transition || styleObj.OTransition || styleObj.MsTransition ||
+               styleObj.MozTransition || styleObj.WebkitTransition;
+       styleObj.transition = styleObj.OTransition = styleObj.MsTransition =
+               styleObj.MozTransition = styleObj.WebkitTransition = 'none';
+       oldHeight = styleObj.height;
+       styleObj.height = '1px';
        bodyHeight = this.getBodyHeight();
-       this.$frame[0].style.height = oldHeight;
+       styleObj.height = oldHeight;
+       styleObj.transition = styleObj.OTransition = styleObj.MsTransition =
+               styleObj.MozTransition = styleObj.WebkitTransition = oldTransition;
 
        return Math.round(
                // Add buffer for border
@@ -1840,7 +1871,7 @@ OO.ui.Window.prototype.getTeardownProcess = function () {
 /**
  * Toggle visibility of window.
  *
- * If the window is isolated and hasn't fully loaded yet, the visiblity property will be used
+ * If the window is isolated and hasn't fully loaded yet, the visibility property will be used
  * instead of display.
  *
  * @param {boolean} [show] Make window visible, omit to toggle visibility
@@ -2013,7 +2044,7 @@ OO.ui.Window.prototype.close = function ( data ) {
 /**
  * Setup window.
  *
- * This is called by OO.ui.WindowManager durring window opening, and should not be called directly
+ * This is called by OO.ui.WindowManager during window opening, and should not be called directly
  * by other systems.
  *
  * @param {Object} [data] Window opening data
@@ -2038,7 +2069,7 @@ OO.ui.Window.prototype.setup = function ( data ) {
 /**
  * Ready window.
  *
- * This is called by OO.ui.WindowManager durring window opening, and should not be called directly
+ * This is called by OO.ui.WindowManager during window opening, and should not be called directly
  * by other systems.
  *
  * @param {Object} [data] Window opening data
@@ -2062,7 +2093,7 @@ OO.ui.Window.prototype.ready = function ( data ) {
 /**
  * Hold window.
  *
- * This is called by OO.ui.WindowManager durring window closing, and should not be called directly
+ * This is called by OO.ui.WindowManager during window closing, and should not be called directly
  * by other systems.
  *
  * @param {Object} [data] Window closing data
@@ -2093,7 +2124,7 @@ OO.ui.Window.prototype.hold = function ( data ) {
 /**
  * Teardown window.
  *
- * This is called by OO.ui.WindowManager durring window closing, and should not be called directly
+ * This is called by OO.ui.WindowManager during window closing, and should not be called directly
  * by other systems.
  *
  * @param {Object} [data] Window closing data
@@ -2253,6 +2284,7 @@ OO.ui.Dialog = function OoUiDialog( config ) {
        this.actions = new OO.ui.ActionSet();
        this.attachedActions = [];
        this.currentAction = null;
+       this.onDocumentKeyDownHandler = this.onDocumentKeyDown.bind( this );
 
        // Events
        this.actions.connect( this, {
@@ -2416,6 +2448,10 @@ OO.ui.Dialog.prototype.getSetupProcess = function ( data ) {
                                );
                        }
                        this.actions.add( items );
+
+                       if ( this.constructor.static.escapable ) {
+                               this.$document.on( 'keydown', this.onDocumentKeyDownHandler );
+                       }
                }, this );
 };
 
@@ -2426,6 +2462,10 @@ OO.ui.Dialog.prototype.getTeardownProcess = function ( data ) {
        // Parent method
        return OO.ui.Dialog.super.prototype.getTeardownProcess.call( this, data )
                .first( function () {
+                       if ( this.constructor.static.escapable ) {
+                               this.$document.off( 'keydown', this.onDocumentKeyDownHandler );
+                       }
+
                        this.actions.clear();
                        this.currentAction = null;
                }, this );
@@ -2441,11 +2481,6 @@ OO.ui.Dialog.prototype.initialize = function () {
        // Properties
        this.title = new OO.ui.LabelWidget( { $: this.$ } );
 
-       // Events
-       if ( this.constructor.static.escapable ) {
-               this.$document.on( 'keydown', this.onDocumentKeyDown.bind( this ) );
-       }
-
        // Initialization
        this.$content.addClass( 'oo-ui-dialog-content' );
        this.setPendingElement( this.$head );
@@ -3162,7 +3197,7 @@ OO.ui.WindowManager.prototype.toggleAriaIsolation = function ( isolate ) {
                                .attr( 'aria-hidden', '' );
                }
        } else if ( this.$ariaHidden ) {
-               // Restore screen reader visiblity
+               // Restore screen reader visibility
                this.$ariaHidden.removeAttr( 'aria-hidden' );
                this.$ariaHidden = null;
        }
@@ -3422,7 +3457,15 @@ OO.inheritClass( OO.ui.ToolFactory, OO.Factory );
 
 /* Methods */
 
-/** */
+/**
+ * Get tools from the factory
+ *
+ * @param {Array} include Included tools
+ * @param {Array} exclude Excluded tools
+ * @param {Array} promote Promoted tools
+ * @param {Array} demote Demoted tools
+ * @return {string[]} List of tools
+ */
 OO.ui.ToolFactory.prototype.getTools = function ( include, exclude, promote, demote ) {
        var i, len, included, promoted, demoted,
                auto = [],
@@ -3592,7 +3635,7 @@ OO.ui.Theme.prototype.getElementClasses = function ( /* element */ ) {
 /**
  * Update CSS classes provided by the theme.
  *
- * For elements with theme logic hooks, this should be called anytime there's a state change.
+ * For elements with theme logic hooks, this should be called any time there's a state change.
  *
  * @param {OO.ui.Element} element Element for which to update classes
  * @return {Object.<string,string[]>} Categorized class names with `on` and `off` lists
@@ -3711,7 +3754,7 @@ OO.ui.ButtonElement.prototype.onMouseUp = function ( e ) {
        if ( this.isDisabled() || e.which !== 1 ) {
                return false;
        }
-       // Restore the tab-index after the button is up to restore the button's accesssibility
+       // Restore the tab-index after the button is up to restore the button's accessibility
        this.$button.attr( 'tabindex', this.tabIndex );
        this.$element.removeClass( 'oo-ui-buttonElement-pressed' );
        // Stop listening for mouseup, since we only needed this once
@@ -3814,7 +3857,7 @@ OO.ui.ButtonElement.prototype.setActive = function ( value ) {
  * @cfg {jQuery} [$group] Container node, assigned to #$group, omit to use a generated `<div>`
  */
 OO.ui.GroupElement = function OoUiGroupElement( config ) {
-       // Configuration intialization
+       // Configuration initialization
        config = config || {};
 
        // Properties
@@ -3862,6 +3905,51 @@ OO.ui.GroupElement.prototype.getItems = function () {
        return this.items.slice( 0 );
 };
 
+/**
+ * Get an item by its data.
+ *
+ * Data is compared by a hash of its value. Only the first item with matching data will be returned.
+ *
+ * @param {Object} data Item data to search for
+ * @return {OO.ui.Element|null} Item with equivalent data, `null` if none exists
+ */
+OO.ui.GroupElement.prototype.getItemFromData = function ( data ) {
+       var i, len, item,
+               hash = OO.getHash( data );
+
+       for ( i = 0, len = this.items.length; i < len; i++ ) {
+               item = this.items[i];
+               if ( hash === OO.getHash( item.getData() ) ) {
+                       return item;
+               }
+       }
+
+       return null;
+};
+
+/**
+ * Get items by their data.
+ *
+ * Data is compared by a hash of its value. All items with matching data will be returned.
+ *
+ * @param {Object} data Item data to search for
+ * @return {OO.ui.Element[]} Items with equivalent data
+ */
+OO.ui.GroupElement.prototype.getItemsFromData = function ( data ) {
+       var i, len, item,
+               hash = OO.getHash( data ),
+               items = [];
+
+       for ( i = 0, len = this.items.length; i < len; i++ ) {
+               item = this.items[i];
+               if ( hash === OO.getHash( item.getData() ) ) {
+                       items.push( item );
+               }
+       }
+
+       return items;
+};
+
 /**
  * Add an aggregate item event.
  *
@@ -4052,7 +4140,7 @@ OO.ui.GroupElement.prototype.clearItems = function () {
  * @cfg {string} [iconTitle] Icon title text or a function that returns text
  */
 OO.ui.IconElement = function OoUiIconElement( config ) {
-       // Configuration intialization
+       // Configuration initialization
        config = config || {};
 
        // Properties
@@ -4474,7 +4562,6 @@ OO.ui.LabelElement.prototype.setLabelContent = function ( label ) {
        } else {
                this.$label.empty();
        }
-       this.$label.css( 'display', !label ? 'none' : '' );
 };
 
 /**
@@ -5287,7 +5374,9 @@ OO.ui.Toolbar = function OoUiToolbar( toolFactory, toolGroupFactory, config ) {
        if ( config.actions ) {
                this.$bar.append( this.$actions.addClass( 'oo-ui-toolbar-actions' ) );
        }
-       this.$bar.append( this.$group, '<div style="clear:both"></div>' );
+       this.$bar
+               .addClass( 'oo-ui-toolbar-bar' )
+               .append( this.$group, '<div style="clear:both"></div>' );
        if ( config.shadow ) {
                this.$bar.append( '<div class="oo-ui-toolbar-shadow"></div>' );
        }
@@ -5810,7 +5899,7 @@ OO.ui.MessageDialog.static.verbose = false;
  * Dialog title.
  *
  * A confirmation dialog's title should describe what the progressive action will do. An alert
- * dialog's title should describe what event occured.
+ * dialog's title should describe what event occurred.
  *
  * @static
  * inheritable
@@ -5820,7 +5909,7 @@ OO.ui.MessageDialog.static.title = null;
 
 /**
  * A confirmation dialog's message should describe the consequences of the progressive action. An
- * alert dialog's message should describe why the event occured.
+ * alert dialog's message should describe why the event occurred.
  *
  * @static
  * inheritable
@@ -5840,7 +5929,7 @@ OO.ui.MessageDialog.static.actions = [
  */
 OO.ui.MessageDialog.prototype.onActionResize = function ( action ) {
        this.fitActions();
-       return OO.ui.ProcessDialog.super.prototype.onActionResize.call( this, action );
+       return OO.ui.MessageDialog.super.prototype.onActionResize.call( this, action );
 };
 
 /**
@@ -5907,7 +5996,45 @@ OO.ui.MessageDialog.prototype.getSetupProcess = function ( data ) {
  * @inheritdoc
  */
 OO.ui.MessageDialog.prototype.getBodyHeight = function () {
-       return Math.round( this.text.$element.outerHeight( true ) );
+       var bodyHeight, oldOverflow,
+               $scrollable = this.container.$element;
+
+       oldOverflow = $scrollable[0].style.overflow;
+       $scrollable[0].style.overflow = 'hidden';
+
+       // Force… ugh… something to happen
+       $scrollable.contents().hide();
+       $scrollable.height();
+       $scrollable.contents().show();
+
+       bodyHeight = Math.round( this.text.$element.outerHeight( true ) );
+       $scrollable[0].style.overflow = oldOverflow;
+
+       return bodyHeight;
+};
+
+/**
+ * @inheritdoc
+ */
+OO.ui.MessageDialog.prototype.setDimensions = function ( dim ) {
+       var $scrollable = this.container.$element;
+       OO.ui.MessageDialog.super.prototype.setDimensions.call( this, dim );
+
+       // Twiddle the overflow property, otherwise an unnecessary scrollbar will be produced.
+       // Need to do it after transition completes (250ms), add 50ms just in case.
+       setTimeout( function () {
+               var oldOverflow = $scrollable[0].style.overflow;
+               $scrollable[0].style.overflow = 'hidden';
+
+               // Force… ugh… something to happen
+               $scrollable.contents().hide();
+               $scrollable.height();
+               $scrollable.contents().show();
+
+               $scrollable[0].style.overflow = oldOverflow;
+       }, 300 );
+
+       return this;
 };
 
 /**
@@ -5966,10 +6093,9 @@ OO.ui.MessageDialog.prototype.attachActions = function () {
                special.primary.toggleFramed( false );
        }
 
+       this.manager.updateWindowSize( this );
        this.fitActions();
-       if ( !this.isOpening() ) {
-               this.manager.updateWindowSize( this );
-       }
+
        this.$body.css( 'bottom', this.$foot.outerHeight( true ) );
 };
 
@@ -6166,7 +6292,7 @@ OO.ui.ProcessDialog.prototype.fitLabel = function () {
 };
 
 /**
- * Handle errors that occured durring accept or reject processes.
+ * Handle errors that occurred during accept or reject processes.
  *
  * @param {OO.ui.Error[]} errors Errors to be handled
  */
@@ -6244,7 +6370,7 @@ OO.ui.BookletLayout = function OoUiBookletLayout( config ) {
        if ( this.outlined ) {
                this.editable = !!config.editable;
                this.outlineControlsWidget = null;
-               this.outlineWidget = new OO.ui.OutlineWidget( { $: this.$ } );
+               this.outlineSelectWidget = new OO.ui.OutlineSelectWidget( { $: this.$ } );
                this.outlinePanel = new OO.ui.PanelLayout( { $: this.$, scrollable: true } );
                this.gridLayout = new OO.ui.GridLayout(
                        [ this.outlinePanel, this.stackLayout ],
@@ -6253,7 +6379,7 @@ OO.ui.BookletLayout = function OoUiBookletLayout( config ) {
                this.outlineVisible = true;
                if ( this.editable ) {
                        this.outlineControlsWidget = new OO.ui.OutlineControlsWidget(
-                               this.outlineWidget, { $: this.$ }
+                               this.outlineSelectWidget, { $: this.$ }
                        );
                }
        }
@@ -6261,7 +6387,7 @@ OO.ui.BookletLayout = function OoUiBookletLayout( config ) {
        // Events
        this.stackLayout.connect( this, { set: 'onStackLayoutSet' } );
        if ( this.outlined ) {
-               this.outlineWidget.connect( this, { select: 'onOutlineWidgetSelect' } );
+               this.outlineSelectWidget.connect( this, { select: 'onOutlineSelectWidgetSelect' } );
        }
        if ( this.autoFocus ) {
                // Event 'focus' does not bubble, but 'focusin' does
@@ -6274,7 +6400,7 @@ OO.ui.BookletLayout = function OoUiBookletLayout( config ) {
        if ( this.outlined ) {
                this.outlinePanel.$element
                        .addClass( 'oo-ui-bookletLayout-outlinePanel' )
-                       .append( this.outlineWidget.$element );
+                       .append( this.outlineSelectWidget.$element );
                if ( this.editable ) {
                        this.outlinePanel.$element
                                .addClass( 'oo-ui-bookletLayout-outlinePanel-editable' )
@@ -6335,28 +6461,46 @@ OO.ui.BookletLayout.prototype.onStackLayoutFocus = function ( e ) {
  * @param {OO.ui.PanelLayout|null} page The page panel that is now the current panel
  */
 OO.ui.BookletLayout.prototype.onStackLayoutSet = function ( page ) {
-       var $input, layout = this;
+       var layout = this;
        if ( page ) {
                page.scrollElementIntoView( { complete: function () {
                        if ( layout.autoFocus ) {
-                               // Set focus to the first input if nothing on the page is focused yet
-                               if ( !page.$element.find( ':focus' ).length ) {
-                                       $input = page.$element.find( ':input:first' );
-                                       if ( $input.length ) {
-                                               $input[0].focus();
-                                       }
-                               }
+                               layout.focus();
                        }
                } } );
        }
 };
 
+/**
+ * Focus the first input in the current page.
+ *
+ * If no page is selected, the first selectable page will be selected.
+ * If the focus is already in an element on the current page, nothing will happen.
+ */
+OO.ui.BookletLayout.prototype.focus = function () {
+       var $input, page = this.stackLayout.getCurrentItem();
+       if ( !page && this.outlined ) {
+               this.selectFirstSelectablePage();
+               page = this.stackLayout.getCurrentItem();
+               if ( !page ) {
+                       return;
+               }
+       }
+       // Only change the focus if is not already in the current page
+       if ( !page.$element.find( ':focus' ).length ) {
+               $input = page.$element.find( ':input:first' );
+               if ( $input.length ) {
+                       $input[0].focus();
+               }
+       }
+};
+
 /**
  * Handle outline widget select events.
  *
  * @param {OO.ui.OptionWidget|null} item Selected item
  */
-OO.ui.BookletLayout.prototype.onOutlineWidgetSelect = function ( item ) {
+OO.ui.BookletLayout.prototype.onOutlineSelectWidgetSelect = function ( item ) {
        if ( item ) {
                this.setPage( item.getData() );
        }
@@ -6421,16 +6565,16 @@ OO.ui.BookletLayout.prototype.getClosestPage = function ( page ) {
                prev = pages[index - 1];
                // Prefer adjacent pages at the same level
                if ( this.outlined ) {
-                       level = this.outlineWidget.getItemFromData( page.getName() ).getLevel();
+                       level = this.outlineSelectWidget.getItemFromData( page.getName() ).getLevel();
                        if (
                                prev &&
-                               level === this.outlineWidget.getItemFromData( prev.getName() ).getLevel()
+                               level === this.outlineSelectWidget.getItemFromData( prev.getName() ).getLevel()
                        ) {
                                return prev;
                        }
                        if (
                                next &&
-                               level === this.outlineWidget.getItemFromData( next.getName() ).getLevel()
+                               level === this.outlineSelectWidget.getItemFromData( next.getName() ).getLevel()
                        ) {
                                return next;
                        }
@@ -6442,10 +6586,10 @@ OO.ui.BookletLayout.prototype.getClosestPage = function ( page ) {
 /**
  * Get the outline widget.
  *
- * @return {OO.ui.OutlineWidget|null} Outline widget, or null if boolet has no outline
+ * @return {OO.ui.OutlineSelectWidget|null} Outline widget, or null if booklet has no outline
  */
 OO.ui.BookletLayout.prototype.getOutline = function () {
-       return this.outlineWidget;
+       return this.outlineSelectWidget;
 };
 
 /**
@@ -6517,15 +6661,15 @@ OO.ui.BookletLayout.prototype.addPages = function ( pages, index ) {
                name = page.getName();
                this.pages[page.getName()] = page;
                if ( this.outlined ) {
-                       item = new OO.ui.OutlineItemWidget( name, page, { $: this.$ } );
+                       item = new OO.ui.OutlineOptionWidget( { $: this.$, data: name } );
                        page.setOutlineItem( item );
                        items.push( item );
                }
        }
 
        if ( this.outlined && items.length ) {
-               this.outlineWidget.addItems( items, index );
-               this.updateOutlineWidget();
+               this.outlineSelectWidget.addItems( items, index );
+               this.selectFirstSelectablePage();
        }
        this.stackLayout.addItems( pages, index );
        this.emit( 'add', pages, index );
@@ -6548,13 +6692,13 @@ OO.ui.BookletLayout.prototype.removePages = function ( pages ) {
                name = page.getName();
                delete this.pages[name];
                if ( this.outlined ) {
-                       items.push( this.outlineWidget.getItemFromData( name ) );
+                       items.push( this.outlineSelectWidget.getItemFromData( name ) );
                        page.setOutlineItem( null );
                }
        }
        if ( this.outlined && items.length ) {
-               this.outlineWidget.removeItems( items );
-               this.updateOutlineWidget();
+               this.outlineSelectWidget.removeItems( items );
+               this.selectFirstSelectablePage();
        }
        this.stackLayout.removeItems( pages );
        this.emit( 'remove', pages );
@@ -6575,7 +6719,7 @@ OO.ui.BookletLayout.prototype.clearPages = function () {
        this.pages = {};
        this.currentPageName = null;
        if ( this.outlined ) {
-               this.outlineWidget.clearItems();
+               this.outlineSelectWidget.clearItems();
                for ( i = 0, len = pages.length; i < len; i++ ) {
                        pages[i].setOutlineItem( null );
                }
@@ -6600,9 +6744,9 @@ OO.ui.BookletLayout.prototype.setPage = function ( name ) {
 
        if ( name !== this.currentPageName ) {
                if ( this.outlined ) {
-                       selectedItem = this.outlineWidget.getSelectedItem();
+                       selectedItem = this.outlineSelectWidget.getSelectedItem();
                        if ( selectedItem && selectedItem.getData() !== name ) {
-                               this.outlineWidget.selectItem( this.outlineWidget.getItemFromData( name ) );
+                               this.outlineSelectWidget.selectItem( this.outlineSelectWidget.getItemFromData( name ) );
                        }
                }
                if ( page ) {
@@ -6627,14 +6771,13 @@ OO.ui.BookletLayout.prototype.setPage = function ( name ) {
 };
 
 /**
- * Call this after adding or removing items from the OutlineWidget.
+ * Select the first selectable page.
  *
  * @chainable
  */
-OO.ui.BookletLayout.prototype.updateOutlineWidget = function () {
-       // Auto-select first item when nothing is selected anymore
-       if ( !this.outlineWidget.getSelectedItem() ) {
-               this.outlineWidget.selectItem( this.outlineWidget.getFirstSelectableItem() );
+OO.ui.BookletLayout.prototype.selectFirstSelectablePage = function () {
+       if ( !this.outlineSelectWidget.getSelectedItem() ) {
+               this.outlineSelectWidget.selectItem( this.outlineSelectWidget.getFirstSelectableItem() );
        }
 
        return this;
@@ -6667,6 +6810,9 @@ OO.ui.FieldLayout = function OoUiFieldLayout( fieldWidget, config ) {
        // Configuration initialization
        config = $.extend( { align: 'left' }, config );
 
+       // Properties (must be set before parent constructor, which calls #getTagName)
+       this.fieldWidget = fieldWidget;
+
        // Parent constructor
        OO.ui.FieldLayout.super.call( this, config );
 
@@ -6675,7 +6821,6 @@ OO.ui.FieldLayout = function OoUiFieldLayout( fieldWidget, config ) {
 
        // Properties
        this.$field = this.$( '<div>' );
-       this.fieldWidget = fieldWidget;
        this.align = null;
        if ( config.help ) {
                this.popupButtonWidget = new OO.ui.PopupButtonWidget( {
@@ -6715,12 +6860,19 @@ OO.ui.FieldLayout = function OoUiFieldLayout( fieldWidget, config ) {
 OO.inheritClass( OO.ui.FieldLayout, OO.ui.Layout );
 OO.mixinClass( OO.ui.FieldLayout, OO.ui.LabelElement );
 
-/* Static Properties */
-
-OO.ui.FieldLayout.static.tagName = 'label';
-
 /* Methods */
 
+/**
+ * @inheritdoc
+ */
+OO.ui.FieldLayout.prototype.getTagName = function () {
+       if ( this.fieldWidget instanceof OO.ui.InputWidget ) {
+               return 'label';
+       } else {
+               return 'div';
+       }
+};
+
 /**
  * Handle field disable events.
  *
@@ -7036,7 +7188,7 @@ OO.ui.GridLayout.prototype.update = function () {
  *
  * @param {number} x Horizontal position
  * @param {number} y Vertical position
- * @return {OO.ui.PanelLayout} The panel at the given postion
+ * @return {OO.ui.PanelLayout} The panel at the given position
  */
 OO.ui.GridLayout.prototype.getPanel = function ( x, y ) {
        return this.panels[ ( x * this.widths.length ) + y ];
@@ -7143,7 +7295,7 @@ OO.ui.PageLayout.prototype.isActive = function () {
 /**
  * Get outline item.
  *
- * @return {OO.ui.OutlineItemWidget|null} Outline item widget
+ * @return {OO.ui.OutlineOptionWidget|null} Outline item widget
  */
 OO.ui.PageLayout.prototype.getOutlineItem = function () {
        return this.outlineItem;
@@ -7155,9 +7307,9 @@ OO.ui.PageLayout.prototype.getOutlineItem = function () {
  * @localdoc Subclasses should override #setupOutlineItem instead of this method to adjust the
  *   outline item as desired; this method is called for setting (with an object) and unsetting
  *   (with null) and overriding methods would have to check the value of `outlineItem` to avoid
- *   operating on null instead of an OO.ui.OutlineItemWidget object.
+ *   operating on null instead of an OO.ui.OutlineOptionWidget object.
  *
- * @param {OO.ui.OutlineItemWidget|null} outlineItem Outline item widget, null to clear
+ * @param {OO.ui.OutlineOptionWidget|null} outlineItem Outline item widget, null to clear
  * @chainable
  */
 OO.ui.PageLayout.prototype.setOutlineItem = function ( outlineItem ) {
@@ -7173,7 +7325,7 @@ OO.ui.PageLayout.prototype.setOutlineItem = function ( outlineItem ) {
  *
  * @localdoc Subclasses should override this method to adjust the outline item as desired.
  *
- * @param {OO.ui.OutlineItemWidget} outlineItem Outline item widget to setup
+ * @param {OO.ui.OutlineOptionWidget} outlineItem Outline item widget to setup
  * @chainable
  */
 OO.ui.PageLayout.prototype.setupOutlineItem = function () {
@@ -7586,7 +7738,7 @@ OO.ui.PopupToolGroup.prototype.setActive = function ( value ) {
  * @cfg {boolean} [expanded=false] Whether the collapsible tools are expanded by default
  */
 OO.ui.ListToolGroup = function OoUiListToolGroup( toolbar, config ) {
-       // Configuration intialization
+       // Configuration initialization
        config = config || {};
 
        // Properties (must be set before parent constructor, which calls #populate)
@@ -7863,7 +8015,7 @@ OO.ui.GroupWidget.prototype.setDisabled = function ( disabled ) {
  * Mixin for widgets used as items in widgets that inherit OO.ui.GroupWidget.
  *
  * Item widgets have a reference to a OO.ui.GroupWidget while they are attached to the group. This
- * allows bidrectional communication.
+ * allows bidirectional communication.
  *
  * Use together with OO.ui.GroupWidget to make disabled state inheritable.
  *
@@ -7932,7 +8084,7 @@ OO.ui.LookupInputWidget = function OoUiLookupInputWidget( input, config ) {
        // Properties
        this.lookupInput = input;
        this.$overlay = config.$overlay || this.$element;
-       this.lookupMenu = new OO.ui.TextInputMenuWidget( this, {
+       this.lookupMenu = new OO.ui.TextInputMenuSelectWidget( this, {
                $: OO.ui.Element.getJQuery( this.$overlay ),
                input: this.lookupInput,
                $container: config.$container
@@ -8014,7 +8166,7 @@ OO.ui.LookupInputWidget.prototype.onLookupMenuToggle = function ( visible ) {
        if ( !visible ) {
                // When the menu is hidden, abort any active request and clear the menu.
                // This has to be done here in addition to closeLookupMenu(), because
-               // MenuWidget will close itself when the user presses Esc.
+               // MenuSelectWidget will close itself when the user presses Esc.
                this.abortLookupRequest();
                this.lookupMenu.clearItems();
        }
@@ -8023,7 +8175,7 @@ OO.ui.LookupInputWidget.prototype.onLookupMenuToggle = function ( visible ) {
 /**
  * Get lookup menu.
  *
- * @return {OO.ui.TextInputMenuWidget}
+ * @return {OO.ui.TextInputMenuSelectWidget}
  */
 OO.ui.LookupInputWidget.prototype.getLookupMenu = function () {
        return this.lookupMenu;
@@ -8200,7 +8352,7 @@ OO.ui.LookupInputWidget.prototype.getLookupRequest = function () {
  *
  * @abstract
  * @param {Mixed} data Cached result data, usually an array
- * @return {OO.ui.MenuItemWidget[]} Menu items
+ * @return {OO.ui.MenuOptionWidget[]} Menu items
  */
 OO.ui.LookupInputWidget.prototype.getLookupMenuItemsFromData = function () {
        // Stub, implemented in subclass
@@ -8220,7 +8372,7 @@ OO.ui.LookupInputWidget.prototype.getLookupCacheItemFromData = function () {
 };
 
 /**
- * Set of controls for an OO.ui.OutlineWidget.
+ * Set of controls for an OO.ui.OutlineSelectWidget.
  *
  * Controls include moving items up and down, removing items, and adding different kinds of items.
  *
@@ -8230,7 +8382,7 @@ OO.ui.LookupInputWidget.prototype.getLookupCacheItemFromData = function () {
  * @mixins OO.ui.IconElement
  *
  * @constructor
- * @param {OO.ui.OutlineWidget} outline Outline to control
+ * @param {OO.ui.OutlineSelectWidget} outline Outline to control
  * @param {Object} [config] Configuration options
  */
 OO.ui.OutlineControlsWidget = function OoUiOutlineControlsWidget( outline, config ) {
@@ -8859,7 +9011,7 @@ OO.ui.ToggleButtonWidget.prototype.setValue = function ( value ) {
  * Dropdown menus provide a control for accessing a menu and compose a menu within the widget, which
  * can be accessed using the #getMenu method.
  *
- * Use with OO.ui.MenuItemWidget.
+ * Use with OO.ui.MenuOptionWidget.
  *
  * @class
  * @extends OO.ui.Widget
@@ -8886,7 +9038,7 @@ OO.ui.DropdownWidget = function OoUiDropdownWidget( config ) {
        OO.ui.TitledElement.call( this, $.extend( {}, config, { $titled: this.$label } ) );
 
        // Properties
-       this.menu = new OO.ui.MenuWidget( $.extend( { $: this.$, widget: this }, config.menu ) );
+       this.menu = new OO.ui.MenuSelectWidget( $.extend( { $: this.$, widget: this }, config.menu ) );
        this.$handle = this.$( '<span>' );
 
        // Events
@@ -8915,7 +9067,7 @@ OO.mixinClass( OO.ui.DropdownWidget, OO.ui.TitledElement );
 /**
  * Get the menu.
  *
- * @return {OO.ui.MenuWidget} Menu of widget
+ * @return {OO.ui.MenuSelectWidget} Menu of widget
  */
 OO.ui.DropdownWidget.prototype.getMenu = function () {
        return this.menu;
@@ -8924,7 +9076,7 @@ OO.ui.DropdownWidget.prototype.getMenu = function () {
 /**
  * Handles menu select events.
  *
- * @param {OO.ui.MenuItemWidget} item Selected menu item
+ * @param {OO.ui.MenuOptionWidget} item Selected menu item
  */
 OO.ui.DropdownWidget.prototype.onMenuSelect = function ( item ) {
        var selectedLabel;
@@ -9152,12 +9304,12 @@ OO.ui.InputWidget.prototype.setRTL = function ( isRTL ) {
  * @chainable
  */
 OO.ui.InputWidget.prototype.setValue = function ( value ) {
-       value = this.sanitizeValue( value );
+       value = this.cleanUpValue( value );
        if ( this.value !== value ) {
                this.value = value;
                this.emit( 'change', this.value );
        }
-       // Update the DOM if it has changed. Note that with sanitizeValue, it
+       // Update the DOM if it has changed. Note that with cleanUpValue, it
        // is possible for the DOM value to change without this.value changing.
        if ( this.$input.val() !== this.value ) {
                this.$input.val( this.value );
@@ -9166,15 +9318,15 @@ OO.ui.InputWidget.prototype.setValue = function ( value ) {
 };
 
 /**
- * Sanitize incoming value.
+ * Clean up incoming value.
  *
  * Ensures value is a string, and converts undefined and null to empty string.
  *
  * @private
  * @param {string} value Original value
- * @return {string} Sanitized value
+ * @return {string} Cleaned up value
  */
-OO.ui.InputWidget.prototype.sanitizeValue = function ( value ) {
+OO.ui.InputWidget.prototype.cleanUpValue = function ( value ) {
        if ( value === undefined || value === null ) {
                return '';
        } else if ( this.inputFilter ) {
@@ -9305,7 +9457,7 @@ OO.mixinClass( OO.ui.ButtonInputWidget, OO.ui.FlaggedElement );
  * @return {jQuery} Input element
  */
 OO.ui.ButtonInputWidget.prototype.getInputElement = function ( config ) {
-       // Configuration intialization
+       // Configuration initialization
        config = config || {};
 
        var html = '<' + ( config.useInputTag ? 'input' : 'button' ) + ' type="' + config.type + '">';
@@ -9451,6 +9603,74 @@ OO.ui.CheckboxInputWidget.prototype.onEdit = function () {
        }
 };
 
+/**
+ * Radio input widget.
+ *
+ * Radio buttons only make sense as a set, and you probably want to use the OO.ui.RadioSelectWidget
+ * class instead of using this class directly.
+ *
+ * This class doesn't make it possible to learn whether the radio button is selected ("pressed").
+ *
+ * @class
+ * @extends OO.ui.InputWidget
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @param {boolean} [config.selected=false] Whether the radio button is initially selected
+ */
+OO.ui.RadioInputWidget = function OoUiRadioInputWidget( config ) {
+       // Parent constructor
+       OO.ui.RadioInputWidget.super.call( this, config );
+
+       // Initialization
+       this.$element.addClass( 'oo-ui-radioInputWidget' );
+       this.setSelected( config.selected !== undefined ? config.selected : false );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.RadioInputWidget, OO.ui.InputWidget );
+
+/* Methods */
+
+/**
+ * Get input element.
+ *
+ * @private
+ * @return {jQuery} Input element
+ */
+OO.ui.RadioInputWidget.prototype.getInputElement = function () {
+       return this.$( '<input type="radio" />' );
+};
+
+/**
+ * @inheritdoc
+ */
+OO.ui.RadioInputWidget.prototype.onEdit = function () {
+       // RadioInputWidget doesn't track its state.
+};
+
+/**
+ * Set selection state of this radio button.
+ *
+ * @param {boolean} state Whether the button is selected
+ * @chainable
+ */
+OO.ui.RadioInputWidget.prototype.setSelected = function ( state ) {
+       // RadioInputWidget doesn't track its state.
+       this.$input.prop( 'checked', state );
+       return this;
+};
+
+/**
+ * Check if this radio button is selected.
+ *
+ * @return {boolean} Radio is selected
+ */
+OO.ui.RadioInputWidget.prototype.isSelected = function () {
+       return this.$input.prop( 'checked' );
+};
+
 /**
  * Input widget with a text field.
  *
@@ -9586,7 +9806,7 @@ OO.ui.TextInputWidget.prototype.onIndicatorMouseDown = function ( e ) {
  */
 OO.ui.TextInputWidget.prototype.onKeyPress = function ( e ) {
        if ( e.which === OO.ui.Keys.ENTER && !this.multiline ) {
-               this.emit( 'enter' );
+               this.emit( 'enter', e );
        }
 };
 
@@ -9633,7 +9853,7 @@ OO.ui.TextInputWidget.prototype.isReadOnly = function () {
 /**
  * Set the read-only state of the widget.
  *
- * This should probably change the widgets's appearance and prevent it from being used.
+ * This should probably change the widget's appearance and prevent it from being used.
  *
  * @param {boolean} state Make input read-only
  * @chainable
@@ -9786,7 +10006,7 @@ OO.ui.ComboBoxWidget = function OoUiComboBoxWidget( config ) {
                { $: this.$, indicator: 'down', disabled: this.isDisabled() },
                config.input
        ) );
-       this.menu = new OO.ui.TextInputMenuWidget( this.input, $.extend(
+       this.menu = new OO.ui.TextInputMenuSelectWidget( this.input, $.extend(
                {
                        $: OO.ui.Element.getJQuery( this.$overlay ),
                        widget: this,
@@ -9820,6 +10040,14 @@ OO.inheritClass( OO.ui.ComboBoxWidget, OO.ui.Widget );
 
 /* Methods */
 
+/**
+ * Get the combobox's menu.
+ * @return {OO.ui.TextInputMenuSelectWidget} Menu widget
+ */
+OO.ui.ComboBoxWidget.prototype.getMenu = function () {
+       return this.menu;
+};
+
 /**
  * Handle input change events.
  *
@@ -9899,6 +10127,7 @@ OO.ui.ComboBoxWidget.prototype.setDisabled = function ( disabled ) {
  *
  * @constructor
  * @param {Object} [config] Configuration options
+ * @cfg {OO.ui.InputWidget} [input] Input widget this label is for
  */
 OO.ui.LabelWidget = function OoUiLabelWidget( config ) {
        // Configuration initialization
@@ -9954,10 +10183,9 @@ OO.ui.LabelWidget.prototype.onClick = function () {
  * @mixins OO.ui.FlaggedElement
  *
  * @constructor
- * @param {Mixed} data Option data
  * @param {Object} [config] Configuration options
  */
-OO.ui.OptionWidget = function OoUiOptionWidget( data, config ) {
+OO.ui.OptionWidget = function OoUiOptionWidget( config ) {
        // Configuration initialization
        config = config || {};
 
@@ -9970,7 +10198,6 @@ OO.ui.OptionWidget = function OoUiOptionWidget( data, config ) {
        OO.ui.FlaggedElement.call( this, config );
 
        // Properties
-       this.data = data;
        this.selected = false;
        this.highlighted = false;
        this.pressed = false;
@@ -10134,15 +10361,6 @@ OO.ui.OptionWidget.prototype.flash = function () {
        return deferred.promise();
 };
 
-/**
- * Get option data.
- *
- * @return {Mixed} Option data
- */
-OO.ui.OptionWidget.prototype.getData = function () {
-       return this.data;
-};
-
 /**
  * Option widget with an option icon and indicator.
  *
@@ -10154,12 +10372,11 @@ OO.ui.OptionWidget.prototype.getData = function () {
  * @mixins OO.ui.IndicatorElement
  *
  * @constructor
- * @param {Mixed} data Option data
  * @param {Object} [config] Configuration options
  */
-OO.ui.DecoratedOptionWidget = function OoUiDecoratedOptionWidget( data, config ) {
+OO.ui.DecoratedOptionWidget = function OoUiDecoratedOptionWidget( config ) {
        // Parent constructor
-       OO.ui.DecoratedOptionWidget.super.call( this, data, config );
+       OO.ui.DecoratedOptionWidget.super.call( this, config );
 
        // Mixin constructors
        OO.ui.IconElement.call( this, config );
@@ -10188,12 +10405,11 @@ OO.mixinClass( OO.ui.OptionWidget, OO.ui.IndicatorElement );
  * @mixins OO.ui.ButtonElement
  *
  * @constructor
- * @param {Mixed} data Option data
  * @param {Object} [config] Configuration options
  */
-OO.ui.ButtonOptionWidget = function OoUiButtonOptionWidget( data, config ) {
+OO.ui.ButtonOptionWidget = function OoUiButtonOptionWidget( config ) {
        // Parent constructor
-       OO.ui.ButtonOptionWidget.super.call( this, data, config );
+       OO.ui.ButtonOptionWidget.super.call( this, config );
 
        // Mixin constructors
        OO.ui.ButtonElement.call( this, config );
@@ -10230,78 +10446,122 @@ OO.ui.ButtonOptionWidget.prototype.setSelected = function ( state ) {
 };
 
 /**
- * Item of an OO.ui.MenuWidget.
+ * Option widget that looks like a radio button.
+ *
+ * Use together with OO.ui.RadioSelectWidget.
+ *
+ * @class
+ * @extends OO.ui.OptionWidget
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ */
+OO.ui.RadioOptionWidget = function OoUiRadioOptionWidget( config ) {
+       // Parent constructor
+       OO.ui.RadioOptionWidget.super.call( this, config );
+
+       // Properties
+       this.radio = new OO.ui.RadioInputWidget( { value: config.data } );
+
+       // Initialization
+       this.$element
+               .addClass( 'oo-ui-radioOptionWidget' )
+               .prepend( this.radio.$element );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.RadioOptionWidget, OO.ui.OptionWidget );
+
+/* Static Properties */
+
+OO.ui.RadioOptionWidget.static.highlightable = false;
+
+OO.ui.RadioOptionWidget.static.pressable = false;
+
+/* Methods */
+
+/**
+ * @inheritdoc
+ */
+OO.ui.RadioOptionWidget.prototype.setSelected = function ( state ) {
+       OO.ui.RadioOptionWidget.super.prototype.setSelected.call( this, state );
+
+       this.radio.setSelected( state );
+
+       return this;
+};
+
+/**
+ * Item of an OO.ui.MenuSelectWidget.
  *
  * @class
  * @extends OO.ui.DecoratedOptionWidget
  *
  * @constructor
- * @param {Mixed} data Item data
  * @param {Object} [config] Configuration options
  */
-OO.ui.MenuItemWidget = function OoUiMenuItemWidget( data, config ) {
+OO.ui.MenuOptionWidget = function OoUiMenuOptionWidget( config ) {
        // Configuration initialization
        config = $.extend( { icon: 'check' }, config );
 
        // Parent constructor
-       OO.ui.MenuItemWidget.super.call( this, data, config );
+       OO.ui.MenuOptionWidget.super.call( this, config );
 
        // Initialization
        this.$element
                .attr( 'role', 'menuitem' )
-               .addClass( 'oo-ui-menuItemWidget' );
+               .addClass( 'oo-ui-menuOptionWidget' );
 };
 
 /* Setup */
 
-OO.inheritClass( OO.ui.MenuItemWidget, OO.ui.DecoratedOptionWidget );
+OO.inheritClass( OO.ui.MenuOptionWidget, OO.ui.DecoratedOptionWidget );
 
 /**
- * Section to group one or more items in a OO.ui.MenuWidget.
+ * Section to group one or more items in a OO.ui.MenuSelectWidget.
  *
  * @class
  * @extends OO.ui.DecoratedOptionWidget
  *
  * @constructor
- * @param {Mixed} data Item data
  * @param {Object} [config] Configuration options
  */
-OO.ui.MenuSectionItemWidget = function OoUiMenuSectionItemWidget( data, config ) {
+OO.ui.MenuSectionOptionWidget = function OoUiMenuSectionOptionWidget( config ) {
        // Parent constructor
-       OO.ui.MenuSectionItemWidget.super.call( this, data, config );
+       OO.ui.MenuSectionOptionWidget.super.call( this, config );
 
        // Initialization
-       this.$element.addClass( 'oo-ui-menuSectionItemWidget' );
+       this.$element.addClass( 'oo-ui-menuSectionOptionWidget' );
 };
 
 /* Setup */
 
-OO.inheritClass( OO.ui.MenuSectionItemWidget, OO.ui.DecoratedOptionWidget );
+OO.inheritClass( OO.ui.MenuSectionOptionWidget, OO.ui.DecoratedOptionWidget );
 
 /* Static Properties */
 
-OO.ui.MenuSectionItemWidget.static.selectable = false;
+OO.ui.MenuSectionOptionWidget.static.selectable = false;
 
-OO.ui.MenuSectionItemWidget.static.highlightable = false;
+OO.ui.MenuSectionOptionWidget.static.highlightable = false;
 
 /**
- * Items for an OO.ui.OutlineWidget.
+ * Items for an OO.ui.OutlineSelectWidget.
  *
  * @class
  * @extends OO.ui.DecoratedOptionWidget
  *
  * @constructor
- * @param {Mixed} data Item data
  * @param {Object} [config] Configuration options
  * @cfg {number} [level] Indentation level
  * @cfg {boolean} [movable] Allow modification from outline controls
  */
-OO.ui.OutlineItemWidget = function OoUiOutlineItemWidget( data, config ) {
+OO.ui.OutlineOptionWidget = function OoUiOutlineOptionWidget( config ) {
        // Configuration initialization
        config = config || {};
 
        // Parent constructor
-       OO.ui.OutlineItemWidget.super.call( this, data, config );
+       OO.ui.OutlineOptionWidget.super.call( this, config );
 
        // Properties
        this.level = 0;
@@ -10309,45 +10569,45 @@ OO.ui.OutlineItemWidget = function OoUiOutlineItemWidget( data, config ) {
        this.removable = !!config.removable;
 
        // Initialization
-       this.$element.addClass( 'oo-ui-outlineItemWidget' );
+       this.$element.addClass( 'oo-ui-outlineOptionWidget' );
        this.setLevel( config.level );
 };
 
 /* Setup */
 
-OO.inheritClass( OO.ui.OutlineItemWidget, OO.ui.DecoratedOptionWidget );
+OO.inheritClass( OO.ui.OutlineOptionWidget, OO.ui.DecoratedOptionWidget );
 
 /* Static Properties */
 
-OO.ui.OutlineItemWidget.static.highlightable = false;
+OO.ui.OutlineOptionWidget.static.highlightable = false;
 
-OO.ui.OutlineItemWidget.static.scrollIntoViewOnSelect = true;
+OO.ui.OutlineOptionWidget.static.scrollIntoViewOnSelect = true;
 
-OO.ui.OutlineItemWidget.static.levelClass = 'oo-ui-outlineItemWidget-level-';
+OO.ui.OutlineOptionWidget.static.levelClass = 'oo-ui-outlineOptionWidget-level-';
 
-OO.ui.OutlineItemWidget.static.levels = 3;
+OO.ui.OutlineOptionWidget.static.levels = 3;
 
 /* Methods */
 
 /**
  * Check if item is movable.
  *
- * Movablilty is used by outline controls.
+ * Movability is used by outline controls.
  *
  * @return {boolean} Item is movable
  */
-OO.ui.OutlineItemWidget.prototype.isMovable = function () {
+OO.ui.OutlineOptionWidget.prototype.isMovable = function () {
        return this.movable;
 };
 
 /**
  * Check if item is removable.
  *
- * Removablilty is used by outline controls.
+ * Removability is used by outline controls.
  *
  * @return {boolean} Item is removable
  */
-OO.ui.OutlineItemWidget.prototype.isRemovable = function () {
+OO.ui.OutlineOptionWidget.prototype.isRemovable = function () {
        return this.removable;
 };
 
@@ -10356,19 +10616,19 @@ OO.ui.OutlineItemWidget.prototype.isRemovable = function () {
  *
  * @return {number} Indentation level
  */
-OO.ui.OutlineItemWidget.prototype.getLevel = function () {
+OO.ui.OutlineOptionWidget.prototype.getLevel = function () {
        return this.level;
 };
 
 /**
  * Set movability.
  *
- * Movablilty is used by outline controls.
+ * Movability is used by outline controls.
  *
  * @param {boolean} movable Item is movable
  * @chainable
  */
-OO.ui.OutlineItemWidget.prototype.setMovable = function ( movable ) {
+OO.ui.OutlineOptionWidget.prototype.setMovable = function ( movable ) {
        this.movable = !!movable;
        this.updateThemeClasses();
        return this;
@@ -10377,12 +10637,12 @@ OO.ui.OutlineItemWidget.prototype.setMovable = function ( movable ) {
 /**
  * Set removability.
  *
- * Removablilty is used by outline controls.
+ * Removability is used by outline controls.
  *
  * @param {boolean} movable Item is removable
  * @chainable
  */
-OO.ui.OutlineItemWidget.prototype.setRemovable = function ( removable ) {
+OO.ui.OutlineOptionWidget.prototype.setRemovable = function ( removable ) {
        this.removable = !!removable;
        this.updateThemeClasses();
        return this;
@@ -10394,7 +10654,7 @@ OO.ui.OutlineItemWidget.prototype.setRemovable = function ( removable ) {
  * @param {number} [level=0] Indentation level, in the range of [0,#maxLevel]
  * @chainable
  */
-OO.ui.OutlineItemWidget.prototype.setLevel = function ( level ) {
+OO.ui.OutlineOptionWidget.prototype.setLevel = function ( level ) {
        var levels = this.constructor.static.levels,
                levelClass = this.constructor.static.levelClass,
                i = levels;
@@ -10782,7 +11042,7 @@ OO.ui.ProgressBarWidget.prototype.setProgress = function ( progress ) {
  * @cfg {string} [value] Initial query value
  */
 OO.ui.SearchWidget = function OoUiSearchWidget( config ) {
-       // Configuration intialization
+       // Configuration initialization
        config = config || {};
 
        // Parent constructor
@@ -10925,8 +11185,8 @@ OO.ui.SearchWidget.prototype.getResults = function () {
 /**
  * Generic selection of options.
  *
- * Items can contain any rendering, and are uniquely identified by a hash of their data. Any widget
- * that provides options, from which the user must choose one, should be built on this class.
+ * Items can contain any rendering. Any widget that provides options, from which the user must
+ * choose one, should be built on this class.
  *
  * Use together with OO.ui.OptionWidget.
  *
@@ -10951,7 +11211,6 @@ OO.ui.SelectWidget = function OoUiSelectWidget( config ) {
        // Properties
        this.pressed = false;
        this.selecting = null;
-       this.hashes = {};
        this.onMouseUpHandler = this.onMouseUp.bind( this );
        this.onMouseMoveHandler = this.onMouseMove.bind( this );
 
@@ -11173,22 +11432,6 @@ OO.ui.SelectWidget.prototype.getHighlightedItem = function () {
        return null;
 };
 
-/**
- * Get an existing item with equivilant data.
- *
- * @param {Object} data Item data to search for
- * @return {OO.ui.OptionWidget|null} Item with equivilent value, `null` if none exists
- */
-OO.ui.SelectWidget.prototype.getItemFromData = function ( data ) {
-       var hash = OO.getHash( data );
-
-       if ( Object.prototype.hasOwnProperty.call( this.hashes, hash ) ) {
-               return this.hashes[hash];
-       }
-
-       return null;
-};
-
 /**
  * Toggle pressed state.
  *
@@ -11336,7 +11579,7 @@ OO.ui.SelectWidget.prototype.getRelativeSelectableItem = function ( item, direct
 /**
  * Get the next selectable item.
  *
- * @return {OO.ui.OptionWidget|null} Item, `null` if ther aren't any selectable items
+ * @return {OO.ui.OptionWidget|null} Item, `null` if there aren't any selectable items
  */
 OO.ui.SelectWidget.prototype.getFirstSelectableItem = function () {
        var i, len, item;
@@ -11354,31 +11597,12 @@ OO.ui.SelectWidget.prototype.getFirstSelectableItem = function () {
 /**
  * Add items.
  *
- * When items are added with the same values as existing items, the existing items will be
- * automatically removed before the new items are added.
- *
  * @param {OO.ui.OptionWidget[]} items Items to add
  * @param {number} [index] Index to insert items after
  * @fires add
  * @chainable
  */
 OO.ui.SelectWidget.prototype.addItems = function ( items, index ) {
-       var i, len, item, hash,
-               remove = [];
-
-       for ( i = 0, len = items.length; i < len; i++ ) {
-               item = items[i];
-               hash = OO.getHash( item.getData() );
-               if ( Object.prototype.hasOwnProperty.call( this.hashes, hash ) ) {
-                       // Remove item with same value
-                       remove.push( this.hashes[hash] );
-               }
-               this.hashes[hash] = item;
-       }
-       if ( remove.length ) {
-               this.removeItems( remove );
-       }
-
        // Mixin method
        OO.ui.GroupWidget.prototype.addItems.call( this, items, index );
 
@@ -11398,15 +11622,11 @@ OO.ui.SelectWidget.prototype.addItems = function ( items, index ) {
  * @chainable
  */
 OO.ui.SelectWidget.prototype.removeItems = function ( items ) {
-       var i, len, item, hash;
+       var i, len, item;
 
+       // Deselect items being removed
        for ( i = 0, len = items.length; i < len; i++ ) {
                item = items[i];
-               hash = OO.getHash( item.getData() );
-               if ( Object.prototype.hasOwnProperty.call( this.hashes, hash ) ) {
-                       // Remove existing item
-                       delete this.hashes[hash];
-               }
                if ( item.isSelected() ) {
                        this.selectItem( null );
                }
@@ -11431,10 +11651,10 @@ OO.ui.SelectWidget.prototype.removeItems = function ( items ) {
 OO.ui.SelectWidget.prototype.clearItems = function () {
        var items = this.items.slice();
 
-       // Clear all items
-       this.hashes = {};
        // Mixin method
        OO.ui.GroupWidget.prototype.clearItems.call( this );
+
+       // Clear selection
        this.selectItem( null );
 
        this.emit( 'remove', items );
@@ -11465,13 +11685,36 @@ OO.ui.ButtonSelectWidget = function OoUiButtonSelectWidget( config ) {
 
 OO.inheritClass( OO.ui.ButtonSelectWidget, OO.ui.SelectWidget );
 
+/**
+ * Select widget containing radio button options.
+ *
+ * Use together with OO.ui.RadioOptionWidget.
+ *
+ * @class
+ * @extends OO.ui.SelectWidget
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ */
+OO.ui.RadioSelectWidget = function OoUiRadioSelectWidget( config ) {
+       // Parent constructor
+       OO.ui.RadioSelectWidget.super.call( this, config );
+
+       // Initialization
+       this.$element.addClass( 'oo-ui-radioSelectWidget' );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.RadioSelectWidget, OO.ui.SelectWidget );
+
 /**
  * Overlaid menu of options.
  *
  * Menus are clipped to the visible viewport. They do not provide a control for opening or closing
  * the menu.
  *
- * Use together with OO.ui.MenuItemWidget.
+ * Use together with OO.ui.MenuOptionWidget.
  *
  * @class
  * @extends OO.ui.SelectWidget
@@ -11483,12 +11726,12 @@ OO.inheritClass( OO.ui.ButtonSelectWidget, OO.ui.SelectWidget );
  * @cfg {OO.ui.Widget} [widget] Widget to bind mouse handlers to
  * @cfg {boolean} [autoHide=true] Hide the menu when the mouse is pressed outside the menu
  */
-OO.ui.MenuWidget = function OoUiMenuWidget( config ) {
+OO.ui.MenuSelectWidget = function OoUiMenuSelectWidget( config ) {
        // Configuration initialization
        config = config || {};
 
        // Parent constructor
-       OO.ui.MenuWidget.super.call( this, config );
+       OO.ui.MenuSelectWidget.super.call( this, config );
 
        // Mixin constructors
        OO.ui.ClippableElement.call( this, $.extend( {}, config, { $clippable: this.$group } ) );
@@ -11509,13 +11752,13 @@ OO.ui.MenuWidget = function OoUiMenuWidget( config ) {
        this.$element
                .hide()
                .attr( 'role', 'menu' )
-               .addClass( 'oo-ui-menuWidget' );
+               .addClass( 'oo-ui-menuSelectWidget' );
 };
 
 /* Setup */
 
-OO.inheritClass( OO.ui.MenuWidget, OO.ui.SelectWidget );
-OO.mixinClass( OO.ui.MenuWidget, OO.ui.ClippableElement );
+OO.inheritClass( OO.ui.MenuSelectWidget, OO.ui.SelectWidget );
+OO.mixinClass( OO.ui.MenuSelectWidget, OO.ui.ClippableElement );
 
 /* Methods */
 
@@ -11524,7 +11767,7 @@ OO.mixinClass( OO.ui.MenuWidget, OO.ui.ClippableElement );
  *
  * @param {jQuery.Event} e Key down event
  */
-OO.ui.MenuWidget.prototype.onDocumentMouseDown = function ( e ) {
+OO.ui.MenuSelectWidget.prototype.onDocumentMouseDown = function ( e ) {
        if (
                !OO.ui.contains( this.$element[0], e.target, true ) &&
                ( !this.$widget || !OO.ui.contains( this.$widget[0], e.target, true ) )
@@ -11538,7 +11781,7 @@ OO.ui.MenuWidget.prototype.onDocumentMouseDown = function ( e ) {
  *
  * @param {jQuery.Event} e Key down event
  */
-OO.ui.MenuWidget.prototype.onKeyDown = function ( e ) {
+OO.ui.MenuSelectWidget.prototype.onKeyDown = function ( e ) {
        var nextItem,
                handled = false,
                highlightItem = this.getHighlightedItem();
@@ -11585,7 +11828,7 @@ OO.ui.MenuWidget.prototype.onKeyDown = function ( e ) {
 /**
  * Bind key down listener.
  */
-OO.ui.MenuWidget.prototype.bindKeyDownListener = function () {
+OO.ui.MenuSelectWidget.prototype.bindKeyDownListener = function () {
        if ( this.$input ) {
                this.$input.on( 'keydown', this.onKeyDownHandler );
        } else {
@@ -11597,7 +11840,7 @@ OO.ui.MenuWidget.prototype.bindKeyDownListener = function () {
 /**
  * Unbind key down listener.
  */
-OO.ui.MenuWidget.prototype.unbindKeyDownListener = function () {
+OO.ui.MenuSelectWidget.prototype.unbindKeyDownListener = function () {
        if ( this.$input ) {
                this.$input.off( 'keydown' );
        } else {
@@ -11613,11 +11856,11 @@ OO.ui.MenuWidget.prototype.unbindKeyDownListener = function () {
  * @param {OO.ui.OptionWidget} item Item to choose
  * @chainable
  */
-OO.ui.MenuWidget.prototype.chooseItem = function ( item ) {
+OO.ui.MenuSelectWidget.prototype.chooseItem = function ( item ) {
        var widget = this;
 
        // Parent method
-       OO.ui.MenuWidget.super.prototype.chooseItem.call( this, item );
+       OO.ui.MenuSelectWidget.super.prototype.chooseItem.call( this, item );
 
        if ( item && !this.flashing ) {
                this.flashing = true;
@@ -11635,11 +11878,11 @@ OO.ui.MenuWidget.prototype.chooseItem = function ( item ) {
 /**
  * @inheritdoc
  */
-OO.ui.MenuWidget.prototype.addItems = function ( items, index ) {
+OO.ui.MenuSelectWidget.prototype.addItems = function ( items, index ) {
        var i, len, item;
 
        // Parent method
-       OO.ui.MenuWidget.super.prototype.addItems.call( this, items, index );
+       OO.ui.MenuSelectWidget.super.prototype.addItems.call( this, items, index );
 
        // Auto-initialize
        if ( !this.newItems ) {
@@ -11665,9 +11908,9 @@ OO.ui.MenuWidget.prototype.addItems = function ( items, index ) {
 /**
  * @inheritdoc
  */
-OO.ui.MenuWidget.prototype.removeItems = function ( items ) {
+OO.ui.MenuSelectWidget.prototype.removeItems = function ( items ) {
        // Parent method
-       OO.ui.MenuWidget.super.prototype.removeItems.call( this, items );
+       OO.ui.MenuSelectWidget.super.prototype.removeItems.call( this, items );
 
        // Reevaluate clipping
        this.clip();
@@ -11678,9 +11921,9 @@ OO.ui.MenuWidget.prototype.removeItems = function ( items ) {
 /**
  * @inheritdoc
  */
-OO.ui.MenuWidget.prototype.clearItems = function () {
+OO.ui.MenuSelectWidget.prototype.clearItems = function () {
        // Parent method
-       OO.ui.MenuWidget.super.prototype.clearItems.call( this );
+       OO.ui.MenuSelectWidget.super.prototype.clearItems.call( this );
 
        // Reevaluate clipping
        this.clip();
@@ -11691,7 +11934,7 @@ OO.ui.MenuWidget.prototype.clearItems = function () {
 /**
  * @inheritdoc
  */
-OO.ui.MenuWidget.prototype.toggle = function ( visible ) {
+OO.ui.MenuSelectWidget.prototype.toggle = function ( visible ) {
        visible = ( visible === undefined ? !this.visible : !!visible ) && !!this.items.length;
 
        var i, len,
@@ -11700,7 +11943,7 @@ OO.ui.MenuWidget.prototype.toggle = function ( visible ) {
                widgetDoc = this.$widget ? this.$widget[0].ownerDocument : null;
 
        // Parent method
-       OO.ui.MenuWidget.super.prototype.toggle.call( this, visible );
+       OO.ui.MenuSelectWidget.super.prototype.toggle.call( this, visible );
 
        if ( change ) {
                if ( visible ) {
@@ -11761,19 +12004,19 @@ OO.ui.MenuWidget.prototype.toggle = function ( visible ) {
  * menu is toggled or the window is resized.
  *
  * @class
- * @extends OO.ui.MenuWidget
+ * @extends OO.ui.MenuSelectWidget
  *
  * @constructor
  * @param {OO.ui.TextInputWidget} input Text input widget to provide menu for
  * @param {Object} [config] Configuration options
  * @cfg {jQuery} [$container=input.$element] Element to render menu under
  */
-OO.ui.TextInputMenuWidget = function OoUiTextInputMenuWidget( input, config ) {
-       // Configuration intialization
+OO.ui.TextInputMenuSelectWidget = function OoUiTextInputMenuSelectWidget( input, config ) {
+       // Configuration initialization
        config = config || {};
 
        // Parent constructor
-       OO.ui.TextInputMenuWidget.super.call( this, config );
+       OO.ui.TextInputMenuSelectWidget.super.call( this, config );
 
        // Properties
        this.input = input;
@@ -11781,12 +12024,12 @@ OO.ui.TextInputMenuWidget = function OoUiTextInputMenuWidget( input, config ) {
        this.onWindowResizeHandler = this.onWindowResize.bind( this );
 
        // Initialization
-       this.$element.addClass( 'oo-ui-textInputMenuWidget' );
+       this.$element.addClass( 'oo-ui-textInputMenuSelectWidget' );
 };
 
 /* Setup */
 
-OO.inheritClass( OO.ui.TextInputMenuWidget, OO.ui.MenuWidget );
+OO.inheritClass( OO.ui.TextInputMenuSelectWidget, OO.ui.MenuSelectWidget );
 
 /* Methods */
 
@@ -11795,14 +12038,14 @@ OO.inheritClass( OO.ui.TextInputMenuWidget, OO.ui.MenuWidget );
  *
  * @param {jQuery.Event} e Window resize event
  */
-OO.ui.TextInputMenuWidget.prototype.onWindowResize = function () {
+OO.ui.TextInputMenuSelectWidget.prototype.onWindowResize = function () {
        this.position();
 };
 
 /**
  * @inheritdoc
  */
-OO.ui.TextInputMenuWidget.prototype.toggle = function ( visible ) {
+OO.ui.TextInputMenuSelectWidget.prototype.toggle = function ( visible ) {
        visible = visible === undefined ? !this.isVisible() : !!visible;
 
        var change = visible !== this.isVisible();
@@ -11815,7 +12058,7 @@ OO.ui.TextInputMenuWidget.prototype.toggle = function ( visible ) {
        }
 
        // Parent method
-       OO.ui.TextInputMenuWidget.super.prototype.toggle.call( this, visible );
+       OO.ui.TextInputMenuSelectWidget.super.prototype.toggle.call( this, visible );
 
        if ( change ) {
                if ( this.isVisible() ) {
@@ -11834,7 +12077,7 @@ OO.ui.TextInputMenuWidget.prototype.toggle = function ( visible ) {
  *
  * @chainable
  */
-OO.ui.TextInputMenuWidget.prototype.position = function () {
+OO.ui.TextInputMenuSelectWidget.prototype.position = function () {
        var $container = this.$container,
                pos = OO.ui.Element.getRelativePosition( $container, this.$element.offsetParent() );
 
@@ -11853,7 +12096,7 @@ OO.ui.TextInputMenuWidget.prototype.position = function () {
 /**
  * Structured list of items.
  *
- * Use with OO.ui.OutlineItemWidget.
+ * Use with OO.ui.OutlineOptionWidget.
  *
  * @class
  * @extends OO.ui.SelectWidget
@@ -11861,20 +12104,20 @@ OO.ui.TextInputMenuWidget.prototype.position = function () {
  * @constructor
  * @param {Object} [config] Configuration options
  */
-OO.ui.OutlineWidget = function OoUiOutlineWidget( config ) {
+OO.ui.OutlineSelectWidget = function OoUiOutlineSelectWidget( config ) {
        // Configuration initialization
        config = config || {};
 
        // Parent constructor
-       OO.ui.OutlineWidget.super.call( this, config );
+       OO.ui.OutlineSelectWidget.super.call( this, config );
 
        // Initialization
-       this.$element.addClass( 'oo-ui-outlineWidget' );
+       this.$element.addClass( 'oo-ui-outlineSelectWidget' );
 };
 
 /* Setup */
 
-OO.inheritClass( OO.ui.OutlineWidget, OO.ui.SelectWidget );
+OO.inheritClass( OO.ui.OutlineSelectWidget, OO.ui.SelectWidget );
 
 /**
  * Switch that slides on and off.