Update to MediaWiki 1.25.1

4 files changed, 2663 insertions, 0 deletions

diff --git a/vendor/oojs/oojs-ui/demos/pages/dialogs.js b/vendor/oojs/oojs-ui/demos/pages/dialogs.js
new file mode 100644
index 00000000..6e9da3f8
--- /dev/null
+++ b/vendor/oojs/oojs-ui/demos/pages/dialogs.js
@@ -0,0 +1,602 @@
+OO.ui.Demo.static.pages.dialogs = function ( demo ) {
+	var i, l, name, openButton, DialogClass, config,
+		$demo = demo.$element,
+		fieldset = new OO.ui.FieldsetLayout( { label: 'Dialogs' } ),
+		windows = {},
+		windowManager = new OO.ui.WindowManager();
+
+	function SimpleDialog( config ) {
+		SimpleDialog.super.call( this, config );
+	}
+	OO.inheritClass( SimpleDialog, OO.ui.Dialog );
+	SimpleDialog.static.title = 'Simple dialog';
+	SimpleDialog.prototype.initialize = function () {
+		var closeButton,
+			dialog = this;
+
+		SimpleDialog.super.prototype.initialize.apply( this, arguments );
+		this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } );
+		this.content.$element.append( '<p>Dialog content</p>' );
+
+		closeButton = new OO.ui.ButtonWidget( {
+			label: OO.ui.msg( 'ooui-dialog-process-dismiss' )
+		} );
+		closeButton.on( 'click', function () {
+			dialog.close();
+		} );
+
+		this.content.$element.append( closeButton.$element );
+		this.$body.append( this.content.$element );
+	};
+	SimpleDialog.prototype.getBodyHeight = function () {
+		return this.content.$element.outerHeight( true );
+	};
+
+	function ProcessDialog( config ) {
+		ProcessDialog.super.call( this, config );
+	}
+	OO.inheritClass( ProcessDialog, OO.ui.ProcessDialog );
+	ProcessDialog.static.title = 'Process dialog';
+	ProcessDialog.static.actions = [
+		{ action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] },
+		{ action: 'cancel', label: 'Cancel', flags: 'safe' }
+	];
+	ProcessDialog.prototype.initialize = function () {
+		ProcessDialog.super.prototype.initialize.apply( this, arguments );
+		this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } );
+		this.content.$element.append( '<p>Dialog content</p>' );
+		this.$body.append( this.content.$element );
+	};
+	ProcessDialog.prototype.getActionProcess = function ( action ) {
+		var dialog = this;
+		if ( action ) {
+			return new OO.ui.Process( function () {
+				dialog.close( { action: action } );
+			} );
+		}
+		return ProcessDialog.super.prototype.getActionProcess.call( this, action );
+	};
+	ProcessDialog.prototype.getBodyHeight = function () {
+		return this.content.$element.outerHeight( true );
+	};
+
+	function SearchWidgetDialog( config ) {
+		SearchWidgetDialog.super.call( this, config );
+		this.broken = false;
+	}
+	OO.inheritClass( SearchWidgetDialog, OO.ui.ProcessDialog );
+	SearchWidgetDialog.static.title = 'Search widget dialog';
+	SearchWidgetDialog.prototype.initialize = function () {
+		SearchWidgetDialog.super.prototype.initialize.apply( this, arguments );
+		var i,
+			items = [],
+			searchWidget = new OO.ui.SearchWidget();
+		for ( i = 1; i <= 20; i++ ) {
+			items.push( new OO.ui.OptionWidget( { data: i, label: 'Item ' + i } ) );
+		}
+		searchWidget.results.addItems( items );
+		searchWidget.onQueryChange = function () {};
+		this.$body.append( searchWidget.$element );
+	};
+	SearchWidgetDialog.prototype.getBodyHeight = function () {
+		return 300;
+	};
+	SearchWidgetDialog.static.actions = [
+		{ action: 'cancel', label: 'Cancel', flags: 'safe' }
+	];
+	SearchWidgetDialog.prototype.getActionProcess = function ( action ) {
+		var dialog = this;
+		return new OO.ui.Process( function () {
+			dialog.close( { action: action } );
+		} );
+	};
+
+	function BrokenDialog( config ) {
+		BrokenDialog.super.call( this, config );
+		this.broken = false;
+	}
+	OO.inheritClass( BrokenDialog, OO.ui.ProcessDialog );
+	BrokenDialog.static.title = 'Broken dialog';
+	BrokenDialog.static.actions = [
+		{ action: 'save', label: 'Save', flags: [ 'primary', 'constructive' ] },
+		{ action: 'delete', label: 'Delete', flags: 'destructive' },
+		{ action: 'cancel', label: 'Cancel', flags: 'safe' }
+	];
+	BrokenDialog.prototype.getBodyHeight = function () {
+		return 250;
+	};
+	BrokenDialog.prototype.initialize = function () {
+		BrokenDialog.super.prototype.initialize.apply( this, arguments );
+		this.content = new OO.ui.PanelLayout( { padded: true } );
+		this.fieldset = new OO.ui.FieldsetLayout( {
+			label: 'Dialog with error handling', icon: 'alert'
+		} );
+		this.description = new OO.ui.LabelWidget( {
+			label: 'Deleting will fail and will not be recoverable. ' +
+				'Saving will fail the first time, but succeed the second time.'
+		} );
+		this.fieldset.addItems( [ this.description ] );
+		this.content.$element.append( this.fieldset.$element );
+		this.$body.append( this.content.$element );
+	};
+	BrokenDialog.prototype.getSetupProcess = function ( data ) {
+		return BrokenDialog.super.prototype.getSetupProcess.call( this, data )
+			.next( function () {
+				this.broken = true;
+			}, this );
+	};
+	BrokenDialog.prototype.getActionProcess = function ( action ) {
+		return BrokenDialog.super.prototype.getActionProcess.call( this, action )
+			.next( function () {
+				return 1000;
+			}, this )
+			.next( function () {
+				var closing;
+
+				if ( action === 'save' ) {
+					if ( this.broken ) {
+						this.broken = false;
+						return new OO.ui.Error( 'Server did not respond' );
+					}
+				} else if ( action === 'delete' ) {
+					return new OO.ui.Error( 'Permission denied', { recoverable: false } );
+				}
+
+				closing = this.close( { action: action } );
+				if ( action === 'save' ) {
+					// Return a promise to remaing pending while closing
+					return closing;
+				}
+				return BrokenDialog.super.prototype.getActionProcess.call( this, action );
+			}, this );
+	};
+
+	function SamplePage( name, config ) {
+		config = $.extend( { label: 'Sample page', icon: 'Sample icon' }, config );
+		OO.ui.PageLayout.call( this, name, config );
+		this.label = config.label;
+		this.icon = config.icon;
+		this.$element.text( this.label );
+	}
+	OO.inheritClass( SamplePage, OO.ui.PageLayout );
+	SamplePage.prototype.setupOutlineItem = function ( outlineItem ) {
+		SamplePage.super.prototype.setupOutlineItem.call( this, outlineItem );
+		this.outlineItem
+			.setMovable( true )
+			.setRemovable( true )
+			.setIcon( this.icon )
+			.setLabel( this.label );
+	};
+
+	function BookletDialog( config ) {
+		BookletDialog.super.call( this, config );
+	}
+	OO.inheritClass( BookletDialog, OO.ui.ProcessDialog );
+	BookletDialog.static.title = 'Booklet dialog';
+	BookletDialog.static.actions = [
+		{ action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] },
+		{ action: 'cancel', label: 'Cancel', flags: 'safe' }
+	];
+	BookletDialog.prototype.getBodyHeight = function () {
+		return 250;
+	};
+	BookletDialog.prototype.initialize = function () {
+		BookletDialog.super.prototype.initialize.apply( this, arguments );
+
+		var dialog = this;
+
+		function changePage( direction ) {
+			var pageIndex = dialog.pages.indexOf( dialog.bookletLayout.getCurrentPage() );
+			pageIndex = ( dialog.pages.length + pageIndex + direction ) % dialog.pages.length;
+			dialog.bookletLayout.setPage( dialog.pages[ pageIndex ].getName() );
+		}
+
+		this.navigationField = new OO.ui.FieldLayout(
+			new OO.ui.ButtonGroupWidget( {
+				items: [
+					new OO.ui.ButtonWidget( {
+						data: 'previous',
+						icon: 'previous'
+					} ).on( 'click', function () {
+						changePage( -1 );
+					} ),
+					new OO.ui.ButtonWidget( {
+						data: 'next',
+						icon: 'next'
+					} ).on( 'click', function () {
+						changePage( 1 );
+					} )
+				]
+			} ),
+			{
+				label: 'Change page',
+				align: 'top'
+			}
+		);
+
+		this.bookletLayout = new OO.ui.BookletLayout();
+		this.pages = [
+			new SamplePage( 'page-1', { label: 'Page 1', icon: 'window' } ),
+			new SamplePage( 'page-2', { label: 'Page 2', icon: 'window' } ),
+			new SamplePage( 'page-3', { label: 'Page 3', icon: 'window' } )
+		];
+		this.bookletLayout.addPages( this.pages );
+		this.bookletLayout.connect( this, { set: 'onBookletLayoutSet' } );
+		this.bookletLayout.setPage( 'page-1' );
+
+		this.$body.append( this.bookletLayout.$element );
+	};
+	BookletDialog.prototype.getActionProcess = function ( action ) {
+		if ( action ) {
+			return new OO.ui.Process( function () {
+				this.close( { action: action } );
+			}, this );
+		}
+		return BookletDialog.super.prototype.getActionProcess.call( this, action );
+	};
+	BookletDialog.prototype.onBookletLayoutSet = function ( page ) {
+		page.$element.append( this.navigationField.$element );
+	};
+
+	function OutlinedBookletDialog( config ) {
+		OutlinedBookletDialog.super.call( this, config );
+	}
+	OO.inheritClass( OutlinedBookletDialog, OO.ui.ProcessDialog );
+	OutlinedBookletDialog.static.title = 'Booklet dialog';
+	OutlinedBookletDialog.static.actions = [
+		{ action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] },
+		{ action: 'cancel', label: 'Cancel', flags: 'safe' }
+	];
+	OutlinedBookletDialog.prototype.getBodyHeight = function () {
+		return 250;
+	};
+	OutlinedBookletDialog.prototype.initialize = function () {
+		OutlinedBookletDialog.super.prototype.initialize.apply( this, arguments );
+		this.bookletLayout = new OO.ui.BookletLayout( {
+			outlined: true
+		} );
+		this.pages = [
+			new SamplePage( 'small', { label: 'Small', icon: 'window' } ),
+			new SamplePage( 'medium', { label: 'Medium', icon: 'window' } ),
+			new SamplePage( 'large', { label: 'Large', icon: 'window' } ),
+			new SamplePage( 'larger', { label: 'Larger', icon: 'window' } ),
+			new SamplePage( 'full', { label: 'Full', icon: 'window' } )
+		];
+
+		this.bookletLayout.addPages( this.pages );
+		this.bookletLayout.connect( this, { set: 'onBookletLayoutSet' } );
+		this.$body.append( this.bookletLayout.$element );
+	};
+	OutlinedBookletDialog.prototype.getActionProcess = function ( action ) {
+		if ( action ) {
+			return new OO.ui.Process( function () {
+				this.close( { action: action } );
+			}, this );
+		}
+		return OutlinedBookletDialog.super.prototype.getActionProcess.call( this, action );
+	};
+	OutlinedBookletDialog.prototype.onBookletLayoutSet = function ( page ) {
+		this.setSize( page.getName() );
+	};
+	OutlinedBookletDialog.prototype.getSetupProcess = function ( data ) {
+		return OutlinedBookletDialog.super.prototype.getSetupProcess.call( this, data )
+			.next( function () {
+				this.bookletLayout.setPage( this.getSize() );
+			}, this );
+	};
+
+	function SampleCard( name, config ) {
+		config = $.extend( { label: 'Sample card' }, config );
+		OO.ui.CardLayout.call( this, name, config );
+		this.label = config.label;
+		this.$element.text( this.label );
+	}
+	OO.inheritClass( SampleCard, OO.ui.CardLayout );
+	SampleCard.prototype.setupTabItem = function ( tabItem ) {
+		SampleCard.super.prototype.setupTabItem.call( this, tabItem );
+		this.tabItem.setLabel( this.label );
+	};
+
+	function IndexedDialog( config ) {
+		IndexedDialog.super.call( this, config );
+	}
+	OO.inheritClass( IndexedDialog, OO.ui.ProcessDialog );
+	IndexedDialog.static.title = 'Index dialog';
+	IndexedDialog.static.actions = [
+		{ action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] },
+		{ action: 'cancel', label: 'Cancel', flags: 'safe' }
+	];
+	IndexedDialog.prototype.getBodyHeight = function () {
+		return 250;
+	};
+	IndexedDialog.prototype.initialize = function () {
+		IndexedDialog.super.prototype.initialize.apply( this, arguments );
+		this.indexLayout = new OO.ui.IndexLayout();
+		this.cards = [
+			new SampleCard( 'first', { label: 'One' } ),
+			new SampleCard( 'second', { label: 'Two' } ),
+			new SampleCard( 'third', { label: 'Three' } ),
+			new SampleCard( 'fourth', { label: 'Four' } )
+		];
+
+		this.indexLayout.addCards( this.cards );
+		this.$body.append( this.indexLayout.$element );
+
+		this.indexLayout.getTabs().getItemFromData( 'fourth' ).setDisabled( true );
+	};
+	IndexedDialog.prototype.getActionProcess = function ( action ) {
+		if ( action ) {
+			return new OO.ui.Process( function () {
+				this.close( { action: action } );
+			}, this );
+		}
+		return IndexedDialog.super.prototype.getActionProcess.call( this, action );
+	};
+
+	function MenuDialog( config ) {
+		MenuDialog.super.call( this, config );
+	}
+	OO.inheritClass( MenuDialog, OO.ui.ProcessDialog );
+	MenuDialog.static.title = 'Menu dialog';
+	MenuDialog.static.actions = [
+		{ action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] },
+		{ action: 'cancel', label: 'Cancel', flags: 'safe' }
+	];
+	MenuDialog.prototype.getBodyHeight = function () {
+		return 350;
+	};
+	MenuDialog.prototype.initialize = function () {
+		MenuDialog.super.prototype.initialize.apply( this, arguments );
+		var menuLayout = new OO.ui.MenuLayout(),
+			positionField = new OO.ui.FieldLayout(
+				new OO.ui.ButtonSelectWidget( {
+					items: [
+						new OO.ui.ButtonOptionWidget( {
+							data: 'before',
+							label: 'Before'
+						} ),
+						new OO.ui.ButtonOptionWidget( {
+							data: 'after',
+							label: 'After'
+						} ),
+						new OO.ui.ButtonOptionWidget( {
+							data: 'top',
+							label: 'Top'
+						} ),
+						new OO.ui.ButtonOptionWidget( {
+							data: 'bottom',
+							label: 'Bottom'
+						} )
+					]
+				} ).on( 'select', function ( item ) {
+					menuLayout.setMenuPosition( item.getData() );
+				} ),
+				{
+					label: 'Menu position',
+					align: 'top'
+				}
+			),
+			showField = new OO.ui.FieldLayout(
+				new OO.ui.ToggleSwitchWidget( { value: true } ).on( 'change', function ( value ) {
+					menuLayout.toggleMenu( value );
+				} ),
+				{
+					label: 'Show menu',
+					align: 'top'
+				}
+			),
+			menuPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } ),
+			contentPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } );
+
+		menuLayout.$menu.append(
+			menuPanel.$element.append( 'Menu panel' )
+		);
+		menuLayout.$content.append(
+			contentPanel.$element.append(
+				positionField.$element,
+				showField.$element
+			)
+		);
+
+		this.$body.append( menuLayout.$element );
+	};
+	MenuDialog.prototype.getActionProcess = function ( action ) {
+		if ( action ) {
+			return new OO.ui.Process( function () {
+				this.close( { action: action } );
+			}, this );
+		}
+		return MenuDialog.super.prototype.getActionProcess.call( this, action );
+	};
+
+	config = [
+		{
+			name: 'Simple dialog (small)',
+			config: {
+				size: 'small'
+			},
+			data: {
+				title: 'Sample dialog with very long title that does not fit'
+			}
+		},
+		{
+			name: 'Simple dialog (medium)',
+			config: {
+				size: 'medium'
+			}
+		},
+		{
+			name: 'Simple dialog (large)',
+			config: {
+				size: 'large'
+			}
+		},
+		{
+			name: 'Simple dialog (larger)',
+			config: {
+				size: 'larger'
+			}
+		},
+		{
+			name: 'Simple dialog (full)',
+			config: {
+				size: 'full'
+			}
+		},
+		{
+			name: 'Process dialog (medium)',
+			dialogClass: ProcessDialog,
+			config: {
+				size: 'medium'
+			}
+		},
+		{
+			name: 'Process dialog (full)',
+			dialogClass: ProcessDialog,
+			config: {
+				size: 'full'
+			}
+		},
+		{
+			name: 'Search widget dialog (medium)',
+			dialogClass: SearchWidgetDialog,
+			config: {
+				size: 'medium'
+			}
+		},
+		{
+			name: 'Broken dialog (error handling)',
+			dialogClass: BrokenDialog,
+			config: {
+				size: 'medium'
+			}
+		},
+		{
+			name: 'Booklet dialog',
+			dialogClass: BookletDialog,
+			config: {
+				size: 'medium'
+			}
+		},
+		{
+			name: 'Outlined booklet dialog',
+			dialogClass: OutlinedBookletDialog,
+			config: {
+				size: 'medium'
+			}
+		},
+		{
+			name: 'Indexed dialog',
+			dialogClass: IndexedDialog,
+			config: {
+				size: 'medium'
+			}
+		},
+		{
+			name: 'Menu dialog',
+			dialogClass: MenuDialog,
+			config: {
+				size: 'medium'
+			}
+		},
+		{
+			name: 'Message dialog (generic)',
+			dialogClass: OO.ui.MessageDialog,
+			data: {
+				title: 'Continue?',
+				message: 'It may be risky'
+			}
+		},
+		{
+			name: 'Message dialog (verbose)',
+			dialogClass: OO.ui.MessageDialog,
+			data: {
+				title: 'Continue?',
+				message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis laoreet elit. Nam eu velit ullamcorper, volutpat elit sed, viverra massa. Aenean congue aliquam lorem, et laoreet risus condimentum vel. Praesent nec imperdiet mauris. Nunc eros magna, iaculis sit amet ante id, dapibus tristique lorem. Praesent in feugiat lorem, sit amet porttitor eros. Donec sapien turpis, pretium eget ligula id, scelerisque tincidunt diam. Pellentesque a venenatis tortor, at luctus nisl. Quisque vel urna a enim mattis rutrum. Morbi eget consequat nisl. Nam tristique molestie diam ac consequat. Nam varius adipiscing mattis. Praesent sodales volutpat nulla lobortis iaculis. Quisque vel odio eget diam posuere imperdiet. Fusce et iaculis odio. Donec in nibh ut dui accumsan vehicula quis et massa.',
+				verbose: true
+			}
+		},
+		{
+			name: 'Message dialog (1 action)',
+			dialogClass: OO.ui.MessageDialog,
+			data: {
+				title: 'Storage limit reached',
+				message: 'You are out of disk space',
+				actions: [
+					{
+						action: 'accept',
+						label: 'Dismiss',
+						flags: 'primary'
+					}
+				]
+			}
+		},
+		{
+			name: 'Message dialog (2 actions)',
+			dialogClass: OO.ui.MessageDialog,
+			data: {
+				title: 'Cannot save data',
+				message: 'The server is not responding',
+				actions: [
+					{
+						action: 'reject',
+						label: 'Cancel',
+						flags: 'safe'
+					},
+					{
+						action: 'repeat',
+						label: 'Try again',
+						flags: [ 'primary', 'constructive' ]
+					}
+				]
+			}
+		},
+		{
+			name: 'Message dialog (3 actions)',
+			dialogClass: OO.ui.MessageDialog,
+			data: {
+				title: 'Delete file?',
+				message: 'The file will be irreversably obliterated. Proceed with caution.',
+				actions: [
+					{ action: 'reject', label: 'Cancel', flags: 'safe' },
+					{ action: 'reject', label: 'Move file to trash' },
+					{
+						action: 'accept',
+						label: 'Obliterate',
+						flags: [ 'primary', 'destructive' ]
+					}
+				]
+			}
+		}
+	];
+
+	function openDialog( name, data ) {
+		windowManager.openWindow( name, data );
+	}
+
+	for ( i = 0, l = config.length; i < l; i++ ) {
+		name = 'window_' + i;
+		DialogClass = config[ i ].dialogClass || SimpleDialog;
+		windows[ name ] = new DialogClass( config[ i ].config );
+		openButton = new OO.ui.ButtonWidget( {
+			framed: false,
+			icon: 'window',
+			label: $( '<span dir="ltr"></span>' ).text( config[ i ].name )
+		} );
+		openButton.on(
+			'click', OO.ui.bind( openDialog, this, name, config[ i ].data )
+		);
+		fieldset.addItems( [ new OO.ui.FieldLayout( openButton, { align: 'inline' } ) ] );
+	}
+	windowManager.addWindows( windows );
+
+	$demo.append(
+		new OO.ui.PanelLayout( {
+			expanded: false,
+			framed: true
+		} ).$element
+			.addClass( 'oo-ui-demo-container' )
+			.append( fieldset.$element ),
+		windowManager.$element
+	);
+};
diff --git a/vendor/oojs/oojs-ui/demos/pages/icons.js b/vendor/oojs/oojs-ui/demos/pages/icons.js
new file mode 100644
index 00000000..aec2204c
--- /dev/null
+++ b/vendor/oojs/oojs-ui/demos/pages/icons.js
@@ -0,0 +1,295 @@
+OO.ui.Demo.static.pages.icons = function ( demo ) {
+	var i, len, iconSet, iconsFieldset, iconButton, selector,
+		icons = {
+			core: [
+				'add',
+				'advanced',
+				'alert',
+				'cancel',
+				'check',
+				'circle',
+				'close',
+				'code',
+				'collapse',
+				'comment',
+				'ellipsis',
+				'expand',
+				'help',
+				'history',
+				'info',
+				'menu',
+				'next',
+				'picture',
+				'previous',
+				'redo',
+				'remove',
+				'search',
+				'settings',
+				'tag',
+				'undo',
+				'window'
+			],
+			movement: [
+				'arrowLast',
+				'arrowNext',
+				'downTriangle',
+				'upTriangle',
+				'caretLast',
+				'caretNext',
+				'caretDown',
+				'caretUp',
+				'move'
+			],
+			content: [
+				'article',
+				'articleCheck',
+				'articleSearch',
+				'citeArticle',
+				'book',
+				'journal',
+				'newspaper',
+				'folderPlaceholder',
+				'die',
+				'download',
+				'upload'
+			],
+			alerts: [
+				'bell',
+				'bellOn',
+				'eye',
+				'eyeClosed',
+				'message',
+				'signature',
+				'speechBubble',
+				'speechBubbleAdd',
+				'speechBubbles'
+			],
+			interactions: [
+				'beta',
+				'betaLaunch',
+				'bookmark',
+				'browser',
+				'clear',
+				'clock',
+				'funnel',
+				'heart',
+				'key',
+				'keyboard',
+				'logOut',
+				'newWindow',
+				'printer',
+				'ribbonPrize',
+				'sun',
+				'watchlist'
+			],
+			moderation: [
+				'block',
+				'blockUndo',
+				'flag',
+				'flagUndo',
+				'lock',
+				'star',
+				'trash',
+				'trashUndo',
+				'unStar',
+				'unLock'
+			],
+			'editing-core': [
+				'edit',
+				'editLock',
+				'editUndo',
+				'link',
+				'linkExternal',
+				'linkSecure'
+			],
+			'editing-styling': [
+				'bigger',
+				'smaller',
+				'subscript',
+				'superscript',
+				'bold',
+				'italic',
+				'strikethrough',
+				'underline',
+				'textLanguage',
+				'textDirLTR',
+				'textDirRTL',
+				'textStyle'
+			],
+			'editing-list': [
+				'indent',
+				'listBullet',
+				'listNumbered',
+				'outdent'
+			],
+			'editing-advanced': [
+				'alignCentre',
+				'alignLeft',
+				'alignRight',
+				'find',
+				'insert',
+				'layout',
+				'newline',
+				'noWikiText',
+				'outline',
+				'puzzle',
+				'quotes',
+				'quotesAdd',
+				'redirect',
+				'searchCaseSensitive',
+				'searchRegularExpression',
+				'specialCharacter',
+				'table',
+				'tableAddColumnAfter',
+				'tableAddColumnBefore',
+				'tableAddRowAfter',
+				'tableAddRowBefore',
+				'tableCaption',
+				'tableMergeCells',
+				'templateAdd',
+				'translation',
+				'wikiText'
+			],
+			media: [
+				'image',
+				'imageAdd',
+				'imageLock',
+				'photoGallery',
+				'play',
+				'stop'
+			],
+			location: [
+				'map',
+				'mapPin',
+				'mapPinAdd',
+				'wikitrail'
+			],
+			user: [
+				'userActive',
+				'userAvatar',
+				'userInactive',
+				'userTalk'
+			],
+			layout: [
+				'stripeFlow',
+				'stripeSideMenu',
+				'stripeSummary',
+				'stripeToC',
+				'viewCompact',
+				'viewDetails',
+				'visionSimulator'
+			],
+			wikimedia: [
+				'logoCC',
+				'logoWikimediaCommons',
+				'logoWikipedia'
+			]
+		},
+		indicators = [
+			'alert',
+			'down',
+			'next',
+			'previous',
+			'required',
+			'search',
+			'up'
+		],
+		iconsFieldsets = [],
+		iconsButtons = [],
+		indicatorsFieldset = new OO.ui.FieldsetLayout( { label: 'Indicators' } );
+
+	for ( i = 0, len = indicators.length; i < len; i++ ) {
+		indicatorsFieldset.addItems( [
+			new OO.ui.FieldLayout(
+				new OO.ui.ButtonWidget( {
+					indicator: indicators[ i ],
+					framed: false,
+					label: indicators[ i ]
+				} ),
+				{ align: 'top' }
+			)
+		] );
+	}
+	for ( iconSet in icons ) {
+		iconsFieldset = new OO.ui.FieldsetLayout( { label: 'Icons – ' + iconSet } );
+		iconsFieldsets.push( iconsFieldset );
+
+		for ( i = 0, len = icons[ iconSet ].length; i < len; i++ ) {
+			iconButton = new OO.ui.ButtonWidget( {
+				icon: icons[ iconSet ][ i ],
+				framed: false,
+				label: icons[ iconSet ][ i ]
+			} );
+			iconsButtons.push( iconButton );
+			iconsFieldset.addItems( [
+				new OO.ui.FieldLayout(
+					iconButton,
+					{ align: 'top' }
+				)
+			] );
+		}
+	}
+
+	selector = new OO.ui.ButtonSelectWidget( {
+		items: [
+			new OO.ui.ButtonOptionWidget( {
+				label: 'None',
+				flags: [],
+				data: {
+					progressive: false,
+					constructive: false,
+					destructive: false
+				}
+			} ),
+			new OO.ui.ButtonOptionWidget( {
+				label: 'Progressive',
+				flags: [ 'progressive' ],
+				data: {
+					progressive: true,
+					constructive: false,
+					destructive: false
+				}
+			} ),
+			new OO.ui.ButtonOptionWidget( {
+				label: 'Constructive',
+				flags: [ 'constructive' ],
+				data: {
+					progressive: false,
+					constructive: true,
+					destructive: false
+				}
+			} ),
+			new OO.ui.ButtonOptionWidget( {
+				label: 'Destructive',
+				flags: [ 'destructive' ],
+				data: {
+					progressive: false,
+					constructive: false,
+					destructive: true
+				}
+			} )
+		]
+	} )
+		.on( 'select', function ( selected ) {
+			iconsButtons.forEach( function ( iconButton ) {
+				iconButton.setFlags( selected.getData() );
+			} );
+		} )
+		.selectItemByData( {
+			progressive: false,
+			constructive: false,
+			destructive: false
+		} );
+
+	demo.$element.append(
+		new OO.ui.PanelLayout( {
+			expanded: false,
+			framed: true
+		} ).$element
+			.addClass( 'oo-ui-demo-container oo-ui-demo-icons' )
+			.append(
+				selector.$element,
+				indicatorsFieldset.$element,
+				iconsFieldsets.map( function ( item ) { return item.$element[0]; } )
+			) );
+};
diff --git a/vendor/oojs/oojs-ui/demos/pages/toolbars.js b/vendor/oojs/oojs-ui/demos/pages/toolbars.js
new file mode 100644
index 00000000..550d8128
--- /dev/null
+++ b/vendor/oojs/oojs-ui/demos/pages/toolbars.js
@@ -0,0 +1,338 @@
+OO.ui.Demo.static.pages.toolbars = function ( demo ) {
+	var i, toolGroups, saveButton, actionButton, actionButtonDisabled, PopupTool, ToolGroupTool,
+		$demo = demo.$element,
+		$containers = $(),
+		toolFactories = [],
+		toolGroupFactories = [],
+		toolbars = [];
+
+	// Show some random accelerator keys that don't actually work
+	function getToolAccelerator( name ) {
+		return {
+			listTool1: 'Ctrl+Shift+1',
+			listTool2: 'Ctrl+Alt+2',
+			listTool3: 'Cmd+Enter',
+			listTool5: 'Shift+Down',
+			menuTool: 'Ctrl+M'
+		}[ name ];
+	}
+
+	for ( i = 0; i < 4; i++ ) {
+		toolFactories.push( new OO.ui.ToolFactory() );
+		toolGroupFactories.push( new OO.ui.ToolGroupFactory() );
+		toolbars.push( new OO.ui.Toolbar( toolFactories[ i ], toolGroupFactories[ i ], { actions: true } ) );
+		toolbars[ i ].getToolAccelerator = getToolAccelerator;
+	}
+
+	function createTool( toolbar, group, name, icon, title, init, onSelect, displayBothIconAndLabel ) {
+		var Tool = function () {
+			Tool.super.apply( this, arguments );
+			this.toggled = false;
+			if ( init ) {
+				init.call( this );
+			}
+		};
+
+		OO.inheritClass( Tool, OO.ui.Tool );
+
+		Tool.prototype.onSelect = function () {
+			if ( onSelect ) {
+				onSelect.call( this );
+			} else {
+				this.toggled = !this.toggled;
+				this.setActive( this.toggled );
+			}
+			toolbars[ toolbar ].emit( 'updateState' );
+		};
+		Tool.prototype.onUpdateState = function () {};
+
+		Tool.static.name = name;
+		Tool.static.group = group;
+		Tool.static.icon = icon;
+		Tool.static.title = title;
+		Tool.static.displayBothIconAndLabel = !!displayBothIconAndLabel;
+		return Tool;
+	}
+
+	function createToolGroup( toolbar, group ) {
+		$.each( toolGroups[ group ], function ( i, tool ) {
+			var args = tool.slice();
+			args.splice( 0, 0, toolbar, group );
+			toolFactories[ toolbar ].register( createTool.apply( null, args ) );
+		} );
+	}
+
+	function createDisabledToolGroup( parent, name ) {
+		var DisabledToolGroup = function () {
+			DisabledToolGroup.super.apply( this, arguments );
+			this.setDisabled( true );
+		};
+
+		OO.inheritClass( DisabledToolGroup, parent );
+
+		DisabledToolGroup.static.name = name;
+
+		DisabledToolGroup.prototype.onUpdateState = function () {
+			this.setLabel( 'Disabled' );
+		};
+
+		return DisabledToolGroup;
+	}
+
+	toolGroupFactories[ 0 ].register( createDisabledToolGroup( OO.ui.BarToolGroup, 'disabledBar' ) );
+	toolGroupFactories[ 0 ].register( createDisabledToolGroup( OO.ui.ListToolGroup, 'disabledList' ) );
+	toolGroupFactories[ 1 ].register( createDisabledToolGroup( OO.ui.MenuToolGroup, 'disabledMenu' ) );
+
+	PopupTool = function ( toolGroup, config ) {
+		// Parent constructor
+		OO.ui.PopupTool.call( this, toolGroup, $.extend( { popup: {
+			padded: true,
+			label: 'Popup head',
+			head: true
+		} }, config ) );
+
+		this.popup.$body.append( '<p>Popup contents</p>' );
+	};
+
+	OO.inheritClass( PopupTool, OO.ui.PopupTool );
+
+	PopupTool.static.name = 'popupTool';
+	PopupTool.static.group = 'popupTools';
+	PopupTool.static.icon = 'help';
+
+	toolFactories[ 2 ].register( PopupTool );
+
+	ToolGroupTool = function ( toolGroup, config ) {
+		// Parent constructor
+		OO.ui.ToolGroupTool.call( this, toolGroup, config );
+	};
+
+	OO.inheritClass( ToolGroupTool, OO.ui.ToolGroupTool );
+
+	ToolGroupTool.static.name = 'toolGroupTool';
+	ToolGroupTool.static.group = 'barTools';
+	ToolGroupTool.static.groupConfig = {
+		indicator: 'down',
+		include: [ { group: 'moreListTools' } ]
+	};
+
+	toolFactories[ 0 ].register( ToolGroupTool );
+	toolFactories[ 3 ].register( ToolGroupTool );
+
+	// Toolbar
+	toolbars[ 0 ].setup( [
+		{
+			type: 'bar',
+			include: [ { group: 'barTools' } ],
+			demote: [ 'toolGroupTool' ]
+		},
+		{
+			type: 'disabledBar',
+			include: [ { group: 'disabledBarTools' } ]
+		},
+		{
+			type: 'list',
+			indicator: 'down',
+			label: 'List',
+			icon: 'picture',
+			include: [ { group: 'listTools' } ],
+			allowCollapse: [ 'listTool1', 'listTool6' ]
+		},
+		{
+			type: 'disabledList',
+			indicator: 'down',
+			label: 'List',
+			icon: 'picture',
+			include: [ { group: 'disabledListTools' } ]
+		},
+		{
+			type: 'list',
+			indicator: 'down',
+			label: 'Auto-disabling list',
+			icon: 'picture',
+			include: [ { group: 'autoDisableListTools' } ]
+		},
+		{
+			label: 'Catch-all',
+			include: '*'
+		}
+	] );
+	// Toolbar with action buttons
+	toolbars[ 1 ].setup( [
+		{
+			type: 'menu',
+			indicator: 'down',
+			icon: 'picture',
+			include: [ { group: 'menuTools' } ]
+		},
+		{
+			type: 'disabledMenu',
+			indicator: 'down',
+			icon: 'picture',
+			include: [ { group: 'disabledMenuTools' } ]
+		}
+	] );
+	// Fake toolbar to be injected into the first toolbar
+	// demonstrating right-aligned menus
+	toolbars[ 2 ].setup( [
+		{
+			include: [ { group: 'popupTools' } ]
+		},
+		{
+			type: 'list',
+			icon: 'menu',
+			include: [ { group: 'listTools' } ]
+		}
+	] );
+	toolbars[ 3 ].setup( [
+		{
+			type: 'bar',
+			include: [ { group: 'history' } ]
+		},
+		{
+			type: 'menu',
+			indicator: 'down',
+			include: [ { group: 'menuTools' } ]
+		},
+		{
+			type: 'list',
+			indicator: 'down',
+			icon: 'comment',
+			include: [ { group: 'listTools' } ],
+			allowCollapse: [ 'listTool1', 'listTool6' ]
+		},
+		{
+			type: 'bar',
+			include: [ { group: 'link' } ]
+		},
+		{
+			type: 'bar',
+			include: [ { group: 'cite' } ]
+		},
+		{
+			type: 'list',
+			indicator: 'down',
+			label: 'Insert',
+			include: [ { group: 'autoDisableListTools' }, { group: 'unusedStuff' } ]
+		}
+	] );
+
+	saveButton = new OO.ui.ButtonWidget( { label: 'Save', flags: [ 'progressive', 'primary' ] } );
+	actionButton = new OO.ui.ButtonWidget( { label: 'Action' } );
+	actionButtonDisabled = new OO.ui.ButtonWidget( { label: 'Disabled', disabled: true } );
+	toolbars[ 1 ].$actions
+		.append( actionButton.$element, actionButtonDisabled.$element );
+
+	toolbars[ 3 ].$actions
+		.append( toolbars[ 2 ].$element, saveButton.$element );
+
+	for ( i = 0; i < toolbars.length; i++ ) {
+		toolbars[ i ].emit( 'updateState' );
+	}
+
+	toolGroups = {
+		barTools: [
+			[ 'barTool', 'picture', 'Basic tool in bar' ],
+			[ 'disabledBarTool', 'picture', 'Basic tool in bar disabled', function () { this.setDisabled( true ); } ]
+		],
+
+		disabledBarTools: [
+			[ 'barToolInDisabled', 'picture', 'Basic tool in disabled bar' ]
+		],
+
+		listTools: [
+			[ 'listTool', 'picture', 'First basic tool in list' ],
+			[ 'listTool1', 'picture', 'Basic tool in list' ],
+			[ 'listTool3', 'picture', 'Basic disabled tool in list', function () { this.setDisabled( true ); } ],
+			[ 'listTool6', 'picture', 'A final tool' ]
+		],
+
+		moreListTools: [
+			[ 'listTool2', 'code', 'Another basic tool' ],
+			[ 'listTool4', 'picture', 'More basic tools' ],
+			[ 'listTool5', 'ellipsis', 'And even more' ]
+		],
+
+		popupTools: [
+			[ 'popupTool' ]
+		],
+
+		disabledListTools: [
+			[ 'listToolInDisabled', 'picture', 'Basic tool in disabled list' ]
+		],
+
+		autoDisableListTools: [
+			[ 'autoDisableListTool', 'picture', 'Click to disable this tool', null, function () { this.setDisabled( true ); } ]
+		],
+
+		menuTools: [
+			[ 'menuTool', 'picture', 'Basic tool' ],
+			[ 'disabledMenuTool', 'picture', 'Basic tool disabled', function () { this.setDisabled( true ); } ]
+		],
+
+		disabledMenuTools: [
+			[ 'menuToolInDisabled', 'picture', 'Basic tool' ]
+		],
+
+		unusedStuff: [
+			[ 'unusedTool', 'help', 'This tool is not explicitly used anywhere' ],
+			[ 'unusedTool1', 'help', 'And neither is this one' ]
+		],
+
+		history: [
+			[ 'undoTool', 'undo', 'Undo' ],
+			[ 'redoTool', 'redo', 'Redo' ]
+		],
+
+		link: [
+			[ 'linkTool', 'link', 'Link' ]
+		],
+
+		cite: [
+			[ 'citeTool', 'citeArticle', 'Cite', null, null, true ]
+		]
+	};
+
+	createToolGroup( 0, 'unusedStuff' );
+	createToolGroup( 0, 'barTools' );
+	createToolGroup( 0, 'disabledBarTools' );
+	createToolGroup( 0, 'listTools' );
+	createToolGroup( 0, 'moreListTools' );
+	createToolGroup( 0, 'disabledListTools' );
+	createToolGroup( 0, 'autoDisableListTools' );
+	createToolGroup( 1, 'menuTools' );
+	createToolGroup( 1, 'disabledMenuTools' );
+	createToolGroup( 2, 'listTools' );
+	createToolGroup( 3, 'history' );
+	createToolGroup( 3, 'link' );
+	createToolGroup( 3, 'cite' );
+	createToolGroup( 3, 'menuTools' );
+	createToolGroup( 3, 'listTools' );
+	createToolGroup( 3, 'moreListTools' );
+	createToolGroup( 3, 'autoDisableListTools' );
+	createToolGroup( 3, 'unusedStuff' );
+
+	for ( i = 0; i < toolbars.length; i++ ) {
+		$containers = $containers.add(
+			new OO.ui.PanelLayout( {
+				expanded: false,
+				framed: true
+			} ).$element
+				.addClass( 'oo-ui-demo-container oo-ui-demo-toolbars' )
+		);
+
+		if ( i === 2 ) {
+			continue;
+		}
+		$containers.eq( i ).append( toolbars[ i ].$element );
+	}
+	$containers.append( '' );
+	$demo.append(
+		$containers.eq( 0 ).append( '<div class="oo-ui-demo-toolbars-contents">Toolbar</div>' ),
+		$containers.eq( 1 ).append( '<div class="oo-ui-demo-toolbars-contents">Toolbar with action buttons</div>' ),
+		$containers.eq( 3 ).append( '<div class="oo-ui-demo-toolbars-contents">Word processor toolbar</div>' )
+	);
+	for ( i = 0; i < toolbars.length; i++ ) {
+		toolbars[ i ].initialize();
+	}
+};
diff --git a/vendor/oojs/oojs-ui/demos/pages/widgets.js b/vendor/oojs/oojs-ui/demos/pages/widgets.js
new file mode 100644
index 00000000..52c6ee87
--- /dev/null
+++ b/vendor/oojs/oojs-ui/demos/pages/widgets.js
@@ -0,0 +1,1428 @@
+OO.ui.Demo.static.pages.widgets = function ( demo ) {
+	var styles, states, buttonStyleShowcaseWidget, horizontalAlignmentWidget, fieldsets,
+		$demo = demo.$element;
+
+	/**
+	 * Draggable group widget containing drag/drop items
+	 * @param {Object} [config] Configuration options
+	 */
+	function DragDropGroupWidget( config ) {
+		// Configuration initialization
+		config = config || {};
+
+		// Parent constructor
+		DragDropGroupWidget.super.call( this, config );
+
+		// Mixin constructors
+		OO.ui.DraggableGroupElement.call( this, $.extend( {}, config, { $group: this.$element } ) );
+
+		// Respond to reorder event
+		this.connect( this, { reorder: 'onReorder' } );
+	}
+	/* Setup */
+	OO.inheritClass( DragDropGroupWidget, OO.ui.Widget );
+	OO.mixinClass( DragDropGroupWidget, OO.ui.DraggableGroupElement );
+
+	/**
+	 * Respond to order event
+	 * @param {OO.ui.DraggableElement} item Reordered item
+	 * @param {number} newIndex New index
+	 */
+	DragDropGroupWidget.prototype.onReorder = function ( item, newIndex ) {
+		this.addItems( [ item ], newIndex );
+	};
+
+	/**
+	 * Drag/drop items
+	 * @param {Object} [config] Configuration options
+	 */
+	function DragDropItemWidget( config ) {
+		// Configuration initialization
+		config = config || {};
+
+		// Parent constructor
+		DragDropItemWidget.super.call( this, config );
+
+		// Mixin constructors
+		OO.ui.DraggableElement.call( this, config );
+	}
+	/* Setup */
+	OO.inheritClass( DragDropItemWidget, OO.ui.OptionWidget );
+	OO.mixinClass( DragDropItemWidget, OO.ui.DraggableElement );
+
+	/**
+	 * Demo for LookupElement.
+	 * @extends OO.ui.TextInputWidget
+	 * @mixins OO.ui.LookupElement
+	 */
+	function NumberLookupTextInputWidget() {
+		// Parent constructor
+		OO.ui.TextInputWidget.call( this, { validate: 'integer' } );
+		// Mixin constructors
+		OO.ui.LookupElement.call( this );
+	}
+	OO.inheritClass( NumberLookupTextInputWidget, OO.ui.TextInputWidget );
+	OO.mixinClass( NumberLookupTextInputWidget, OO.ui.LookupElement );
+
+	/**
+	 * @inheritdoc
+	 */
+	NumberLookupTextInputWidget.prototype.getLookupRequest = function () {
+		var
+			value = this.getValue(),
+			deferred = $.Deferred(),
+			delay = 500 + Math.floor( Math.random() * 500 );
+
+		this.isValid().done( function ( valid ) {
+			if ( valid ) {
+				// Resolve with results after a faked delay
+				setTimeout( function () {
+					deferred.resolve( [ value * 1, value * 2, value * 3, value * 4, value * 5 ] );
+				}, delay );
+			} else {
+				// No results when the input contains invalid content
+				deferred.resolve( [] );
+			}
+		} );
+
+		return deferred.promise( { abort: function () {} } );
+	};
+
+	/**
+	 * @inheritdoc
+	 */
+	NumberLookupTextInputWidget.prototype.getLookupCacheDataFromResponse = function ( response ) {
+		return response || [];
+	};
+
+	/**
+	 * @inheritdoc
+	 */
+	NumberLookupTextInputWidget.prototype.getLookupMenuOptionsFromData = function ( data ) {
+		var
+			items = [],
+			i, number;
+		for ( i = 0; i < data.length; i++ ) {
+			number = String( data[ i ] );
+			items.push( new OO.ui.MenuOptionWidget( {
+				data: number,
+				label: number
+			} ) );
+		}
+
+		return items;
+	};
+
+	styles = [
+		{},
+		{
+			flags: [ 'progressive' ]
+		},
+		{
+			flags: [ 'constructive' ]
+		},
+		{
+			flags: [ 'destructive' ]
+		},
+		{
+			flags: [ 'primary', 'progressive' ]
+		},
+		{
+			flags: [ 'primary', 'constructive' ]
+		},
+		{
+			flags: [ 'primary', 'destructive' ]
+		}
+	];
+	states = [
+		{
+			label: 'Button'
+		},
+		{
+			label: 'Button',
+			icon: 'tag'
+		},
+		{
+			label: 'Button',
+			icon: 'tag',
+			indicator: 'down'
+		},
+		{
+			icon: 'tag',
+			title: 'Title text'
+		},
+		{
+			indicator: 'down'
+		},
+		{
+			icon: 'tag',
+			indicator: 'down'
+		},
+		{
+			label: 'Button',
+			disabled: true
+		},
+		{
+			icon: 'tag',
+			title: 'Title text',
+			disabled: true
+		},
+		{
+			indicator: 'down',
+			disabled: true
+		}
+	];
+	buttonStyleShowcaseWidget = new OO.ui.Widget();
+	$.each( styles, function ( i, style ) {
+		$.each( states, function ( j, state ) {
+			buttonStyleShowcaseWidget.$element.append(
+				new OO.ui.ButtonWidget( $.extend( {}, style, state ) ).$element
+			);
+		} );
+		buttonStyleShowcaseWidget.$element.append( $( '<br>' ) );
+	} );
+
+	horizontalAlignmentWidget = new OO.ui.Widget( {
+		classes: [ 'oo-ui-demo-horizontal-alignment' ]
+	} );
+	horizontalAlignmentWidget.$element.append(
+		new OO.ui.ButtonWidget( { label: 'Button' } ).$element,
+		new OO.ui.ButtonGroupWidget( { items: [
+			new OO.ui.ToggleButtonWidget( { label: 'A' } ),
+			new OO.ui.ToggleButtonWidget( { label: 'B' } )
+		] } ).$element,
+		new OO.ui.ButtonInputWidget( { label: 'ButtonInput' } ).$element,
+		new OO.ui.TextInputWidget( { value: 'TextInput' } ).$element,
+		new OO.ui.DropdownInputWidget( { options: [
+			{
+				label: 'DropdownInput',
+				data: null
+			}
+		] } ).$element,
+		new OO.ui.CheckboxInputWidget( { selected: true } ).$element,
+		new OO.ui.RadioInputWidget( { selected: true } ).$element,
+		new OO.ui.LabelWidget( { label: 'Label' } ).$element
+	);
+
+	fieldsets = [
+		new OO.ui.FieldsetLayout( {
+			label: 'Simple buttons',
+			items: [
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( { label: 'Normal' } ),
+					{
+						label: 'ButtonWidget (normal)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						label: 'Progressive',
+						flags: [ 'progressive' ]
+					} ),
+					{
+						label: 'ButtonWidget (progressive)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						label: 'Constructive',
+						flags: [ 'constructive' ]
+					} ),
+					{
+						label: 'ButtonWidget (constructive)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						label: 'Destructive',
+						flags: [ 'destructive' ]
+					} ),
+					{
+						label: 'ButtonWidget (destructive)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						label: 'Primary progressive',
+						flags: [ 'primary', 'progressive' ]
+					} ),
+					{
+						label: 'ButtonWidget (primary, progressive)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						label: 'Primary constructive',
+						flags: [ 'primary', 'constructive' ]
+					} ),
+					{
+						label: 'ButtonWidget (primary, constructive)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						label: 'Primary destructive',
+						flags: [ 'primary', 'destructive' ]
+					} ),
+					{
+						label: 'ButtonWidget (primary, destructive)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						label: 'Disabled',
+						disabled: true
+					} ),
+					{
+						label: 'ButtonWidget (disabled)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						label: 'Constructive',
+						flags: [ 'constructive' ],
+						disabled: true
+					} ),
+					{
+						label: 'ButtonWidget (constructive, disabled)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						label: 'Constructive',
+						icon: 'tag',
+						flags: [ 'constructive' ],
+						disabled: true
+					} ),
+					{
+						label: 'ButtonWidget (constructive, icon, disabled)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						label: 'Icon',
+						icon: 'tag'
+					} ),
+					{
+						label: 'ButtonWidget (icon)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						label: 'Icon',
+						icon: 'tag',
+						flags: [ 'progressive' ]
+					} ),
+					{
+						label: 'ButtonWidget (icon, progressive)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						label: 'Indicator',
+						indicator: 'down'
+					} ),
+					{
+						label: 'ButtonWidget (indicator)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						label: 'Indicator',
+						indicator: 'down',
+						flags: [ 'constructive' ]
+					} ),
+					{
+						label: 'ButtonWidget (indicator, constructive)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						framed: false,
+						icon: 'help',
+						title: 'Icon only'
+					} ),
+					{
+						label: 'ButtonWidget (icon only)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						framed: false,
+						indicator: 'alert',
+						title: 'Indicator only'
+					} ),
+					{
+						label: 'ButtonWidget (indicator only)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						icon: 'help',
+						title: 'Icon only, framed'
+					} ),
+					{
+						label: 'ButtonWidget (icon only, framed)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						indicator: 'alert',
+						title: 'Indicator only, framed'
+					} ),
+					{
+						label: 'ButtonWidget (indicator only, framed)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						framed: false,
+						icon: 'tag',
+						label: 'Labeled'
+					} ),
+					{
+						label: 'ButtonWidget (frameless)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						framed: false,
+						flags: [ 'progressive' ],
+						icon: 'check',
+						label: 'Progressive'
+					} ),
+					{
+						label: 'ButtonWidget (frameless, progressive)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						framed: false,
+						flags: [ 'warning' ],
+						icon: 'alert',
+						label: 'Warning'
+					} ),
+					{
+						label: 'ButtonWidget (frameless, warning)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						framed: false,
+						flags: [ 'destructive' ],
+						icon: 'remove',
+						label: 'Destructive'
+					} ),
+					{
+						label: 'ButtonWidget (frameless, destructive)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						framed: false,
+						flags: [ 'constructive' ],
+						icon: 'add',
+						label: 'Constructive'
+					} ),
+					{
+						label: 'ButtonWidget (frameless, constructive)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						framed: false,
+						icon: 'tag',
+						label: 'Disabled',
+						disabled: true
+					} ),
+					{
+						label: 'ButtonWidget (frameless, disabled)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						framed: false,
+						flags: [ 'constructive' ],
+						icon: 'tag',
+						label: 'Constructive',
+						disabled: true
+					} ),
+					{
+						label: 'ButtonWidget (frameless, constructive, disabled)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						framed: false,
+						icon: 'tag',
+						indicator: 'down',
+						label: 'Labeled'
+					} ),
+					{
+						label: 'ButtonWidget (frameless, indicator)\u200E',
+						align: 'top'
+					}
+				)
+			]
+		} ),
+		new OO.ui.FieldsetLayout( {
+			label: 'Button sets',
+			items: [
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonGroupWidget( {
+						items: [
+							new OO.ui.ButtonWidget( {
+								icon: 'tag',
+								label: 'One'
+							} ),
+							new OO.ui.ButtonWidget( {
+								label: 'Two'
+							} ),
+							new OO.ui.ButtonWidget( {
+								indicator: 'required',
+								label: 'Three'
+							} )
+						]
+					} ),
+					{
+						label: 'ButtonGroupWidget',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonSelectWidget( {
+						items: [
+							new OO.ui.ButtonOptionWidget( {
+								data: 'b',
+								icon: 'tag',
+								label: 'One'
+							} ),
+							new OO.ui.ButtonOptionWidget( {
+								data: 'c',
+								label: 'Two'
+							} ),
+							new OO.ui.ButtonOptionWidget( {
+								data: 'd',
+								indicator: 'required',
+								label: 'Three'
+							} )
+						]
+					} ),
+					{
+						label: 'ButtonSelectWidget',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonSelectWidget( {
+						disabled: true,
+						items: [
+							new OO.ui.ButtonOptionWidget( {
+								data: 'b',
+								icon: 'tag',
+								label: 'One'
+							} ),
+							new OO.ui.ButtonOptionWidget( {
+								data: 'c',
+								label: 'Two'
+							} ),
+							new OO.ui.ButtonOptionWidget( {
+								data: 'd',
+								indicator: 'required',
+								label: 'Three'
+							} )
+						]
+					} ),
+					{
+						label: 'ButtonSelectWidget (disabled)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonSelectWidget( {
+						items: [
+							new OO.ui.ButtonOptionWidget( {
+								data: 'b',
+								icon: 'tag',
+								label: 'One',
+								disabled: true
+							} ),
+							new OO.ui.ButtonOptionWidget( {
+								data: 'c',
+								label: 'Two'
+							} ),
+							new OO.ui.ButtonOptionWidget( {
+								data: 'd',
+								indicator: 'required',
+								label: 'Three'
+							} )
+						]
+					} ),
+					{
+						label: 'ButtonSelectWidget (disabled items)\u200E',
+						align: 'top'
+					}
+				)
+			]
+		} ),
+		new OO.ui.FieldsetLayout( {
+			label: 'Button style showcase',
+			items: [
+				new OO.ui.FieldLayout(
+					buttonStyleShowcaseWidget,
+					{
+						align: 'top'
+					}
+				)
+			]
+		} ),
+		new OO.ui.FieldsetLayout( {
+			label: 'Form widgets',
+			items: [
+				new OO.ui.FieldLayout(
+					new OO.ui.CheckboxInputWidget( {
+						selected: true
+					} ),
+					{
+						align: 'inline',
+						label: 'CheckboxInputWidget'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.CheckboxInputWidget( {
+						selected: true,
+						disabled: true
+					} ),
+					{
+						align: 'inline',
+						label: 'CheckboxInputWidget (disabled)\u200E'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.RadioInputWidget( {
+						name: 'oojs-ui-radio-demo'
+					} ),
+					{
+						align: 'inline',
+						label: 'Connected RadioInputWidget #1'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.RadioInputWidget( {
+						name: 'oojs-ui-radio-demo',
+						selected: true
+					} ),
+					{
+						align: 'inline',
+						label: 'Connected RadioInputWidget #2'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.RadioInputWidget( {
+						selected: true,
+						disabled: true
+					} ),
+					{
+						align: 'inline',
+						label: 'RadioInputWidget (disabled)\u200E'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.RadioSelectWidget( {
+						items: [
+							new OO.ui.RadioOptionWidget( {
+								data: 'Cat',
+								label: 'Cat'
+							} ),
+							new OO.ui.RadioOptionWidget( {
+								data: 'Dog',
+								label: 'Dog'
+							} ),
+							new OO.ui.RadioOptionWidget( {
+								data: 'Goldfish',
+								label: 'Goldfish',
+								disabled: true
+							} )
+						]
+					} ),
+					{
+						align: 'top',
+						label: 'RadioSelectWidget'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ToggleSwitchWidget(),
+					{
+						label: 'ToggleSwitchWidget',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ToggleSwitchWidget( { disabled: true } ),
+					{
+						label: 'ToggleSwitchWidget (disabled)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ToggleSwitchWidget( { disabled: true, value: true } ),
+					{
+						label: 'ToggleSwitchWidget (disabled, checked)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ToggleButtonWidget( { label: 'Toggle' } ),
+					{
+						label: 'ToggleButtonWidget',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ToggleButtonWidget( { label: 'Toggle', value: true } ),
+					{
+						label: 'ToggleButtonWidget (initially active)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ToggleButtonWidget( { icon: 'next' } ),
+					{
+						label: 'ToggleButtonWidget (icon only)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.TextInputWidget( { value: 'Text input' } ),
+					{
+						label: 'TextInputWidget\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.TextInputWidget( { icon: 'search' } ),
+					{
+						label: 'TextInputWidget (icon)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.TextInputWidget( {
+						indicator: 'required',
+						required: true,
+						validate: 'non-empty'
+					} ),
+					{
+						label: 'TextInputWidget (indicator, required)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.TextInputWidget( {
+						validate: function ( value ) {
+							return value.length % 2 === 0;
+						}
+					} ),
+					{
+						label: 'TextInputWidget (only allows even number of characters)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.TextInputWidget( { placeholder: 'Placeholder' } ),
+					{
+						label: 'TextInputWidget (placeholder)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.TextInputWidget( {
+						value: 'Readonly',
+						readOnly: true
+					} ),
+					{
+						label: 'TextInputWidget (readonly)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.TextInputWidget( {
+						multiline: true,
+						value: 'Multiline\nMultiline'
+					} ),
+					{
+						label: 'TextInputWidget (multiline)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.TextInputWidget( {
+						multiline: true,
+						autosize: true,
+						value: 'Autosize\nAutosize\nAutosize\nAutosize'
+					} ),
+					{
+						label: 'TextInputWidget (autosize)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.TextInputWidget( {
+						icon: 'tag',
+						indicator: 'alert',
+						value: 'Text input with label',
+						label: 'Inline label'
+					} ),
+					{
+						label: 'TextInputWidget (label)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.TextInputWidget( {
+						value: 'Disabled',
+						icon: 'tag',
+						indicator: 'required',
+						label: 'Inline label',
+						disabled: true
+					} ),
+					{
+						label: 'TextInputWidget (icon, indicator, label, disabled)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.DropdownWidget( {
+						label: 'Select one',
+						menu: {
+							items: [
+								new OO.ui.MenuOptionWidget( {
+									data: 'a',
+									label: 'First'
+								} ),
+								new OO.ui.MenuOptionWidget( {
+									data: 'b',
+									label: 'Second',
+									indicator: 'required'
+								} ),
+								new OO.ui.MenuOptionWidget( {
+									data: 'c',
+									label: 'Third'
+								} ),
+								new OO.ui.MenuOptionWidget( {
+									data: 'c',
+									label: 'The fourth option has a long label'
+								} ),
+								new OO.ui.MenuOptionWidget( {
+									data: 'd',
+									label: 'Fifth'
+								} )
+							]
+						}
+					} ),
+					{
+						label: 'DropdownWidget',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.DropdownWidget( {
+						label: 'Select one',
+						icon: 'tag',
+						menu: {
+							items: [
+								new OO.ui.MenuOptionWidget( {
+									data: 'a',
+									label: 'First'
+								} ),
+								new OO.ui.MenuOptionWidget( {
+									data: 'b',
+									label: 'Disabled second option',
+									indicator: 'required',
+									disabled: true
+								} ),
+								new OO.ui.MenuOptionWidget( {
+									data: 'c',
+									label: 'Third'
+								} ),
+								new OO.ui.MenuOptionWidget( {
+									data: 'd',
+									label: 'Disabled fourth option with long label',
+									disabled: true
+								} ),
+								new OO.ui.MenuOptionWidget( {
+									data: 'c',
+									label: 'Third'
+								} )
+							]
+						}
+					} ),
+					{
+						label: 'DropdownWidget (disabled options)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.DropdownWidget( {
+						label: 'Select one',
+						disabled: true,
+						menu: {
+							items: [
+								new OO.ui.MenuOptionWidget( {
+									data: 'a',
+									label: 'First'
+								} ),
+								new OO.ui.MenuOptionWidget( {
+									data: 'b',
+									label: 'Second'
+								} ),
+								new OO.ui.MenuOptionWidget( {
+									data: 'c',
+									label: 'Third'
+								} ),
+								new OO.ui.MenuOptionWidget( {
+									data: 'd',
+									label: 'Fourth'
+								} )
+							]
+						}
+					} ),
+					{
+						label: 'DropdownWidget (disabled)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.DropdownInputWidget( {
+						options: [
+							{
+								data: 'a',
+								label: 'First'
+							},
+							{
+								data: 'b',
+								label: 'Second'
+							},
+							{
+								data: 'c',
+								label: 'Third'
+							}
+						],
+						value: 'b'
+					} ),
+					{
+						label: 'DropdownInputWidget',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ComboBoxWidget( {
+						menu: {
+							items: [
+								new OO.ui.MenuOptionWidget( { data: 'asd', label: 'Label for asd' } ),
+								new OO.ui.MenuOptionWidget( { data: 'fgh', label: 'Label for fgh' } ),
+								new OO.ui.MenuOptionWidget( { data: 'jkl', label: 'Label for jkl' } ),
+								new OO.ui.MenuOptionWidget( { data: 'zxc', label: 'Label for zxc' } ),
+								new OO.ui.MenuOptionWidget( { data: 'vbn', label: 'Label for vbn' } )
+							]
+						}
+					} ),
+					{
+						label: 'ComboBoxWidget',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ComboBoxWidget( {
+						disabled: true,
+						menu: {
+							items: [
+								new OO.ui.MenuOptionWidget( { data: 'asd', label: 'Label for asd' } ),
+								new OO.ui.MenuOptionWidget( { data: 'fgh', label: 'Label for fgh' } ),
+								new OO.ui.MenuOptionWidget( { data: 'jkl', label: 'Label for jkl' } ),
+								new OO.ui.MenuOptionWidget( { data: 'zxc', label: 'Label for zxc' } ),
+								new OO.ui.MenuOptionWidget( { data: 'vbn', label: 'Label for vbn' } )
+							]
+						}
+					} ),
+					{
+						label: 'ComboBoxWidget (disabled)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ComboBoxWidget(),
+					{
+						label: 'ComboBoxWidget (empty)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonInputWidget( {
+						label: 'Submit the form',
+						type: 'submit'
+					} ),
+					{
+						align: 'top',
+						label: 'ButtonInputWidget'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonInputWidget( {
+						label: 'Submit the form',
+						type: 'submit',
+						useInputTag: true
+					} ),
+					{
+						align: 'top',
+						label: 'ButtonInputWidget (using <input/>)\u200E'
+					}
+				)
+			]
+		} ),
+		new OO.ui.FieldsetLayout( {
+			label: 'Horizontal alignment',
+			items: [
+				new OO.ui.FieldLayout(
+					horizontalAlignmentWidget,
+					{
+						label: 'Multiple widgets shown as a single line, ' +
+							'as used in compact forms or in parts of a bigger widget.',
+						align: 'top'
+					}
+				)
+			]
+		} ),
+		new OO.ui.FieldsetLayout( {
+			label: 'Draggable',
+			items: [
+				new OO.ui.FieldLayout(
+					new DragDropGroupWidget( {
+						orientation: 'horizontal',
+						items: [
+							new DragDropItemWidget( {
+								data: 'item1',
+								label: 'Item 1'
+							} ),
+							new DragDropItemWidget( {
+								data: 'item2',
+								label: 'Item 2'
+							} ),
+							new DragDropItemWidget( {
+								data: 'item3',
+								label: 'Item 3'
+							} ),
+							new DragDropItemWidget( {
+								data: 'item4',
+								label: 'Item 4'
+							} )
+						]
+					} ),
+					{
+						label: 'DraggableGroupWidget (horizontal)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new DragDropGroupWidget( {
+						items: [
+							new DragDropItemWidget( {
+								data: 'item1',
+								label: 'Item 1'
+							} ),
+							new DragDropItemWidget( {
+								data: 'item2',
+								label: 'Item 2'
+							} ),
+							new DragDropItemWidget( {
+								data: 'item3',
+								label: 'Item 3'
+							} ),
+							new DragDropItemWidget( {
+								data: 'item4',
+								label: 'Item 4'
+							} )
+						]
+					} ),
+					{
+						label: 'DraggableGroupWidget (vertical)\u200E',
+						align: 'top'
+					}
+				)
+			]
+		} ),
+		new OO.ui.FieldsetLayout( {
+			label: 'Other widgets',
+			items: [
+				new OO.ui.FieldLayout(
+					new OO.ui.IconWidget( {
+						icon: 'picture',
+						title: 'Picture icon'
+					} ),
+					{
+						label: 'IconWidget (normal)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.IconWidget( {
+						icon: 'remove',
+						flags: 'destructive',
+						title: 'Remove icon'
+					} ),
+					{
+						label: 'IconWidget (flagged)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.IconWidget( {
+						icon: 'picture',
+						title: 'Picture icon',
+						disabled: true
+					} ),
+					{
+						label: 'IconWidget (disabled)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.IndicatorWidget( {
+						indicator: 'required',
+						title: 'Required indicator'
+					} ),
+					{
+						label: 'IndicatorWidget (normal)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.IndicatorWidget( {
+						indicator: 'required',
+						title: 'Required indicator',
+						disabled: true
+					} ),
+					{
+						label: 'IndicatorWidget (disabled)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.LabelWidget( {
+						label: 'Label'
+					} ),
+					{
+						label: 'LabelWidget (normal)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.LabelWidget( {
+						label: 'Label',
+						disabled: true
+					} ),
+					{
+						label: 'LabelWidget (disabled)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.LabelWidget( {
+						label: new OO.ui.HtmlSnippet( '<b>Fancy</b> <i>text</i> <u>formatting</u>!' )
+					} ),
+					{
+						label: 'LabelWidget (with html)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.PopupButtonWidget( {
+						icon: 'info',
+						framed: false,
+						popup: {
+							head: true,
+							label: 'More information',
+							$content: $( '<p>Extra information here.</p>' ),
+							padded: true,
+							align: 'force-left'
+						}
+					} ),
+					{
+						label: 'PopupButtonWidget (frameless, with popup head, align: force-left)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.PopupButtonWidget( {
+						icon: 'info',
+						framed: false,
+						popup: {
+							head: true,
+							label: 'More information',
+							$content: $( '<p>Extra information here.</p>' ),
+							padded: true,
+							align: 'force-right'
+						}
+					} ),
+					{
+						label: 'PopupButtonWidget (frameless, with popup head align: force-right)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.PopupButtonWidget( {
+						icon: 'info',
+						framed: false,
+						popup: {
+							head: true,
+							label: 'More information',
+							$content: $( '<p>Extra information here.</p>' ),
+							padded: true,
+							align: 'backwards'
+						}
+					} ),
+					{
+						label: 'PopupButtonWidget (frameless, with popup head align: backwards)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.PopupButtonWidget( {
+						icon: 'info',
+						framed: false,
+						popup: {
+							head: true,
+							label: 'More information',
+							$content: $( '<p>Extra information here.</p>' ),
+							padded: true,
+							align: 'forwards'
+						}
+					} ),
+					{
+						label: 'PopupButtonWidget (frameless, with popup head align: forwards)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.PopupButtonWidget( {
+						icon: 'menu',
+						label: 'Options',
+						popup: {
+							$content: $( '<p>Additional options here.</p>' ),
+							padded: true,
+							align: 'left'
+						}
+					} ),
+					{
+						label: 'PopupButtonWidget (framed, no popup head)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new NumberLookupTextInputWidget(),
+					{
+						label: 'LookupElement (try inputting an integer)\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ProgressBarWidget( {
+						progress: 33
+					} ),
+					{
+						label: 'Progress bar',
+						align: 'top'
+					}
+				),
+				new OO.ui.FieldLayout(
+					new OO.ui.ProgressBarWidget( {
+						progress: false
+					} ),
+					{
+						label: 'Progress bar (indeterminate)\u200E',
+						align: 'top'
+					}
+				)
+			]
+		} ),
+		new OO.ui.FieldsetLayout( {
+			label: 'Field layouts',
+			help: 'I am an additional, helpful information. Lorem ipsum dolor sit amet, cibo pri ' +
+				'in, duo ex inimicus perpetua complectitur, mel periculis similique at.\u200E',
+			items: [
+				new OO.ui.FieldLayout(
+					new OO.ui.ButtonWidget( {
+						label: 'Button'
+					} ),
+					{
+						label: 'FieldLayout with help',
+						help: 'I am an additional, helpful information. Lorem ipsum dolor sit amet, cibo pri ' +
+							'in, duo ex inimicus perpetua complectitur, mel periculis similique at.\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.ActionFieldLayout(
+					new OO.ui.TextInputWidget( {} ),
+					new OO.ui.ButtonWidget( {
+						label: 'Button'
+					} ),
+					{
+						label: 'ActionFieldLayout aligned left',
+						align: 'left'
+					}
+				),
+				new OO.ui.ActionFieldLayout(
+					new OO.ui.TextInputWidget( {} ),
+					new OO.ui.ButtonWidget( {
+						label: 'Button'
+					} ),
+					{
+						label: 'ActionFieldLayout aligned inline',
+						align: 'inline'
+					}
+				),
+				new OO.ui.ActionFieldLayout(
+					new OO.ui.TextInputWidget( {} ),
+					new OO.ui.ButtonWidget( {
+						label: 'Button'
+					} ),
+					{
+						label: 'ActionFieldLayout aligned right',
+						align: 'right'
+					}
+				),
+				new OO.ui.ActionFieldLayout(
+					new OO.ui.TextInputWidget( {} ),
+					new OO.ui.ButtonWidget( {
+						label: 'Button'
+					} ),
+					{
+						label: 'ActionFieldLayout aligned top',
+						align: 'top'
+					}
+				),
+				new OO.ui.ActionFieldLayout(
+					new OO.ui.TextInputWidget( {} ),
+					new OO.ui.ButtonWidget( {
+						label: 'Button'
+					} ),
+					{
+						label: 'ActionFieldLayout aligned top with help',
+						help: 'I am an additional, helpful information. Lorem ipsum dolor sit amet, cibo pri ' +
+							'in, duo ex inimicus perpetua complectitur, mel periculis similique at.\u200E',
+						align: 'top'
+					}
+				),
+				new OO.ui.ActionFieldLayout(
+					new OO.ui.TextInputWidget( {} ),
+					new OO.ui.ButtonWidget( {
+						label: 'Button'
+					} ),
+					{
+						label: $( '<i>' ).text( 'ActionFieldLayout aligned top with rich text label' ),
+						align: 'top'
+					}
+				)
+			]
+		} ),
+		new OO.ui.FormLayout( {
+			method: 'GET',
+			action: 'widgets.php',
+			items: [
+				new OO.ui.FieldsetLayout( {
+					label: 'Form layout',
+					items: [
+						new OO.ui.FieldLayout(
+							new OO.ui.TextInputWidget( {
+								name: 'username'
+							} ),
+							{
+								label: 'User name',
+								align: 'top'
+							}
+						),
+						new OO.ui.FieldLayout(
+							new OO.ui.TextInputWidget( {
+								name: 'password',
+								type: 'password'
+							} ),
+							{
+								label: 'Password',
+								align: 'top'
+							}
+						),
+						new OO.ui.FieldLayout(
+							new OO.ui.CheckboxInputWidget( {
+								name: 'rememberme',
+								selected: true
+							} ),
+							{
+								label: 'Remember me',
+								align: 'inline'
+							}
+						),
+						new OO.ui.FieldLayout(
+							new OO.ui.ButtonInputWidget( {
+								name: 'login',
+								label: 'Log in',
+								type: 'submit',
+								flags: [ 'primary', 'progressive' ],
+								icon: 'check'
+							} ),
+							{
+								label: null,
+								align: 'top'
+							}
+						)
+					]
+				} )
+			]
+		} )
+	];
+
+	$.each( fieldsets, function ( i, fieldsetLayout ) {
+		$.each( fieldsetLayout.getItems(), function ( j, fieldLayout ) {
+			fieldLayout.$element.append(
+				demo.buildConsole( fieldLayout.fieldWidget, 'widget' )
+			);
+		} );
+	} );
+
+	$demo.append(
+		new OO.ui.PanelLayout( {
+			expanded: false,
+			framed: true
+		} ).$element
+			.addClass( 'oo-ui-demo-container' )
+			.append(
+				$( fieldsets.map( function ( fieldset ) { return fieldset.$element[ 0 ]; } ) )
+			)
+	);
+};
+
+OO.ui.Demo.static.defaultPage = 'widgets';