From 247a0b4db7ca3ce9f2931c9fce0f8b9f7e78f6e3 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 24 Nov 2021 13:03:50 +0100
Subject: [PATCH 01/26] Initial implementation of the list properties UI.

---
 packages/ckeditor5-list/package.json          |   6 +-
 packages/ckeditor5-list/src/liststyleui.js    |  32 ++-
 .../ckeditor5-list/src/ui/collapsibleview.js  | 136 +++++++++++
 .../ckeditor5-list/src/ui/inputnumberview.js  | 227 ++++++++++++++++++
 .../src/ui/listpropertiesview.js              | 186 ++++++++++++++
 .../src/ui/numberedlistpropertiesview.js      | 148 ++++++++++++
 .../tests/manual/list-properties.html         |  25 ++
 .../tests/manual/list-properties.js           | 141 +++++++++++
 .../tests/manual/list-properties.md           |   3 +
 .../ckeditor5-list/tests/manual/list-style.md |   2 +-
 packages/ckeditor5-list/theme/collapsible.css |  46 ++++
 packages/ckeditor5-list/theme/inputnumber.css |  70 ++++++
 .../ckeditor5-list/theme/listproperties.css   |  14 ++
 packages/ckeditor5-list/theme/liststyles.css  |   6 +-
 .../theme/numberedlistproperties.css          |  51 ++++
 .../theme/ckeditor5-list/liststyles.css       |  53 ++--
 packages/ckeditor5-ui/src/focuscycler.js      |   2 +-
 17 files changed, 1101 insertions(+), 47 deletions(-)
 create mode 100644 packages/ckeditor5-list/src/ui/collapsibleview.js
 create mode 100644 packages/ckeditor5-list/src/ui/inputnumberview.js
 create mode 100644 packages/ckeditor5-list/src/ui/listpropertiesview.js
 create mode 100644 packages/ckeditor5-list/src/ui/numberedlistpropertiesview.js
 create mode 100644 packages/ckeditor5-list/tests/manual/list-properties.html
 create mode 100644 packages/ckeditor5-list/tests/manual/list-properties.js
 create mode 100644 packages/ckeditor5-list/tests/manual/list-properties.md
 create mode 100644 packages/ckeditor5-list/theme/collapsible.css
 create mode 100644 packages/ckeditor5-list/theme/inputnumber.css
 create mode 100644 packages/ckeditor5-list/theme/listproperties.css
 create mode 100644 packages/ckeditor5-list/theme/numberedlistproperties.css

diff --git a/packages/ckeditor5-list/package.json b/packages/ckeditor5-list/package.json
index ff85d8a9e2f..598ff95819d 100644
--- a/packages/ckeditor5-list/package.json
+++ b/packages/ckeditor5-list/package.json
@@ -12,7 +12,9 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^31.0.0"
+    "ckeditor5": "^31.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^31.0.0",
+    "@ckeditor/ckeditor5-ui": "^31.0.0"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-basic-styles": "^31.0.0",
@@ -32,9 +34,7 @@
     "@ckeditor/ckeditor5-paragraph": "^31.0.0",
     "@ckeditor/ckeditor5-remove-format": "^31.0.0",
     "@ckeditor/ckeditor5-table": "^31.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^31.0.0",
     "@ckeditor/ckeditor5-typing": "^31.0.0",
-    "@ckeditor/ckeditor5-ui": "^31.0.0",
     "@ckeditor/ckeditor5-undo": "^31.0.0",
     "@ckeditor/ckeditor5-utils": "^31.0.0",
     "webpack": "^4.43.0",
diff --git a/packages/ckeditor5-list/src/liststyleui.js b/packages/ckeditor5-list/src/liststyleui.js
index 981dfcedadf..00cfa29d085 100644
--- a/packages/ckeditor5-list/src/liststyleui.js
+++ b/packages/ckeditor5-list/src/liststyleui.js
@@ -8,7 +8,9 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core';
-import { ButtonView, SplitButtonView, createDropdown, addToolbarToDropdown } from 'ckeditor5/src/ui';
+import { ButtonView, SplitButtonView, createDropdown } from 'ckeditor5/src/ui';
+
+import ListPropertiesView from './ui/listpropertiesview';
 
 import bulletedListIcon from '../theme/icons/bulletedlist.svg';
 import numberedListIcon from '../theme/icons/numberedlist.svg';
@@ -51,7 +53,7 @@ export default class ListStyleUI extends Plugin {
 			parentCommandName: 'bulletedList',
 			buttonLabel: t( 'Bulleted List' ),
 			buttonIcon: bulletedListIcon,
-			toolbarAriaLabel: t( 'Bulleted list styles toolbar' ),
+			styleGridAriaLabel: t( 'Bulleted list styles toolbar' ),
 			styleDefinitions: [
 				{
 					label: t( 'Toggle the disc list style' ),
@@ -79,7 +81,7 @@ export default class ListStyleUI extends Plugin {
 			parentCommandName: 'numberedList',
 			buttonLabel: t( 'Numbered List' ),
 			buttonIcon: numberedListIcon,
-			toolbarAriaLabel: t( 'Numbered list styles toolbar' ),
+			styleGridAriaLabel: t( 'Numbered list styles toolbar' ),
 			styleDefinitions: [
 				{
 					label: t( 'Toggle the decimal list style' ),
@@ -131,10 +133,10 @@ export default class ListStyleUI extends Plugin {
 // the set of particular list styles (e.g. "bulletedList" for "disc", "circle", and "square" styles).
 // @param {String} options.buttonLabel Label of the main part of the split button.
 // @param {String} options.buttonIcon The SVG string of an icon for the main part of the split button.
-// @param {String} options.toolbarAriaLabel The ARIA label for the toolbar in the split button dropdown.
+// @param {String} options.styleGridAriaLabel The ARIA label for the styles grid in the split button dropdown.
 // @param {Object} options.styleDefinitions Definitions of the style buttons.
 // @returns {Function} A function that can be passed straight into {@link module:ui/componentfactory~ComponentFactory#add}.
-function getSplitButtonCreator( { editor, parentCommandName, buttonLabel, buttonIcon, toolbarAriaLabel, styleDefinitions } ) {
+function getSplitButtonCreator( { editor, parentCommandName, buttonLabel, buttonIcon, styleGridAriaLabel, styleDefinitions } ) {
 	const parentCommand = editor.commands.get( parentCommandName );
 	const listStyleCommand = editor.commands.get( 'listStyle' );
 
@@ -143,12 +145,14 @@ function getSplitButtonCreator( { editor, parentCommandName, buttonLabel, button
 	return locale => {
 		const dropdownView = createDropdown( locale, SplitButtonView );
 		const splitButtonView = dropdownView.buttonView;
+		const enabledProperties = Object.fromEntries( editor.config.get( 'list.properties' ).map( key => [ key, true ] ) );
+		const isNumberedListDropdown = parentCommandName == 'numberedList';
+		const shouldIncludeStyles = isNumberedListDropdown ? !!enabledProperties.styles : true;
+		const shouldRenderNumberedListProperties = isNumberedListDropdown && ( enabledProperties.startIndex || enabledProperties.reversed );
 		const styleButtonCreator = getStyleButtonCreator( { editor, parentCommandName, listStyleCommand } );
-
-		addToolbarToDropdown( dropdownView, styleDefinitions.map( styleButtonCreator ) );
+		const styleButtonViews = shouldIncludeStyles ? styleDefinitions.map( styleButtonCreator ) : null;
 
 		dropdownView.bind( 'isEnabled' ).to( parentCommand );
-		dropdownView.toolbarView.ariaLabel = toolbarAriaLabel;
 		dropdownView.class = 'ck-list-styles-dropdown';
 
 		splitButtonView.on( 'execute', () => {
@@ -165,6 +169,18 @@ function getSplitButtonCreator( { editor, parentCommandName, buttonLabel, button
 
 		splitButtonView.bind( 'isOn' ).to( parentCommand, 'value', value => !!value );
 
+		const listPropertiesView = new ListPropertiesView( locale, {
+			styleGridAriaLabel,
+			enabledProperties,
+			styleButtonViews,
+			shouldRenderNumberedListProperties
+		} );
+
+		// Make sure applying styles closes the dropdown.
+		listPropertiesView.delegate( 'execute' ).to( dropdownView );
+
+		dropdownView.panelView.children.add( listPropertiesView );
+
 		return dropdownView;
 	};
 }
diff --git a/packages/ckeditor5-list/src/ui/collapsibleview.js b/packages/ckeditor5-list/src/ui/collapsibleview.js
new file mode 100644
index 00000000000..af7bdc6001c
--- /dev/null
+++ b/packages/ckeditor5-list/src/ui/collapsibleview.js
@@ -0,0 +1,136 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module TODO
+ */
+
+import { View, ButtonView } from 'ckeditor5/src/ui';
+import { FocusTracker } from 'ckeditor5/src/utils';
+
+// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
+import dropdownArrowIcon from '@ckeditor/ckeditor5-ui/theme/icons/dropdown-arrow.svg';
+
+import '../../theme/collapsible.css';
+
+/**
+ * TODO
+ *
+ * @extends module:ui/view~View
+ */
+export default class CollapsibleView extends View {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale, childViews ) {
+		super( locale );
+
+		const bind = this.bindTemplate;
+
+		/**
+		 * TODO
+		 */
+		this.set( 'isCollapsed', false );
+
+		/**
+		 * TODO
+		 */
+		this.set( 'label' );
+
+		/**
+		 * TODO
+		 */
+		this.buttonView = this._createButtonView();
+
+		/**
+		 * A collection of the child views.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.children = this.createCollection();
+
+		/**
+		 * Tracks information about the DOM focus in the collapsible.
+		 *
+		 * @readonly
+		 * @protected
+		 * @member {module:utils/focustracker~FocusTracker}
+		 */
+		this.focusTracker = new FocusTracker();
+
+		/**
+		 * TODO
+		 */
+		this.set( '_collapsibleAriaLabelUid' );
+
+		if ( childViews ) {
+			this.children.addMany( childViews );
+		}
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck',
+					'ck-collapsible',
+					bind.if( 'isCollapsed', 'ck-collapsible_collapsed' )
+				]
+			},
+			children: [
+				this.buttonView,
+				{
+					tag: 'div',
+					attributes: {
+						class: [
+							'ck',
+							'ck-collapsible__children'
+						],
+						role: 'region',
+						hidden: bind.if( 'isCollapsed', 'hidden' ),
+						'aria-labelledby': bind.to( '_collapsibleAriaLabelUid' )
+					},
+					children: this.children
+				}
+			]
+		} );
+	}
+
+	render() {
+		super.render();
+
+		this._collapsibleAriaLabelUid = this.buttonView.labelView.element.id;
+	}
+
+	/**
+	 * TODO
+	 *
+	 * @returns
+	 */
+	_createButtonView() {
+		const buttonView = new ButtonView( this.locale );
+		const bind = buttonView.bindTemplate;
+
+		buttonView.set( {
+			withText: true,
+			icon: dropdownArrowIcon
+		} );
+
+		buttonView.extendTemplate( {
+			attributes: {
+				'aria-expanded': bind.to( 'isOn', value => String( value ) )
+			}
+		} );
+
+		buttonView.bind( 'label' ).to( this );
+		buttonView.bind( 'isOn' ).to( this, 'isCollapsed', isCollapsed => !isCollapsed );
+
+		buttonView.on( 'execute', () => {
+			this.isCollapsed = !this.isCollapsed;
+		} );
+
+		return buttonView;
+	}
+}
diff --git a/packages/ckeditor5-list/src/ui/inputnumberview.js b/packages/ckeditor5-list/src/ui/inputnumberview.js
new file mode 100644
index 00000000000..0de1165c9c4
--- /dev/null
+++ b/packages/ckeditor5-list/src/ui/inputnumberview.js
@@ -0,0 +1,227 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module TODO
+ */
+
+import { View } from 'ckeditor5/src/ui';
+import { FocusTracker } from 'ckeditor5/src/utils';
+
+import '../../theme/inputnumber.css';
+
+/**
+ * The number input view class.
+ *
+ * @extends module:ui/view~View
+ */
+export default class InputNumberView extends View {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale, { min, max, step } = {} ) {
+		super( locale );
+
+		/**
+		 * The value of the input.
+		 *
+		 * @observable
+		 * @member {String} #value
+		 */
+		this.set( 'value' );
+
+		/**
+		 * The `id` attribute of the input (i.e. to pair with a `<label>` element).
+		 *
+		 * @observable
+		 * @member {String} #id
+		 */
+		this.set( 'id' );
+
+		/**
+		 * The `placeholder` attribute of the input.
+		 *
+		 * @observable
+		 * @member {String} #placeholder
+		 */
+		this.set( 'placeholder' );
+
+		/**
+		 * Controls whether the input view is in read-only mode.
+		 *
+		 * @observable
+		 * @member {Boolean} #isReadOnly
+		 */
+		this.set( 'isReadOnly', false );
+
+		/**
+		 * Set to `true` when the field has some error. Usually controlled via
+		 * {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
+		 *
+		 * @observable
+		 * @member {Boolean} #hasError
+		 */
+		this.set( 'hasError', false );
+
+		/**
+		 * The `id` of the element describing this field, e.g. when it has
+		 * some error, it helps screen readers read the error text.
+		 *
+		 * @observable
+		 * @member {Boolean} #ariaDescribedById
+		 */
+		this.set( 'ariaDescribedById' );
+
+		/**
+		 * Stores information about the editor UI focus and propagates it so various plugins and components
+		 * are unified as a focus group.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker} #focusTracker
+		 */
+		this.focusTracker = new FocusTracker();
+
+		/**
+		 * An observable flag set to `true` when the input is currently focused by the user.
+		 * Set to `false` otherwise.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} #isFocused
+		 * @default false
+		 */
+		this.bind( 'isFocused' ).to( this.focusTracker );
+
+		/**
+		 * An observable flag set to `true` when the input contains no text, i.e.
+		 * when {@link #value} is `''`, `null`, or `false`.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} #isEmpty
+		 * @default true
+		 */
+		this.set( 'isEmpty', true );
+
+		/**
+		 * TODO
+		 */
+		this.set( 'min', min );
+
+		/**
+		 * TODO
+		 */
+		this.set( 'max', max );
+
+		/**
+		 * TODO
+		 */
+		this.set( 'step', step );
+
+		const bind = this.bindTemplate;
+
+		this.setTemplate( {
+			tag: 'input',
+			attributes: {
+				type: 'number',
+				class: [
+					'ck',
+					'ck-input',
+					'ck-input-number',
+					bind.if( 'isFocused', 'ck-input_focused' ),
+					bind.if( 'isEmpty', 'ck-input-text_empty' ),
+					bind.if( 'hasError', 'ck-error' )
+				],
+				id: bind.to( 'id' ),
+				placeholder: bind.to( 'placeholder' ),
+				readonly: bind.to( 'isReadOnly' ),
+				'aria-invalid': bind.if( 'hasError', true ),
+				'aria-describedby': bind.to( 'ariaDescribedById' ),
+
+				min: bind.to( 'min' ),
+				max: bind.to( 'max' ),
+				step: bind.to( 'step' )
+			},
+			on: {
+				input: bind.to( ( ...args ) => {
+					this.fire( 'input', ...args );
+					this._updateIsEmpty();
+				} ),
+				change: bind.to( this._updateIsEmpty.bind( this ) )
+			}
+		} );
+
+		/**
+		 * Fired when the user types in the input. Corresponds to the native
+		 * DOM `input` event.
+		 *
+		 * @event input
+		 */
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		this.focusTracker.add( this.element );
+
+		this._setDomElementValue( this.value );
+		this._updateIsEmpty();
+
+		// Bind `this.value` to the DOM element's value.
+		// We cannot use `value` DOM attribute because removing it on Edge does not clear the DOM element's value property.
+		this.on( 'change:value', ( evt, name, value ) => {
+			this._setDomElementValue( value );
+			this._updateIsEmpty();
+		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+	}
+
+	/**
+	 * Moves the focus to the input and selects the value.
+	 */
+	select() {
+		this.element.select();
+	}
+
+	/**
+	 * Focuses the input.
+	 */
+	focus() {
+		this.element.focus();
+	}
+
+	/**
+	 * Updates the {@link #isEmpty} property value on demand.
+	 *
+	 * @private
+	 */
+	_updateIsEmpty() {
+		this.isEmpty = isInputElementEmpty( this.element );
+	}
+
+	/**
+	 * Sets the `value` property of the {@link #element DOM element} on demand.
+	 *
+	 * @private
+	 */
+	_setDomElementValue( value ) {
+		this.element.value = ( !value && value !== 0 ) ? '' : value;
+	}
+}
+
+function isInputElementEmpty( domElement ) {
+	return !domElement.value;
+}
diff --git a/packages/ckeditor5-list/src/ui/listpropertiesview.js b/packages/ckeditor5-list/src/ui/listpropertiesview.js
new file mode 100644
index 00000000000..be53a8a77f2
--- /dev/null
+++ b/packages/ckeditor5-list/src/ui/listpropertiesview.js
@@ -0,0 +1,186 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module TODO
+ */
+
+import { View, ViewCollection, FocusCycler } from 'ckeditor5/src/ui';
+import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
+import NumberedListPropertiesView from './numberedlistpropertiesview';
+
+import '../../theme/listproperties.css';
+
+/**
+ * TODO
+ *
+ * @extends module:ui/view~View
+ */
+export default class ListPropertiesView extends View {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale, { shouldRenderNumberedListProperties, enabledProperties, styleButtonViews, styleGridAriaLabel } ) {
+		super( locale );
+
+		const cssClasses = [
+			'ck',
+			'ck-list-properties'
+		];
+
+		/**
+		 * A collection of the child views.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.children = this.createCollection();
+
+		/**
+		 * Tracks information about the DOM focus in the view.
+		 *
+		 * @readonly
+		 * @protected
+		 * @member {module:utils/focustracker~FocusTracker}
+		 */
+		this.focusTracker = new FocusTracker();
+
+		/**
+		 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+		 *
+		 * @readonly
+		 * @protected
+		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
+		 */
+		this.keystrokes = new KeystrokeHandler();
+
+		/**
+		 * A collection of views that can be focused in the view.
+		 *
+		 * @readonly
+		 * @protected
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.focusables = new ViewCollection();
+
+		/**
+		 * Helps cycling over {@link #focusables} in the view.
+		 *
+		 * @readonly
+		 * @protected
+		 * @member {module:ui/focuscycler~FocusCycler}
+		 */
+		this.focusCycler = new FocusCycler( {
+			focusables: this.focusables,
+			focusTracker: this.focusTracker,
+			keystrokeHandler: this.keystrokes,
+			actions: {
+				// Navigate #children backwards using the <kbd>Shift</kbd> + <kbd>Tab</kbd> keystroke.
+				focusPrevious: 'shift + tab',
+
+				// Navigate #children forwards using the <kbd>Tab</kbd> key.
+				focusNext: 'tab'
+			}
+		} );
+
+		if ( styleButtonViews ) {
+			this.stylesView = this._createStylesView( styleButtonViews, styleGridAriaLabel );
+			this.children.add( this.stylesView );
+		}
+
+		if ( shouldRenderNumberedListProperties ) {
+			this.numberedPropertiesView = new NumberedListPropertiesView( locale, {
+				enabledProperties,
+				renderAsCollapsible: !!enabledProperties.styles
+			} );
+			this.children.add( this.numberedPropertiesView );
+
+			cssClasses.push( 'ck-list-properties_with-numbered-properties' );
+		}
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: cssClasses
+			},
+			children: this.children
+		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		if ( this.stylesView ) {
+			for ( const styleButtonView of this.stylesView.children ) {
+				// Register the view as focusable.
+				this.focusables.add( styleButtonView );
+
+				// Register the view in the focus tracker.
+				this.focusTracker.add( styleButtonView.element );
+			}
+		}
+
+		if ( this.numberedPropertiesView ) {
+			for ( const fieldView of this.numberedPropertiesView.focusables ) {
+				// Register the view as focusable.
+				this.focusables.add( fieldView );
+
+				// Register the view in the focus tracker.
+				this.focusTracker.add( fieldView.element );
+			}
+		}
+
+		// Start listening for the keystrokes coming from #element.
+		this.keystrokes.listenTo( this.element );
+	}
+
+	focus() {
+		this.focusCycler.focusFirst();
+	}
+
+	focusLast() {
+		this.focusCycler.focusLast();
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
+	/**
+	 * TODO
+	 */
+	_createStylesView( styleButtons, styleGridAriaLabel ) {
+		// TODO: ListView?
+		const stylesView = new View( this.locale );
+
+		stylesView.children = stylesView.createCollection( this.locale );
+		stylesView.children.addMany( styleButtons );
+
+		stylesView.setTemplate( {
+			tag: 'div',
+			attributes: {
+				'aria-label': styleGridAriaLabel,
+				class: [
+					'ck',
+					'ck-list-styles-list'
+				]
+			},
+			children: stylesView.children
+		} );
+
+		stylesView.children.delegate( 'execute' ).to( this );
+
+		return stylesView;
+	}
+}
diff --git a/packages/ckeditor5-list/src/ui/numberedlistpropertiesview.js b/packages/ckeditor5-list/src/ui/numberedlistpropertiesview.js
new file mode 100644
index 00000000000..5e999b41d0a
--- /dev/null
+++ b/packages/ckeditor5-list/src/ui/numberedlistpropertiesview.js
@@ -0,0 +1,148 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module TODO
+ */
+
+import { View, SwitchButtonView, LabeledFieldView, ViewCollection } from 'ckeditor5/src/ui';
+import InputNumberView from './inputnumberview';
+import CollapsibleView from './collapsibleview';
+
+import '../../theme/numberedlistproperties.css';
+
+/**
+ * TODO
+ *
+ * @extends module:ui/view~View
+ */
+export default class NumberedListPropertiesView extends View {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale, { enabledProperties, renderAsCollapsible } ) {
+		super( locale );
+
+		const t = locale.t;
+		const propertyFieldViews = [];
+
+		/**
+		 * A collection of the child views.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.children = this.createCollection();
+
+		/**
+		 * A collection of views that can be focused in the view.
+		 *
+		 * @readonly
+		 * @protected
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.focusables = new ViewCollection();
+
+		if ( enabledProperties.startIndex ) {
+			propertyFieldViews.push( this._createStartIndexField() );
+		}
+
+		if ( enabledProperties.reversed ) {
+			propertyFieldViews.push( this._createReversedField() );
+		}
+
+		if ( renderAsCollapsible ) {
+			const collapsibleView = new CollapsibleView( locale, propertyFieldViews );
+
+			collapsibleView.set( {
+				label: t( 'List properties' ),
+				isCollapsed: true
+			} );
+
+			this.children.add( collapsibleView );
+			this.focusables.add( collapsibleView.buttonView );
+		} else {
+			this.children.addMany( propertyFieldViews );
+		}
+
+		this.focusables.addMany( propertyFieldViews );
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck',
+					'ck-numbered-list-properties'
+				]
+			},
+			children: this.children
+		} );
+	}
+
+	render() {
+		super.render();
+	}
+
+	_createStartIndexField() {
+		const t = this.locale.t;
+		const startIndexFieldView = new LabeledFieldView( this.locale, createLabeledInputNumber );
+
+		startIndexFieldView.set( {
+			label: t( 'Start at' ),
+			class: 'ck-numbered-list-properties-start-index'
+		} );
+
+		startIndexFieldView.fieldView.set( {
+			min: 1,
+			step: 1,
+			value: 1
+		} );
+
+		return startIndexFieldView;
+	}
+
+	_createReversedField() {
+		const t = this.locale.t;
+		const reversedButtonView = new SwitchButtonView( this.locale );
+
+		reversedButtonView.set( {
+			withText: true,
+			label: t( 'Reversed order' ),
+			class: 'ck-numbered-list-properties-reversed-order'
+		} );
+
+		return reversedButtonView;
+	}
+}
+
+/**
+ * TODO
+ *
+ * @param {*} labeledFieldView
+ * @param {*} viewUid
+ * @param {*} statusUid
+ * @returns
+ */
+function createLabeledInputNumber( labeledFieldView, viewUid, statusUid ) {
+	const inputView = new InputNumberView( labeledFieldView.locale );
+
+	inputView.set( {
+		id: viewUid,
+		ariaDescribedById: statusUid
+	} );
+
+	inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
+	inputView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
+
+	inputView.on( 'input', () => {
+		// UX: Make the error text disappear and disable the error indicator as the user
+		// starts fixing the errors.
+		labeledFieldView.errorText = null;
+	} );
+
+	labeledFieldView.bind( 'isEmpty', 'isFocused', 'placeholder' ).to( inputView );
+
+	return inputView;
+}
diff --git a/packages/ckeditor5-list/tests/manual/list-properties.html b/packages/ckeditor5-list/tests/manual/list-properties.html
new file mode 100644
index 00000000000..5b424a31c22
--- /dev/null
+++ b/packages/ckeditor5-list/tests/manual/list-properties.html
@@ -0,0 +1,25 @@
+<h2>Styles and properties</h2>
+
+<h3>Styles + Start + Reversed</h3>
+<div id="editor-a"></div>
+
+<h3>Styles + Start</h3>
+<div id="editor-b"></div>
+
+<h3>Styles + Reversed</h3>
+<div id="editor-c"></div>
+
+<h2>Only properties</h2>
+
+<h3>Start + Reversed</h3>
+<div id="editor-d"></div>
+
+<h3>Start</h3>
+<div id="editor-e"></div>
+
+<h3>Reversed</h3>
+<div id="editor-f"></div>
+
+<h2>No properties</h2>
+
+<div id="editor-g"></div>
diff --git a/packages/ckeditor5-list/tests/manual/list-properties.js b/packages/ckeditor5-list/tests/manual/list-properties.js
new file mode 100644
index 00000000000..63409ed97a5
--- /dev/null
+++ b/packages/ckeditor5-list/tests/manual/list-properties.js
@@ -0,0 +1,141 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Table from '@ckeditor/ckeditor5-table/src/table';
+import TablePropertiesEditing from '@ckeditor/ckeditor5-table/src/tableproperties/tablepropertiesediting';
+import TableCellPropertiesEditing from '@ckeditor/ckeditor5-table/src/tablecellproperties/tablecellpropertiesediting';
+import List from '../../src/list';
+import ListStyle from '../../src/liststyle';
+import Indent from '@ckeditor/ckeditor5-indent/src/indent';
+import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
+import TodoList from '../../src/todolist';
+import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+
+const config = {
+	plugins: [
+		Essentials,
+		Bold,
+		Italic,
+		Code,
+		Heading,
+		List,
+		TodoList,
+		Paragraph,
+		ListStyle,
+		Table,
+		TablePropertiesEditing,
+		TableCellPropertiesEditing,
+		Indent,
+		IndentBlock,
+		RemoveFormat
+	],
+	toolbar: [
+		'numberedList',
+		'|',
+		'bulletedList', 'todoList',
+		'|',
+		'heading',
+		'|',
+		'bold',
+		'italic',
+		'|',
+		'removeFormat',
+		'|',
+		'outdent',
+		'indent',
+		'|',
+		'undo', 'redo'
+	]
+};
+
+ClassicEditor
+	.create( document.querySelector( '#editor-a' ), {
+		...config,
+		list: {
+			properties: [ 'styles', 'startIndex', 'reversed' ]
+		}
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+ClassicEditor
+	.create( document.querySelector( '#editor-b' ), {
+		...config,
+		list: {
+			properties: [ 'styles', 'startIndex' ]
+		}
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+ClassicEditor
+	.create( document.querySelector( '#editor-c' ), {
+		...config,
+		list: {
+			properties: [ 'styles', 'reversed' ]
+		}
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+// ------------------------------------------------------------------
+
+ClassicEditor
+	.create( document.querySelector( '#editor-d' ), {
+		...config,
+		list: {
+			properties: [ 'startIndex', 'reversed' ]
+		}
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+ClassicEditor
+	.create( document.querySelector( '#editor-e' ), {
+		...config,
+		list: {
+			properties: [ 'startIndex' ]
+		}
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+ClassicEditor
+	.create( document.querySelector( '#editor-f' ), {
+		...config,
+		list: {
+			properties: [ 'reversed' ]
+		}
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+// ------------------------------------------------------------------
+
+ClassicEditor
+	.create( document.querySelector( '#editor-g' ), {
+		...config,
+		list: {
+			properties: [ 'styles' ]
+		}
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
diff --git a/packages/ckeditor5-list/tests/manual/list-properties.md b/packages/ckeditor5-list/tests/manual/list-properties.md
new file mode 100644
index 00000000000..9b246f01eb5
--- /dev/null
+++ b/packages/ckeditor5-list/tests/manual/list-properties.md
@@ -0,0 +1,3 @@
+# List properties feature
+
+TODO
diff --git a/packages/ckeditor5-list/tests/manual/list-style.md b/packages/ckeditor5-list/tests/manual/list-style.md
index d675164f57e..c739dffe535 100644
--- a/packages/ckeditor5-list/tests/manual/list-style.md
+++ b/packages/ckeditor5-list/tests/manual/list-style.md
@@ -13,5 +13,5 @@ The editor should display 4 headers and tables.
 4. **Nested/mixed lists**
     A table with two columns that contains nested and mixed `<ol>` and `<ul>` elements with
     different values for `list-style-type`.
-    
+
 Check whether the `list-style-type` value is the same as the table or the list item describes.
diff --git a/packages/ckeditor5-list/theme/collapsible.css b/packages/ckeditor5-list/theme/collapsible.css
new file mode 100644
index 00000000000..e0579ca58b1
--- /dev/null
+++ b/packages/ckeditor5-list/theme/collapsible.css
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-collapsible-arrow-size: calc(0.5 * var(--ck-icon-size));
+}
+
+.ck.ck-collapsible {
+	& > .ck.ck-button {
+		width: 100%;
+		font-weight: bold;
+		padding: var(--ck-spacing-medium) var(--ck-spacing-large);
+		border-radius: 0;
+
+		&:focus {
+			background: transparent;
+		}
+
+		&:active, &:not(:focus), &:hover:not(:focus) {
+			background: transparent;
+			border-color: transparent;
+			box-shadow: none;
+		}
+
+		& > .ck-icon {
+			margin-right: var(--ck-spacing-medium);
+			width: var(--ck-collapsible-arrow-size);
+		}
+	}
+
+	& > .ck-collapsible__children {
+		padding: 0 var(--ck-spacing-large) var(--ck-spacing-large);
+	}
+
+	&.ck-collapsible_collapsed {
+		& > .ck.ck-button .ck-icon {
+			transform: rotate(-90deg);
+		}
+
+		& > .ck-collapsible__children {
+			display: none;
+		}
+	}
+}
diff --git a/packages/ckeditor5-list/theme/inputnumber.css b/packages/ckeditor5-list/theme/inputnumber.css
new file mode 100644
index 00000000000..23eeca83394
--- /dev/null
+++ b/packages/ckeditor5-list/theme/inputnumber.css
@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rounded.css";
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_focus.css";
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_shadow.css";
+
+:root {
+	--ck-input-number-width: 18em;
+}
+
+.ck.ck-input-number {
+	@mixin ck-rounded-corners;
+
+	background: var(--ck-color-input-background);
+	border: 1px solid var(--ck-color-input-border);
+	padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
+	min-width: var(--ck-input-number-width);
+
+	/* This is important to stay of the same height as surrounding buttons */
+	min-height: var(--ck-ui-component-min-height);
+
+	/* Apply some smooth transition to the box-shadow and border. */
+	transition: box-shadow .1s ease-in-out, border .1s ease-in-out;
+
+	&:focus {
+		@mixin ck-focus-ring;
+		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
+	}
+
+	&[readonly] {
+		border: 1px solid var(--ck-color-input-disabled-border);
+		background: var(--ck-color-input-disabled-background);
+		color: var(--ck-color-input-disabled-text);
+
+		&:focus {
+			/* The read-only input should have a slightly less visible shadow when focused. */
+			@mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow);
+		}
+	}
+
+	&.ck-error {
+		border-color: var(--ck-color-input-error-border);
+		animation: ck-text-input-shake .3s ease both;
+
+		&:focus {
+			@mixin ck-box-shadow var(--ck-focus-error-outer-shadow);
+		}
+	}
+}
+
+@keyframes ck-text-input-shake {
+	20% {
+		transform: translateX(-2px);
+	}
+
+	40% {
+		transform: translateX(2px);
+	}
+
+	60% {
+		transform: translateX(-1px);
+	}
+
+	80% {
+		transform: translateX(1px);
+	}
+}
diff --git a/packages/ckeditor5-list/theme/listproperties.css b/packages/ckeditor5-list/theme/listproperties.css
new file mode 100644
index 00000000000..229345799af
--- /dev/null
+++ b/packages/ckeditor5-list/theme/listproperties.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-list-properties {
+	/*
+	 * When the numbered list property fields (start at, reversed) should be displayed,
+	 * more horizontal space is needed. Reconfigure the style grid to create that space.
+	 */
+	&.ck-list-properties_with-numbered-properties > .ck-list-styles-list {
+		grid-template-columns: repeat( 4, auto );
+	}
+}
diff --git a/packages/ckeditor5-list/theme/liststyles.css b/packages/ckeditor5-list/theme/liststyles.css
index b5d7c8d6f34..f5e533c32f4 100644
--- a/packages/ckeditor5-list/theme/liststyles.css
+++ b/packages/ckeditor5-list/theme/liststyles.css
@@ -3,10 +3,6 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-.ck.ck-list-styles-dropdown > .ck-dropdown__panel > .ck-toolbar > .ck-toolbar__items {
-	/*
-	 * Use the benefits of the toolbar (e.g. out-of-the-box keyboard navigation) but make it look
-	 * like a panel with thumbnails (previews).
-	 */
+.ck.ck-list-styles-list{
 	display: grid;
 }
diff --git a/packages/ckeditor5-list/theme/numberedlistproperties.css b/packages/ckeditor5-list/theme/numberedlistproperties.css
new file mode 100644
index 00000000000..f66fc448d72
--- /dev/null
+++ b/packages/ckeditor5-list/theme/numberedlistproperties.css
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-numbered-list-properties {
+	& .ck.ck-numbered-list-properties-start-index .ck-input {
+		min-width: auto;
+		width: 100%;
+	}
+
+	& .ck.ck-numbered-list-properties-reversed-order {
+		background: transparent;
+		padding-left: 0;
+		padding-right: 0;
+		padding-bottom: 0;
+
+		&:active {
+			box-shadow: none;
+			border-color: transparent;
+		}
+	}
+
+	/* When there are no list styles and there is no collapsible. */
+	&:only-child {
+		padding: var(--ck-spacing-large);
+
+		& > * {
+			min-width: 14em;
+
+			& + * {
+				margin-top: var(--ck-spacing-standard);
+			}
+		}
+	}
+
+	/* When list styles are rendered and property fields are in a collapsible. */
+	& > .ck-collapsible {
+		border-top: 1px solid var(--ck-color-base-border);
+
+		& > .ck-collapsible__children {
+			& > * {
+				width: 100%;
+
+				& + * {
+					margin-top: var(--ck-spacing-standard);
+				}
+			}
+		}
+	}
+}
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-list/liststyles.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-list/liststyles.css
index 0ea408f587c..94d93038f1b 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-list/liststyles.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-list/liststyles.css
@@ -7,39 +7,34 @@
 	--ck-list-style-button-size: 44px;
 }
 
-.ck.ck-list-styles-dropdown > .ck-dropdown__panel > .ck-toolbar {
-	background: none;
-	padding: 0;
+.ck.ck-list-styles-list {
+	grid-template-columns: repeat( 3, auto );
+	row-gap: var(--ck-spacing-medium);
+	column-gap: var(--ck-spacing-medium);
+	padding: var(--ck-spacing-large);
 
-	& > .ck-toolbar__items {
-		grid-template-columns: repeat( 3, auto );
-		row-gap: var(--ck-spacing-medium);
-		column-gap: var(--ck-spacing-medium);
-		padding: var(--ck-spacing-medium);
+	& .ck-button {
+		/* Make the button look like a thumbnail (the icon "takes it all"). */
+		width: var(--ck-list-style-button-size);
+		height: var(--ck-list-style-button-size);
+		padding: 0;
 
-		& .ck-button {
-			/* Make the button look like a thumbnail (the icon "takes it all"). */
-			width: var(--ck-list-style-button-size);
-			height: var(--ck-list-style-button-size);
-			padding: 0;
-
-			/*
-			 * Buttons are aligned by the grid so disable default button margins to not collide with the
-			 * gaps in the grid.
-			 */
-			margin: 0;
+		/*
+		 * Buttons are aligned by the grid so disable default button margins to not collide with the
+		 * gaps in the grid.
+		 */
+		margin: 0;
 
-			/*
-			 * Make sure the button border (which is displayed on focus, BTW) does not steal pixels
-			 * from the button dimensions and, as a result, decrease the size of the icon
-			 * (which becomes blurry as it scales down).
-			 */
-			box-sizing: content-box;
+		/*
+		 * Make sure the button border (which is displayed on focus, BTW) does not steal pixels
+		 * from the button dimensions and, as a result, decrease the size of the icon
+		 * (which becomes blurry as it scales down).
+		 */
+		box-sizing: content-box;
 
-			& .ck-icon {
-				width: var(--ck-list-style-button-size);
-				height: var(--ck-list-style-button-size);
-			}
+		& .ck-icon {
+			width: var(--ck-list-style-button-size);
+			height: var(--ck-list-style-button-size);
 		}
 	}
 }
diff --git a/packages/ckeditor5-ui/src/focuscycler.js b/packages/ckeditor5-ui/src/focuscycler.js
index b826b9281f6..e88ea8ce6ec 100644
--- a/packages/ckeditor5-ui/src/focuscycler.js
+++ b/packages/ckeditor5-ui/src/focuscycler.js
@@ -288,5 +288,5 @@ export default class FocusCycler {
 // @param {module:ui/view~View} view A view to be checked.
 // @returns {Boolean}
 function isFocusable( view ) {
-	return !!( view.focus && global.window.getComputedStyle( view.element ).display != 'none' );
+	return !!( view.focus && view.element.offsetParent && global.window.getComputedStyle( view.element ).display != 'none' );
 }

From 413b7889a9e74658b74cf6b0ceabbfb086320b92 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 25 Nov 2021 09:54:56 +0100
Subject: [PATCH 02/26] Code refactoring.

---
 .../src/ui/listpropertiesview.js              | 135 ++++++++++++++--
 .../src/ui/numberedlistpropertiesview.js      | 148 ------------------
 .../ckeditor5-list/theme/listproperties.css   |  51 +++++-
 .../theme/numberedlistproperties.css          |  51 ------
 4 files changed, 169 insertions(+), 216 deletions(-)
 delete mode 100644 packages/ckeditor5-list/src/ui/numberedlistpropertiesview.js
 delete mode 100644 packages/ckeditor5-list/theme/numberedlistproperties.css

diff --git a/packages/ckeditor5-list/src/ui/listpropertiesview.js b/packages/ckeditor5-list/src/ui/listpropertiesview.js
index be53a8a77f2..42beb650043 100644
--- a/packages/ckeditor5-list/src/ui/listpropertiesview.js
+++ b/packages/ckeditor5-list/src/ui/listpropertiesview.js
@@ -7,9 +7,20 @@
  * @module TODO
  */
 
-import { View, ViewCollection, FocusCycler } from 'ckeditor5/src/ui';
-import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
-import NumberedListPropertiesView from './numberedlistpropertiesview';
+import {
+	View,
+	ViewCollection,
+	FocusCycler,
+	SwitchButtonView,
+	LabeledFieldView
+} from 'ckeditor5/src/ui';
+import {
+	FocusTracker,
+	KeystrokeHandler
+} from 'ckeditor5/src/utils';
+
+import InputNumberView from './inputnumberview';
+import CollapsibleView from './collapsibleview';
 
 import '../../theme/listproperties.css';
 
@@ -25,6 +36,7 @@ export default class ListPropertiesView extends View {
 	constructor( locale, { shouldRenderNumberedListProperties, enabledProperties, styleButtonViews, styleGridAriaLabel } ) {
 		super( locale );
 
+		const t = locale.t;
 		const cssClasses = [
 			'ck',
 			'ck-list-properties'
@@ -88,14 +100,36 @@ export default class ListPropertiesView extends View {
 		if ( styleButtonViews ) {
 			this.stylesView = this._createStylesView( styleButtonViews, styleGridAriaLabel );
 			this.children.add( this.stylesView );
+		} else {
+			cssClasses.push( 'ck-list-properties_without-styles' );
 		}
 
 		if ( shouldRenderNumberedListProperties ) {
-			this.numberedPropertiesView = new NumberedListPropertiesView( locale, {
-				enabledProperties,
-				renderAsCollapsible: !!enabledProperties.styles
-			} );
-			this.children.add( this.numberedPropertiesView );
+			const numberedPropertiesFields = [];
+
+			if ( enabledProperties.startIndex ) {
+				this.startIndexFieldView = this._createStartIndexField();
+				numberedPropertiesFields.push( this.startIndexFieldView );
+			}
+
+			if ( enabledProperties.reversed ) {
+				this.reversedFieldView = this._createReversedField();
+				numberedPropertiesFields.push( this.reversedFieldView );
+			}
+
+			// When there are some style buttons, pack the numbered list properties into a collapsible to separate them.
+			if ( styleButtonViews ) {
+				const collapsibleView = new CollapsibleView( locale, numberedPropertiesFields );
+
+				collapsibleView.set( {
+					label: t( 'List properties' ),
+					isCollapsed: true
+				} );
+
+				this.children.add( collapsibleView );
+			} else {
+				this.children.addMany( numberedPropertiesFields );
+			}
 
 			cssClasses.push( 'ck-list-properties_with-numbered-properties' );
 		}
@@ -125,14 +159,14 @@ export default class ListPropertiesView extends View {
 			}
 		}
 
-		if ( this.numberedPropertiesView ) {
-			for ( const fieldView of this.numberedPropertiesView.focusables ) {
-				// Register the view as focusable.
-				this.focusables.add( fieldView );
+		if ( this.startIndexFieldView ) {
+			this.focusables.add( this.startIndexFieldView );
+			this.focusTracker.add( this.startIndexFieldView.element );
+		}
 
-				// Register the view in the focus tracker.
-				this.focusTracker.add( fieldView.element );
-			}
+		if ( this.reversedFieldView ) {
+			this.focusables.add( this.reversedFieldView );
+			this.focusTracker.add( this.reversedFieldView.element );
 		}
 
 		// Start listening for the keystrokes coming from #element.
@@ -183,4 +217,75 @@ export default class ListPropertiesView extends View {
 
 		return stylesView;
 	}
+
+	/**
+	 * TODO
+	 *
+	 * @returns
+	 */
+	_createStartIndexField() {
+		const t = this.locale.t;
+		const startIndexFieldView = new LabeledFieldView( this.locale, createLabeledInputNumber );
+
+		startIndexFieldView.set( {
+			label: t( 'Start at' ),
+			class: 'ck-numbered-list-properties-start-index'
+		} );
+
+		startIndexFieldView.fieldView.set( {
+			min: 1,
+			step: 1,
+			value: 1
+		} );
+
+		return startIndexFieldView;
+	}
+
+	/**
+	 * TODO
+	 *
+	 * @returns
+	 */
+	_createReversedField() {
+		const t = this.locale.t;
+		const reversedButtonView = new SwitchButtonView( this.locale );
+
+		reversedButtonView.set( {
+			withText: true,
+			label: t( 'Reversed order' ),
+			class: 'ck-numbered-list-properties-reversed-order'
+		} );
+
+		return reversedButtonView;
+	}
+}
+
+/**
+ * TODO
+ *
+ * @param {*} labeledFieldView
+ * @param {*} viewUid
+ * @param {*} statusUid
+ * @returns
+ */
+function createLabeledInputNumber( labeledFieldView, viewUid, statusUid ) {
+	const inputView = new InputNumberView( labeledFieldView.locale );
+
+	inputView.set( {
+		id: viewUid,
+		ariaDescribedById: statusUid
+	} );
+
+	inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
+	inputView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
+
+	inputView.on( 'input', () => {
+		// UX: Make the error text disappear and disable the error indicator as the user
+		// starts fixing the errors.
+		labeledFieldView.errorText = null;
+	} );
+
+	labeledFieldView.bind( 'isEmpty', 'isFocused', 'placeholder' ).to( inputView );
+
+	return inputView;
 }
diff --git a/packages/ckeditor5-list/src/ui/numberedlistpropertiesview.js b/packages/ckeditor5-list/src/ui/numberedlistpropertiesview.js
deleted file mode 100644
index 5e999b41d0a..00000000000
--- a/packages/ckeditor5-list/src/ui/numberedlistpropertiesview.js
+++ /dev/null
@@ -1,148 +0,0 @@
-/**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-/**
- * @module TODO
- */
-
-import { View, SwitchButtonView, LabeledFieldView, ViewCollection } from 'ckeditor5/src/ui';
-import InputNumberView from './inputnumberview';
-import CollapsibleView from './collapsibleview';
-
-import '../../theme/numberedlistproperties.css';
-
-/**
- * TODO
- *
- * @extends module:ui/view~View
- */
-export default class NumberedListPropertiesView extends View {
-	/**
-	 * @inheritDoc
-	 */
-	constructor( locale, { enabledProperties, renderAsCollapsible } ) {
-		super( locale );
-
-		const t = locale.t;
-		const propertyFieldViews = [];
-
-		/**
-		 * A collection of the child views.
-		 *
-		 * @readonly
-		 * @member {module:ui/viewcollection~ViewCollection}
-		 */
-		this.children = this.createCollection();
-
-		/**
-		 * A collection of views that can be focused in the view.
-		 *
-		 * @readonly
-		 * @protected
-		 * @member {module:ui/viewcollection~ViewCollection}
-		 */
-		this.focusables = new ViewCollection();
-
-		if ( enabledProperties.startIndex ) {
-			propertyFieldViews.push( this._createStartIndexField() );
-		}
-
-		if ( enabledProperties.reversed ) {
-			propertyFieldViews.push( this._createReversedField() );
-		}
-
-		if ( renderAsCollapsible ) {
-			const collapsibleView = new CollapsibleView( locale, propertyFieldViews );
-
-			collapsibleView.set( {
-				label: t( 'List properties' ),
-				isCollapsed: true
-			} );
-
-			this.children.add( collapsibleView );
-			this.focusables.add( collapsibleView.buttonView );
-		} else {
-			this.children.addMany( propertyFieldViews );
-		}
-
-		this.focusables.addMany( propertyFieldViews );
-
-		this.setTemplate( {
-			tag: 'div',
-			attributes: {
-				class: [
-					'ck',
-					'ck-numbered-list-properties'
-				]
-			},
-			children: this.children
-		} );
-	}
-
-	render() {
-		super.render();
-	}
-
-	_createStartIndexField() {
-		const t = this.locale.t;
-		const startIndexFieldView = new LabeledFieldView( this.locale, createLabeledInputNumber );
-
-		startIndexFieldView.set( {
-			label: t( 'Start at' ),
-			class: 'ck-numbered-list-properties-start-index'
-		} );
-
-		startIndexFieldView.fieldView.set( {
-			min: 1,
-			step: 1,
-			value: 1
-		} );
-
-		return startIndexFieldView;
-	}
-
-	_createReversedField() {
-		const t = this.locale.t;
-		const reversedButtonView = new SwitchButtonView( this.locale );
-
-		reversedButtonView.set( {
-			withText: true,
-			label: t( 'Reversed order' ),
-			class: 'ck-numbered-list-properties-reversed-order'
-		} );
-
-		return reversedButtonView;
-	}
-}
-
-/**
- * TODO
- *
- * @param {*} labeledFieldView
- * @param {*} viewUid
- * @param {*} statusUid
- * @returns
- */
-function createLabeledInputNumber( labeledFieldView, viewUid, statusUid ) {
-	const inputView = new InputNumberView( labeledFieldView.locale );
-
-	inputView.set( {
-		id: viewUid,
-		ariaDescribedById: statusUid
-	} );
-
-	inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
-	inputView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
-
-	inputView.on( 'input', () => {
-		// UX: Make the error text disappear and disable the error indicator as the user
-		// starts fixing the errors.
-		labeledFieldView.errorText = null;
-	} );
-
-	labeledFieldView.bind( 'isEmpty', 'isFocused', 'placeholder' ).to( inputView );
-
-	return inputView;
-}
diff --git a/packages/ckeditor5-list/theme/listproperties.css b/packages/ckeditor5-list/theme/listproperties.css
index 229345799af..7ffd9d217ab 100644
--- a/packages/ckeditor5-list/theme/listproperties.css
+++ b/packages/ckeditor5-list/theme/listproperties.css
@@ -4,11 +4,58 @@
  */
 
 .ck.ck-list-properties {
+	/* When there are no list styles and there is no collapsible. */
+	&.ck-list-properties_without-styles {
+		padding: var(--ck-spacing-large);
+
+		& > * {
+			min-width: 14em;
+
+			& + * {
+				margin-top: var(--ck-spacing-standard);
+			}
+		}
+	}
+
 	/*
 	 * When the numbered list property fields (start at, reversed) should be displayed,
 	 * more horizontal space is needed. Reconfigure the style grid to create that space.
 	 */
-	&.ck-list-properties_with-numbered-properties > .ck-list-styles-list {
-		grid-template-columns: repeat( 4, auto );
+	&.ck-list-properties_with-numbered-properties {
+		& > .ck-list-styles-list {
+			grid-template-columns: repeat( 4, auto );
+		}
+
+		/* When list styles are rendered and property fields are in a collapsible. */
+		& > .ck-collapsible {
+			border-top: 1px solid var(--ck-color-base-border);
+
+			& > .ck-collapsible__children {
+				& > * {
+					width: 100%;
+
+					& + * {
+						margin-top: var(--ck-spacing-standard);
+					}
+				}
+			}
+		}
+	}
+
+	& .ck.ck-numbered-list-properties-start-index .ck-input {
+		min-width: auto;
+		width: 100%;
+	}
+
+	& .ck.ck-numbered-list-properties-reversed-order {
+		background: transparent;
+		padding-left: 0;
+		padding-right: 0;
+		padding-bottom: 0;
+
+		&:active {
+			box-shadow: none;
+			border-color: transparent;
+		}
 	}
 }
diff --git a/packages/ckeditor5-list/theme/numberedlistproperties.css b/packages/ckeditor5-list/theme/numberedlistproperties.css
deleted file mode 100644
index f66fc448d72..00000000000
--- a/packages/ckeditor5-list/theme/numberedlistproperties.css
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-.ck.ck-numbered-list-properties {
-	& .ck.ck-numbered-list-properties-start-index .ck-input {
-		min-width: auto;
-		width: 100%;
-	}
-
-	& .ck.ck-numbered-list-properties-reversed-order {
-		background: transparent;
-		padding-left: 0;
-		padding-right: 0;
-		padding-bottom: 0;
-
-		&:active {
-			box-shadow: none;
-			border-color: transparent;
-		}
-	}
-
-	/* When there are no list styles and there is no collapsible. */
-	&:only-child {
-		padding: var(--ck-spacing-large);
-
-		& > * {
-			min-width: 14em;
-
-			& + * {
-				margin-top: var(--ck-spacing-standard);
-			}
-		}
-	}
-
-	/* When list styles are rendered and property fields are in a collapsible. */
-	& > .ck-collapsible {
-		border-top: 1px solid var(--ck-color-base-border);
-
-		& > .ck-collapsible__children {
-			& > * {
-				width: 100%;
-
-				& + * {
-					margin-top: var(--ck-spacing-standard);
-				}
-			}
-		}
-	}
-}

From 6f1e04d27112cadeaeaab400ccac5d3e024a74b1 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 25 Nov 2021 14:56:41 +0100
Subject: [PATCH 03/26] Code refactoring.

---
 .../src/ui/findandreplaceformview.js          |   5 +-
 packages/ckeditor5-list/package.json          |   2 +-
 .../ckeditor5-list/src/liststyleediting.js    |   4 +-
 .../ckeditor5-list/src/ui/inputnumberview.js  | 182 +------------
 .../src/ui/listpropertiesview.js              |  33 ++-
 packages/ckeditor5-list/theme/inputnumber.css |  70 -----
 .../theme/ckeditor5-link/linkactions.css      |   2 +-
 .../theme/ckeditor5-link/linkform.css         |   2 +-
 .../inputtext.css => input/input.css}         |  13 +-
 .../responsive-form/responsiveform.css        |   2 +-
 packages/ckeditor5-ui/src/focuscycler.js      |   4 +-
 packages/ckeditor5-ui/src/index.js            |   1 +
 packages/ckeditor5-ui/src/input/inputview.js  | 212 +++++++++++++++
 .../src/inputtext/inputtextview.js            | 184 +------------
 .../ckeditor5-ui/src/toolbar/toolbarview.js   |   3 +-
 packages/ckeditor5-ui/tests/focuscycler.js    |  92 ++++++-
 .../ckeditor5-ui/tests/input/inputview.js     | 242 ++++++++++++++++++
 .../tests/inputtext/inputtextview.js          | 224 +---------------
 packages/ckeditor5-ui/tests/list/listview.js  |   2 +
 .../ckeditor5-ui/tests/toolbar/toolbarview.js |   9 +
 .../inputtext.css => input/input.css}         |   0
 packages/ckeditor5-utils/src/dom/isvisible.js |  18 ++
 packages/ckeditor5-utils/src/index.js         |   1 +
 .../ckeditor5-widget/tests/widgetresize.js    |   6 +-
 24 files changed, 636 insertions(+), 677 deletions(-)
 delete mode 100644 packages/ckeditor5-list/theme/inputnumber.css
 rename packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/{inputtext/inputtext.css => input/input.css} (86%)
 create mode 100644 packages/ckeditor5-ui/src/input/inputview.js
 create mode 100644 packages/ckeditor5-ui/tests/input/inputview.js
 rename packages/ckeditor5-ui/theme/components/{inputtext/inputtext.css => input/input.css} (100%)
 create mode 100644 packages/ckeditor5-utils/src/dom/isvisible.js

diff --git a/packages/ckeditor5-find-and-replace/src/ui/findandreplaceformview.js b/packages/ckeditor5-find-and-replace/src/ui/findandreplaceformview.js
index 87d10777730..3716fa1c357 100644
--- a/packages/ckeditor5-find-and-replace/src/ui/findandreplaceformview.js
+++ b/packages/ckeditor5-find-and-replace/src/ui/findandreplaceformview.js
@@ -28,7 +28,8 @@ import {
 	FocusTracker,
 	KeystrokeHandler,
 	Collection,
-	Rect
+	Rect,
+	isVisible
 } from 'ckeditor5/src/utils';
 
 // See: #8833.
@@ -513,7 +514,7 @@ export default class FindAndReplaceFormView extends View {
 			const inputElement = this._findInputView.fieldView.element;
 
 			// Don't adjust the padding if the input (also: counter) were not rendered or not inserted into DOM yet.
-			if ( !inputElement || !inputElement.offsetParent ) {
+			if ( !inputElement || !isVisible( inputElement ) ) {
 				return;
 			}
 
diff --git a/packages/ckeditor5-list/package.json b/packages/ckeditor5-list/package.json
index 598ff95819d..ef24b0e84b3 100644
--- a/packages/ckeditor5-list/package.json
+++ b/packages/ckeditor5-list/package.json
@@ -13,7 +13,6 @@
   "main": "src/index.js",
   "dependencies": {
     "ckeditor5": "^31.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^31.0.0",
     "@ckeditor/ckeditor5-ui": "^31.0.0"
   },
   "devDependencies": {
@@ -34,6 +33,7 @@
     "@ckeditor/ckeditor5-paragraph": "^31.0.0",
     "@ckeditor/ckeditor5-remove-format": "^31.0.0",
     "@ckeditor/ckeditor5-table": "^31.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^31.0.0",
     "@ckeditor/ckeditor5-typing": "^31.0.0",
     "@ckeditor/ckeditor5-undo": "^31.0.0",
     "@ckeditor/ckeditor5-utils": "^31.0.0",
diff --git a/packages/ckeditor5-list/src/liststyleediting.js b/packages/ckeditor5-list/src/liststyleediting.js
index 9c1557d1634..7df78824f52 100644
--- a/packages/ckeditor5-list/src/liststyleediting.js
+++ b/packages/ckeditor5-list/src/liststyleediting.js
@@ -7,7 +7,7 @@
  * @module list/liststyleediting
  */
 
-import { Plugin } from 'ckeditor5/src/core';
+import { Plugin, Command } from 'ckeditor5/src/core';
 import ListEditing from './listediting';
 import ListStyleCommand from './liststylecommand';
 import { getSiblingListItem, getSiblingNodes } from './utils';
@@ -52,6 +52,8 @@ export default class ListStyleEditing extends Plugin {
 		} );
 
 		editor.commands.add( 'listStyle', new ListStyleCommand( editor, DEFAULT_LIST_TYPE ) );
+		editor.commands.add( 'listReversed', new Command( editor ) );
+		editor.commands.add( 'listStart', new Command( editor ) );
 
 		// Fix list attributes when modifying their nesting levels (the `listIndent` attribute).
 		this.listenTo( editor.commands.get( 'indentList' ), '_executeCleanup', fixListAfterIndentListCommand( editor ) );
diff --git a/packages/ckeditor5-list/src/ui/inputnumberview.js b/packages/ckeditor5-list/src/ui/inputnumberview.js
index 0de1165c9c4..f229e87594f 100644
--- a/packages/ckeditor5-list/src/ui/inputnumberview.js
+++ b/packages/ckeditor5-list/src/ui/inputnumberview.js
@@ -7,104 +7,20 @@
  * @module TODO
  */
 
-import { View } from 'ckeditor5/src/ui';
-import { FocusTracker } from 'ckeditor5/src/utils';
-
-import '../../theme/inputnumber.css';
+import { InputView } from 'ckeditor5/src/ui';
 
 /**
  * The number input view class.
  *
  * @extends module:ui/view~View
  */
-export default class InputNumberView extends View {
+export default class InputNumberView extends InputView {
 	/**
 	 * @inheritDoc
 	 */
 	constructor( locale, { min, max, step } = {} ) {
 		super( locale );
 
-		/**
-		 * The value of the input.
-		 *
-		 * @observable
-		 * @member {String} #value
-		 */
-		this.set( 'value' );
-
-		/**
-		 * The `id` attribute of the input (i.e. to pair with a `<label>` element).
-		 *
-		 * @observable
-		 * @member {String} #id
-		 */
-		this.set( 'id' );
-
-		/**
-		 * The `placeholder` attribute of the input.
-		 *
-		 * @observable
-		 * @member {String} #placeholder
-		 */
-		this.set( 'placeholder' );
-
-		/**
-		 * Controls whether the input view is in read-only mode.
-		 *
-		 * @observable
-		 * @member {Boolean} #isReadOnly
-		 */
-		this.set( 'isReadOnly', false );
-
-		/**
-		 * Set to `true` when the field has some error. Usually controlled via
-		 * {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
-		 *
-		 * @observable
-		 * @member {Boolean} #hasError
-		 */
-		this.set( 'hasError', false );
-
-		/**
-		 * The `id` of the element describing this field, e.g. when it has
-		 * some error, it helps screen readers read the error text.
-		 *
-		 * @observable
-		 * @member {Boolean} #ariaDescribedById
-		 */
-		this.set( 'ariaDescribedById' );
-
-		/**
-		 * Stores information about the editor UI focus and propagates it so various plugins and components
-		 * are unified as a focus group.
-		 *
-		 * @readonly
-		 * @member {module:utils/focustracker~FocusTracker} #focusTracker
-		 */
-		this.focusTracker = new FocusTracker();
-
-		/**
-		 * An observable flag set to `true` when the input is currently focused by the user.
-		 * Set to `false` otherwise.
-		 *
-		 * @readonly
-		 * @observable
-		 * @member {Boolean} #isFocused
-		 * @default false
-		 */
-		this.bind( 'isFocused' ).to( this.focusTracker );
-
-		/**
-		 * An observable flag set to `true` when the input contains no text, i.e.
-		 * when {@link #value} is `''`, `null`, or `false`.
-		 *
-		 * @readonly
-		 * @observable
-		 * @member {Boolean} #isEmpty
-		 * @default true
-		 */
-		this.set( 'isEmpty', true );
-
 		/**
 		 * TODO
 		 */
@@ -122,106 +38,16 @@ export default class InputNumberView extends View {
 
 		const bind = this.bindTemplate;
 
-		this.setTemplate( {
-			tag: 'input',
+		this.extendTemplate( {
 			attributes: {
 				type: 'number',
 				class: [
-					'ck',
-					'ck-input',
-					'ck-input-number',
-					bind.if( 'isFocused', 'ck-input_focused' ),
-					bind.if( 'isEmpty', 'ck-input-text_empty' ),
-					bind.if( 'hasError', 'ck-error' )
+					'ck-input-number'
 				],
-				id: bind.to( 'id' ),
-				placeholder: bind.to( 'placeholder' ),
-				readonly: bind.to( 'isReadOnly' ),
-				'aria-invalid': bind.if( 'hasError', true ),
-				'aria-describedby': bind.to( 'ariaDescribedById' ),
-
 				min: bind.to( 'min' ),
 				max: bind.to( 'max' ),
 				step: bind.to( 'step' )
-			},
-			on: {
-				input: bind.to( ( ...args ) => {
-					this.fire( 'input', ...args );
-					this._updateIsEmpty();
-				} ),
-				change: bind.to( this._updateIsEmpty.bind( this ) )
 			}
 		} );
-
-		/**
-		 * Fired when the user types in the input. Corresponds to the native
-		 * DOM `input` event.
-		 *
-		 * @event input
-		 */
 	}
-
-	/**
-	 * @inheritDoc
-	 */
-	render() {
-		super.render();
-
-		this.focusTracker.add( this.element );
-
-		this._setDomElementValue( this.value );
-		this._updateIsEmpty();
-
-		// Bind `this.value` to the DOM element's value.
-		// We cannot use `value` DOM attribute because removing it on Edge does not clear the DOM element's value property.
-		this.on( 'change:value', ( evt, name, value ) => {
-			this._setDomElementValue( value );
-			this._updateIsEmpty();
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	destroy() {
-		super.destroy();
-
-		this.focusTracker.destroy();
-	}
-
-	/**
-	 * Moves the focus to the input and selects the value.
-	 */
-	select() {
-		this.element.select();
-	}
-
-	/**
-	 * Focuses the input.
-	 */
-	focus() {
-		this.element.focus();
-	}
-
-	/**
-	 * Updates the {@link #isEmpty} property value on demand.
-	 *
-	 * @private
-	 */
-	_updateIsEmpty() {
-		this.isEmpty = isInputElementEmpty( this.element );
-	}
-
-	/**
-	 * Sets the `value` property of the {@link #element DOM element} on demand.
-	 *
-	 * @private
-	 */
-	_setDomElementValue( value ) {
-		this.element.value = ( !value && value !== 0 ) ? '' : value;
-	}
-}
-
-function isInputElementEmpty( domElement ) {
-	return !domElement.value;
 }
diff --git a/packages/ckeditor5-list/src/ui/listpropertiesview.js b/packages/ckeditor5-list/src/ui/listpropertiesview.js
index 42beb650043..60baac94b3a 100644
--- a/packages/ckeditor5-list/src/ui/listpropertiesview.js
+++ b/packages/ckeditor5-list/src/ui/listpropertiesview.js
@@ -50,11 +50,34 @@ export default class ListPropertiesView extends View {
 		 */
 		this.children = this.createCollection();
 
+		/**
+		 * TODO
+		 *
+		 * @readonly
+		 * @member {TODO}
+		 */
+		this.stylesView = null;
+
+		/**
+		 * TODO
+		 *
+		 * @readonly
+		 * @member {TODO}
+		 */
+		this.startIndexFieldView = null;
+
+		/**
+		 * TODO
+		 *
+		 * @readonly
+		 * @member {TODO}
+		 */
+		this.reversedFieldView = null;
+
 		/**
 		 * Tracks information about the DOM focus in the view.
 		 *
 		 * @readonly
-		 * @protected
 		 * @member {module:utils/focustracker~FocusTracker}
 		 */
 		this.focusTracker = new FocusTracker();
@@ -63,7 +86,6 @@ export default class ListPropertiesView extends View {
 		 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
 		 *
 		 * @readonly
-		 * @protected
 		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
 		 */
 		this.keystrokes = new KeystrokeHandler();
@@ -72,7 +94,6 @@ export default class ListPropertiesView extends View {
 		 * A collection of views that can be focused in the view.
 		 *
 		 * @readonly
-		 * @protected
 		 * @member {module:ui/viewcollection~ViewCollection}
 		 */
 		this.focusables = new ViewCollection();
@@ -235,7 +256,8 @@ export default class ListPropertiesView extends View {
 		startIndexFieldView.fieldView.set( {
 			min: 1,
 			step: 1,
-			value: 1
+			value: 1,
+			inputMode: 'numeric'
 		} );
 
 		return startIndexFieldView;
@@ -273,7 +295,8 @@ function createLabeledInputNumber( labeledFieldView, viewUid, statusUid ) {
 
 	inputView.set( {
 		id: viewUid,
-		ariaDescribedById: statusUid
+		ariaDescribedById: statusUid,
+		inputMode: 'numeric'
 	} );
 
 	inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
diff --git a/packages/ckeditor5-list/theme/inputnumber.css b/packages/ckeditor5-list/theme/inputnumber.css
deleted file mode 100644
index 23eeca83394..00000000000
--- a/packages/ckeditor5-list/theme/inputnumber.css
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
- * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rounded.css";
-@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_focus.css";
-@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_shadow.css";
-
-:root {
-	--ck-input-number-width: 18em;
-}
-
-.ck.ck-input-number {
-	@mixin ck-rounded-corners;
-
-	background: var(--ck-color-input-background);
-	border: 1px solid var(--ck-color-input-border);
-	padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
-	min-width: var(--ck-input-number-width);
-
-	/* This is important to stay of the same height as surrounding buttons */
-	min-height: var(--ck-ui-component-min-height);
-
-	/* Apply some smooth transition to the box-shadow and border. */
-	transition: box-shadow .1s ease-in-out, border .1s ease-in-out;
-
-	&:focus {
-		@mixin ck-focus-ring;
-		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
-	}
-
-	&[readonly] {
-		border: 1px solid var(--ck-color-input-disabled-border);
-		background: var(--ck-color-input-disabled-background);
-		color: var(--ck-color-input-disabled-text);
-
-		&:focus {
-			/* The read-only input should have a slightly less visible shadow when focused. */
-			@mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow);
-		}
-	}
-
-	&.ck-error {
-		border-color: var(--ck-color-input-error-border);
-		animation: ck-text-input-shake .3s ease both;
-
-		&:focus {
-			@mixin ck-box-shadow var(--ck-focus-error-outer-shadow);
-		}
-	}
-}
-
-@keyframes ck-text-input-shake {
-	20% {
-		transform: translateX(-2px);
-	}
-
-	40% {
-		transform: translateX(2px);
-	}
-
-	60% {
-		transform: translateX(-1px);
-	}
-
-	80% {
-		transform: translateX(1px);
-	}
-}
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css
index e4d74eb2658..41c0ee6e305 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css
@@ -23,7 +23,7 @@
 
 			/* Match the box model of the link editor form's input so the balloon
 			does not change width when moving between actions and the form. */
-			max-width: var(--ck-input-text-width);
+			max-width: var(--ck-input-width);
 			min-width: 3em;
 			text-align: center;
 
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
index 492802d5127..2c085148c7d 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
@@ -11,7 +11,7 @@
  */
 .ck.ck-link-form_layout-vertical {
 	padding: 0;
-	min-width: var(--ck-input-text-width);
+	min-width: var(--ck-input-width);
 
 	& .ck-labeled-field-view {
 		margin: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-small);
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext/inputtext.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/input/input.css
similarity index 86%
rename from packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext/inputtext.css
rename to packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/input/input.css
index f575ad357bc..4342160a0ed 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext/inputtext.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/input/input.css
@@ -8,16 +8,19 @@
 @import "../../../mixins/_shadow.css";
 
 :root {
-	--ck-input-text-width: 18em;
+	--ck-input-width: 18em;
+
+	/* Backward compatibility. */
+	--ck-input-text-width: var(--ck-input-width);
 }
 
-.ck.ck-input-text {
+.ck.ck-input {
 	@mixin ck-rounded-corners;
 
 	background: var(--ck-color-input-background);
 	border: 1px solid var(--ck-color-input-border);
 	padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
-	min-width: var(--ck-input-text-width);
+	min-width: var(--ck-input-width);
 
 	/* This is important to stay of the same height as surrounding buttons */
 	min-height: var(--ck-ui-component-min-height);
@@ -43,7 +46,7 @@
 
 	&.ck-error {
 		border-color: var(--ck-color-input-error-border);
-		animation: ck-text-input-shake .3s ease both;
+		animation: ck-input-shake .3s ease both;
 
 		&:focus {
 			@mixin ck-box-shadow var(--ck-focus-error-outer-shadow);
@@ -51,7 +54,7 @@
 	}
 }
 
-@keyframes ck-text-input-shake {
+@keyframes ck-input-shake {
 	20% {
 		transform: translateX(-2px);
 	}
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css
index 52067cbf9fd..641a42719ba 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css
@@ -32,7 +32,7 @@
 
 	@mixin ck-media-phone {
 		padding: 0;
-		width: calc(.8 * var(--ck-input-text-width));
+		width: calc(.8 * var(--ck-input-width));
 
 		& .ck-labeled-field-view {
 			margin: var(--ck-spacing-large) var(--ck-spacing-large) 0;
diff --git a/packages/ckeditor5-ui/src/focuscycler.js b/packages/ckeditor5-ui/src/focuscycler.js
index e88ea8ce6ec..d1cc48d45ff 100644
--- a/packages/ckeditor5-ui/src/focuscycler.js
+++ b/packages/ckeditor5-ui/src/focuscycler.js
@@ -7,7 +7,7 @@
  * @module ui/focuscycler
  */
 
-import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import isVisible from '@ckeditor/ckeditor5-utils/src/dom/isvisible';
 
 /**
  * A utility class that helps cycling over focusable {@link module:ui/view~View views} in a
@@ -288,5 +288,5 @@ export default class FocusCycler {
 // @param {module:ui/view~View} view A view to be checked.
 // @returns {Boolean}
 function isFocusable( view ) {
-	return !!( view.focus && view.element.offsetParent && global.window.getComputedStyle( view.element ).display != 'none' );
+	return !!( view.focus && isVisible( view.element ) );
 }
diff --git a/packages/ckeditor5-ui/src/index.js b/packages/ckeditor5-ui/src/index.js
index ea037343924..de7e63cf5c1 100644
--- a/packages/ckeditor5-ui/src/index.js
+++ b/packages/ckeditor5-ui/src/index.js
@@ -32,6 +32,7 @@ export { default as FormHeaderView } from './formheader/formheaderview';
 export { default as FocusCycler } from './focuscycler';
 
 export { default as IconView } from './icon/iconview';
+export { default as InputView } from './input/inputview';
 export { default as InputTextView } from './inputtext/inputtextview';
 
 export { default as IframeView } from './iframe/iframeview';
diff --git a/packages/ckeditor5-ui/src/input/inputview.js b/packages/ckeditor5-ui/src/input/inputview.js
new file mode 100644
index 00000000000..0c092968d1b
--- /dev/null
+++ b/packages/ckeditor5-ui/src/input/inputview.js
@@ -0,0 +1,212 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/input/inputview
+ */
+
+import View from '../view';
+import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+
+import '../../theme/components/input/input.css';
+
+/**
+ * The base input view class.
+ *
+ * @extends module:ui/view~View
+ */
+export default class InputView extends View {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale ) {
+		super( locale );
+
+		/**
+		 * The value of the input.
+		 *
+		 * @observable
+		 * @member {String} #value
+		 */
+		this.set( 'value' );
+
+		/**
+		 * The `id` attribute of the input (i.e. to pair with a `<label>` element).
+		 *
+		 * @observable
+		 * @member {String} #id
+		 */
+		this.set( 'id' );
+
+		/**
+		 * The `placeholder` attribute of the input.
+		 *
+		 * @observable
+		 * @member {String} #placeholder
+		 */
+		this.set( 'placeholder' );
+
+		/**
+		 * Controls whether the input view is in read-only mode.
+		 *
+		 * @observable
+		 * @member {Boolean} #isReadOnly
+		 */
+		this.set( 'isReadOnly', false );
+
+		/**
+		 * Set to `true` when the field has some error. Usually controlled via
+		 * {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
+		 *
+		 * @observable
+		 * @member {Boolean} #hasError
+		 */
+		this.set( 'hasError', false );
+
+		/**
+		 * The `id` of the element describing this field, e.g. when it has
+		 * some error, it helps screen readers read the error text.
+		 *
+		 * @observable
+		 * @member {Boolean} #ariaDescribedById
+		 */
+		this.set( 'ariaDescribedById' );
+
+		/**
+		 * Stores information about the editor UI focus and propagates it so various plugins and components
+		 * are unified as a focus group.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker} #focusTracker
+		 */
+		this.focusTracker = new FocusTracker();
+
+		/**
+		 * An observable flag set to `true` when the input is currently focused by the user.
+		 * Set to `false` otherwise.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} #isFocused
+		 * @default false
+		 */
+		this.bind( 'isFocused' ).to( this.focusTracker );
+
+		/**
+		 * An observable flag set to `true` when the input contains no text, i.e.
+		 * when {@link #value} is `''`, `null`, or `false`.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} #isEmpty
+		 * @default true
+		 */
+		this.set( 'isEmpty', true );
+
+		/**
+		 * TODO
+		 */
+		this.set( 'inputMode', 'text' );
+
+		const bind = this.bindTemplate;
+
+		this.setTemplate( {
+			tag: 'input',
+			attributes: {
+				class: [
+					'ck',
+					'ck-input',
+					bind.if( 'isFocused', 'ck-input_focused' ),
+					bind.if( 'isEmpty', 'ck-input-text_empty' ),
+					bind.if( 'hasError', 'ck-error' )
+				],
+				id: bind.to( 'id' ),
+				placeholder: bind.to( 'placeholder' ),
+				readonly: bind.to( 'isReadOnly' ),
+				inputmode: bind.to( 'inputMode' ),
+				'aria-invalid': bind.if( 'hasError', true ),
+				'aria-describedby': bind.to( 'ariaDescribedById' )
+			},
+			on: {
+				input: bind.to( ( ...args ) => {
+					this.fire( 'input', ...args );
+					this._updateIsEmpty();
+				} ),
+				change: bind.to( this._updateIsEmpty.bind( this ) )
+			}
+		} );
+
+		/**
+		 * Fired when the user types in the input. Corresponds to the native
+		 * DOM `input` event.
+		 *
+		 * @event input
+		 */
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		this.focusTracker.add( this.element );
+
+		this._setDomElementValue( this.value );
+		this._updateIsEmpty();
+
+		// Bind `this.value` to the DOM element's value.
+		// We cannot use `value` DOM attribute because removing it on Edge does not clear the DOM element's value property.
+		this.on( 'change:value', ( evt, name, value ) => {
+			this._setDomElementValue( value );
+			this._updateIsEmpty();
+		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+	}
+
+	/**
+	 * Moves the focus to the input and selects the value.
+	 */
+	select() {
+		this.element.select();
+	}
+
+	/**
+	 * Focuses the input.
+	 */
+	focus() {
+		this.element.focus();
+	}
+
+	/**
+	 * Updates the {@link #isEmpty} property value on demand.
+	 *
+	 * @private
+	 */
+	_updateIsEmpty() {
+		this.isEmpty = isInputElementEmpty( this.element );
+	}
+
+	/**
+	 * Sets the `value` property of the {@link #element DOM element} on demand.
+	 *
+	 * @private
+	 */
+	_setDomElementValue( value ) {
+		this.element.value = ( !value && value !== 0 ) ? '' : value;
+	}
+}
+
+function isInputElementEmpty( domElement ) {
+	return !domElement.value;
+}
diff --git a/packages/ckeditor5-ui/src/inputtext/inputtextview.js b/packages/ckeditor5-ui/src/inputtext/inputtextview.js
index 2e440d6f5c1..b484c51747e 100644
--- a/packages/ckeditor5-ui/src/inputtext/inputtextview.js
+++ b/packages/ckeditor5-ui/src/inputtext/inputtextview.js
@@ -7,201 +7,27 @@
  * @module ui/inputtext/inputtextview
  */
 
-import View from '../view';
-import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
-import '../../theme/components/inputtext/inputtext.css';
+import InputView from '../input/inputview';
 
 /**
  * The text input view class.
  *
  * @extends module:ui/view~View
  */
-export default class InputTextView extends View {
+export default class InputTextView extends InputView {
 	/**
 	 * @inheritDoc
 	 */
 	constructor( locale ) {
 		super( locale );
 
-		/**
-		 * The value of the input.
-		 *
-		 * @observable
-		 * @member {String} #value
-		 */
-		this.set( 'value' );
-
-		/**
-		 * The `id` attribute of the input (i.e. to pair with a `<label>` element).
-		 *
-		 * @observable
-		 * @member {String} #id
-		 */
-		this.set( 'id' );
-
-		/**
-		 * The `placeholder` attribute of the input.
-		 *
-		 * @observable
-		 * @member {String} #placeholder
-		 */
-		this.set( 'placeholder' );
-
-		/**
-		 * Controls whether the input view is in read-only mode.
-		 *
-		 * @observable
-		 * @member {Boolean} #isReadOnly
-		 */
-		this.set( 'isReadOnly', false );
-
-		/**
-		 * Set to `true` when the field has some error. Usually controlled via
-		 * {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
-		 *
-		 * @observable
-		 * @member {Boolean} #hasError
-		 */
-		this.set( 'hasError', false );
-
-		/**
-		 * The `id` of the element describing this field, e.g. when it has
-		 * some error, it helps screen readers read the error text.
-		 *
-		 * @observable
-		 * @member {Boolean} #ariaDescribedById
-		 */
-		this.set( 'ariaDescribedById' );
-
-		/**
-		 * Stores information about the editor UI focus and propagates it so various plugins and components
-		 * are unified as a focus group.
-		 *
-		 * @readonly
-		 * @member {module:utils/focustracker~FocusTracker} #focusTracker
-		 */
-		this.focusTracker = new FocusTracker();
-
-		/**
-		 * An observable flag set to `true` when the input is currently focused by the user.
-		 * Set to `false` otherwise.
-		 *
-		 * @readonly
-		 * @observable
-		 * @member {Boolean} #isFocused
-		 * @default false
-		 */
-		this.bind( 'isFocused' ).to( this.focusTracker );
-
-		/**
-		 * An observable flag set to `true` when the input contains no text, i.e.
-		 * when {@link #value} is `''`, `null`, or `false`.
-		 *
-		 * @readonly
-		 * @observable
-		 * @member {Boolean} #isEmpty
-		 * @default true
-		 */
-		this.set( 'isEmpty', true );
-
-		const bind = this.bindTemplate;
-
-		this.setTemplate( {
-			tag: 'input',
+		this.extendTemplate( {
 			attributes: {
 				type: 'text',
 				class: [
-					'ck',
-					'ck-input',
-					'ck-input-text',
-					bind.if( 'isFocused', 'ck-input_focused' ),
-					bind.if( 'isEmpty', 'ck-input-text_empty' ),
-					bind.if( 'hasError', 'ck-error' )
-				],
-				id: bind.to( 'id' ),
-				placeholder: bind.to( 'placeholder' ),
-				readonly: bind.to( 'isReadOnly' ),
-				'aria-invalid': bind.if( 'hasError', true ),
-				'aria-describedby': bind.to( 'ariaDescribedById' )
-			},
-			on: {
-				input: bind.to( ( ...args ) => {
-					this.fire( 'input', ...args );
-					this._updateIsEmpty();
-				} ),
-				change: bind.to( this._updateIsEmpty.bind( this ) )
+					'ck-input-text'
+				]
 			}
 		} );
-
-		/**
-		 * Fired when the user types in the input. Corresponds to the native
-		 * DOM `input` event.
-		 *
-		 * @event input
-		 */
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	render() {
-		super.render();
-
-		this.focusTracker.add( this.element );
-
-		this._setDomElementValue( this.value );
-		this._updateIsEmpty();
-
-		// Bind `this.value` to the DOM element's value.
-		// We cannot use `value` DOM attribute because removing it on Edge does not clear the DOM element's value property.
-		this.on( 'change:value', ( evt, name, value ) => {
-			this._setDomElementValue( value );
-			this._updateIsEmpty();
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	destroy() {
-		super.destroy();
-
-		this.focusTracker.destroy();
-	}
-
-	/**
-	 * Moves the focus to the input and selects the value.
-	 */
-	select() {
-		this.element.select();
-	}
-
-	/**
-	 * Focuses the input.
-	 */
-	focus() {
-		this.element.focus();
-	}
-
-	/**
-	 * Updates the {@link #isEmpty} property value on demand.
-	 *
-	 * @private
-	 */
-	_updateIsEmpty() {
-		this.isEmpty = isInputElementEmpty( this.element );
 	}
-
-	/**
-	 * Sets the `value` property of the {@link #element DOM element} on demand.
-	 *
-	 * @private
-	 */
-	_setDomElementValue( value ) {
-		this.element.value = ( !value && value !== 0 ) ? '' : value;
-	}
-}
-
-function isInputElementEmpty( domElement ) {
-	return !domElement.value;
 }
diff --git a/packages/ckeditor5-ui/src/toolbar/toolbarview.js b/packages/ckeditor5-ui/src/toolbar/toolbarview.js
index 0326ab2432f..49a0f32989e 100644
--- a/packages/ckeditor5-ui/src/toolbar/toolbarview.js
+++ b/packages/ckeditor5-ui/src/toolbar/toolbarview.js
@@ -16,6 +16,7 @@ import ToolbarLineBreakView from './toolbarlinebreakview';
 import ResizeObserver from '@ckeditor/ckeditor5-utils/src/dom/resizeobserver';
 import preventDefault from '../bindings/preventdefault.js';
 import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
+import isVisible from '@ckeditor/ckeditor5-utils/src/dom/isvisible';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import { createDropdown, addToolbarToDropdown } from '../dropdown/utils';
 import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
@@ -758,7 +759,7 @@ class DynamicGrouping {
 		// the toolbar is visible (the next ResizeObserver callback execution). This is handy because
 		// the grouping could be caused by increasing the #maxWidth when the toolbar was invisible and the next
 		// time it shows up, some items could actually be ungrouped (https://github.com/ckeditor/ckeditor5/issues/6575).
-		if ( !this.viewElement.offsetParent ) {
+		if ( !isVisible( this.viewElement ) ) {
 			this.shouldUpdateGroupingOnNextResize = true;
 
 			return;
diff --git a/packages/ckeditor5-ui/tests/focuscycler.js b/packages/ckeditor5-ui/tests/focuscycler.js
index bf08dfdb3f0..65beb4c9adb 100644
--- a/packages/ckeditor5-ui/tests/focuscycler.js
+++ b/packages/ckeditor5-ui/tests/focuscycler.js
@@ -3,12 +3,13 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+/* global document */
+
 import ViewCollection from '../src/viewcollection';
 import View from '../src/view';
 import FocusCycler from '../src/focuscycler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
-import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
 describe( 'FocusCycler', () => {
@@ -17,7 +18,6 @@ describe( 'FocusCycler', () => {
 	testUtils.createSinonSandbox();
 
 	beforeEach( () => {
-		testUtils.sinon.stub( global.window, 'getComputedStyle' );
 		focusables = new ViewCollection( [
 			nonFocusable(),
 			focusable(),
@@ -34,6 +34,10 @@ describe( 'FocusCycler', () => {
 		} );
 	} );
 
+	afterEach( () => {
+		Array.from( document.querySelectorAll( '[focus-cycler-test-element]' ) ).forEach( element => element.remove() );
+	} );
+
 	describe( 'constructor()', () => {
 		it( 'sets class properties', () => {
 			expect( cycler.focusables ).to.equal( focusables );
@@ -134,6 +138,43 @@ describe( 'FocusCycler', () => {
 			expect( cycler.first ).to.equal( focusables.get( 1 ) );
 			expect( cycler.next ).to.be.null;
 		} );
+
+		it( 'should ignore items with an element detached from DOM', () => {
+			const visibleFocusableA = focusable();
+			const visibleFocusableB = focusable();
+			const inVisibleFocusable = focusable();
+
+			inVisibleFocusable.element.remove();
+
+			focusables = new ViewCollection( [ visibleFocusableA, inVisibleFocusable, visibleFocusableB ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+
+			focusTracker.focusedElement = focusables.get( 0 ).element;
+
+			expect( cycler.first ).to.equal( focusables.get( 0 ) );
+			expect( cycler.next ).to.equal( visibleFocusableB );
+		} );
+
+		it( 'should ignore items with an element under an invisible ancestor', () => {
+			const visibleFocusableA = focusable();
+			const visibleFocusableB = focusable();
+			const inVisibleFocusable = focusable();
+
+			const invisibleParent = document.createElement( 'div' );
+			invisibleParent.style.display = 'none';
+			invisibleParent.appendChild( inVisibleFocusable.element );
+			document.body.appendChild( invisibleParent );
+
+			focusables = new ViewCollection( [ visibleFocusableA, inVisibleFocusable, visibleFocusableB ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+
+			focusTracker.focusedElement = focusables.get( 0 ).element;
+
+			expect( cycler.first ).to.equal( focusables.get( 0 ) );
+			expect( cycler.next ).to.equal( visibleFocusableB );
+
+			invisibleParent.remove();
+		} );
 	} );
 
 	describe( 'previous()', () => {
@@ -177,6 +218,43 @@ describe( 'FocusCycler', () => {
 			expect( cycler.first ).to.equal( focusables.get( 1 ) );
 			expect( cycler.previous ).to.be.null;
 		} );
+
+		it( 'should ignore items with an element detached from DOM', () => {
+			const visibleFocusableA = focusable();
+			const visibleFocusableB = focusable();
+			const inVisibleFocusable = focusable();
+
+			inVisibleFocusable.element.remove();
+
+			focusables = new ViewCollection( [ visibleFocusableA, inVisibleFocusable, visibleFocusableB ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+
+			focusTracker.focusedElement = focusables.get( 2 ).element;
+
+			expect( cycler.first ).to.equal( focusables.get( 0 ) );
+			expect( cycler.previous ).to.equal( visibleFocusableA );
+		} );
+
+		it( 'should ignore items with an element under an invisible ancestor', () => {
+			const visibleFocusableA = focusable();
+			const visibleFocusableB = focusable();
+			const inVisibleFocusable = focusable();
+
+			const invisibleParent = document.createElement( 'div' );
+			invisibleParent.style.display = 'none';
+			invisibleParent.appendChild( inVisibleFocusable.element );
+			document.body.appendChild( invisibleParent );
+
+			focusables = new ViewCollection( [ visibleFocusableA, inVisibleFocusable, visibleFocusableB ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+
+			focusTracker.focusedElement = focusables.get( 2 ).element;
+
+			expect( cycler.first ).to.equal( focusables.get( 0 ) );
+			expect( cycler.next ).to.equal( visibleFocusableA );
+
+			invisibleParent.remove();
+		} );
 	} );
 
 	describe( 'focusFirst()', () => {
@@ -362,13 +440,11 @@ describe( 'FocusCycler', () => {
 
 function nonFocusable( isHidden ) {
 	const view = new View();
-	view.element = Math.random();
+	view.element = document.createElement( 'div' );
+	view.element.setAttribute( 'focus-cycler-test-element', true );
+	view.element.style.display = isHidden ? 'none' : 'block';
 
-	global.window.getComputedStyle
-		.withArgs( view.element )
-		.returns( {
-			display: isHidden ? 'none' : 'block'
-		} );
+	document.body.appendChild( view.element );
 
 	return view;
 }
diff --git a/packages/ckeditor5-ui/tests/input/inputview.js b/packages/ckeditor5-ui/tests/input/inputview.js
new file mode 100644
index 00000000000..973d63dc432
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/input/inputview.js
@@ -0,0 +1,242 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global Event */
+
+import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+import InputView from '../../src/input/inputview';
+
+describe( 'InputView', () => {
+	let view, ariaDescribedById;
+
+	beforeEach( () => {
+		ariaDescribedById = 'ck-error-1234567890';
+		view = new InputView();
+
+		view.render();
+	} );
+
+	afterEach( () => {
+		view.destroy();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'should creates element from template', () => {
+			expect( view.element.tagName ).to.equal( 'INPUT' );
+			expect( view.element.type ).to.equal( 'text' );
+			expect( view.element.getAttribute( 'type' ) ).to.be.null;
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
+			expect( view.element.classList.contains( 'ck-input' ) ).to.be.true;
+		} );
+
+		it( 'should set the #isFocused observable property', () => {
+			expect( view.isFocused ).to.be.false;
+		} );
+
+		it( 'should set the #isEmpty observable property', () => {
+			expect( view.isEmpty ).to.be.true;
+		} );
+
+		it( 'should create an instance of FocusTracker under #focusTracker property', () => {
+			expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
+		} );
+	} );
+
+	describe( 'DOM bindings', () => {
+		beforeEach( () => {
+			view.value = 'foo';
+			view.id = 'bar';
+		} );
+
+		describe( 'value', () => {
+			it( 'should react on view#value', () => {
+				expect( view.element.value ).to.equal( 'foo' );
+
+				view.value = 'baz';
+
+				expect( view.element.value ).to.equal( 'baz' );
+
+				// To be sure that value can be changed multiple times using inline value attribute.
+				// There was a related bug in Chrome.
+				view.value = 'biz';
+
+				expect( view.element.value ).to.equal( 'biz' );
+			} );
+
+			it( 'should set to empty string when using `falsy` values', () => {
+				[ undefined, false, null ].forEach( value => {
+					view.value = value;
+
+					expect( view.element.value ).to.equal( '' );
+				} );
+			} );
+
+			// See ckeditor5-ui/issues/335.
+			it( 'should set element value when value was defined before view#render', () => {
+				view = new InputView();
+
+				view.value = 'baz';
+
+				view.render();
+
+				expect( view.element.value ).to.equal( 'baz' );
+			} );
+
+			it( 'should update along with the #isEmpty property', () => {
+				view.value = 'foo';
+
+				expect( view.isEmpty ).to.be.false;
+
+				view.value = '';
+				expect( view.isEmpty ).to.be.true;
+			} );
+		} );
+
+		describe( 'id', () => {
+			it( 'should react on view#id', () => {
+				expect( view.element.id ).to.equal( 'bar' );
+
+				view.id = 'baz';
+
+				expect( view.element.id ).to.equal( 'baz' );
+			} );
+		} );
+
+		describe( 'placeholder', () => {
+			it( 'should react on view#placeholder', () => {
+				expect( view.element.placeholder ).to.equal( '' );
+
+				view.placeholder = 'baz';
+
+				expect( view.element.placeholder ).to.equal( 'baz' );
+			} );
+		} );
+
+		describe( 'isReadOnly', () => {
+			it( 'should react on view#isReadOnly', () => {
+				expect( view.element.readOnly ).to.false;
+
+				view.isReadOnly = true;
+
+				expect( view.element.readOnly ).to.true;
+			} );
+		} );
+
+		describe( 'class', () => {
+			it( 'should react on view#hasErrors', () => {
+				expect( view.element.classList.contains( 'ck-error' ) ).to.be.false;
+
+				view.hasError = true;
+
+				expect( view.element.classList.contains( 'ck-error' ) ).to.be.true;
+			} );
+
+			it( 'should react on view#isFocused', () => {
+				expect( view.element.classList.contains( 'ck-input_focused' ) ).to.be.false;
+
+				view.isFocused = true;
+
+				expect( view.element.classList.contains( 'ck-input_focused' ) ).to.be.true;
+			} );
+
+			it( 'should react on view#isEmpty', () => {
+				view.value = '';
+
+				expect( view.element.classList.contains( 'ck-input-text_empty' ) ).to.be.true;
+
+				view.value = 'bar';
+
+				expect( view.element.classList.contains( 'ck-input-text_empty' ) ).to.be.false;
+			} );
+		} );
+
+		describe( 'aria-invalid', () => {
+			it( 'should react on view#hasError', () => {
+				expect( view.element.getAttribute( 'aria-invalid' ) ).to.be.null;
+
+				view.hasError = true;
+
+				expect( view.element.getAttribute( 'aria-invalid' ) ).to.equal( 'true' );
+			} );
+		} );
+
+		describe( 'aria-describedby', () => {
+			it( 'should react on view#hasError', () => {
+				expect( view.element.getAttribute( 'aria-describedby' ) ).to.be.null;
+
+				view.ariaDescribedById = ariaDescribedById;
+
+				expect( view.element.getAttribute( 'aria-describedby' ) ).to.equal( ariaDescribedById );
+			} );
+		} );
+
+		describe( 'input event', () => {
+			it( 'triggers view#input', () => {
+				const spy = sinon.spy();
+
+				view.on( 'input', spy );
+
+				view.element.dispatchEvent( new Event( 'input' ) );
+				sinon.assert.calledOnce( spy );
+				sinon.assert.calledWith( spy, sinon.match.object );
+			} );
+
+			// https://github.com/ckeditor/ckeditor5/issues/10431
+			it( 'should trigger update of the #isEmpty property', () => {
+				view.element.value = 'foo';
+				view.element.dispatchEvent( new Event( 'input' ) );
+
+				expect( view.isEmpty ).to.be.false;
+
+				view.element.value = '';
+				view.element.dispatchEvent( new Event( 'input' ) );
+
+				expect( view.isEmpty ).to.be.true;
+			} );
+		} );
+	} );
+
+	describe( 'render()', () => {
+		it( 'registers #element in the #focusTracker', () => {
+			expect( view.isFocused ).to.be.false;
+
+			view.element.dispatchEvent( new Event( 'focus' ) );
+
+			expect( view.isFocused ).to.be.true;
+		} );
+	} );
+
+	describe( 'destroy()', () => {
+		it( 'should destroy the FocusTracker instance', () => {
+			const destroySpy = sinon.spy( view.focusTracker, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+	} );
+
+	describe( 'select()', () => {
+		it( 'should select input value', () => {
+			const selectSpy = sinon.spy( view.element, 'select' );
+
+			view.select();
+
+			expect( selectSpy.calledOnce ).to.true;
+
+			selectSpy.restore();
+		} );
+	} );
+
+	describe( 'focus()', () => {
+		it( 'focuses the input in DOM', () => {
+			const spy = sinon.spy( view.element, 'focus' );
+
+			view.focus();
+
+			sinon.assert.calledOnce( spy );
+		} );
+	} );
+} );
diff --git a/packages/ckeditor5-ui/tests/inputtext/inputtextview.js b/packages/ckeditor5-ui/tests/inputtext/inputtextview.js
index 92a17934f5d..9188c481328 100644
--- a/packages/ckeditor5-ui/tests/inputtext/inputtextview.js
+++ b/packages/ckeditor5-ui/tests/inputtext/inputtextview.js
@@ -3,18 +3,14 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* global Event */
-
-import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+import InputView from '../../src/input/inputview';
 import InputTextView from '../../src/inputtext/inputtextview';
 
 describe( 'InputTextView', () => {
-	let view, ariaDescribedById;
+	let view;
 
 	beforeEach( () => {
-		ariaDescribedById = 'ck-error-1234567890';
 		view = new InputTextView();
-
 		view.render();
 	} );
 
@@ -23,220 +19,14 @@ describe( 'InputTextView', () => {
 	} );
 
 	describe( 'constructor()', () => {
+		it( 'should extend InputView', () => {
+			expect( view ).to.be.instanceOf( InputView );
+		} );
+
 		it( 'should creates element from template', () => {
-			expect( view.element.tagName ).to.equal( 'INPUT' );
+			expect( view.element.getAttribute( 'type' ) ).to.equal( 'text' );
 			expect( view.element.type ).to.equal( 'text' );
-			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
-			expect( view.element.classList.contains( 'ck-input' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-input-text' ) ).to.be.true;
 		} );
-
-		it( 'should set the #isFocused observable property', () => {
-			expect( view.isFocused ).to.be.false;
-		} );
-
-		it( 'should set the #isEmpty observable property', () => {
-			expect( view.isEmpty ).to.be.true;
-		} );
-
-		it( 'should create an instance of FocusTracker under #focusTracker property', () => {
-			expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
-		} );
-	} );
-
-	describe( 'DOM bindings', () => {
-		beforeEach( () => {
-			view.value = 'foo';
-			view.id = 'bar';
-		} );
-
-		describe( 'value', () => {
-			it( 'should react on view#value', () => {
-				expect( view.element.value ).to.equal( 'foo' );
-
-				view.value = 'baz';
-
-				expect( view.element.value ).to.equal( 'baz' );
-
-				// To be sure that value can be changed multiple times using inline value attribute.
-				// There was a related bug in Chrome.
-				view.value = 'biz';
-
-				expect( view.element.value ).to.equal( 'biz' );
-			} );
-
-			it( 'should set to empty string when using `falsy` values', () => {
-				[ undefined, false, null ].forEach( value => {
-					view.value = value;
-
-					expect( view.element.value ).to.equal( '' );
-				} );
-			} );
-
-			// See ckeditor5-ui/issues/335.
-			it( 'should set element value when value was defined before view#render', () => {
-				view = new InputTextView();
-
-				view.value = 'baz';
-
-				view.render();
-
-				expect( view.element.value ).to.equal( 'baz' );
-			} );
-
-			it( 'should update along with the #isEmpty property', () => {
-				view.value = 'foo';
-
-				expect( view.isEmpty ).to.be.false;
-
-				view.value = '';
-				expect( view.isEmpty ).to.be.true;
-			} );
-		} );
-
-		describe( 'id', () => {
-			it( 'should react on view#id', () => {
-				expect( view.element.id ).to.equal( 'bar' );
-
-				view.id = 'baz';
-
-				expect( view.element.id ).to.equal( 'baz' );
-			} );
-		} );
-
-		describe( 'placeholder', () => {
-			it( 'should react on view#placeholder', () => {
-				expect( view.element.placeholder ).to.equal( '' );
-
-				view.placeholder = 'baz';
-
-				expect( view.element.placeholder ).to.equal( 'baz' );
-			} );
-		} );
-
-		describe( 'isReadOnly', () => {
-			it( 'should react on view#isReadOnly', () => {
-				expect( view.element.readOnly ).to.false;
-
-				view.isReadOnly = true;
-
-				expect( view.element.readOnly ).to.true;
-			} );
-		} );
-
-		describe( 'class', () => {
-			it( 'should react on view#hasErrors', () => {
-				expect( view.element.classList.contains( 'ck-error' ) ).to.be.false;
-
-				view.hasError = true;
-
-				expect( view.element.classList.contains( 'ck-error' ) ).to.be.true;
-			} );
-
-			it( 'should react on view#isFocused', () => {
-				expect( view.element.classList.contains( 'ck-input_focused' ) ).to.be.false;
-
-				view.isFocused = true;
-
-				expect( view.element.classList.contains( 'ck-input_focused' ) ).to.be.true;
-			} );
-
-			it( 'should react on view#isEmpty', () => {
-				view.value = '';
-
-				expect( view.element.classList.contains( 'ck-input-text_empty' ) ).to.be.true;
-
-				view.value = 'bar';
-
-				expect( view.element.classList.contains( 'ck-input-text_empty' ) ).to.be.false;
-			} );
-		} );
-
-		describe( 'aria-invalid', () => {
-			it( 'should react on view#hasError', () => {
-				expect( view.element.getAttribute( 'aria-invalid' ) ).to.be.null;
-
-				view.hasError = true;
-
-				expect( view.element.getAttribute( 'aria-invalid' ) ).to.equal( 'true' );
-			} );
-		} );
-
-		describe( 'aria-describedby', () => {
-			it( 'should react on view#hasError', () => {
-				expect( view.element.getAttribute( 'aria-describedby' ) ).to.be.null;
-
-				view.ariaDescribedById = ariaDescribedById;
-
-				expect( view.element.getAttribute( 'aria-describedby' ) ).to.equal( ariaDescribedById );
-			} );
-		} );
-
-		describe( 'input event', () => {
-			it( 'triggers view#input', () => {
-				const spy = sinon.spy();
-
-				view.on( 'input', spy );
-
-				view.element.dispatchEvent( new Event( 'input' ) );
-				sinon.assert.calledOnce( spy );
-				sinon.assert.calledWith( spy, sinon.match.object );
-			} );
-
-			// https://github.com/ckeditor/ckeditor5/issues/10431
-			it( 'should trigger update of the #isEmpty property', () => {
-				view.element.value = 'foo';
-				view.element.dispatchEvent( new Event( 'input' ) );
-
-				expect( view.isEmpty ).to.be.false;
-
-				view.element.value = '';
-				view.element.dispatchEvent( new Event( 'input' ) );
-
-				expect( view.isEmpty ).to.be.true;
-			} );
-		} );
-	} );
-
-	describe( 'render()', () => {
-		it( 'registers #element in the #focusTracker', () => {
-			expect( view.isFocused ).to.be.false;
-
-			view.element.dispatchEvent( new Event( 'focus' ) );
-
-			expect( view.isFocused ).to.be.true;
-		} );
-	} );
-
-	describe( 'destroy()', () => {
-		it( 'should destroy the FocusTracker instance', () => {
-			const destroySpy = sinon.spy( view.focusTracker, 'destroy' );
-
-			view.destroy();
-
-			sinon.assert.calledOnce( destroySpy );
-		} );
-	} );
-
-	describe( 'select()', () => {
-		it( 'should select input value', () => {
-			const selectSpy = sinon.spy( view.element, 'select' );
-
-			view.select();
-
-			expect( selectSpy.calledOnce ).to.true;
-
-			selectSpy.restore();
-		} );
-	} );
-
-	describe( 'focus()', () => {
-		it( 'focuses the input in DOM', () => {
-			const spy = sinon.spy( view.element, 'focus' );
-
-			view.focus();
-
-			sinon.assert.calledOnce( spy );
-		} );
 	} );
 } );
diff --git a/packages/ckeditor5-ui/tests/list/listview.js b/packages/ckeditor5-ui/tests/list/listview.js
index 1266db35f25..d54037f421e 100644
--- a/packages/ckeditor5-ui/tests/list/listview.js
+++ b/packages/ckeditor5-ui/tests/list/listview.js
@@ -19,9 +19,11 @@ describe( 'ListView', () => {
 	beforeEach( () => {
 		view = new ListView();
 		view.render();
+		document.body.appendChild( view.element );
 	} );
 
 	afterEach( () => {
+		view.element.remove();
 		view.destroy();
 	} );
 
diff --git a/packages/ckeditor5-ui/tests/toolbar/toolbarview.js b/packages/ckeditor5-ui/tests/toolbar/toolbarview.js
index 0e3d23f971d..deebfd72ba9 100644
--- a/packages/ckeditor5-ui/tests/toolbar/toolbarview.js
+++ b/packages/ckeditor5-ui/tests/toolbar/toolbarview.js
@@ -44,11 +44,13 @@ describe( 'ToolbarView', () => {
 		locale = new Locale();
 		view = new ToolbarView( locale );
 		view.render();
+		document.body.appendChild( view.element );
 	} );
 
 	afterEach( () => {
 		sinon.restore();
 		view.destroy();
+		view.element.remove();
 	} );
 
 	describe( 'constructor()', () => {
@@ -364,10 +366,17 @@ describe( 'ToolbarView', () => {
 		describe( 'activates keyboard navigation for the RTL toolbar', () => {
 			beforeEach( () => {
 				view.destroy();
+				view.element.remove();
+
 				locale = new Locale( { uiLanguage: 'ar' } );
 
 				view = new ToolbarView( locale );
 				view.render();
+				document.body.appendChild( view.element );
+			} );
+
+			afterEach( () => {
+				view.element.remove();
 			} );
 
 			it( 'so "arrowleft" focuses next focusable item', () => {
diff --git a/packages/ckeditor5-ui/theme/components/inputtext/inputtext.css b/packages/ckeditor5-ui/theme/components/input/input.css
similarity index 100%
rename from packages/ckeditor5-ui/theme/components/inputtext/inputtext.css
rename to packages/ckeditor5-ui/theme/components/input/input.css
diff --git a/packages/ckeditor5-utils/src/dom/isvisible.js b/packages/ckeditor5-utils/src/dom/isvisible.js
new file mode 100644
index 00000000000..85cb9d5b4cb
--- /dev/null
+++ b/packages/ckeditor5-utils/src/dom/isvisible.js
@@ -0,0 +1,18 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module utils/dom/isvisible
+ */
+
+/**
+ * Checks if the element is visible in DOM (no `display: block`, no ancestor with `display: none`).
+ *
+ * @param {HTMLElement} element
+ * @returns {Boolean}
+ */
+export default function isVisible( element ) {
+	return element && element.getClientRects().length;
+}
diff --git a/packages/ckeditor5-utils/src/index.js b/packages/ckeditor5-utils/src/index.js
index 7b635e11d87..9be65418d06 100644
--- a/packages/ckeditor5-utils/src/index.js
+++ b/packages/ckeditor5-utils/src/index.js
@@ -26,6 +26,7 @@ export { default as Rect } from './dom/rect';
 export { default as ResizeObserver } from './dom/resizeobserver';
 export { default as setDataInElement } from './dom/setdatainelement';
 export { default as toUnit } from './dom/tounit';
+export { default as isVisible } from './dom/isvisible';
 
 export * from './keyboard';
 export * from './language';
diff --git a/packages/ckeditor5-widget/tests/widgetresize.js b/packages/ckeditor5-widget/tests/widgetresize.js
index 68cee377b50..65f2f7a6fb4 100644
--- a/packages/ckeditor5-widget/tests/widgetresize.js
+++ b/packages/ckeditor5-widget/tests/widgetresize.js
@@ -10,6 +10,7 @@ import WidgetResize from '../src/widgetresize';
 // ClassicTestEditor can't be used, as it doesn't handle the focus, which is needed to test resizer visual cues.
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import isVisible from '@ckeditor/ckeditor5-utils/src/dom/isvisible';
 
 import { toWidget } from '../src/utils';
 import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
@@ -162,11 +163,6 @@ describe( 'WidgetResize', () => {
 				expect( isVisible( resizer ) ).to.be.true;
 			}
 		} );
-
-		function isVisible( element ) {
-			// Checks if the DOM element is visible to the end user.
-			return element.offsetParent !== null && !element.classList.contains( 'ck-hidden' );
-		}
 	} );
 
 	describe( 'integration (pixels)', () => {

From c0524ce563fca4b0591ef85587fb8413f037edaf Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 25 Nov 2021 16:24:48 +0100
Subject: [PATCH 04/26] Data bindings (with fake commands).

---
 .../ckeditor5-list/src/liststyleediting.js    | 14 ++++++
 packages/ckeditor5-list/src/liststyleui.js    | 31 +++++++++---
 .../src/ui/listpropertiesview.js              | 49 ++++++++++++++++---
 .../ckeditor5-list/theme/listproperties.css   |  3 +-
 4 files changed, 82 insertions(+), 15 deletions(-)

diff --git a/packages/ckeditor5-list/src/liststyleediting.js b/packages/ckeditor5-list/src/liststyleediting.js
index 7df78824f52..1770ab8bc8c 100644
--- a/packages/ckeditor5-list/src/liststyleediting.js
+++ b/packages/ckeditor5-list/src/liststyleediting.js
@@ -55,6 +55,20 @@ export default class ListStyleEditing extends Plugin {
 		editor.commands.add( 'listReversed', new Command( editor ) );
 		editor.commands.add( 'listStart', new Command( editor ) );
 
+		editor.commands.get( 'listReversed' ).isEnabled = true;
+		editor.commands.get( 'listReversed' ).value = false;
+		editor.commands.get( 'listReversed' ).execute = () => {
+			editor.commands.get( 'listReversed' ).value = !editor.commands.get( 'listReversed' ).value;
+			// console.log( 'listReversed#value', editor.commands.get( 'listReversed' ).value );
+		};
+
+		editor.commands.get( 'listStart' ).isEnabled = true;
+		editor.commands.get( 'listStart' ).value = 1;
+		editor.commands.get( 'listStart' ).execute = value => {
+			editor.commands.get( 'listStart' ).value = value;
+			// console.log( 'listStart#value', editor.commands.get( 'listStart' ).value );
+		};
+
 		// Fix list attributes when modifying their nesting levels (the `listIndent` attribute).
 		this.listenTo( editor.commands.get( 'indentList' ), '_executeCleanup', fixListAfterIndentListCommand( editor ) );
 		this.listenTo( editor.commands.get( 'outdentList' ), '_executeCleanup', fixListAfterOutdentListCommand( editor ) );
diff --git a/packages/ckeditor5-list/src/liststyleui.js b/packages/ckeditor5-list/src/liststyleui.js
index 00cfa29d085..327fd4b24e1 100644
--- a/packages/ckeditor5-list/src/liststyleui.js
+++ b/packages/ckeditor5-list/src/liststyleui.js
@@ -139,23 +139,32 @@ export default class ListStyleUI extends Plugin {
 function getSplitButtonCreator( { editor, parentCommandName, buttonLabel, buttonIcon, styleGridAriaLabel, styleDefinitions } ) {
 	const parentCommand = editor.commands.get( parentCommandName );
 	const listStyleCommand = editor.commands.get( 'listStyle' );
+	const styleButtonCreator = getStyleButtonCreator( { editor, parentCommandName, listStyleCommand } );
+	const enabledProperties = Object.fromEntries( editor.config.get( 'list.properties' ).map( key => [ key, true ] ) );
+	const isNumberedListDropdown = parentCommandName == 'numberedList';
+	const shouldIncludeStyles = isNumberedListDropdown ? !!enabledProperties.styles : true;
+	const styleButtonViews = shouldIncludeStyles ? styleDefinitions.map( styleButtonCreator ) : null;
 
 	// @param {module:utils/locale~Locale} locale
 	// @returns {module:ui/dropdown/dropdownview~DropdownView}
 	return locale => {
 		const dropdownView = createDropdown( locale, SplitButtonView );
 		const splitButtonView = dropdownView.buttonView;
-		const enabledProperties = Object.fromEntries( editor.config.get( 'list.properties' ).map( key => [ key, true ] ) );
-		const isNumberedListDropdown = parentCommandName == 'numberedList';
-		const shouldIncludeStyles = isNumberedListDropdown ? !!enabledProperties.styles : true;
-		const shouldRenderNumberedListProperties = isNumberedListDropdown && ( enabledProperties.startIndex || enabledProperties.reversed );
-		const styleButtonCreator = getStyleButtonCreator( { editor, parentCommandName, listStyleCommand } );
-		const styleButtonViews = shouldIncludeStyles ? styleDefinitions.map( styleButtonCreator ) : null;
+		const shouldRenderNumberedListPropertyFields = isNumberedListDropdown &&
+			( enabledProperties.startIndex || enabledProperties.reversed );
+		let numberedListPropertyCommands;
+
+		if ( shouldRenderNumberedListPropertyFields ) {
+			numberedListPropertyCommands = {
+				listStartCommand: editor.commands.get( 'listStart' ),
+				listReversedCommand: editor.commands.get( 'listReversed' )
+			};
+		}
 
 		dropdownView.bind( 'isEnabled' ).to( parentCommand );
 		dropdownView.class = 'ck-list-styles-dropdown';
 
-		splitButtonView.on( 'execute', () => {
+		splitButtonView.on( 'listStyle', () => {
 			editor.execute( parentCommandName );
 			editor.editing.view.focus();
 		} );
@@ -173,11 +182,17 @@ function getSplitButtonCreator( { editor, parentCommandName, buttonLabel, button
 			styleGridAriaLabel,
 			enabledProperties,
 			styleButtonViews,
-			shouldRenderNumberedListProperties
+			numberedListPropertyCommands
 		} );
 
 		// Make sure applying styles closes the dropdown.
 		listPropertiesView.delegate( 'execute' ).to( dropdownView );
+		listPropertiesView.on( 'listReversed', () => {
+			editor.execute( 'listReversed' );
+		} );
+		listPropertiesView.on( 'listStart', ( evt, data ) => {
+			editor.execute( 'listStart', data );
+		} );
 
 		dropdownView.panelView.children.add( listPropertiesView );
 
diff --git a/packages/ckeditor5-list/src/ui/listpropertiesview.js b/packages/ckeditor5-list/src/ui/listpropertiesview.js
index 60baac94b3a..c9a7b8103bd 100644
--- a/packages/ckeditor5-list/src/ui/listpropertiesview.js
+++ b/packages/ckeditor5-list/src/ui/listpropertiesview.js
@@ -33,7 +33,7 @@ export default class ListPropertiesView extends View {
 	/**
 	 * @inheritDoc
 	 */
-	constructor( locale, { shouldRenderNumberedListProperties, enabledProperties, styleButtonViews, styleGridAriaLabel } ) {
+	constructor( locale, { numberedListPropertyCommands, enabledProperties, styleButtonViews, styleGridAriaLabel } ) {
 		super( locale );
 
 		const t = locale.t;
@@ -125,16 +125,16 @@ export default class ListPropertiesView extends View {
 			cssClasses.push( 'ck-list-properties_without-styles' );
 		}
 
-		if ( shouldRenderNumberedListProperties ) {
+		if ( numberedListPropertyCommands ) {
 			const numberedPropertiesFields = [];
 
 			if ( enabledProperties.startIndex ) {
-				this.startIndexFieldView = this._createStartIndexField();
+				this.startIndexFieldView = this._createStartIndexField( numberedListPropertyCommands );
 				numberedPropertiesFields.push( this.startIndexFieldView );
 			}
 
 			if ( enabledProperties.reversed ) {
-				this.reversedFieldView = this._createReversedField();
+				this.reversedFieldView = this._createReversedField( numberedListPropertyCommands );
 				numberedPropertiesFields.push( this.reversedFieldView );
 			}
 
@@ -183,6 +183,23 @@ export default class ListPropertiesView extends View {
 		if ( this.startIndexFieldView ) {
 			this.focusables.add( this.startIndexFieldView );
 			this.focusTracker.add( this.startIndexFieldView.element );
+
+			// Intercept the `selectstart` event, which is blocked by default because of the default behavior
+			// of the DropdownView#panelView.
+			// TODO: blocking `selectstart` in the #panelView should be configurable per–drop–down instance.
+			this.listenTo( this.startIndexFieldView.element, 'selectstart', ( evt, domEvt ) => {
+				domEvt.stopPropagation();
+			}, { priority: 'high' } );
+
+			const stopPropagation = data => data.stopPropagation();
+
+			// Since the form is in the dropdown panel which is a child of the toolbar, the toolbar's
+			// keystroke handler would take over the key management in the input. We need to prevent
+			// this ASAP. Otherwise, the basic caret movement using the arrow keys will be impossible.
+			this.keystrokes.set( 'arrowright', stopPropagation );
+			this.keystrokes.set( 'arrowleft', stopPropagation );
+			this.keystrokes.set( 'arrowup', stopPropagation );
+			this.keystrokes.set( 'arrowdown', stopPropagation );
 		}
 
 		if ( this.reversedFieldView ) {
@@ -244,7 +261,7 @@ export default class ListPropertiesView extends View {
 	 *
 	 * @returns
 	 */
-	_createStartIndexField() {
+	_createStartIndexField( { listStartCommand } ) {
 		const t = this.locale.t;
 		const startIndexFieldView = new LabeledFieldView( this.locale, createLabeledInputNumber );
 
@@ -260,6 +277,22 @@ export default class ListPropertiesView extends View {
 			inputMode: 'numeric'
 		} );
 
+		startIndexFieldView.bind( 'isEnabled' ).to( listStartCommand );
+		startIndexFieldView.fieldView.bind( 'value' ).to( listStartCommand );
+		startIndexFieldView.fieldView.on( 'input', () => {
+			const value = startIndexFieldView.fieldView.element.value;
+
+			if ( value !== '' ) {
+				const parsedValue = Number.parseInt( value );
+
+				if ( parsedValue < 1 ) {
+					startIndexFieldView.errorText = t( 'Start index must be greater than 0.' );
+				} else {
+					this.fire( 'listStart', parsedValue );
+				}
+			}
+		} );
+
 		return startIndexFieldView;
 	}
 
@@ -268,7 +301,7 @@ export default class ListPropertiesView extends View {
 	 *
 	 * @returns
 	 */
-	_createReversedField() {
+	_createReversedField( { listReversedCommand } ) {
 		const t = this.locale.t;
 		const reversedButtonView = new SwitchButtonView( this.locale );
 
@@ -278,6 +311,10 @@ export default class ListPropertiesView extends View {
 			class: 'ck-numbered-list-properties-reversed-order'
 		} );
 
+		reversedButtonView.bind( 'isEnabled' ).to( listReversedCommand );
+		reversedButtonView.bind( 'isOn' ).to( listReversedCommand, 'value' );
+		reversedButtonView.delegate( 'execute' ).to( this, 'listReversed' );
+
 		return reversedButtonView;
 	}
 }
diff --git a/packages/ckeditor5-list/theme/listproperties.css b/packages/ckeditor5-list/theme/listproperties.css
index 7ffd9d217ab..24fd4c8ebff 100644
--- a/packages/ckeditor5-list/theme/listproperties.css
+++ b/packages/ckeditor5-list/theme/listproperties.css
@@ -53,9 +53,10 @@
 		padding-right: 0;
 		padding-bottom: 0;
 
-		&:active {
+		&:active, &:hover {
 			box-shadow: none;
 			border-color: transparent;
+			background: none;
 		}
 	}
 }

From 9f58afc2774b8320d80c54032eda476a0e33d873 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 25 Nov 2021 16:31:05 +0100
Subject: [PATCH 05/26] isVisible() should return boolean.

---
 packages/ckeditor5-utils/src/dom/isvisible.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ckeditor5-utils/src/dom/isvisible.js b/packages/ckeditor5-utils/src/dom/isvisible.js
index 85cb9d5b4cb..e3c1b36287b 100644
--- a/packages/ckeditor5-utils/src/dom/isvisible.js
+++ b/packages/ckeditor5-utils/src/dom/isvisible.js
@@ -14,5 +14,5 @@
  * @returns {Boolean}
  */
 export default function isVisible( element ) {
-	return element && element.getClientRects().length;
+	return !!( element && element.getClientRects().length );
 }

From d79dfcca4a082ba942564b73a4b7c82008d3fc32 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 26 Nov 2021 10:00:02 +0100
Subject: [PATCH 06/26] config.list.properties ->
 config.list.numberedProperties.

---
 packages/ckeditor5-list/src/liststyleediting.js    |  2 ++
 packages/ckeditor5-list/src/liststyleui.js         |  2 +-
 .../ckeditor5-list/tests/manual/list-properties.js | 14 +++++++-------
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/ckeditor5-list/src/liststyleediting.js b/packages/ckeditor5-list/src/liststyleediting.js
index 1770ab8bc8c..10b7bfca40d 100644
--- a/packages/ckeditor5-list/src/liststyleediting.js
+++ b/packages/ckeditor5-list/src/liststyleediting.js
@@ -51,6 +51,8 @@ export default class ListStyleEditing extends Plugin {
 			allowAttributes: [ 'listStyle' ]
 		} );
 
+		editor.config.define( 'list.numberedProperties', [ 'styles', 'startIndex', 'reversed' ] );
+
 		editor.commands.add( 'listStyle', new ListStyleCommand( editor, DEFAULT_LIST_TYPE ) );
 		editor.commands.add( 'listReversed', new Command( editor ) );
 		editor.commands.add( 'listStart', new Command( editor ) );
diff --git a/packages/ckeditor5-list/src/liststyleui.js b/packages/ckeditor5-list/src/liststyleui.js
index 327fd4b24e1..f3af70ddaee 100644
--- a/packages/ckeditor5-list/src/liststyleui.js
+++ b/packages/ckeditor5-list/src/liststyleui.js
@@ -140,7 +140,7 @@ function getSplitButtonCreator( { editor, parentCommandName, buttonLabel, button
 	const parentCommand = editor.commands.get( parentCommandName );
 	const listStyleCommand = editor.commands.get( 'listStyle' );
 	const styleButtonCreator = getStyleButtonCreator( { editor, parentCommandName, listStyleCommand } );
-	const enabledProperties = Object.fromEntries( editor.config.get( 'list.properties' ).map( key => [ key, true ] ) );
+	const enabledProperties = Object.fromEntries( editor.config.get( 'list.numberedProperties' ).map( key => [ key, true ] ) );
 	const isNumberedListDropdown = parentCommandName == 'numberedList';
 	const shouldIncludeStyles = isNumberedListDropdown ? !!enabledProperties.styles : true;
 	const styleButtonViews = shouldIncludeStyles ? styleDefinitions.map( styleButtonCreator ) : null;
diff --git a/packages/ckeditor5-list/tests/manual/list-properties.js b/packages/ckeditor5-list/tests/manual/list-properties.js
index 63409ed97a5..de77180fce7 100644
--- a/packages/ckeditor5-list/tests/manual/list-properties.js
+++ b/packages/ckeditor5-list/tests/manual/list-properties.js
@@ -63,7 +63,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor-a' ), {
 		...config,
 		list: {
-			properties: [ 'styles', 'startIndex', 'reversed' ]
+			numberedProperties: [ 'styles', 'startIndex', 'reversed' ]
 		}
 	} )
 	.catch( err => {
@@ -74,7 +74,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor-b' ), {
 		...config,
 		list: {
-			properties: [ 'styles', 'startIndex' ]
+			numberedProperties: [ 'styles', 'startIndex' ]
 		}
 	} )
 	.catch( err => {
@@ -85,7 +85,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor-c' ), {
 		...config,
 		list: {
-			properties: [ 'styles', 'reversed' ]
+			numberedProperties: [ 'styles', 'reversed' ]
 		}
 	} )
 	.catch( err => {
@@ -98,7 +98,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor-d' ), {
 		...config,
 		list: {
-			properties: [ 'startIndex', 'reversed' ]
+			numberedProperties: [ 'startIndex', 'reversed' ]
 		}
 	} )
 	.catch( err => {
@@ -109,7 +109,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor-e' ), {
 		...config,
 		list: {
-			properties: [ 'startIndex' ]
+			numberedProperties: [ 'startIndex' ]
 		}
 	} )
 	.catch( err => {
@@ -120,7 +120,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor-f' ), {
 		...config,
 		list: {
-			properties: [ 'reversed' ]
+			numberedProperties: [ 'reversed' ]
 		}
 	} )
 	.catch( err => {
@@ -133,7 +133,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor-g' ), {
 		...config,
 		list: {
-			properties: [ 'styles' ]
+			numberedProperties: [ 'styles' ]
 		}
 	} )
 	.catch( err => {

From 930b086f1fce58e0f5d07522ca4377f5f34744ec Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 26 Nov 2021 12:54:29 +0100
Subject: [PATCH 07/26] Tests: Adjusted various tests to the FocusCycler
 bahavior skipping invisible (also: detached from DOM) views.

---
 .../tests/ui/findandreplaceformview.js          | 10 ++++++++--
 .../imageinsert/ui/imageinsertpanelview.js      | 17 +++++++++++++----
 .../ui/textalternativeformview.js               |  8 +++++++-
 .../ckeditor5-link/tests/ui/linkactionsview.js  | 16 ++++++++++++++--
 .../ckeditor5-link/tests/ui/linkformview.js     | 11 +++++++++--
 .../tests/ui/mediaformview.js                   | 16 +++++++++++++---
 .../ui/tablecellpropertiesview.js               |  4 +++-
 .../tableproperties/ui/tablepropertiesview.js   |  4 +++-
 8 files changed, 70 insertions(+), 16 deletions(-)

diff --git a/packages/ckeditor5-find-and-replace/tests/ui/findandreplaceformview.js b/packages/ckeditor5-find-and-replace/tests/ui/findandreplaceformview.js
index d3f7a088359..6954bd9de1a 100644
--- a/packages/ckeditor5-find-and-replace/tests/ui/findandreplaceformview.js
+++ b/packages/ckeditor5-find-and-replace/tests/ui/findandreplaceformview.js
@@ -44,9 +44,11 @@ describe( 'FindAndReplaceFormView', () => {
 	beforeEach( () => {
 		view = new FindAndReplaceFormView( { t: val => val } );
 		view.render();
+		document.body.appendChild( view.element );
 	} );
 
 	afterEach( () => {
+		view.element.remove();
 		view.destroy();
 	} );
 
@@ -385,7 +387,7 @@ describe( 'FindAndReplaceFormView', () => {
 			} );
 
 			it( 'should register child views\' #element in #focusTracker', () => {
-				view = new FindAndReplaceFormView( { t: val => val } );
+				const view = new FindAndReplaceFormView( { t: val => val } );
 
 				const spy = testUtils.sinon.spy( view._focusTracker, 'add' );
 
@@ -399,16 +401,20 @@ describe( 'FindAndReplaceFormView', () => {
 				sinon.assert.calledWithExactly( spy.getCall( 5 ), view._optionsDropdown.element );
 				sinon.assert.calledWithExactly( spy.getCall( 6 ), view._replaceButtonView.element );
 				sinon.assert.calledWithExactly( spy.getCall( 7 ), view._replaceAllButtonView.element );
+
+				view.destroy();
 			} );
 
 			it( 'starts listening for #keystrokes coming from #element', () => {
-				view = new FindAndReplaceFormView( { t: val => val } );
+				const view = new FindAndReplaceFormView( { t: val => val } );
 
 				const spy = sinon.spy( view._keystrokes, 'listenTo' );
 
 				view.render();
 				sinon.assert.calledOnce( spy );
 				sinon.assert.calledWithExactly( spy, view.element );
+
+				view.destroy();
 			} );
 
 			describe( 'activates keyboard navigation in the form', () => {
diff --git a/packages/ckeditor5-image/tests/imageinsert/ui/imageinsertpanelview.js b/packages/ckeditor5-image/tests/imageinsert/ui/imageinsertpanelview.js
index 9d0b3836041..75c85ba15a1 100644
--- a/packages/ckeditor5-image/tests/imageinsert/ui/imageinsertpanelview.js
+++ b/packages/ckeditor5-image/tests/imageinsert/ui/imageinsertpanelview.js
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals Event */
+/* globals document, Event */
 
 import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
 import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview';
@@ -33,9 +33,12 @@ describe( 'ImageUploadPanelView', () => {
 			'insertImageViaUrl': createLabeledInputView( { t: val => val } )
 		} );
 		view.render();
+		document.body.appendChild( view.element );
 	} );
 
 	afterEach( () => {
+		view.element.remove();
+		view.destroy();
 		sinon.restore();
 	} );
 
@@ -161,17 +164,19 @@ describe( 'ImageUploadPanelView', () => {
 		} );
 
 		it( 'should register child views\' #element in #focusTracker with no integrations', () => {
-			view = new ImageUploadPanelView( { t: () => {} } );
+			const view = new ImageUploadPanelView( { t: () => {} } );
 
 			const spy = testUtils.sinon.spy( view.focusTracker, 'add' );
 			view.render();
 
 			sinon.assert.calledWithExactly( spy.getCall( 0 ), view.insertButtonView.element );
 			sinon.assert.calledWithExactly( spy.getCall( 1 ), view.cancelButtonView.element );
+
+			view.destroy();
 		} );
 
 		it( 'should register child views\' #element in #focusTracker with "insertImageViaUrl" integration', () => {
-			view = new ImageUploadPanelView( { t: () => {} }, {
+			const view = new ImageUploadPanelView( { t: () => {} }, {
 				'insertImageViaUrl': createLabeledInputView( { t: val => val } )
 			} );
 
@@ -182,16 +187,20 @@ describe( 'ImageUploadPanelView', () => {
 			sinon.assert.calledWithExactly( spy.getCall( 0 ), view.getIntegration( 'insertImageViaUrl' ).element );
 			sinon.assert.calledWithExactly( spy.getCall( 1 ), view.insertButtonView.element );
 			sinon.assert.calledWithExactly( spy.getCall( 2 ), view.cancelButtonView.element );
+
+			view.destroy();
 		} );
 
 		it( 'starts listening for #keystrokes coming from #element', () => {
-			view = new ImageUploadPanelView( { t: () => {} } );
+			const view = new ImageUploadPanelView( { t: () => {} } );
 
 			const spy = sinon.spy( view.keystrokes, 'listenTo' );
 
 			view.render();
 			sinon.assert.calledOnce( spy );
 			sinon.assert.calledWithExactly( spy, view.element );
+
+			view.destroy();
 		} );
 
 		it( 'intercepts the arrow* events and overrides the default toolbar behavior', () => {
diff --git a/packages/ckeditor5-image/tests/imagetextalternative/ui/textalternativeformview.js b/packages/ckeditor5-image/tests/imagetextalternative/ui/textalternativeformview.js
index b91c4dffe01..96d6f4e809a 100644
--- a/packages/ckeditor5-image/tests/imagetextalternative/ui/textalternativeformview.js
+++ b/packages/ckeditor5-image/tests/imagetextalternative/ui/textalternativeformview.js
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* global Event */
+/* global document, Event */
 
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import TextAlternativeFormView from '../../../src/imagetextalternative/ui/textalternativeformview';
@@ -106,6 +106,12 @@ describe( 'TextAlternativeFormView', () => {
 			describe( 'activates keyboard navigation in the form', () => {
 				beforeEach( () => {
 					view.render();
+					document.body.appendChild( view.element );
+				} );
+
+				afterEach( () => {
+					view.element.remove();
+					view.destroy();
 				} );
 
 				it( 'so "tab" focuses the next focusable item', () => {
diff --git a/packages/ckeditor5-link/tests/ui/linkactionsview.js b/packages/ckeditor5-link/tests/ui/linkactionsview.js
index 054fb652d01..cf1ec69dfeb 100644
--- a/packages/ckeditor5-link/tests/ui/linkactionsview.js
+++ b/packages/ckeditor5-link/tests/ui/linkactionsview.js
@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+/* globals document */
+
 import LinkActionsView from '../../src/ui/linkactionsview';
 import View from '@ckeditor/ckeditor5-ui/src/view';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
@@ -20,6 +22,12 @@ describe( 'LinkActionsView', () => {
 	beforeEach( () => {
 		view = new LinkActionsView( { t: val => val } );
 		view.render();
+		document.body.appendChild( view.element );
+	} );
+
+	afterEach( () => {
+		view.element.remove();
+		view.destroy();
 	} );
 
 	describe( 'constructor()', () => {
@@ -139,22 +147,26 @@ describe( 'LinkActionsView', () => {
 		it( 'should register child views\' #element in #focusTracker', () => {
 			const spy = testUtils.sinon.spy( FocusTracker.prototype, 'add' );
 
-			view = new LinkActionsView( { t: () => {} } );
+			const view = new LinkActionsView( { t: () => {} } );
 			view.render();
 
 			sinon.assert.calledWithExactly( spy.getCall( 0 ), view.previewButtonView.element );
 			sinon.assert.calledWithExactly( spy.getCall( 1 ), view.editButtonView.element );
 			sinon.assert.calledWithExactly( spy.getCall( 2 ), view.unlinkButtonView.element );
+
+			view.destroy();
 		} );
 
 		it( 'starts listening for #keystrokes coming from #element', () => {
-			view = new LinkActionsView( { t: () => {} } );
+			const view = new LinkActionsView( { t: () => {} } );
 
 			const spy = sinon.spy( view.keystrokes, 'listenTo' );
 
 			view.render();
 			sinon.assert.calledOnce( spy );
 			sinon.assert.calledWithExactly( spy, view.element );
+
+			view.destroy();
 		} );
 
 		describe( 'activates keyboard navigation for the toolbar', () => {
diff --git a/packages/ckeditor5-link/tests/ui/linkformview.js b/packages/ckeditor5-link/tests/ui/linkformview.js
index 8429d5ca776..2d238c35690 100644
--- a/packages/ckeditor5-link/tests/ui/linkformview.js
+++ b/packages/ckeditor5-link/tests/ui/linkformview.js
@@ -29,9 +29,11 @@ describe( 'LinkFormView', () => {
 	beforeEach( () => {
 		view = new LinkFormView( { t: val => val }, { manualDecorators: [] } );
 		view.render();
+		document.body.appendChild( view.element );
 	} );
 
 	afterEach( () => {
+		view.element.remove();
 		view.destroy();
 	} );
 
@@ -108,7 +110,7 @@ describe( 'LinkFormView', () => {
 		} );
 
 		it( 'should register child views\' #element in #focusTracker', () => {
-			view = new LinkFormView( { t: () => {} }, { manualDecorators: [] } );
+			const view = new LinkFormView( { t: () => {} }, { manualDecorators: [] } );
 
 			const spy = testUtils.sinon.spy( view.focusTracker, 'add' );
 
@@ -117,16 +119,20 @@ describe( 'LinkFormView', () => {
 			sinon.assert.calledWithExactly( spy.getCall( 0 ), view.urlInputView.element );
 			sinon.assert.calledWithExactly( spy.getCall( 1 ), view.saveButtonView.element );
 			sinon.assert.calledWithExactly( spy.getCall( 2 ), view.cancelButtonView.element );
+
+			view.destroy();
 		} );
 
 		it( 'starts listening for #keystrokes coming from #element', () => {
-			view = new LinkFormView( { t: () => {} }, { manualDecorators: [] } );
+			const view = new LinkFormView( { t: () => {} }, { manualDecorators: [] } );
 
 			const spy = sinon.spy( view.keystrokes, 'listenTo' );
 
 			view.render();
 			sinon.assert.calledOnce( spy );
 			sinon.assert.calledWithExactly( spy, view.element );
+
+			view.destroy();
 		} );
 
 		describe( 'activates keyboard navigation for the toolbar', () => {
@@ -214,6 +220,7 @@ describe( 'LinkFormView', () => {
 
 	describe( 'manual decorators', () => {
 		let view, collection, linkCommand;
+
 		beforeEach( () => {
 			collection = new Collection();
 			collection.add( new ManualDecorator( {
diff --git a/packages/ckeditor5-media-embed/tests/ui/mediaformview.js b/packages/ckeditor5-media-embed/tests/ui/mediaformview.js
index 70e0ab9868d..809b7fd761c 100644
--- a/packages/ckeditor5-media-embed/tests/ui/mediaformview.js
+++ b/packages/ckeditor5-media-embed/tests/ui/mediaformview.js
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals Event */
+/* globals document, Event */
 
 import MediaFormView from '../../src/ui/mediaformview';
 import View from '@ckeditor/ckeditor5-ui/src/view';
@@ -22,6 +22,12 @@ describe( 'MediaFormView', () => {
 	beforeEach( () => {
 		view = new MediaFormView( [], { t: val => val } );
 		view.render();
+		document.body.appendChild( view.element );
+	} );
+
+	afterEach( () => {
+		view.element.remove();
+		view.destroy();
 	} );
 
 	describe( 'constructor()', () => {
@@ -122,7 +128,7 @@ describe( 'MediaFormView', () => {
 		} );
 
 		it( 'should register child views\' #element in #focusTracker', () => {
-			view = new MediaFormView( [], { t: () => {} } );
+			const view = new MediaFormView( [], { t: () => {} } );
 
 			const spy = testUtils.sinon.spy( view.focusTracker, 'add' );
 
@@ -131,16 +137,20 @@ describe( 'MediaFormView', () => {
 			sinon.assert.calledWithExactly( spy.getCall( 0 ), view.urlInputView.element );
 			sinon.assert.calledWithExactly( spy.getCall( 1 ), view.saveButtonView.element );
 			sinon.assert.calledWithExactly( spy.getCall( 2 ), view.cancelButtonView.element );
+
+			view.destroy();
 		} );
 
 		it( 'starts listening for #keystrokes coming from #element', () => {
-			view = new MediaFormView( [], { t: () => {} } );
+			const view = new MediaFormView( [], { t: () => {} } );
 
 			const spy = sinon.spy( view.keystrokes, 'listenTo' );
 
 			view.render();
 			sinon.assert.calledOnce( spy );
 			sinon.assert.calledWithExactly( spy, view.element );
+
+			view.destroy();
 		} );
 
 		describe( 'activates keyboard navigation for the toolbar', () => {
diff --git a/packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js b/packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js
index 56a69d75bdd..78fac94d672 100644
--- a/packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js
+++ b/packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals Event */
+/* globals document, Event */
 
 import TableCellPropertiesView from '../../../src/tablecellproperties/ui/tablecellpropertiesview';
 import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview';
@@ -61,9 +61,11 @@ describe( 'table cell properties', () => {
 			locale = { t: val => val };
 			view = new TableCellPropertiesView( locale, VIEW_OPTIONS );
 			view.render();
+			document.body.appendChild( view.element );
 		} );
 
 		afterEach( () => {
+			view.element.remove();
 			view.destroy();
 		} );
 
diff --git a/packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js b/packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js
index 2510ee92c0f..213f42e57f2 100644
--- a/packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js
+++ b/packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals Event */
+/* globals document, Event */
 
 import TablePropertiesView from '../../../src/tableproperties/ui/tablepropertiesview';
 import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview';
@@ -59,9 +59,11 @@ describe( 'table properties', () => {
 			locale = { t: val => val };
 			view = new TablePropertiesView( locale, VIEW_OPTIONS );
 			view.render();
+			document.body.appendChild( view.element );
 		} );
 
 		afterEach( () => {
+			view.element.remove();
 			view.destroy();
 		} );
 

From e681e5e934bebbc3b3530180e10fbcdffe041a86 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 26 Nov 2021 12:55:31 +0100
Subject: [PATCH 08/26] Adjusted ListStyleUI tests. Bug fixes.

---
 packages/ckeditor5-list/src/liststyleui.js   |  9 ++--
 packages/ckeditor5-list/tests/liststyleui.js | 46 ++++++++------------
 2 files changed, 24 insertions(+), 31 deletions(-)

diff --git a/packages/ckeditor5-list/src/liststyleui.js b/packages/ckeditor5-list/src/liststyleui.js
index f3af70ddaee..c451368514f 100644
--- a/packages/ckeditor5-list/src/liststyleui.js
+++ b/packages/ckeditor5-list/src/liststyleui.js
@@ -149,7 +149,7 @@ function getSplitButtonCreator( { editor, parentCommandName, buttonLabel, button
 	// @returns {module:ui/dropdown/dropdownview~DropdownView}
 	return locale => {
 		const dropdownView = createDropdown( locale, SplitButtonView );
-		const splitButtonView = dropdownView.buttonView;
+		const buttonView = dropdownView.buttonView;
 		const shouldRenderNumberedListPropertyFields = isNumberedListDropdown &&
 			( enabledProperties.startIndex || enabledProperties.reversed );
 		let numberedListPropertyCommands;
@@ -164,19 +164,20 @@ function getSplitButtonCreator( { editor, parentCommandName, buttonLabel, button
 		dropdownView.bind( 'isEnabled' ).to( parentCommand );
 		dropdownView.class = 'ck-list-styles-dropdown';
 
-		splitButtonView.on( 'listStyle', () => {
+		// Main button was clicked.
+		buttonView.on( 'execute', () => {
 			editor.execute( parentCommandName );
 			editor.editing.view.focus();
 		} );
 
-		splitButtonView.set( {
+		buttonView.set( {
 			label: buttonLabel,
 			icon: buttonIcon,
 			tooltip: true,
 			isToggleable: true
 		} );
 
-		splitButtonView.bind( 'isOn' ).to( parentCommand, 'value', value => !!value );
+		buttonView.bind( 'isOn' ).to( parentCommand, 'value', value => !!value );
 
 		const listPropertiesView = new ListPropertiesView( locale, {
 			styleGridAriaLabel,
diff --git a/packages/ckeditor5-list/tests/liststyleui.js b/packages/ckeditor5-list/tests/liststyleui.js
index e4cdf01698e..aaec5c5d25e 100644
--- a/packages/ckeditor5-list/tests/liststyleui.js
+++ b/packages/ckeditor5-list/tests/liststyleui.js
@@ -129,23 +129,19 @@ describe( 'ListStyleUI', () => {
 				} );
 			} );
 
-			describe( 'toolbar with style buttons', () => {
-				let toolbarView;
+			describe( 'grid with style buttons', () => {
+				let stylesView;
 
 				beforeEach( () => {
-					toolbarView = bulletedListDropdown.toolbarView;
-				} );
-
-				it( 'should be in the dropdown panel', () => {
-					expect( bulletedListDropdown.panelView.children.get( 0 ) ).to.equal( toolbarView );
+					stylesView = bulletedListDropdown.panelView.children.get( 0 ).stylesView;
 				} );
 
 				it( 'should have a proper ARIA label', () => {
-					expect( toolbarView.ariaLabel ).to.equal( 'Bulleted list styles toolbar' );
+					expect( stylesView.element.getAttribute( 'aria-label' ) ).to.equal( 'Bulleted list styles toolbar' );
 				} );
 
 				it( 'should bring the "disc" list style button', () => {
-					const buttonView = toolbarView.items.get( 0 );
+					const buttonView = stylesView.children.get( 0 );
 
 					expect( buttonView.label ).to.equal( 'Toggle the disc list style' );
 					expect( buttonView.tooltip ).to.equal( 'Disc' );
@@ -153,7 +149,7 @@ describe( 'ListStyleUI', () => {
 				} );
 
 				it( 'should bring the "circle" list style button', () => {
-					const buttonView = toolbarView.items.get( 1 );
+					const buttonView = stylesView.children.get( 1 );
 
 					expect( buttonView.label ).to.equal( 'Toggle the circle list style' );
 					expect( buttonView.tooltip ).to.equal( 'Circle' );
@@ -161,7 +157,7 @@ describe( 'ListStyleUI', () => {
 				} );
 
 				it( 'should bring the "square" list style button', () => {
-					const buttonView = toolbarView.items.get( 2 );
+					const buttonView = stylesView.children.get( 2 );
 
 					expect( buttonView.label ).to.equal( 'Toggle the square list style' );
 					expect( buttonView.tooltip ).to.equal( 'Square' );
@@ -173,7 +169,7 @@ describe( 'ListStyleUI', () => {
 
 					beforeEach( () => {
 						// "circle"
-						styleButtonView = toolbarView.items.get( 1 );
+						styleButtonView = stylesView.children.get( 1 );
 
 						sinon.spy( editor, 'execute' );
 						sinon.spy( editor.editing.view, 'focus' );
@@ -326,23 +322,19 @@ describe( 'ListStyleUI', () => {
 				} );
 			} );
 
-			describe( 'toolbar with style buttons', () => {
-				let toolbarView;
+			describe( 'grid with style buttons', () => {
+				let stylesView;
 
 				beforeEach( () => {
-					toolbarView = numberedListDropdown.toolbarView;
-				} );
-
-				it( 'should be in the dropdown panel', () => {
-					expect( numberedListDropdown.panelView.children.get( 0 ) ).to.equal( toolbarView );
+					stylesView = numberedListDropdown.panelView.children.get( 0 ).stylesView;
 				} );
 
 				it( 'should have a proper ARIA label', () => {
-					expect( toolbarView.ariaLabel ).to.equal( 'Numbered list styles toolbar' );
+					expect( stylesView.element.getAttribute( 'aria-label' ) ).to.equal( 'Numbered list styles toolbar' );
 				} );
 
 				it( 'should bring the "decimal" list style button', () => {
-					const buttonView = toolbarView.items.get( 0 );
+					const buttonView = stylesView.children.get( 0 );
 
 					expect( buttonView.label ).to.equal( 'Toggle the decimal list style' );
 					expect( buttonView.tooltip ).to.equal( 'Decimal' );
@@ -350,7 +342,7 @@ describe( 'ListStyleUI', () => {
 				} );
 
 				it( 'should bring the "decimal-leading-zero" list style button', () => {
-					const buttonView = toolbarView.items.get( 1 );
+					const buttonView = stylesView.children.get( 1 );
 
 					expect( buttonView.label ).to.equal( 'Toggle the decimal with leading zero list style' );
 					expect( buttonView.tooltip ).to.equal( 'Decimal with leading zero' );
@@ -358,7 +350,7 @@ describe( 'ListStyleUI', () => {
 				} );
 
 				it( 'should bring the "lower-roman" list style button', () => {
-					const buttonView = toolbarView.items.get( 2 );
+					const buttonView = stylesView.children.get( 2 );
 
 					expect( buttonView.label ).to.equal( 'Toggle the lower–roman list style' );
 					expect( buttonView.tooltip ).to.equal( 'Lower–roman' );
@@ -366,7 +358,7 @@ describe( 'ListStyleUI', () => {
 				} );
 
 				it( 'should bring the "upper-roman" list style button', () => {
-					const buttonView = toolbarView.items.get( 3 );
+					const buttonView = stylesView.children.get( 3 );
 
 					expect( buttonView.label ).to.equal( 'Toggle the upper–roman list style' );
 					expect( buttonView.tooltip ).to.equal( 'Upper-roman' );
@@ -374,7 +366,7 @@ describe( 'ListStyleUI', () => {
 				} );
 
 				it( 'should bring the "lower–latin" list style button', () => {
-					const buttonView = toolbarView.items.get( 4 );
+					const buttonView = stylesView.children.get( 4 );
 
 					expect( buttonView.label ).to.equal( 'Toggle the lower–latin list style' );
 					expect( buttonView.tooltip ).to.equal( 'Lower-latin' );
@@ -382,7 +374,7 @@ describe( 'ListStyleUI', () => {
 				} );
 
 				it( 'should bring the "upper–latin" list style button', () => {
-					const buttonView = toolbarView.items.get( 5 );
+					const buttonView = stylesView.children.get( 5 );
 
 					expect( buttonView.label ).to.equal( 'Toggle the upper–latin list style' );
 					expect( buttonView.tooltip ).to.equal( 'Upper-latin' );
@@ -394,7 +386,7 @@ describe( 'ListStyleUI', () => {
 
 					beforeEach( () => {
 						// "decimal-leading-zero""
-						styleButtonView = toolbarView.items.get( 1 );
+						styleButtonView = stylesView.children.get( 1 );
 
 						sinon.spy( editor, 'execute' );
 						sinon.spy( editor.editing.view, 'focus' );

From 0fec41c0659eb3ae0f4d9fdf46f6e76b1b16ed98 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Mon, 29 Nov 2021 17:04:00 +0100
Subject: [PATCH 09/26] Tests, docs, and code refactoring.

---
 .../ckeditor5-list/src/ui/collapsibleview.js  |  54 ++++---
 .../ckeditor5-list/src/ui/inputnumberview.js  |  31 +++-
 .../tests/ui/collapsibleview.js               | 147 ++++++++++++++++++
 .../tests/ui/inputnumberview.js               |  68 ++++++++
 packages/ckeditor5-ui/src/focuscycler.js      |  17 +-
 packages/ckeditor5-ui/src/input/inputview.js  |   6 +-
 .../src/inputtext/inputtextview.js            |   2 +-
 packages/ckeditor5-ui/tests/focuscycler.js    | 119 ++++++++++----
 .../ckeditor5-ui/tests/input/inputview.js     |  22 +++
 packages/ckeditor5-utils/src/dom/isvisible.js |  11 +-
 .../ckeditor5-utils/tests/dom/isvisible.js    |  83 ++++++++++
 11 files changed, 504 insertions(+), 56 deletions(-)
 create mode 100644 packages/ckeditor5-list/tests/ui/collapsibleview.js
 create mode 100644 packages/ckeditor5-list/tests/ui/inputnumberview.js
 create mode 100644 packages/ckeditor5-utils/tests/dom/isvisible.js

diff --git a/packages/ckeditor5-list/src/ui/collapsibleview.js b/packages/ckeditor5-list/src/ui/collapsibleview.js
index af7bdc6001c..3f6899a6245 100644
--- a/packages/ckeditor5-list/src/ui/collapsibleview.js
+++ b/packages/ckeditor5-list/src/ui/collapsibleview.js
@@ -4,11 +4,10 @@
  */
 
 /**
- * @module TODO
+ * @module list/ui/collapsibleview
  */
 
 import { View, ButtonView } from 'ckeditor5/src/ui';
-import { FocusTracker } from 'ckeditor5/src/utils';
 
 // eslint-disable-next-line ckeditor5-rules/ckeditor-imports
 import dropdownArrowIcon from '@ckeditor/ckeditor5-ui/theme/icons/dropdown-arrow.svg';
@@ -16,36 +15,53 @@ import dropdownArrowIcon from '@ckeditor/ckeditor5-ui/theme/icons/dropdown-arrow
 import '../../theme/collapsible.css';
 
 /**
- * TODO
+ * A collapsible UI component. Consists of a labeled button and a container which can be collapsed
+ * by clicking the button. The collapsible container can be a host to other UI views.
  *
+ * @protected
  * @extends module:ui/view~View
  */
 export default class CollapsibleView extends View {
 	/**
-	 * @inheritDoc
+	 * Creates an instance of the collapsible view.
+	 *
+	 * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
+	 * @param {Array.<module:ui/view~View>} [childViews] An optional array of initial child views to be inserted
+	 * into the collapsible.
 	 */
 	constructor( locale, childViews ) {
 		super( locale );
 
 		const bind = this.bindTemplate;
+		const t = locale.t;
 
 		/**
-		 * TODO
+		 * `true` when the container with {@link #children} is collapsed. `false` otherwise.
+		 *
+		 * @observable
+		 * @member {Boolean}
 		 */
 		this.set( 'isCollapsed', false );
 
 		/**
-		 * TODO
+		 * The text label of the {@link #buttonView}.
+		 *
+		 * @observable
+		 * @member {String}
+		 * @default 'Show more'
 		 */
-		this.set( 'label' );
+		this.set( 'label', t( 'Show more' ) );
 
 		/**
-		 * TODO
+		 * The main button that, when clicked, collapses or expands the container with {@link #children}.
+		 *
+		 * @readonly
+		 * @member {module:ui/button/buttonview~ButtonView} #buttonView
 		 */
 		this.buttonView = this._createButtonView();
 
 		/**
-		 * A collection of the child views.
+		 * A collection of the child views that can be collapsed by clicking the {@link #buttonView}.
 		 *
 		 * @readonly
 		 * @member {module:ui/viewcollection~ViewCollection}
@@ -53,16 +69,13 @@ export default class CollapsibleView extends View {
 		this.children = this.createCollection();
 
 		/**
-		 * Tracks information about the DOM focus in the collapsible.
+		 * The id of the label inside the {@link #buttonView} that describes the collapsible
+		 * container for assistive technologies. Set after the button was {@link #render rendered}.
 		 *
+		 * @private
 		 * @readonly
-		 * @protected
-		 * @member {module:utils/focustracker~FocusTracker}
-		 */
-		this.focusTracker = new FocusTracker();
-
-		/**
-		 * TODO
+		 * @observable
+		 * @member {String}
 		 */
 		this.set( '_collapsibleAriaLabelUid' );
 
@@ -98,6 +111,9 @@ export default class CollapsibleView extends View {
 		} );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
 	render() {
 		super.render();
 
@@ -105,9 +121,9 @@ export default class CollapsibleView extends View {
 	}
 
 	/**
-	 * TODO
+	 * Creates the main {@link #buttonView} of the collapsible.
 	 *
-	 * @returns
+	 * @returns {module:ui/button/buttonview~ButtonView}
 	 */
 	_createButtonView() {
 		const buttonView = new ButtonView( this.locale );
diff --git a/packages/ckeditor5-list/src/ui/inputnumberview.js b/packages/ckeditor5-list/src/ui/inputnumberview.js
index f229e87594f..80166e6caf5 100644
--- a/packages/ckeditor5-list/src/ui/inputnumberview.js
+++ b/packages/ckeditor5-list/src/ui/inputnumberview.js
@@ -4,7 +4,7 @@
  */
 
 /**
- * @module TODO
+ * @module list/ui/inputnumberview
  */
 
 import { InputView } from 'ckeditor5/src/ui';
@@ -12,27 +12,46 @@ import { InputView } from 'ckeditor5/src/ui';
 /**
  * The number input view class.
  *
- * @extends module:ui/view~View
+ * @protected
+ * @extends module:ui/input/inputview~InputView
  */
 export default class InputNumberView extends InputView {
 	/**
-	 * @inheritDoc
+	 * Creates an instance of the input number view.
+	 *
+	 * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
+	 * @param {Object} [options] Options of the input.
+	 * @param {Number} [options.min] The value of the `min` DOM attribute (the lowest accepted value).
+	 * @param {Number} [options.max] The value of the `max` DOM attribute (the highest accepted value).
+	 * @param {Number} [options.step] The value of the `step` DOM attribute.
 	 */
 	constructor( locale, { min, max, step } = {} ) {
 		super( locale );
 
 		/**
-		 * TODO
+		 * The value of the `min` DOM attribute (the lowest accepted value) set on the {@link #element}.
+		 *
+		 * @observable
+		 * @default undefined
+		 * @member {Number}
 		 */
 		this.set( 'min', min );
 
 		/**
-		 * TODO
+		 * The value of the `max` DOM attribute (the highest accepted value) set on the {@link #element}.
+		 *
+		 * @observable
+		 * @default undefined
+		 * @member {Number}
 		 */
 		this.set( 'max', max );
 
 		/**
-		 * TODO
+		 * The value of the `step` DOM attribute set on the {@link #element}.
+		 *
+		 * @observable
+		 * @default undefined
+		 * @member {Number}
 		 */
 		this.set( 'step', step );
 
diff --git a/packages/ckeditor5-list/tests/ui/collapsibleview.js b/packages/ckeditor5-list/tests/ui/collapsibleview.js
new file mode 100644
index 00000000000..dff831bc1b1
--- /dev/null
+++ b/packages/ckeditor5-list/tests/ui/collapsibleview.js
@@ -0,0 +1,147 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import CollapsibleView from '../../src/ui/collapsibleview';
+import { ButtonView, ViewCollection } from '@ckeditor/ckeditor5-ui';
+
+import dropdownArrowIcon from '@ckeditor/ckeditor5-ui/theme/icons/dropdown-arrow.svg';
+
+describe( 'CollapsibleView', () => {
+	let view, locale;
+
+	beforeEach( () => {
+		locale = { t: text => text };
+		view = new CollapsibleView( locale );
+
+		view.render();
+	} );
+
+	afterEach( () => {
+		view.destroy();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'should accept initial list of children', () => {
+			view.destroy();
+
+			const buttonA = new ButtonView( locale );
+			const buttonB = new ButtonView( locale );
+
+			buttonA.class = 'foo';
+			buttonB.class = 'bar';
+
+			view = new CollapsibleView( locale, [ buttonA, buttonB ] );
+			view.render();
+
+			expect( view.element.lastChild.firstChild.classList.contains( 'foo' ) ).to.be.true;
+			expect( view.element.lastChild.lastChild.classList.contains( 'bar' ) ).to.be.true;
+		} );
+
+		describe( 'template', () => {
+			it( 'should create an #element from the template', () => {
+				expect( view.element.tagName ).to.equal( 'DIV' );
+				expect( view.element.classList.contains( 'ck-collapsible' ) ).to.be.true;
+
+				expect( view.element.firstChild.classList.contains( 'ck-button' ) ).to.be.true;
+				expect( view.element.lastChild.classList.contains( 'ck' ) ).to.be.true;
+				expect( view.element.lastChild.classList.contains( 'ck-collapsible__children' ) ).to.be.true;
+				expect( view.element.lastChild.getAttribute( 'role' ) ).to.equal( 'region' );
+			} );
+
+			describe( 'main button', () => {
+				it( 'should have an icon', () => {
+					expect( view.buttonView.icon ).to.equal( dropdownArrowIcon );
+				} );
+
+				it( 'should display its text', () => {
+					expect( view.buttonView.withText ).to.be.true;
+				} );
+			} );
+
+			it( 'should set the proper ARIA label on the collapsible container', () => {
+				const buttonLabelId = view.buttonView.labelView.element.id;
+
+				expect( view.element.lastChild.getAttribute( 'aria-labelledby' ) ).to.match( /^ck-editor__aria/ );
+				expect( view.element.lastChild.getAttribute( 'aria-labelledby' ) ).to.equal( buttonLabelId );
+			} );
+		} );
+
+		it( 'should have a #children collection', () => {
+			expect( view.children ).to.be.instanceOf( ViewCollection );
+		} );
+
+		it( 'should have #isCollapsed', () => {
+			expect( view.isCollapsed ).to.be.false;
+		} );
+
+		it( 'should have #label with default value', () => {
+			expect( view.label ).to.equal( 'Show more' );
+		} );
+	} );
+
+	describe( 'DOM bindings', () => {
+		describe( 'button label', () => {
+			it( 'should react on view#label', () => {
+				expect( view.buttonView.element.innerText ).to.equal( 'Show more' );
+
+				view.label = 'Foo';
+
+				expect( view.buttonView.element.innerText ).to.equal( 'Foo' );
+			} );
+		} );
+
+		describe( 'button aria-expanded', () => {
+			it( 'should react on button#isOn', () => {
+				expect( view.buttonView.isOn ).to.be.true;
+				expect( view.buttonView.element.getAttribute( 'aria-expanded' ) ).to.equal( 'true' );
+
+				view.buttonView.isOn = false;
+				expect( view.buttonView.element.getAttribute( 'aria-expanded' ) ).to.equal( 'false' );
+			} );
+
+			it( 'should react on view#isCollapsed', () => {
+				expect( view.buttonView.element.getAttribute( 'aria-expanded' ) ).to.equal( 'true' );
+
+				view.isCollapsed = true;
+				expect( view.buttonView.element.getAttribute( 'aria-expanded' ) ).to.equal( 'false' );
+			} );
+		} );
+
+		describe( 'collapsed state', () => {
+			it( 'should react on view#isCollapsed', () => {
+				expect( view.element.classList.contains( 'ck-collapsible_collapsed' ) ).to.be.false;
+				expect( view.element.lastChild.getAttribute( 'hidden' ) ).to.be.null;
+
+				view.isCollapsed = true;
+
+				expect( view.element.classList.contains( 'ck-collapsible_collapsed' ) ).to.be.true;
+				expect( view.element.lastChild.getAttribute( 'hidden' ) ).to.equal( 'hidden' );
+			} );
+
+			it( 'should react on view.buttonView#execute', () => {
+				expect( view.element.classList.contains( 'ck-collapsible_collapsed' ) ).to.be.false;
+
+				view.buttonView.fire( 'execute' );
+
+				expect( view.element.classList.contains( 'ck-collapsible_collapsed' ) ).to.be.true;
+			} );
+		} );
+
+		describe( 'collapsible children', () => {
+			it( 'should react to changes in #children', () => {
+				const buttonA = new ButtonView( locale );
+				const buttonB = new ButtonView( locale );
+
+				expect( view.element.lastChild.children.length ).to.equal( 0 );
+
+				view.children.add( buttonA );
+				expect( view.element.lastChild.children.length ).to.equal( 1 );
+
+				view.children.add( buttonB );
+				expect( view.element.lastChild.children.length ).to.equal( 2 );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/ckeditor5-list/tests/ui/inputnumberview.js b/packages/ckeditor5-list/tests/ui/inputnumberview.js
new file mode 100644
index 00000000000..a33c7f48ca0
--- /dev/null
+++ b/packages/ckeditor5-list/tests/ui/inputnumberview.js
@@ -0,0 +1,68 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import InputView from '@ckeditor/ckeditor5-ui/src/input/inputview';
+import InputNumberView from '../../src/ui/inputnumberview';
+
+describe( 'InputNumberView', () => {
+	let view;
+
+	beforeEach( () => {
+		view = new InputNumberView();
+		view.render();
+	} );
+
+	afterEach( () => {
+		view.destroy();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'should extend InputView', () => {
+			expect( view ).to.be.instanceOf( InputView );
+		} );
+
+		it( 'should creates element from template', () => {
+			expect( view.element.getAttribute( 'type' ) ).to.equal( 'number' );
+			expect( view.element.type ).to.equal( 'number' );
+			expect( view.element.classList.contains( 'ck-input-number' ) ).to.be.true;
+
+			expect( view.element.getAttribute( 'min' ) ).to.be.null;
+			expect( view.element.getAttribute( 'max' ) ).to.be.null;
+			expect( view.element.getAttribute( 'step' ) ).to.be.null;
+		} );
+	} );
+
+	describe( 'DOM bindings', () => {
+		describe( 'min attribute', () => {
+			it( 'should respond to view#min', () => {
+				expect( view.element.getAttribute( 'min' ) ).to.be.null;
+
+				view.min = 20;
+
+				expect( view.element.getAttribute( 'min' ) ).to.equal( '20' );
+			} );
+		} );
+
+		describe( 'max attribute', () => {
+			it( 'should respond to view#max', () => {
+				expect( view.element.getAttribute( 'max' ) ).to.be.null;
+
+				view.max = 20;
+
+				expect( view.element.getAttribute( 'max' ) ).to.equal( '20' );
+			} );
+		} );
+
+		describe( 'step attribute', () => {
+			it( 'should respond to view#step', () => {
+				expect( view.element.getAttribute( 'step' ) ).to.be.null;
+
+				view.step = 20;
+
+				expect( view.element.getAttribute( 'step' ) ).to.equal( '20' );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/ckeditor5-ui/src/focuscycler.js b/packages/ckeditor5-ui/src/focuscycler.js
index d1cc48d45ff..6b45154ac30 100644
--- a/packages/ckeditor5-ui/src/focuscycler.js
+++ b/packages/ckeditor5-ui/src/focuscycler.js
@@ -131,6 +131,8 @@ export default class FocusCycler {
 	 * Returns the first focusable view in {@link #focusables}.
 	 * Returns `null` if there is none.
 	 *
+	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
+	 *
 	 * @readonly
 	 * @member {module:ui/view~View|null} #first
 	 */
@@ -142,6 +144,8 @@ export default class FocusCycler {
 	 * Returns the last focusable view in {@link #focusables}.
 	 * Returns `null` if there is none.
 	 *
+	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
+	 *
 	 * @readonly
 	 * @member {module:ui/view~View|null} #last
 	 */
@@ -153,6 +157,8 @@ export default class FocusCycler {
 	 * Returns the next focusable view in {@link #focusables} based on {@link #current}.
 	 * Returns `null` if there is none.
 	 *
+	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
+	 *
 	 * @readonly
 	 * @member {module:ui/view~View|null} #next
 	 */
@@ -164,6 +170,8 @@ export default class FocusCycler {
 	 * Returns the previous focusable view in {@link #focusables} based on {@link #current}.
 	 * Returns `null` if there is none.
 	 *
+	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
+	 *
 	 * @readonly
 	 * @member {module:ui/view~View|null} #previous
 	 */
@@ -201,6 +209,8 @@ export default class FocusCycler {
 
 	/**
 	 * Focuses the {@link #first} item in {@link #focusables}.
+	 *
+	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
 	 */
 	focusFirst() {
 		this._focus( this.first );
@@ -208,6 +218,8 @@ export default class FocusCycler {
 
 	/**
 	 * Focuses the {@link #last} item in {@link #focusables}.
+	 *
+	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
 	 */
 	focusLast() {
 		this._focus( this.last );
@@ -215,6 +227,8 @@ export default class FocusCycler {
 
 	/**
 	 * Focuses the {@link #next} item in {@link #focusables}.
+	 *
+	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
 	 */
 	focusNext() {
 		this._focus( this.next );
@@ -222,6 +236,8 @@ export default class FocusCycler {
 
 	/**
 	 * Focuses the {@link #previous} item in {@link #focusables}.
+	 *
+	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
 	 */
 	focusPrevious() {
 		this._focus( this.previous );
@@ -269,7 +285,6 @@ export default class FocusCycler {
 		do {
 			const view = this.focusables.get( index );
 
-			// TODO: Check if view is visible.
 			if ( isFocusable( view ) ) {
 				return view;
 			}
diff --git a/packages/ckeditor5-ui/src/input/inputview.js b/packages/ckeditor5-ui/src/input/inputview.js
index 0c092968d1b..46015ab7be8 100644
--- a/packages/ckeditor5-ui/src/input/inputview.js
+++ b/packages/ckeditor5-ui/src/input/inputview.js
@@ -106,7 +106,11 @@ export default class InputView extends View {
 		this.set( 'isEmpty', true );
 
 		/**
-		 * TODO
+		 * Corresponds to the `inputmode` DOM attribute. Can be `text`, `numeric`, `decimal`, etc..
+		 *
+		 * @observable
+		 * @member {Boolean}
+		 * @default 'text'
 		 */
 		this.set( 'inputMode', 'text' );
 
diff --git a/packages/ckeditor5-ui/src/inputtext/inputtextview.js b/packages/ckeditor5-ui/src/inputtext/inputtextview.js
index b484c51747e..bfb68f6e5e9 100644
--- a/packages/ckeditor5-ui/src/inputtext/inputtextview.js
+++ b/packages/ckeditor5-ui/src/inputtext/inputtextview.js
@@ -12,7 +12,7 @@ import InputView from '../input/inputview';
 /**
  * The text input view class.
  *
- * @extends module:ui/view~View
+ * @extends module:ui/input/inputview~InputView
  */
 export default class InputTextView extends InputView {
 	/**
diff --git a/packages/ckeditor5-ui/tests/focuscycler.js b/packages/ckeditor5-ui/tests/focuscycler.js
index 65beb4c9adb..476d12ed6de 100644
--- a/packages/ckeditor5-ui/tests/focuscycler.js
+++ b/packages/ckeditor5-ui/tests/focuscycler.js
@@ -75,6 +75,29 @@ describe( 'FocusCycler', () => {
 
 			expect( cycler.first ).to.be.null;
 		} );
+
+		it( 'should ignore items with an element detached from DOM', () => {
+			focusables = new ViewCollection( [ focusable( { isDetached: true } ), focusable() ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+
+			expect( cycler.first ).to.equal( focusables.get( 1 ) );
+		} );
+
+		it( 'should ignore items with display: none', () => {
+			focusables = new ViewCollection( [ focusable( { display: 'none' } ), focusable() ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+
+			expect( cycler.first ).to.equal( focusables.get( 1 ) );
+		} );
+
+		it( 'should ignore items with an element belonging to an invisible ancestor', () => {
+			focusables = new ViewCollection( [ focusable( { hiddenParent: true } ), focusable() ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+
+			expect( cycler.first ).to.equal( focusables.get( 1 ) );
+
+			focusables.get( 0 ).element.parentNode.remove();
+		} );
 	} );
 
 	describe( 'last()', () => {
@@ -95,6 +118,29 @@ describe( 'FocusCycler', () => {
 
 			expect( cycler.last ).to.be.null;
 		} );
+
+		it( 'should ignore items with an element detached from DOM', () => {
+			focusables = new ViewCollection( [ focusable(), focusable( { isDetached: true } ) ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+
+			expect( cycler.last ).to.equal( focusables.get( 0 ) );
+		} );
+
+		it( 'should ignore items with display: none', () => {
+			focusables = new ViewCollection( [ focusable(), focusable( { display: 'none' } ) ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+
+			expect( cycler.last ).to.equal( focusables.get( 0 ) );
+		} );
+
+		it( 'should ignore items with an element belonging to an invisible ancestor', () => {
+			focusables = new ViewCollection( [ focusable(), focusable( { hiddenParent: true } ) ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+
+			expect( cycler.last ).to.equal( focusables.get( 0 ) );
+
+			focusables.get( 1 ).element.parentNode.remove();
+		} );
 	} );
 
 	describe( 'next()', () => {
@@ -141,10 +187,8 @@ describe( 'FocusCycler', () => {
 
 		it( 'should ignore items with an element detached from DOM', () => {
 			const visibleFocusableA = focusable();
+			const inVisibleFocusable = focusable( { isDetached: true } );
 			const visibleFocusableB = focusable();
-			const inVisibleFocusable = focusable();
-
-			inVisibleFocusable.element.remove();
 
 			focusables = new ViewCollection( [ visibleFocusableA, inVisibleFocusable, visibleFocusableB ] );
 			cycler = new FocusCycler( { focusables, focusTracker } );
@@ -155,15 +199,24 @@ describe( 'FocusCycler', () => {
 			expect( cycler.next ).to.equal( visibleFocusableB );
 		} );
 
-		it( 'should ignore items with an element under an invisible ancestor', () => {
+		it( 'should ignore items with display: none', () => {
 			const visibleFocusableA = focusable();
+			const inVisibleFocusable = focusable( { display: 'none' } );
 			const visibleFocusableB = focusable();
-			const inVisibleFocusable = focusable();
 
-			const invisibleParent = document.createElement( 'div' );
-			invisibleParent.style.display = 'none';
-			invisibleParent.appendChild( inVisibleFocusable.element );
-			document.body.appendChild( invisibleParent );
+			focusables = new ViewCollection( [ visibleFocusableA, inVisibleFocusable, visibleFocusableB ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+
+			focusTracker.focusedElement = focusables.get( 0 ).element;
+
+			expect( cycler.first ).to.equal( focusables.get( 0 ) );
+			expect( cycler.next ).to.equal( visibleFocusableB );
+		} );
+
+		it( 'should ignore items with an element belonging to an invisible ancestor', () => {
+			const visibleFocusableA = focusable();
+			const visibleFocusableB = focusable();
+			const inVisibleFocusable = focusable( { hiddenParent: true } );
 
 			focusables = new ViewCollection( [ visibleFocusableA, inVisibleFocusable, visibleFocusableB ] );
 			cycler = new FocusCycler( { focusables, focusTracker } );
@@ -173,7 +226,7 @@ describe( 'FocusCycler', () => {
 			expect( cycler.first ).to.equal( focusables.get( 0 ) );
 			expect( cycler.next ).to.equal( visibleFocusableB );
 
-			invisibleParent.remove();
+			inVisibleFocusable.element.parentNode.remove();
 		} );
 	} );
 
@@ -221,10 +274,8 @@ describe( 'FocusCycler', () => {
 
 		it( 'should ignore items with an element detached from DOM', () => {
 			const visibleFocusableA = focusable();
+			const inVisibleFocusable = focusable( { isDetached: true } );
 			const visibleFocusableB = focusable();
-			const inVisibleFocusable = focusable();
-
-			inVisibleFocusable.element.remove();
 
 			focusables = new ViewCollection( [ visibleFocusableA, inVisibleFocusable, visibleFocusableB ] );
 			cycler = new FocusCycler( { focusables, focusTracker } );
@@ -235,15 +286,24 @@ describe( 'FocusCycler', () => {
 			expect( cycler.previous ).to.equal( visibleFocusableA );
 		} );
 
-		it( 'should ignore items with an element under an invisible ancestor', () => {
+		it( 'should ignore items with display: none', () => {
 			const visibleFocusableA = focusable();
+			const inVisibleFocusable = focusable( { display: 'none' } );
 			const visibleFocusableB = focusable();
-			const inVisibleFocusable = focusable();
 
-			const invisibleParent = document.createElement( 'div' );
-			invisibleParent.style.display = 'none';
-			invisibleParent.appendChild( inVisibleFocusable.element );
-			document.body.appendChild( invisibleParent );
+			focusables = new ViewCollection( [ visibleFocusableA, inVisibleFocusable, visibleFocusableB ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+
+			focusTracker.focusedElement = focusables.get( 2 ).element;
+
+			expect( cycler.first ).to.equal( focusables.get( 0 ) );
+			expect( cycler.previous ).to.equal( visibleFocusableA );
+		} );
+
+		it( 'should ignore items with an element belonging to an invisible ancestor', () => {
+			const visibleFocusableA = focusable();
+			const visibleFocusableB = focusable();
+			const inVisibleFocusable = focusable( { hiddenParent: true } );
 
 			focusables = new ViewCollection( [ visibleFocusableA, inVisibleFocusable, visibleFocusableB ] );
 			cycler = new FocusCycler( { focusables, focusTracker } );
@@ -253,7 +313,7 @@ describe( 'FocusCycler', () => {
 			expect( cycler.first ).to.equal( focusables.get( 0 ) );
 			expect( cycler.next ).to.equal( visibleFocusableA );
 
-			invisibleParent.remove();
+			inVisibleFocusable.element.parentNode.remove();
 		} );
 	} );
 
@@ -285,7 +345,7 @@ describe( 'FocusCycler', () => {
 		it( 'ignores invisible items', () => {
 			const item = focusable();
 
-			focusables = new ViewCollection( [ nonFocusable(), focusable( true ), item ] );
+			focusables = new ViewCollection( [ nonFocusable(), focusable( { display: 'none' } ), item ] );
 			cycler = new FocusCycler( { focusables, focusTracker } );
 
 			cycler.focusFirst();
@@ -438,19 +498,26 @@ describe( 'FocusCycler', () => {
 	} );
 } );
 
-function nonFocusable( isHidden ) {
+function nonFocusable( { display = 'block', isDetached = false, hiddenParent = false } = {} ) {
 	const view = new View();
 	view.element = document.createElement( 'div' );
 	view.element.setAttribute( 'focus-cycler-test-element', true );
-	view.element.style.display = isHidden ? 'none' : 'block';
+	view.element.style.display = display;
 
-	document.body.appendChild( view.element );
+	if ( hiddenParent ) {
+		const invisibleParent = document.createElement( 'div' );
+		invisibleParent.style.display = 'none';
+		invisibleParent.appendChild( view.element );
+		document.body.appendChild( invisibleParent );
+	} else if ( !isDetached ) {
+		document.body.appendChild( view.element );
+	}
 
 	return view;
 }
 
-function focusable( isHidden ) {
-	const view = nonFocusable( isHidden );
+function focusable( ...args ) {
+	const view = nonFocusable( ...args );
 
 	view.focus = sinon.spy();
 
diff --git a/packages/ckeditor5-ui/tests/input/inputview.js b/packages/ckeditor5-ui/tests/input/inputview.js
index 973d63dc432..793cd0d4d31 100644
--- a/packages/ckeditor5-ui/tests/input/inputview.js
+++ b/packages/ckeditor5-ui/tests/input/inputview.js
@@ -39,6 +39,18 @@ describe( 'InputView', () => {
 			expect( view.isEmpty ).to.be.true;
 		} );
 
+		it( 'should set the #hasError observable property', () => {
+			expect( view.hasError ).to.be.false;
+		} );
+
+		it( 'should set the #isReadOnly observable property', () => {
+			expect( view.isReadOnly ).to.be.false;
+		} );
+
+		it( 'should set the #inputMode observable property', () => {
+			expect( view.inputMode ).to.equal( 'text' );
+		} );
+
 		it( 'should create an instance of FocusTracker under #focusTracker property', () => {
 			expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
 		} );
@@ -124,6 +136,16 @@ describe( 'InputView', () => {
 			} );
 		} );
 
+		describe( 'inputmode attribute', () => {
+			it( 'should react on view#inputMode', () => {
+				expect( view.element.getAttribute( 'inputmode' ) ).to.equal( 'text' );
+
+				view.inputMode = 'numeric';
+
+				expect( view.element.getAttribute( 'inputmode' ) ).to.equal( 'numeric' );
+			} );
+		} );
+
 		describe( 'class', () => {
 			it( 'should react on view#hasErrors', () => {
 				expect( view.element.classList.contains( 'ck-error' ) ).to.be.false;
diff --git a/packages/ckeditor5-utils/src/dom/isvisible.js b/packages/ckeditor5-utils/src/dom/isvisible.js
index e3c1b36287b..df4a995f5b8 100644
--- a/packages/ckeditor5-utils/src/dom/isvisible.js
+++ b/packages/ckeditor5-utils/src/dom/isvisible.js
@@ -8,11 +8,18 @@
  */
 
 /**
- * Checks if the element is visible in DOM (no `display: block`, no ancestor with `display: none`).
+ * Checks if the element is visible to the user in DOM:
+ *
+ * * connected to the root of the document,
+ * * has no `display: none`,
+ * * has no ancestors with `display: none`.
+ *
+ * **Note**: This helper does not check whether the element is hidden by cropping, overflow, etc..
+ * To check that, use {@link module:utils/dom/rect~Rect} instead.
  *
  * @param {HTMLElement} element
  * @returns {Boolean}
  */
 export default function isVisible( element ) {
-	return !!( element && element.getClientRects().length );
+	return !!( element && element.getClientRects && element.getClientRects().length );
 }
diff --git a/packages/ckeditor5-utils/tests/dom/isvisible.js b/packages/ckeditor5-utils/tests/dom/isvisible.js
new file mode 100644
index 00000000000..8c559f12d72
--- /dev/null
+++ b/packages/ckeditor5-utils/tests/dom/isvisible.js
@@ -0,0 +1,83 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global document */
+
+import isVisible from '../../src/dom/isvisible';
+
+describe( 'isVisible()', () => {
+	let ancestor, element;
+
+	beforeEach( () => {
+		ancestor = document.createElement( 'div' );
+		element = document.createElement( 'div' );
+	} );
+
+	afterEach( () => {
+		element.remove();
+		ancestor.remove();
+	} );
+
+	it( 'returns true for items attached to the document with no specific styles', () => {
+		document.body.appendChild( element );
+
+		expect( isVisible( element ) ).to.be.true;
+	} );
+
+	it( 'returns true for items attached to the document with visibility:hidden', () => {
+		document.body.appendChild( element );
+
+		element.style.visibility = 'hidden';
+
+		expect( isVisible( element ) ).to.be.true;
+	} );
+
+	it( 'returns true for items attached to the document with position:fixed', () => {
+		document.body.appendChild( element );
+
+		element.style.position = 'fixed';
+
+		// This would fail if #offsetParent was used in the implementation.
+		// #offsetParent is null for elements with position: fixed.
+		expect( isVisible( element ) ).to.be.true;
+	} );
+
+	it( 'returns false for invalid arguments', () => {
+		expect( isVisible() ).to.be.false;
+		expect( isVisible( null ) ).to.be.false;
+		expect( isVisible( false ) ).to.be.false;
+		expect( isVisible( true ) ).to.be.false;
+		expect( isVisible( document.createTextNode( 'foo' ) ) ).to.be.false;
+	} );
+
+	it( 'returns false for items detached from the document with no specific styles', () => {
+		expect( isVisible( element ) ).to.be.false;
+	} );
+
+	it( 'returns false for items attached to the document with display:none', () => {
+		document.body.appendChild( element );
+
+		element.style.display = 'none';
+
+		expect( isVisible( element ) ).to.be.false;
+	} );
+
+	it( 'returns false for items in a branch detached from the document (detached ancestor)', () => {
+		ancestor.appendChild( element );
+
+		expect( isVisible( element ) ).to.be.false;
+	} );
+
+	it( 'returns false for items with ancestors with display:none', () => {
+		ancestor.appendChild( element );
+		document.body.appendChild( ancestor );
+
+		expect( isVisible( element ) ).to.be.true;
+
+		ancestor.style.display = 'none';
+
+		expect( isVisible( element ) ).to.be.false;
+	} );
+} );

From b806ba90887899cc88913a940904656ba4e0325d Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 30 Nov 2021 14:09:40 +0100
Subject: [PATCH 10/26] Tests, code refactoring.

---
 .../ckeditor5-list/src/ui/inputnumberview.js  |  49 ++
 .../src/ui/listpropertiesview.js              | 194 +++---
 .../tests/manual/list-properties.js           |  33 +-
 .../tests/ui/collapsibleview.js               |   2 +-
 .../tests/ui/inputnumberview.js               |  83 ++-
 .../tests/ui/listpropertiesview.js            | 601 ++++++++++++++++++
 .../ckeditor5-list/theme/listproperties.css   |   4 +-
 .../ckeditor5-ui/src/labeledfield/utils.js    |   8 +-
 8 files changed, 865 insertions(+), 109 deletions(-)
 create mode 100644 packages/ckeditor5-list/tests/ui/listpropertiesview.js

diff --git a/packages/ckeditor5-list/src/ui/inputnumberview.js b/packages/ckeditor5-list/src/ui/inputnumberview.js
index 80166e6caf5..8e53a4a9f3c 100644
--- a/packages/ckeditor5-list/src/ui/inputnumberview.js
+++ b/packages/ckeditor5-list/src/ui/inputnumberview.js
@@ -70,3 +70,52 @@ export default class InputNumberView extends InputView {
 		} );
 	}
 }
+
+/**
+ * A helper for creating labeled number inputs.
+ *
+ * It creates an instance of a {@link module:list/ui/inputnumberview~InputNumberView input number} that is
+ * logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in DOM.
+ *
+ * The helper does the following:
+ *
+ * * It sets input's `id` and `ariaDescribedById` attributes.
+ * * It binds input's `isReadOnly` to the labeled view.
+ * * It binds input's `hasError` to the labeled view.
+ * * It enables a logic that cleans up the error when user starts typing in the input.
+ *
+ * Usage:
+ *
+ *		const labeledInputView = new LabeledFieldView( locale, createLabeledInputNumber );
+ *		console.log( labeledInputView.fieldView ); // A number input instance.
+ *
+ * @protected
+ * @param {module:ui/labeledfield/labeledfieldview~LabeledFieldView} labeledFieldView The instance of the labeled field view.
+ * @param {String} viewUid An UID string that allows DOM logical connection between the
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view's label} and the input.
+ * @param {String} statusUid An UID string that allows DOM logical connection between the
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the input.
+ * @returns {module:ui/inputtext/inputtextview~InputTextView} The input text view instance.
+ */
+export function createLabeledInputNumber( labeledFieldView, viewUid, statusUid ) {
+	const inputView = new InputNumberView( labeledFieldView.locale );
+
+	inputView.set( {
+		id: viewUid,
+		ariaDescribedById: statusUid,
+		inputMode: 'numeric'
+	} );
+
+	inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
+	inputView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
+
+	inputView.on( 'input', () => {
+		// UX: Make the error text disappear and disable the error indicator as the user
+		// starts fixing the errors.
+		labeledFieldView.errorText = null;
+	} );
+
+	labeledFieldView.bind( 'isEmpty', 'isFocused', 'placeholder' ).to( inputView );
+
+	return inputView;
+}
diff --git a/packages/ckeditor5-list/src/ui/listpropertiesview.js b/packages/ckeditor5-list/src/ui/listpropertiesview.js
index c9a7b8103bd..f94dabaf237 100644
--- a/packages/ckeditor5-list/src/ui/listpropertiesview.js
+++ b/packages/ckeditor5-list/src/ui/listpropertiesview.js
@@ -4,7 +4,7 @@
  */
 
 /**
- * @module TODO
+ * @module list/ui/listpropertiesview
  */
 
 import {
@@ -19,25 +19,34 @@ import {
 	KeystrokeHandler
 } from 'ckeditor5/src/utils';
 
-import InputNumberView from './inputnumberview';
+import { createLabeledInputNumber } from './inputnumberview';
 import CollapsibleView from './collapsibleview';
 
 import '../../theme/listproperties.css';
 
 /**
- * TODO
+ * The list properties view to be displayed in the list dropdown.
+ *
+ * Contains a grid of available list styles and, for numbered list, also the list start index and reversed fields.
  *
  * @extends module:ui/view~View
  */
 export default class ListPropertiesView extends View {
 	/**
-	 * @inheritDoc
+	 * Creates an instance of the list properties view.
+	 *
+	 * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
+	 * @param {Object} options Options of the view
+	 * @param {Object.<String,Boolean>} options.enabledProperties An object containing the configuration of enabled list property names.
+	 * Allows conditional rendering the sub-components of the properties view.
+	 * @param {Array.<module:ui/button/buttonview~ButtonView>|null} options.styleButtonViews A list of style buttons to be rendered
+	 * inside the styles grid. The grid will not be rendered when `enabledProperties` does not include the `'styles'` key.
+	 * @param {String} options.styleGridAriaLabel An assistive technologies label set on the grid of styles (if the grid is rendered).
 	 */
-	constructor( locale, { numberedListPropertyCommands, enabledProperties, styleButtonViews, styleGridAriaLabel } ) {
+	constructor( locale, { enabledProperties, styleButtonViews, styleGridAriaLabel } ) {
 		super( locale );
 
-		const t = locale.t;
-		const cssClasses = [
+		const elementCssClasses = [
 			'ck',
 			'ck-list-properties'
 		];
@@ -51,28 +60,32 @@ export default class ListPropertiesView extends View {
 		this.children = this.createCollection();
 
 		/**
-		 * TODO
+		 * A view that renders the grid of list styles.
 		 *
 		 * @readonly
-		 * @member {TODO}
+		 * @member {module:ui/view~View}
 		 */
 		this.stylesView = null;
 
 		/**
-		 * TODO
+		 * A labeled field allowing the user to set the start index of the list.
+		 *
+		 * **Note**: Only present when the view represents **numbered** list properties.
 		 *
 		 * @readonly
-		 * @member {TODO}
+		 * @member {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
 		 */
 		this.startIndexFieldView = null;
 
 		/**
-		 * TODO
+		 * A field allowing the user to make the edited list reversed.
+		 *
+		 * **Note**: Only present when the view represents **numbered** list properties.
 		 *
 		 * @readonly
-		 * @member {TODO}
+		 * @member {module:ui/button/switchbuttonview~SwitchButtonView}
 		 */
-		this.reversedFieldView = null;
+		this.reversedSwitchButtonView = null;
 
 		/**
 		 * Tracks information about the DOM focus in the view.
@@ -91,7 +104,7 @@ export default class ListPropertiesView extends View {
 		this.keystrokes = new KeystrokeHandler();
 
 		/**
-		 * A collection of views that can be focused in the view.
+		 * A collection of views that can be focused in the properties view.
 		 *
 		 * @readonly
 		 * @member {module:ui/viewcollection~ViewCollection}
@@ -118,47 +131,27 @@ export default class ListPropertiesView extends View {
 			}
 		} );
 
-		if ( styleButtonViews ) {
+		// The rendering of the styles grid is conditional. When there is no styles grid, the view will render without collapsible
+		// for numbered list properties, hence simplifying the layout.
+		if ( enabledProperties.styles ) {
 			this.stylesView = this._createStylesView( styleButtonViews, styleGridAriaLabel );
 			this.children.add( this.stylesView );
 		} else {
-			cssClasses.push( 'ck-list-properties_without-styles' );
+			elementCssClasses.push( 'ck-list-properties_without-styles' );
 		}
 
-		if ( numberedListPropertyCommands ) {
-			const numberedPropertiesFields = [];
-
-			if ( enabledProperties.startIndex ) {
-				this.startIndexFieldView = this._createStartIndexField( numberedListPropertyCommands );
-				numberedPropertiesFields.push( this.startIndexFieldView );
-			}
-
-			if ( enabledProperties.reversed ) {
-				this.reversedFieldView = this._createReversedField( numberedListPropertyCommands );
-				numberedPropertiesFields.push( this.reversedFieldView );
-			}
+		// The rendering of the numbered list property views is also conditional. It only makes sense for the numbered list
+		// dropdown. The unordered list does not have such properties.
+		if ( enabledProperties.startIndex || enabledProperties.reversed ) {
+			this._addNumberedListPropertyViews( enabledProperties, styleButtonViews );
 
-			// When there are some style buttons, pack the numbered list properties into a collapsible to separate them.
-			if ( styleButtonViews ) {
-				const collapsibleView = new CollapsibleView( locale, numberedPropertiesFields );
-
-				collapsibleView.set( {
-					label: t( 'List properties' ),
-					isCollapsed: true
-				} );
-
-				this.children.add( collapsibleView );
-			} else {
-				this.children.addMany( numberedPropertiesFields );
-			}
-
-			cssClasses.push( 'ck-list-properties_with-numbered-properties' );
+			elementCssClasses.push( 'ck-list-properties_with-numbered-properties' );
 		}
 
 		this.setTemplate( {
 			tag: 'div',
 			attributes: {
-				class: cssClasses
+				class: elementCssClasses
 			},
 			children: this.children
 		} );
@@ -202,19 +195,25 @@ export default class ListPropertiesView extends View {
 			this.keystrokes.set( 'arrowdown', stopPropagation );
 		}
 
-		if ( this.reversedFieldView ) {
-			this.focusables.add( this.reversedFieldView );
-			this.focusTracker.add( this.reversedFieldView.element );
+		if ( this.reversedSwitchButtonView ) {
+			this.focusables.add( this.reversedSwitchButtonView );
+			this.focusTracker.add( this.reversedSwitchButtonView.element );
 		}
 
 		// Start listening for the keystrokes coming from #element.
 		this.keystrokes.listenTo( this.element );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
 	focus() {
 		this.focusCycler.focusFirst();
 	}
 
+	/**
+	 * @inheritDoc
+	 */
 	focusLast() {
 		this.focusCycler.focusLast();
 	}
@@ -230,10 +229,14 @@ export default class ListPropertiesView extends View {
 	}
 
 	/**
-	 * TODO
+	 * Creates the list styles grid.
+	 *
+	 * @protected
+	 * @param {Array.<module:ui/button/buttonview~ButtonView>} styleButtons Buttons to be placed in the grid.
+	 * @param {String} styleGridAriaLabel The accessible technology label of the grid.
+	 * @returns {module:ui/view~View}
 	 */
 	_createStylesView( styleButtons, styleGridAriaLabel ) {
-		// TODO: ListView?
 		const stylesView = new View( this.locale );
 
 		stylesView.children = stylesView.createCollection( this.locale );
@@ -257,17 +260,55 @@ export default class ListPropertiesView extends View {
 	}
 
 	/**
-	 * TODO
+	 * Renders {@link #startIndexFieldView} and/or {@link #reversedSwitchButtonView} depending on the configuration of the properties view.
 	 *
-	 * @returns
+	 * @private
+	 * @param {Object.<String,Boolean>} options.enabledProperties An object containing the configuration of enabled list property names
+	 * (see {@link #constructor}).
 	 */
-	_createStartIndexField( { listStartCommand } ) {
+	_addNumberedListPropertyViews( enabledProperties ) {
+		const t = this.locale.t;
+		const numberedPropertyViews = [];
+
+		if ( enabledProperties.startIndex ) {
+			this.startIndexFieldView = this._createStartIndexField();
+			numberedPropertyViews.push( this.startIndexFieldView );
+		}
+
+		if ( enabledProperties.reversed ) {
+			this.reversedSwitchButtonView = this._createReversedSwitchButton();
+			numberedPropertyViews.push( this.reversedSwitchButtonView );
+		}
+
+		// When there are some style buttons, pack the numbered list properties into a collapsible to separate them.
+		if ( enabledProperties.styles ) {
+			const collapsibleView = new CollapsibleView( this.locale, numberedPropertyViews );
+
+			collapsibleView.set( {
+				label: t( 'List properties' ),
+				isCollapsed: true
+			} );
+
+			this.children.add( collapsibleView );
+		} else {
+			this.children.addMany( numberedPropertyViews );
+		}
+	}
+
+	/**
+	 * Creates the list start index labeled field.
+	 *
+	 * @private
+	 * @protected
+	 * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
+	 */
+	_createStartIndexField() {
 		const t = this.locale.t;
 		const startIndexFieldView = new LabeledFieldView( this.locale, createLabeledInputNumber );
 
 		startIndexFieldView.set( {
 			label: t( 'Start at' ),
-			class: 'ck-numbered-list-properties-start-index'
+			class: 'ck-numbered-list-properties__start-index'
 		} );
 
 		startIndexFieldView.fieldView.set( {
@@ -277,8 +318,6 @@ export default class ListPropertiesView extends View {
 			inputMode: 'numeric'
 		} );
 
-		startIndexFieldView.bind( 'isEnabled' ).to( listStartCommand );
-		startIndexFieldView.fieldView.bind( 'value' ).to( listStartCommand );
 		startIndexFieldView.fieldView.on( 'input', () => {
 			const value = startIndexFieldView.fieldView.element.value;
 
@@ -297,55 +336,24 @@ export default class ListPropertiesView extends View {
 	}
 
 	/**
-	 * TODO
+	 * Creates the list reversed switch button.
 	 *
-	 * @returns
+	 * @private
+	 * @protected
+	 * @returns {module:ui/button/switchbuttonview~SwitchButtonView}
 	 */
-	_createReversedField( { listReversedCommand } ) {
+	_createReversedSwitchButton() {
 		const t = this.locale.t;
 		const reversedButtonView = new SwitchButtonView( this.locale );
 
 		reversedButtonView.set( {
 			withText: true,
 			label: t( 'Reversed order' ),
-			class: 'ck-numbered-list-properties-reversed-order'
+			class: 'ck-numbered-list-properties__reversed-order'
 		} );
 
-		reversedButtonView.bind( 'isEnabled' ).to( listReversedCommand );
-		reversedButtonView.bind( 'isOn' ).to( listReversedCommand, 'value' );
 		reversedButtonView.delegate( 'execute' ).to( this, 'listReversed' );
 
 		return reversedButtonView;
 	}
 }
-
-/**
- * TODO
- *
- * @param {*} labeledFieldView
- * @param {*} viewUid
- * @param {*} statusUid
- * @returns
- */
-function createLabeledInputNumber( labeledFieldView, viewUid, statusUid ) {
-	const inputView = new InputNumberView( labeledFieldView.locale );
-
-	inputView.set( {
-		id: viewUid,
-		ariaDescribedById: statusUid,
-		inputMode: 'numeric'
-	} );
-
-	inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
-	inputView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
-
-	inputView.on( 'input', () => {
-		// UX: Make the error text disappear and disable the error indicator as the user
-		// starts fixing the errors.
-		labeledFieldView.errorText = null;
-	} );
-
-	labeledFieldView.bind( 'isEmpty', 'isFocused', 'placeholder' ).to( inputView );
-
-	return inputView;
-}
diff --git a/packages/ckeditor5-list/tests/manual/list-properties.js b/packages/ckeditor5-list/tests/manual/list-properties.js
index de77180fce7..b0efb150242 100644
--- a/packages/ckeditor5-list/tests/manual/list-properties.js
+++ b/packages/ckeditor5-list/tests/manual/list-properties.js
@@ -63,7 +63,11 @@ ClassicEditor
 	.create( document.querySelector( '#editor-a' ), {
 		...config,
 		list: {
-			numberedProperties: [ 'styles', 'startIndex', 'reversed' ]
+			numberedProperties: {
+				styles: true,
+				startIndex: true,
+				reversed: true
+			}
 		}
 	} )
 	.catch( err => {
@@ -74,7 +78,10 @@ ClassicEditor
 	.create( document.querySelector( '#editor-b' ), {
 		...config,
 		list: {
-			numberedProperties: [ 'styles', 'startIndex' ]
+			numberedProperties: {
+				styles: true,
+				startIndex: true
+			}
 		}
 	} )
 	.catch( err => {
@@ -85,7 +92,10 @@ ClassicEditor
 	.create( document.querySelector( '#editor-c' ), {
 		...config,
 		list: {
-			numberedProperties: [ 'styles', 'reversed' ]
+			numberedProperties: {
+				styles: true,
+				reversed: true
+			}
 		}
 	} )
 	.catch( err => {
@@ -98,7 +108,10 @@ ClassicEditor
 	.create( document.querySelector( '#editor-d' ), {
 		...config,
 		list: {
-			numberedProperties: [ 'startIndex', 'reversed' ]
+			numberedProperties: {
+				startIndex: true,
+				reversed: true
+			}
 		}
 	} )
 	.catch( err => {
@@ -109,7 +122,9 @@ ClassicEditor
 	.create( document.querySelector( '#editor-e' ), {
 		...config,
 		list: {
-			numberedProperties: [ 'startIndex' ]
+			numberedProperties: {
+				startIndex: true
+			}
 		}
 	} )
 	.catch( err => {
@@ -120,7 +135,9 @@ ClassicEditor
 	.create( document.querySelector( '#editor-f' ), {
 		...config,
 		list: {
-			numberedProperties: [ 'reversed' ]
+			numberedProperties: {
+				reversed: true
+			}
 		}
 	} )
 	.catch( err => {
@@ -133,7 +150,9 @@ ClassicEditor
 	.create( document.querySelector( '#editor-g' ), {
 		...config,
 		list: {
-			numberedProperties: [ 'styles' ]
+			numberedProperties: {
+				styles: true
+			}
 		}
 	} )
 	.catch( err => {
diff --git a/packages/ckeditor5-list/tests/ui/collapsibleview.js b/packages/ckeditor5-list/tests/ui/collapsibleview.js
index dff831bc1b1..06baf4a961f 100644
--- a/packages/ckeditor5-list/tests/ui/collapsibleview.js
+++ b/packages/ckeditor5-list/tests/ui/collapsibleview.js
@@ -4,8 +4,8 @@
  */
 
 import CollapsibleView from '../../src/ui/collapsibleview';
-import { ButtonView, ViewCollection } from '@ckeditor/ckeditor5-ui';
 
+import { ButtonView, ViewCollection } from '@ckeditor/ckeditor5-ui';
 import dropdownArrowIcon from '@ckeditor/ckeditor5-ui/theme/icons/dropdown-arrow.svg';
 
 describe( 'CollapsibleView', () => {
diff --git a/packages/ckeditor5-list/tests/ui/inputnumberview.js b/packages/ckeditor5-list/tests/ui/inputnumberview.js
index a33c7f48ca0..f96d1a3ea33 100644
--- a/packages/ckeditor5-list/tests/ui/inputnumberview.js
+++ b/packages/ckeditor5-list/tests/ui/inputnumberview.js
@@ -3,8 +3,9 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-import InputView from '@ckeditor/ckeditor5-ui/src/input/inputview';
-import InputNumberView from '../../src/ui/inputnumberview';
+import InputNumberView, { createLabeledInputNumber } from '../../src/ui/inputnumberview';
+
+import { LabeledFieldView, InputView } from '@ckeditor/ckeditor5-ui';
 
 describe( 'InputNumberView', () => {
 	let view;
@@ -66,3 +67,81 @@ describe( 'InputNumberView', () => {
 		} );
 	} );
 } );
+
+describe( 'createLabeledInputNumber()', () => {
+	let labeledInput, locale;
+
+	beforeEach( () => {
+		locale = { t: val => val };
+		labeledInput = new LabeledFieldView( locale, createLabeledInputNumber );
+	} );
+
+	afterEach( () => {
+		labeledInput.destroy();
+	} );
+
+	it( 'should create an InputNumberView instance', () => {
+		expect( labeledInput.fieldView ).to.be.instanceOf( InputNumberView );
+	} );
+
+	it( 'should pass the Locale to the input', () => {
+		expect( labeledInput.fieldView.locale ).to.equal( locale );
+	} );
+
+	it( 'should set input #id and #ariaDescribedById', () => {
+		labeledInput.render();
+
+		expect( labeledInput.fieldView.id ).to.equal( labeledInput.labelView.for );
+		expect( labeledInput.fieldView.ariaDescribedById ).to.equal( labeledInput.statusView.element.id );
+	} );
+
+	it( 'should set #inputMode to "numeric"', () => {
+		expect( labeledInput.fieldView.inputMode ).to.equal( 'numeric' );
+	} );
+
+	it( 'should bind input\'s #isReadOnly to labeledInput#isEnabled', () => {
+		labeledInput.isEnabled = true;
+		expect( labeledInput.fieldView.isReadOnly ).to.be.false;
+
+		labeledInput.isEnabled = false;
+		expect( labeledInput.fieldView.isReadOnly ).to.be.true;
+	} );
+
+	it( 'should bind input\'s #hasError to labeledInput#errorText', () => {
+		labeledInput.errorText = 'some error';
+		expect( labeledInput.fieldView.hasError ).to.be.true;
+
+		labeledInput.errorText = null;
+		expect( labeledInput.fieldView.hasError ).to.be.false;
+	} );
+
+	it( 'should bind labeledInput#isEmpty to input\'s #isEmpty', () => {
+		labeledInput.fieldView.isEmpty = true;
+		expect( labeledInput.isEmpty ).to.be.true;
+
+		labeledInput.fieldView.isEmpty = false;
+		expect( labeledInput.isEmpty ).to.be.false;
+	} );
+
+	it( 'should bind labeledInput#isFocused to input\'s #isFocused', () => {
+		labeledInput.fieldView.isFocused = true;
+		expect( labeledInput.isFocused ).to.be.true;
+
+		labeledInput.fieldView.isFocused = false;
+		expect( labeledInput.isFocused ).to.be.false;
+	} );
+
+	it( 'should bind labeledInput#placeholder to input\'s #placeholder', () => {
+		labeledInput.fieldView.placeholder = null;
+		expect( labeledInput.placeholder ).to.be.null;
+
+		labeledInput.fieldView.placeholder = 'foo';
+		expect( labeledInput.placeholder ).to.equal( 'foo' );
+	} );
+
+	it( 'should clean labeledInput#errorText upon input\'s DOM "update" event', () => {
+		labeledInput.errorText = 'some error';
+		labeledInput.fieldView.fire( 'input' );
+		expect( labeledInput.errorText ).to.be.null;
+	} );
+} );
diff --git a/packages/ckeditor5-list/tests/ui/listpropertiesview.js b/packages/ckeditor5-list/tests/ui/listpropertiesview.js
new file mode 100644
index 00000000000..d5ee96e6309
--- /dev/null
+++ b/packages/ckeditor5-list/tests/ui/listpropertiesview.js
@@ -0,0 +1,601 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals document, Event */
+
+import ListPropertiesView from '../../src/ui/listpropertiesview';
+import CollapsibleView from '../../src/ui/collapsibleview';
+
+import {
+	ButtonView,
+	FocusCycler,
+	LabeledFieldView,
+	SwitchButtonView,
+	View,
+	ViewCollection
+} from '@ckeditor/ckeditor5-ui';
+
+import {
+	FocusTracker,
+	KeystrokeHandler,
+	keyCodes
+} from '@ckeditor/ckeditor5-utils';
+
+describe( 'ListPropertiesView', () => {
+	let view, locale;
+
+	beforeEach( () => {
+		locale = { t: text => text };
+		view = new ListPropertiesView( locale, {
+			enabledProperties: {
+				styles: true,
+				startIndex: true,
+				reversed: true
+			},
+			styleButtonViews: [
+				new ButtonView( locale ),
+				new ButtonView( locale )
+			],
+			styleGridAriaLabel: 'Foo'
+		} );
+
+		view.render();
+		document.body.appendChild( view.element );
+	} );
+
+	afterEach( () => {
+		view.element.remove();
+		view.destroy();
+	} );
+
+	describe( 'constructor()', () => {
+		describe( 'template', () => {
+			it( 'should create an #element from the template', () => {
+				expect( view.element.tagName ).to.equal( 'DIV' );
+				expect( view.element.classList.contains( 'ck' ) ).to.be.true;
+				expect( view.element.classList.contains( 'ck-list-properties' ) ).to.be.true;
+				expect( view.element.classList.contains( 'ck-list-properties_with-numbered-properties' ) ).to.be.true;
+			} );
+
+			describe( 'when both styles grid and numbered properties are enabled', () => {
+				it( 'should use collapsible to host property fields', () => {
+					expect( view.children.first ).to.equal( view.stylesView );
+					expect( view.children.last ).to.be.instanceOf( CollapsibleView );
+					expect( view.children.last.label ).to.equal( 'List properties' );
+					expect( view.children.last.isCollapsed ).to.be.true;
+					expect( view.children.last.children.first ).to.equal( view.startIndexFieldView );
+					expect( view.children.last.children.last ).to.equal( view.reversedSwitchButtonView );
+				} );
+			} );
+
+			describe( 'when styles grid is disabled and numbered properties are enabled', () => {
+				it( 'should have no #stylesView and get a specific CSS class', () => {
+					const view = new ListPropertiesView( locale, {
+						enabledProperties: {
+							startIndex: true,
+							reversed: true
+						},
+						styleButtonViews: [
+							new ButtonView( locale )
+						],
+						styleGridAriaLabel: 'Foo'
+					} );
+
+					view.render();
+
+					expect( view.stylesView ).to.be.null;
+					expect( view.element.classList.contains( 'ck-list-properties_without-styles' ) ).to.be.true;
+
+					view.destroy();
+				} );
+
+				it( 'should not use CollapsibleView for #startIndexFieldView and #reversedSwitchButtonView', () => {
+					const view = new ListPropertiesView( locale, {
+						enabledProperties: {
+							startIndex: true,
+							reversed: true
+						},
+						styleButtonViews: [
+							new ButtonView( locale )
+						],
+						styleGridAriaLabel: 'Foo'
+					} );
+
+					view.render();
+
+					expect( view.children.first ).to.equal( view.startIndexFieldView );
+					expect( view.children.last ).to.equal( view.reversedSwitchButtonView );
+
+					view.destroy();
+				} );
+			} );
+
+			describe( 'when styles grid is enabled but numbered properties are not', () => {
+				it( 'should not have no #startIndexFieldView, no #reversedSwitchButtonView, and no specific CSS class', () => {
+					const view = new ListPropertiesView( locale, {
+						enabledProperties: {
+							styles: true
+						},
+						styleButtonViews: [
+							new ButtonView( locale )
+						],
+						styleGridAriaLabel: 'Foo'
+					} );
+
+					view.render();
+
+					expect( view.startIndexFieldView ).to.be.null;
+					expect( view.reversedSwitchButtonView ).to.be.null;
+					expect( view.children.first ).to.equal( view.stylesView );
+					expect( view.children.last ).to.equal( view.stylesView );
+					expect( view.element.classList.contains( 'ck-list-properties_with-numbered-properties' ) ).to.be.false;
+
+					view.destroy();
+				} );
+			} );
+
+			describe( 'when only start index field is enabled', () => {
+				it( 'should not have no #stylesView, no #reversedSwitchButtonView', () => {
+					const view = new ListPropertiesView( locale, {
+						enabledProperties: {
+							startIndex: true
+						},
+						styleButtonViews: [
+							new ButtonView( locale )
+						],
+						styleGridAriaLabel: 'Foo'
+					} );
+
+					view.render();
+
+					expect( view.stylesView ).to.be.null;
+					expect( view.startIndexFieldView ).to.be.instanceOf( LabeledFieldView );
+					expect( view.reversedSwitchButtonView ).to.be.null;
+					expect( view.children.first ).to.equal( view.startIndexFieldView );
+					expect( view.children.last ).to.equal( view.startIndexFieldView );
+					expect( view.element.classList.contains( 'ck-list-properties_with-numbered-properties' ) ).to.be.true;
+
+					view.destroy();
+				} );
+			} );
+
+			describe( 'when only reversed field is enabled', () => {
+				it( 'should not have no #stylesView, no #startIndexFieldView', () => {
+					const view = new ListPropertiesView( locale, {
+						enabledProperties: {
+							reversed: true
+						},
+						styleButtonViews: [
+							new ButtonView( locale )
+						],
+						styleGridAriaLabel: 'Foo'
+					} );
+
+					view.render();
+
+					expect( view.stylesView ).to.be.null;
+					expect( view.startIndexFieldView ).to.be.null;
+					expect( view.reversedSwitchButtonView ).to.be.instanceOf( SwitchButtonView );
+					expect( view.children.first ).to.equal( view.reversedSwitchButtonView );
+					expect( view.children.last ).to.equal( view.reversedSwitchButtonView );
+					expect( view.element.classList.contains( 'ck-list-properties_with-numbered-properties' ) ).to.be.true;
+
+					view.destroy();
+				} );
+			} );
+		} );
+
+		it( 'should have a #children collection', () => {
+			expect( view.children ).to.be.instanceOf( ViewCollection );
+		} );
+
+		it( 'should have #stylesView', () => {
+			expect( view.stylesView ).to.be.instanceOf( View );
+		} );
+
+		it( 'should have #startIndexFieldView', () => {
+			expect( view.startIndexFieldView ).to.be.instanceOf( LabeledFieldView );
+		} );
+
+		it( 'should have #reversedSwitchButtonView', () => {
+			expect( view.reversedSwitchButtonView ).to.be.instanceOf( SwitchButtonView );
+		} );
+
+		it( 'should have #focusTracker', () => {
+			expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
+		} );
+
+		it( 'should have #keystrokes', () => {
+			expect( view.keystrokes ).to.be.instanceOf( KeystrokeHandler );
+		} );
+
+		it( 'should have #focusables', () => {
+			expect( view.focusables ).to.be.instanceOf( ViewCollection );
+		} );
+
+		it( 'should have #focusCycler', () => {
+			expect( view.focusCycler ).to.be.instanceOf( FocusCycler );
+		} );
+
+		describe( '#stylesView', () => {
+			describe( 'template', () => {
+				it( 'should create an element from the template', () => {
+					expect( view.stylesView.element.tagName ).to.equal( 'DIV' );
+					expect( view.stylesView.element.classList.contains( 'ck' ) ).to.be.true;
+					expect( view.stylesView.element.classList.contains( 'ck-list-styles-list' ) ).to.be.true;
+					expect( view.stylesView.element.getAttribute( 'aria-label' ) ).to.equal( 'Foo' );
+				} );
+
+				it( 'should popupate the view with style buttons', () => {
+					expect( view.stylesView.children.length ).to.equal( 2 );
+					expect( view.stylesView.children.get( 0 ) ).to.be.instanceOf( ButtonView );
+					expect( view.stylesView.children.get( 1 ) ).to.be.instanceOf( ButtonView );
+					expect( view.stylesView.element.firstChild.classList.contains( 'ck-button' ) ).to.be.true;
+					expect( view.stylesView.element.lastChild.classList.contains( 'ck-button' ) ).to.be.true;
+				} );
+			} );
+		} );
+
+		describe( '#startIndexFieldView', () => {
+			it( 'should have basic properties', () => {
+				expect( view.startIndexFieldView.label ).to.equal( 'Start at' );
+				expect( view.startIndexFieldView.class ).to.equal( 'ck-numbered-list-properties__start-index' );
+				expect( view.startIndexFieldView.fieldView.min ).to.equal( 1 );
+				expect( view.startIndexFieldView.fieldView.step ).to.equal( 1 );
+				expect( view.startIndexFieldView.fieldView.value ).to.equal( 1 );
+				expect( view.startIndexFieldView.fieldView.inputMode ).to.equal( 'numeric' );
+			} );
+		} );
+
+		describe( '#reversedSwitchButtonView', () => {
+			it( 'should have basic properties', () => {
+				expect( view.reversedSwitchButtonView.withText ).to.be.true;
+				expect( view.reversedSwitchButtonView.label ).to.equal( 'Reversed order' );
+				expect( view.reversedSwitchButtonView.class ).to.equal( 'ck-numbered-list-properties__reversed-order' );
+			} );
+		} );
+	} );
+
+	describe( 'render()', () => {
+		describe( 'focus cycling, tracking and keyboard support', () => {
+			describe( 'when styles and all numbered list properties are enabled', () => {
+				it( 'should register child views in #focusables', () => {
+					expect( view.focusables.map( f => f ) ).to.have.members( [
+						view.stylesView.children.first,
+						view.stylesView.children.last,
+						view.startIndexFieldView,
+						view.reversedSwitchButtonView
+					] );
+				} );
+
+				it( 'should register child views\' #element in #focusTracker', () => {
+					const view = new ListPropertiesView( locale, {
+						enabledProperties: {
+							styles: true,
+							startIndex: true,
+							reversed: true
+						},
+						styleButtonViews: [
+							new ButtonView( locale ),
+							new ButtonView( locale )
+						],
+						styleGridAriaLabel: 'Foo'
+					} );
+
+					const spy = sinon.spy( view.focusTracker, 'add' );
+
+					view.render();
+
+					sinon.assert.calledWithExactly( spy.getCall( 0 ), view.stylesView.children.first.element );
+					sinon.assert.calledWithExactly( spy.getCall( 1 ), view.stylesView.children.last.element );
+					sinon.assert.calledWithExactly( spy.getCall( 2 ), view.startIndexFieldView.element );
+					sinon.assert.calledWithExactly( spy.getCall( 3 ), view.reversedSwitchButtonView.element );
+
+					view.destroy();
+				} );
+			} );
+
+			describe( 'when styles grid is disabled', () => {
+				it( 'should register child views in #focusables', () => {
+					const view = new ListPropertiesView( locale, {
+						enabledProperties: {
+							startIndex: true,
+							reversed: true
+						},
+						styleButtonViews: [
+							new ButtonView( locale ),
+							new ButtonView( locale )
+						],
+						styleGridAriaLabel: 'Foo'
+					} );
+
+					view.render();
+
+					expect( view.focusables.map( f => f ) ).to.have.members( [
+						view.startIndexFieldView,
+						view.reversedSwitchButtonView
+					] );
+
+					view.destroy();
+				} );
+
+				it( 'should register child views\' #element in #focusTracker', () => {
+					const view = new ListPropertiesView( locale, {
+						enabledProperties: {
+							startIndex: true,
+							reversed: true
+						},
+						styleButtonViews: [
+							new ButtonView( locale ),
+							new ButtonView( locale )
+						],
+						styleGridAriaLabel: 'Foo'
+					} );
+
+					const spy = sinon.spy( view.focusTracker, 'add' );
+
+					view.render();
+
+					sinon.assert.calledWithExactly( spy.getCall( 0 ), view.startIndexFieldView.element );
+					sinon.assert.calledWithExactly( spy.getCall( 1 ), view.reversedSwitchButtonView.element );
+
+					view.destroy();
+				} );
+			} );
+
+			it( 'starts listening for #keystrokes coming from #element', () => {
+				const view = new ListPropertiesView( locale, {
+					enabledProperties: {
+						styles: true,
+						startIndex: true,
+						reversed: true
+					},
+					styleButtonViews: [
+						new ButtonView( locale ),
+						new ButtonView( locale )
+					],
+					styleGridAriaLabel: 'Foo'
+				} );
+
+				const spy = sinon.spy( view.keystrokes, 'listenTo' );
+
+				view.render();
+				sinon.assert.calledOnce( spy );
+				sinon.assert.calledWithExactly( spy, view.element );
+
+				view.destroy();
+			} );
+
+			describe( 'activates keyboard navigation in the properties view', () => {
+				it( 'so "tab" focuses the next focusable item', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.tab,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+
+					// Mock the first style button is focused.
+					view.focusTracker.isFocused = true;
+					view.focusTracker.focusedElement = view.stylesView.children.first.element;
+
+					const spy = sinon.spy( view.stylesView.children.last, 'focus' );
+
+					view.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( keyEvtData.preventDefault );
+					sinon.assert.calledOnce( keyEvtData.stopPropagation );
+					sinon.assert.calledOnce( spy );
+				} );
+
+				it( 'so "shift + tab" focuses the previous focusable item', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.tab,
+						shiftKey: true,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+
+					// Mock the first style button is focused.
+					view.focusTracker.isFocused = true;
+					view.focusTracker.focusedElement = view.stylesView.children.first.element;
+					view.children.last.isCollapsed = false;
+
+					const spy = sinon.spy( view.reversedSwitchButtonView, 'focus' );
+
+					view.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( keyEvtData.preventDefault );
+					sinon.assert.calledOnce( keyEvtData.stopPropagation );
+					sinon.assert.calledOnce( spy );
+				} );
+			} );
+
+			it( 'intercepts the arrow* events and overrides the default (parent) toolbar behavior', () => {
+				const keyEvtData = {
+					stopPropagation: sinon.spy()
+				};
+
+				keyEvtData.keyCode = keyCodes.arrowdown;
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.calledOnce( keyEvtData.stopPropagation );
+
+				keyEvtData.keyCode = keyCodes.arrowup;
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.calledTwice( keyEvtData.stopPropagation );
+
+				keyEvtData.keyCode = keyCodes.arrowleft;
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.calledThrice( keyEvtData.stopPropagation );
+
+				keyEvtData.keyCode = keyCodes.arrowright;
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.callCount( keyEvtData.stopPropagation, 4 );
+			} );
+
+			it( 'intercepts the "selectstart" in the #startIndexFieldView with the high priority to unlock select all', () => {
+				const spy = sinon.spy();
+				const event = new Event( 'selectstart', {
+					bubbles: true,
+					cancelable: true
+				} );
+
+				event.stopPropagation = spy;
+
+				view.startIndexFieldView.element.dispatchEvent( event );
+				sinon.assert.calledOnce( spy );
+			} );
+		} );
+	} );
+
+	describe( 'focus()', () => {
+		it( 'should focus the first button in #stylesView (when present)', () => {
+			const spy = sinon.spy( view.stylesView.children.first, 'focus' );
+
+			view.focus();
+
+			sinon.assert.calledOnce( spy );
+		} );
+
+		it( 'should focus the #startIndexFieldView when there are no style buttons', () => {
+			const view = new ListPropertiesView( locale, {
+				enabledProperties: {
+					startIndex: true,
+					reversed: true
+				},
+				styleButtonViews: [
+					new ButtonView( locale )
+				],
+				styleGridAriaLabel: 'Foo'
+			} );
+
+			view.render();
+			document.body.appendChild( view.element );
+
+			const spy = sinon.spy( view.startIndexFieldView, 'focus' );
+
+			view.focus();
+			sinon.assert.calledOnce( spy );
+
+			view.element.remove();
+			view.destroy();
+		} );
+
+		it( 'should focus the #reversedSwitchButtonView if no #stylesView and no #startIndexFieldView', () => {
+			const view = new ListPropertiesView( locale, {
+				enabledProperties: {
+					reversed: true
+				},
+				styleButtonViews: [
+					new ButtonView( locale )
+				],
+				styleGridAriaLabel: 'Foo'
+			} );
+
+			view.render();
+			document.body.appendChild( view.element );
+
+			const spy = sinon.spy( view.reversedSwitchButtonView, 'focus' );
+
+			view.focus();
+			sinon.assert.calledOnce( spy );
+
+			view.element.remove();
+			view.destroy();
+		} );
+	} );
+
+	describe( 'focusLast()', () => {
+		it( 'should focus the #reversedSwitchButtonView when present and visible', () => {
+			const spy = sinon.spy( view.reversedSwitchButtonView, 'focus' );
+
+			view.children.last.isCollapsed = false;
+			view.focusLast();
+
+			sinon.assert.calledOnce( spy );
+		} );
+
+		it( 'should focus the last style button when numbered list properies are collapsed', () => {
+			const spy = sinon.spy( view.children.first.children.last, 'focus' );
+
+			view.children.last.isCollapsed = true;
+			view.focusLast();
+
+			sinon.assert.calledOnce( spy );
+		} );
+	} );
+
+	describe( 'destroy()', () => {
+		it( 'should destroy the FocusTracker instance', () => {
+			const destroySpy = sinon.spy( view.focusTracker, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+
+		it( 'should destroy the KeystrokeHandler instance', () => {
+			const destroySpy = sinon.spy( view.keystrokes, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+	} );
+
+	describe( 'DOM bindings', () => {
+		describe( 'styles view', () => {
+			it( 'should delegate #execute to the properties view', () => {
+				const spy = sinon.spy();
+
+				view.on( 'execute', spy );
+				view.stylesView.children.get( 0 ).fire( 'execute' );
+
+				sinon.assert.calledOnce( spy );
+			} );
+		} );
+
+		describe( '#startIndexFieldView', () => {
+			it( 'should fire #listStart upon #input', () => {
+				const spy = sinon.spy();
+				view.on( 'listStart', spy );
+
+				view.startIndexFieldView.fieldView.value = '123';
+				view.startIndexFieldView.fieldView.fire( 'input' );
+
+				sinon.assert.calledOnce( spy );
+			} );
+
+			it( 'should not fire #listStart upon #input if the field is empty', () => {
+				const spy = sinon.spy();
+				view.on( 'listStart', spy );
+
+				view.startIndexFieldView.fieldView.value = '';
+				view.startIndexFieldView.fieldView.fire( 'input' );
+
+				sinon.assert.notCalled( spy );
+			} );
+
+			it( 'should not fire #listStart upon #input but display an errir if the field is invalid', () => {
+				const spy = sinon.spy();
+				view.on( 'listStart', spy );
+
+				view.startIndexFieldView.fieldView.value = '-5';
+				view.startIndexFieldView.fieldView.fire( 'input' );
+
+				sinon.assert.notCalled( spy );
+				expect( view.startIndexFieldView.errorText ).to.equal( 'Start index must be greater than 0.' );
+			} );
+		} );
+
+		describe( '#reversedSwitchButtonView', () => {
+			it( 'should fire #listReversed when executed', () => {
+				const spy = sinon.spy();
+				view.on( 'listReversed', spy );
+
+				view.reversedSwitchButtonView.fire( 'execute' );
+
+				sinon.assert.calledOnce( spy );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/ckeditor5-list/theme/listproperties.css b/packages/ckeditor5-list/theme/listproperties.css
index 24fd4c8ebff..1abdb6da63e 100644
--- a/packages/ckeditor5-list/theme/listproperties.css
+++ b/packages/ckeditor5-list/theme/listproperties.css
@@ -42,12 +42,12 @@
 		}
 	}
 
-	& .ck.ck-numbered-list-properties-start-index .ck-input {
+	& .ck.ck-numbered-list-properties__start-index .ck-input {
 		min-width: auto;
 		width: 100%;
 	}
 
-	& .ck.ck-numbered-list-properties-reversed-order {
+	& .ck.ck-numbered-list-properties__reversed-order {
 		background: transparent;
 		padding-left: 0;
 		padding-right: 0;
diff --git a/packages/ckeditor5-ui/src/labeledfield/utils.js b/packages/ckeditor5-ui/src/labeledfield/utils.js
index f08c2489e93..11881dcf413 100644
--- a/packages/ckeditor5-ui/src/labeledfield/utils.js
+++ b/packages/ckeditor5-ui/src/labeledfield/utils.js
@@ -21,12 +21,12 @@ import { createDropdown } from '../dropdown/utils';
  * * It sets input's `id` and `ariaDescribedById` attributes.
  * * It binds input's `isReadOnly` to the labeled view.
  * * It binds input's `hasError` to the labeled view.
- * * It enables a logic that cleans up the error when user starts typing in the input..
+ * * It enables a logic that cleans up the error when user starts typing in the input.
  *
  * Usage:
  *
- *		const labeledInputView = new LabeledFieldView( locale, createLabeledDropdown );
- *		console.log( labeledInputView.view ); // An input instance.
+ *		const labeledInputView = new LabeledFieldView( locale, createLabeledInputText );
+ *		console.log( labeledInputView.fieldView ); // A text input instance.
  *
  * @param {module:ui/labeledfield/labeledfieldview~LabeledFieldView} labeledFieldView The instance of the labeled field view.
  * @param {String} viewUid An UID string that allows DOM logical connection between the
@@ -71,7 +71,7 @@ export function createLabeledInputText( labeledFieldView, viewUid, statusUid ) {
  * Usage:
  *
  *		const labeledInputView = new LabeledFieldView( locale, createLabeledDropdown );
- *		console.log( labeledInputView.view ); // A dropdown instance.
+ *		console.log( labeledInputView.fieldView ); // A dropdown instance.
  *
  * @param {module:ui/labeledfield/labeledfieldview~LabeledFieldView} labeledFieldView The instance of the labeled field view.
  * @param {String} viewUid An UID string that allows DOM logical connection between the

From be3b2a31326dd2c1d5b2ef71145153291f5724ab Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 30 Nov 2021 14:54:44 +0100
Subject: [PATCH 11/26] Tests and code refactoring in ListStyleUI.

---
 .../ckeditor5-list/src/liststyleediting.js    |  17 +-
 packages/ckeditor5-list/src/liststyleui.js    | 102 ++++++---
 packages/ckeditor5-list/tests/liststyleui.js  | 212 ++++++++++++++++--
 3 files changed, 275 insertions(+), 56 deletions(-)

diff --git a/packages/ckeditor5-list/src/liststyleediting.js b/packages/ckeditor5-list/src/liststyleediting.js
index 10b7bfca40d..6e7f51f5645 100644
--- a/packages/ckeditor5-list/src/liststyleediting.js
+++ b/packages/ckeditor5-list/src/liststyleediting.js
@@ -39,6 +39,21 @@ export default class ListStyleEditing extends Plugin {
 		return 'ListStyleEditing';
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		editor.config.define( 'list', {
+			numberedProperties: {
+				styles: true,
+				startIndex: true,
+				reversed: true
+			}
+		} );
+	}
+
 	/**
 	 * @inheritDoc
 	 */
@@ -51,8 +66,6 @@ export default class ListStyleEditing extends Plugin {
 			allowAttributes: [ 'listStyle' ]
 		} );
 
-		editor.config.define( 'list.numberedProperties', [ 'styles', 'startIndex', 'reversed' ] );
-
 		editor.commands.add( 'listStyle', new ListStyleCommand( editor, DEFAULT_LIST_TYPE ) );
 		editor.commands.add( 'listReversed', new Command( editor ) );
 		editor.commands.add( 'listStart', new Command( editor ) );
diff --git a/packages/ckeditor5-list/src/liststyleui.js b/packages/ckeditor5-list/src/liststyleui.js
index c451368514f..306c0c79dfa 100644
--- a/packages/ckeditor5-list/src/liststyleui.js
+++ b/packages/ckeditor5-list/src/liststyleui.js
@@ -48,7 +48,7 @@ export default class ListStyleUI extends Plugin {
 		const editor = this.editor;
 		const t = editor.locale.t;
 
-		editor.ui.componentFactory.add( 'bulletedList', getSplitButtonCreator( {
+		editor.ui.componentFactory.add( 'bulletedList', getDropdownViewCreator( {
 			editor,
 			parentCommandName: 'bulletedList',
 			buttonLabel: t( 'Bulleted List' ),
@@ -76,7 +76,7 @@ export default class ListStyleUI extends Plugin {
 			]
 		} ) );
 
-		editor.ui.componentFactory.add( 'numberedList', getSplitButtonCreator( {
+		editor.ui.componentFactory.add( 'numberedList', getDropdownViewCreator( {
 			editor,
 			parentCommandName: 'numberedList',
 			buttonLabel: t( 'Numbered List' ),
@@ -136,63 +136,39 @@ export default class ListStyleUI extends Plugin {
 // @param {String} options.styleGridAriaLabel The ARIA label for the styles grid in the split button dropdown.
 // @param {Object} options.styleDefinitions Definitions of the style buttons.
 // @returns {Function} A function that can be passed straight into {@link module:ui/componentfactory~ComponentFactory#add}.
-function getSplitButtonCreator( { editor, parentCommandName, buttonLabel, buttonIcon, styleGridAriaLabel, styleDefinitions } ) {
+function getDropdownViewCreator( { editor, parentCommandName, buttonLabel, buttonIcon, styleGridAriaLabel, styleDefinitions } ) {
 	const parentCommand = editor.commands.get( parentCommandName );
-	const listStyleCommand = editor.commands.get( 'listStyle' );
-	const styleButtonCreator = getStyleButtonCreator( { editor, parentCommandName, listStyleCommand } );
-	const enabledProperties = Object.fromEntries( editor.config.get( 'list.numberedProperties' ).map( key => [ key, true ] ) );
-	const isNumberedListDropdown = parentCommandName == 'numberedList';
-	const shouldIncludeStyles = isNumberedListDropdown ? !!enabledProperties.styles : true;
-	const styleButtonViews = shouldIncludeStyles ? styleDefinitions.map( styleButtonCreator ) : null;
 
 	// @param {module:utils/locale~Locale} locale
 	// @returns {module:ui/dropdown/dropdownview~DropdownView}
 	return locale => {
 		const dropdownView = createDropdown( locale, SplitButtonView );
-		const buttonView = dropdownView.buttonView;
-		const shouldRenderNumberedListPropertyFields = isNumberedListDropdown &&
-			( enabledProperties.startIndex || enabledProperties.reversed );
-		let numberedListPropertyCommands;
-
-		if ( shouldRenderNumberedListPropertyFields ) {
-			numberedListPropertyCommands = {
-				listStartCommand: editor.commands.get( 'listStart' ),
-				listReversedCommand: editor.commands.get( 'listReversed' )
-			};
-		}
+		const mainButtonView = dropdownView.buttonView;
 
 		dropdownView.bind( 'isEnabled' ).to( parentCommand );
 		dropdownView.class = 'ck-list-styles-dropdown';
 
 		// Main button was clicked.
-		buttonView.on( 'execute', () => {
+		mainButtonView.on( 'execute', () => {
 			editor.execute( parentCommandName );
 			editor.editing.view.focus();
 		} );
 
-		buttonView.set( {
+		mainButtonView.set( {
 			label: buttonLabel,
 			icon: buttonIcon,
 			tooltip: true,
 			isToggleable: true
 		} );
 
-		buttonView.bind( 'isOn' ).to( parentCommand, 'value', value => !!value );
+		mainButtonView.bind( 'isOn' ).to( parentCommand, 'value', value => !!value );
 
-		const listPropertiesView = new ListPropertiesView( locale, {
+		const listPropertiesView = createListPropertiesView( {
+			editor,
+			dropdownView,
+			parentCommandName,
 			styleGridAriaLabel,
-			enabledProperties,
-			styleButtonViews,
-			numberedListPropertyCommands
-		} );
-
-		// Make sure applying styles closes the dropdown.
-		listPropertiesView.delegate( 'execute' ).to( dropdownView );
-		listPropertiesView.on( 'listReversed', () => {
-			editor.execute( 'listReversed' );
-		} );
-		listPropertiesView.on( 'listStart', ( evt, data ) => {
-			editor.execute( 'listStart', data );
+			styleDefinitions
 		} );
 
 		dropdownView.panelView.children.add( listPropertiesView );
@@ -255,3 +231,57 @@ function getStyleButtonCreator( { editor, listStyleCommand, parentCommandName }
 		return button;
 	};
 }
+
+// A helper that creates the properties view for the individual style dropdown.
+//
+// @param {Object} options
+// @param {module:core/editor/editor~Editor} options.editor Editor instance.
+// @param {module:ui/dropdown/dropdownview~DropdownView} options.dropdownView Styles dropdown view that hosts the properties view.
+// @param {'bulletedList'|'numberedList'} options.parentCommandName The name of the higher-order editor command associated with
+// the set of particular list styles (e.g. "bulletedList" for "disc", "circle", and "square" styles).
+// @param {Object} options.styleDefinitions Definitions of the style buttons.
+// @param {String} options.styleGridAriaLabel An assistive technologies label set on the grid of styles (if the grid is rendered).
+// @returns {module:list/ui/listpropertiesview~ListPropertiesView}
+function createListPropertiesView( {
+	editor,
+	dropdownView,
+	parentCommandName,
+	styleDefinitions,
+	styleGridAriaLabel
+} ) {
+	const locale = editor.locale;
+	const listStyleCommand = editor.commands.get( 'listStyle' );
+	const enabledProperties = parentCommandName == 'numberedList' ? editor.config.get( 'list.numberedProperties' ) : { styles: true };
+	const styleButtonCreator = getStyleButtonCreator( {
+		editor,
+		parentCommandName,
+		listStyleCommand
+	} );
+	const styleButtonViews = enabledProperties.styles ? styleDefinitions.map( styleButtonCreator ) : null;
+	const listPropertiesView = new ListPropertiesView( locale, {
+		styleGridAriaLabel,
+		enabledProperties,
+		styleButtonViews
+	} );
+
+	if ( enabledProperties.startIndex ) {
+		const listStartCommand = editor.commands.get( 'listStart' );
+
+		listPropertiesView.startIndexFieldView.bind( 'isEnabled' ).to( listStartCommand );
+		listPropertiesView.startIndexFieldView.fieldView.bind( 'value' ).to( listStartCommand );
+		listPropertiesView.on( 'listStart', ( evt, data ) => editor.execute( 'listStart', data ) );
+	}
+
+	if ( enabledProperties.reversed ) {
+		const listReversedCommand = editor.commands.get( 'listReversed' );
+
+		listPropertiesView.reversedSwitchButtonView.bind( 'isEnabled' ).to( listReversedCommand );
+		listPropertiesView.reversedSwitchButtonView.bind( 'isOn' ).to( listReversedCommand, 'value' );
+		listPropertiesView.on( 'listReversed', () => editor.execute( 'listReversed' ) );
+	}
+
+	// Make sure applying styles closes the dropdown.
+	listPropertiesView.delegate( 'execute' ).to( dropdownView );
+
+	return listPropertiesView;
+}
diff --git a/packages/ckeditor5-list/tests/liststyleui.js b/packages/ckeditor5-list/tests/liststyleui.js
index aaec5c5d25e..bafded104bb 100644
--- a/packages/ckeditor5-list/tests/liststyleui.js
+++ b/packages/ckeditor5-list/tests/liststyleui.js
@@ -5,19 +5,17 @@
 
 /* globals document */
 
-import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import { getData, setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import ListStyle from '../src/liststyle';
 import ListStyleUI from '../src/liststyleui';
+
+import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
+import { UndoEditing } from '@ckeditor/ckeditor5-undo';
 import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
-import UndoEditing from '@ckeditor/ckeditor5-undo/src/undoediting';
+import { View, ButtonView, LabeledFieldView, SwitchButtonView } from '@ckeditor/ckeditor5-ui';
 
 import bulletedListIcon from '../theme/icons/bulletedlist.svg';
 import numberedListIcon from '../theme/icons/numberedlist.svg';
-
 import listStyleDiscIcon from '../theme/icons/liststyledisc.svg';
 import listStyleCircleIcon from '../theme/icons/liststylecircle.svg';
 import listStyleSquareIcon from '../theme/icons/liststylesquare.svg';
@@ -28,20 +26,24 @@ import listStyleUpperRomanIcon from '../theme/icons/liststyleupperroman.svg';
 import listStyleLowerLatinIcon from '../theme/icons/liststylelowerlatin.svg';
 import listStyleUpperLatinIcon from '../theme/icons/liststyleupperlatin.svg';
 
+import { getData, setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+
 describe( 'ListStyleUI', () => {
-	let editorElement, editor, model, listStyleCommand;
+	let editorElement, editor, model, listStyleCommand, listPropertiesView;
 
 	beforeEach( () => {
 		editorElement = document.createElement( 'div' );
 		document.body.appendChild( editorElement );
 
-		return ClassicTestEditor.create( editorElement, { plugins: [ Paragraph, BlockQuote, ListStyle, UndoEditing ] } )
-			.then( newEditor => {
-				editor = newEditor;
-				model = editor.model;
+		return ClassicTestEditor.create( editorElement, {
+			plugins: [ Paragraph, BlockQuote, ListStyle, UndoEditing ]
+		} ).then( newEditor => {
+			editor = newEditor;
+			model = editor.model;
 
-				listStyleCommand = editor.commands.get( 'listStyle' );
-			} );
+			listStyleCommand = editor.commands.get( 'listStyle' );
+		} );
 	} );
 
 	afterEach( () => {
@@ -65,6 +67,7 @@ describe( 'ListStyleUI', () => {
 			beforeEach( () => {
 				bulletedListCommand = editor.commands.get( 'bulletedList' );
 				bulletedListDropdown = editor.ui.componentFactory.create( 'bulletedList' );
+				listPropertiesView = bulletedListDropdown.panelView.children.first;
 			} );
 
 			it( 'should registered as "bulletedList" in the component factory', () => {
@@ -85,6 +88,12 @@ describe( 'ListStyleUI', () => {
 				expect( bulletedListDropdown.class ).to.equal( 'ck-list-styles-dropdown' );
 			} );
 
+			it( 'should not have numbered list properties', () => {
+				expect( listPropertiesView.stylesView ).to.be.instanceOf( View );
+				expect( listPropertiesView.startIndexFieldView ).to.be.null;
+				expect( listPropertiesView.reversedSwitchButtonView ).to.be.null;
+			} );
+
 			describe( 'main split button', () => {
 				let mainButtonView;
 
@@ -133,7 +142,7 @@ describe( 'ListStyleUI', () => {
 				let stylesView;
 
 				beforeEach( () => {
-					stylesView = bulletedListDropdown.panelView.children.get( 0 ).stylesView;
+					stylesView = listPropertiesView.stylesView;
 				} );
 
 				it( 'should have a proper ARIA label', () => {
@@ -141,7 +150,7 @@ describe( 'ListStyleUI', () => {
 				} );
 
 				it( 'should bring the "disc" list style button', () => {
-					const buttonView = stylesView.children.get( 0 );
+					const buttonView = stylesView.children.first;
 
 					expect( buttonView.label ).to.equal( 'Toggle the disc list style' );
 					expect( buttonView.tooltip ).to.equal( 'Disc' );
@@ -164,6 +173,15 @@ describe( 'ListStyleUI', () => {
 					expect( buttonView.icon ).to.equal( listStyleSquareIcon );
 				} );
 
+				it( 'should close the drop-down when any button gets executed', () => {
+					const spy = sinon.spy();
+
+					bulletedListDropdown.on( 'execute', spy );
+					listPropertiesView.fire( 'execute' );
+
+					sinon.assert.calledOnce( spy );
+				} );
+
 				describe( 'style button', () => {
 					let styleButtonView;
 
@@ -258,6 +276,7 @@ describe( 'ListStyleUI', () => {
 			beforeEach( () => {
 				numberedListCommand = editor.commands.get( 'numberedList' );
 				numberedListDropdown = editor.ui.componentFactory.create( 'numberedList' );
+				listPropertiesView = numberedListDropdown.panelView.children.first;
 			} );
 
 			it( 'should registered as "numberedList" in the component factory', () => {
@@ -278,6 +297,86 @@ describe( 'ListStyleUI', () => {
 				expect( numberedListDropdown.class ).to.equal( 'ck-list-styles-dropdown' );
 			} );
 
+			describe( 'support of config.list.numberedProperties', () => {
+				it( 'should have styles grid and all numbered list property fields when all enabled in the config', async () => {
+					const editorElement = document.createElement( 'div' );
+					document.body.appendChild( editorElement );
+
+					const editor = await ClassicTestEditor.create( editorElement, {
+						plugins: [ Paragraph, BlockQuote, ListStyle, UndoEditing ],
+						list: {
+							numberedProperties: {
+								styles: true,
+								startIndex: true,
+								reversed: true
+							}
+						}
+					} );
+
+					const numberedListDropdown = editor.ui.componentFactory.create( 'numberedList' );
+					const listPropertiesView = numberedListDropdown.panelView.children.first;
+
+					expect( listPropertiesView.stylesView ).to.be.instanceOf( View );
+					expect( listPropertiesView.startIndexFieldView ).to.be.instanceOf( LabeledFieldView );
+					expect( listPropertiesView.reversedSwitchButtonView ).to.be.instanceOf( SwitchButtonView );
+
+					editorElement.remove();
+					await editor.destroy();
+				} );
+
+				it( 'should have only the styles grid UI when numbered properties are disabled', async () => {
+					const editorElement = document.createElement( 'div' );
+					document.body.appendChild( editorElement );
+
+					const editor = await ClassicTestEditor.create( editorElement, {
+						plugins: [ Paragraph, BlockQuote, ListStyle, UndoEditing ],
+						list: {
+							numberedProperties: {
+								styles: true,
+								startIndex: false,
+								reversed: false
+							}
+						}
+					} );
+
+					const numberedListDropdown = editor.ui.componentFactory.create( 'numberedList' );
+					const listPropertiesView = numberedListDropdown.panelView.children.first;
+
+					expect( listPropertiesView.stylesView ).to.be.instanceOf( View );
+					expect( listPropertiesView.startIndexFieldView ).to.be.null;
+					expect( listPropertiesView.reversedSwitchButtonView ).to.be.null;
+
+					editorElement.remove();
+					await editor.destroy();
+				} );
+
+				it( 'should have only the numbered list property UI when styles are disabled', async () => {
+					const editorElement = document.createElement( 'div' );
+					document.body.appendChild( editorElement );
+
+					const editor = await ClassicTestEditor.create( editorElement, {
+						plugins: [ Paragraph, BlockQuote, ListStyle, UndoEditing ],
+						list: {
+							numberedProperties: {
+								styles: false,
+								startIndex: true,
+								reversed: true
+							}
+						}
+					} );
+
+					const numberedListDropdown = editor.ui.componentFactory.create( 'numberedList' );
+					const listPropertiesView = numberedListDropdown.panelView.children.first;
+
+					expect( listPropertiesView.stylesView ).to.be.null;
+					expect( listPropertiesView.startIndexFieldView ).to.be.instanceOf( LabeledFieldView );
+					expect( listPropertiesView.reversedSwitchButtonView ).to.be.instanceOf( SwitchButtonView );
+
+					editorElement.remove();
+					await editor.destroy();
+				} );
+			} );
+
 			describe( 'main split button', () => {
 				let mainButtonView;
 
@@ -326,7 +425,7 @@ describe( 'ListStyleUI', () => {
 				let stylesView;
 
 				beforeEach( () => {
-					stylesView = numberedListDropdown.panelView.children.get( 0 ).stylesView;
+					stylesView = listPropertiesView.stylesView;
 				} );
 
 				it( 'should have a proper ARIA label', () => {
@@ -334,7 +433,7 @@ describe( 'ListStyleUI', () => {
 				} );
 
 				it( 'should bring the "decimal" list style button', () => {
-					const buttonView = stylesView.children.get( 0 );
+					const buttonView = stylesView.children.first;
 
 					expect( buttonView.label ).to.equal( 'Toggle the decimal list style' );
 					expect( buttonView.tooltip ).to.equal( 'Decimal' );
@@ -381,6 +480,15 @@ describe( 'ListStyleUI', () => {
 					expect( buttonView.icon ).to.equal( listStyleUpperLatinIcon );
 				} );
 
+				it( 'should close the drop-down when any button gets executed', () => {
+					const spy = sinon.spy();
+
+					numberedListDropdown.on( 'execute', spy );
+					listPropertiesView.fire( 'execute' );
+
+					sinon.assert.calledOnce( spy );
+				} );
+
 				describe( 'style button', () => {
 					let styleButtonView;
 
@@ -467,6 +575,74 @@ describe( 'ListStyleUI', () => {
 					} );
 				} );
 			} );
+
+			describe( 'list start input', () => {
+				let listStartCommand, startIndexFieldView;
+
+				beforeEach( () => {
+					listStartCommand = editor.commands.get( 'listStart' );
+					startIndexFieldView = listPropertiesView.startIndexFieldView;
+				} );
+
+				it( 'should bind #isEnabled to the list start command', () => {
+					listStartCommand.isEnabled = true;
+					expect( startIndexFieldView.isEnabled ).to.be.true;
+
+					listStartCommand.isEnabled = false;
+					expect( startIndexFieldView.isEnabled ).to.be.false;
+				} );
+
+				it( 'should bind #value to the list start command', () => {
+					listStartCommand.value = 123;
+					expect( startIndexFieldView.fieldView.value ).to.equal( 123 );
+
+					listStartCommand.value = 321;
+					expect( startIndexFieldView.fieldView.value ).to.equal( 321 );
+				} );
+
+				it( 'should execute the list start command when the list property view fires #listStart', () => {
+					const spy = sinon.spy( editor, 'execute' );
+
+					listPropertiesView.fire( 'listStart', 1234 );
+
+					sinon.assert.calledOnce( spy );
+					sinon.assert.calledWithExactly( spy, 'listStart', 1234 );
+				} );
+			} );
+
+			describe( 'list reversed switch button', () => {
+				let listReversedCommand, reversedSwitchButtonView;
+
+				beforeEach( () => {
+					listReversedCommand = editor.commands.get( 'listReversed' );
+					reversedSwitchButtonView = listPropertiesView.reversedSwitchButtonView;
+				} );
+
+				it( 'should bind #isEnabled to the list reversed command', () => {
+					listReversedCommand.isEnabled = true;
+					expect( reversedSwitchButtonView.isEnabled ).to.be.true;
+
+					listReversedCommand.isEnabled = false;
+					expect( reversedSwitchButtonView.isEnabled ).to.be.false;
+				} );
+
+				it( 'should bind #isOn to the list reversed command', () => {
+					listReversedCommand.value = true;
+					expect( reversedSwitchButtonView.isOn ).to.be.true;
+
+					listReversedCommand.value = false;
+					expect( reversedSwitchButtonView.isOn ).to.be.false;
+				} );
+
+				it( 'should execute the list reversed command when the list property view fires #listReversed', () => {
+					const spy = sinon.spy( editor, 'execute' );
+
+					listPropertiesView.fire( 'listReversed' );
+
+					sinon.assert.calledOnce( spy );
+					sinon.assert.calledWithExactly( spy, 'listReversed' );
+				} );
+			} );
 		} );
 	} );
 } );

From bdca0cb6c4f1f2aae8500942b6aea6d3b5e63dd0 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 30 Nov 2021 15:06:09 +0100
Subject: [PATCH 12/26] Code refactoring in styles.

---
 .../tests/manual/list-properties.js           | 15 ++++-
 packages/ckeditor5-list/theme/collapsible.css | 40 +-----------
 .../ckeditor5-list/theme/listproperties.css   | 62 ++-----------------
 packages/ckeditor5-list/theme/liststyles.css  |  2 +-
 .../theme/ckeditor5-list/collapsible.css      | 42 +++++++++++++
 .../theme/ckeditor5-list/listproperties.css   | 62 +++++++++++++++++++
 6 files changed, 124 insertions(+), 99 deletions(-)
 create mode 100644 packages/ckeditor5-theme-lark/theme/ckeditor5-list/collapsible.css
 create mode 100644 packages/ckeditor5-theme-lark/theme/ckeditor5-list/listproperties.css

diff --git a/packages/ckeditor5-list/tests/manual/list-properties.js b/packages/ckeditor5-list/tests/manual/list-properties.js
index b0efb150242..cc17f9e9abc 100644
--- a/packages/ckeditor5-list/tests/manual/list-properties.js
+++ b/packages/ckeditor5-list/tests/manual/list-properties.js
@@ -80,7 +80,8 @@ ClassicEditor
 		list: {
 			numberedProperties: {
 				styles: true,
-				startIndex: true
+				startIndex: true,
+				reversed: false
 			}
 		}
 	} )
@@ -94,6 +95,7 @@ ClassicEditor
 		list: {
 			numberedProperties: {
 				styles: true,
+				startIndex: false,
 				reversed: true
 			}
 		}
@@ -109,6 +111,7 @@ ClassicEditor
 		...config,
 		list: {
 			numberedProperties: {
+				styles: false,
 				startIndex: true,
 				reversed: true
 			}
@@ -123,7 +126,9 @@ ClassicEditor
 		...config,
 		list: {
 			numberedProperties: {
-				startIndex: true
+				styles: false,
+				startIndex: true,
+				reversed: false
 			}
 		}
 	} )
@@ -136,6 +141,8 @@ ClassicEditor
 		...config,
 		list: {
 			numberedProperties: {
+				styles: false,
+				startIndex: false,
 				reversed: true
 			}
 		}
@@ -151,7 +158,9 @@ ClassicEditor
 		...config,
 		list: {
 			numberedProperties: {
-				styles: true
+				styles: true,
+				startIndex: false,
+				reversed: false
 			}
 		}
 	} )
diff --git a/packages/ckeditor5-list/theme/collapsible.css b/packages/ckeditor5-list/theme/collapsible.css
index e0579ca58b1..a0d19027132 100644
--- a/packages/ckeditor5-list/theme/collapsible.css
+++ b/packages/ckeditor5-list/theme/collapsible.css
@@ -3,44 +3,8 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
-	--ck-collapsible-arrow-size: calc(0.5 * var(--ck-icon-size));
-}
-
-.ck.ck-collapsible {
-	& > .ck.ck-button {
-		width: 100%;
-		font-weight: bold;
-		padding: var(--ck-spacing-medium) var(--ck-spacing-large);
-		border-radius: 0;
-
-		&:focus {
-			background: transparent;
-		}
-
-		&:active, &:not(:focus), &:hover:not(:focus) {
-			background: transparent;
-			border-color: transparent;
-			box-shadow: none;
-		}
-
-		& > .ck-icon {
-			margin-right: var(--ck-spacing-medium);
-			width: var(--ck-collapsible-arrow-size);
-		}
-	}
-
+.ck.ck-collapsible.ck-collapsible_collapsed {
 	& > .ck-collapsible__children {
-		padding: 0 var(--ck-spacing-large) var(--ck-spacing-large);
-	}
-
-	&.ck-collapsible_collapsed {
-		& > .ck.ck-button .ck-icon {
-			transform: rotate(-90deg);
-		}
-
-		& > .ck-collapsible__children {
-			display: none;
-		}
+		display: none;
 	}
 }
diff --git a/packages/ckeditor5-list/theme/listproperties.css b/packages/ckeditor5-list/theme/listproperties.css
index 1abdb6da63e..df3207073bc 100644
--- a/packages/ckeditor5-list/theme/listproperties.css
+++ b/packages/ckeditor5-list/theme/listproperties.css
@@ -3,60 +3,8 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-.ck.ck-list-properties {
-	/* When there are no list styles and there is no collapsible. */
-	&.ck-list-properties_without-styles {
-		padding: var(--ck-spacing-large);
-
-		& > * {
-			min-width: 14em;
-
-			& + * {
-				margin-top: var(--ck-spacing-standard);
-			}
-		}
-	}
-
-	/*
-	 * When the numbered list property fields (start at, reversed) should be displayed,
-	 * more horizontal space is needed. Reconfigure the style grid to create that space.
-	 */
-	&.ck-list-properties_with-numbered-properties {
-		& > .ck-list-styles-list {
-			grid-template-columns: repeat( 4, auto );
-		}
-
-		/* When list styles are rendered and property fields are in a collapsible. */
-		& > .ck-collapsible {
-			border-top: 1px solid var(--ck-color-base-border);
-
-			& > .ck-collapsible__children {
-				& > * {
-					width: 100%;
-
-					& + * {
-						margin-top: var(--ck-spacing-standard);
-					}
-				}
-			}
-		}
-	}
-
-	& .ck.ck-numbered-list-properties__start-index .ck-input {
-		min-width: auto;
-		width: 100%;
-	}
-
-	& .ck.ck-numbered-list-properties__reversed-order {
-		background: transparent;
-		padding-left: 0;
-		padding-right: 0;
-		padding-bottom: 0;
-
-		&:active, &:hover {
-			box-shadow: none;
-			border-color: transparent;
-			background: none;
-		}
-	}
-}
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */
diff --git a/packages/ckeditor5-list/theme/liststyles.css b/packages/ckeditor5-list/theme/liststyles.css
index f5e533c32f4..ec549da5fe8 100644
--- a/packages/ckeditor5-list/theme/liststyles.css
+++ b/packages/ckeditor5-list/theme/liststyles.css
@@ -3,6 +3,6 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-.ck.ck-list-styles-list{
+.ck.ck-list-styles-list {
 	display: grid;
 }
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-list/collapsible.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-list/collapsible.css
new file mode 100644
index 00000000000..6c6da25daa2
--- /dev/null
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-list/collapsible.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-collapsible-arrow-size: calc(0.5 * var(--ck-icon-size));
+}
+
+.ck.ck-collapsible {
+	& > .ck.ck-button {
+		width: 100%;
+		font-weight: bold;
+		padding: var(--ck-spacing-medium) var(--ck-spacing-large);
+		border-radius: 0;
+
+		&:focus {
+			background: transparent;
+		}
+
+		&:active, &:not(:focus), &:hover:not(:focus) {
+			background: transparent;
+			border-color: transparent;
+			box-shadow: none;
+		}
+
+		& > .ck-icon {
+			margin-right: var(--ck-spacing-medium);
+			width: var(--ck-collapsible-arrow-size);
+		}
+	}
+
+	& > .ck-collapsible__children {
+		padding: 0 var(--ck-spacing-large) var(--ck-spacing-large);
+	}
+
+	&.ck-collapsible_collapsed {
+		& > .ck.ck-button .ck-icon {
+			transform: rotate(-90deg);
+		}
+	}
+}
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-list/listproperties.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-list/listproperties.css
new file mode 100644
index 00000000000..1abdb6da63e
--- /dev/null
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-list/listproperties.css
@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-list-properties {
+	/* When there are no list styles and there is no collapsible. */
+	&.ck-list-properties_without-styles {
+		padding: var(--ck-spacing-large);
+
+		& > * {
+			min-width: 14em;
+
+			& + * {
+				margin-top: var(--ck-spacing-standard);
+			}
+		}
+	}
+
+	/*
+	 * When the numbered list property fields (start at, reversed) should be displayed,
+	 * more horizontal space is needed. Reconfigure the style grid to create that space.
+	 */
+	&.ck-list-properties_with-numbered-properties {
+		& > .ck-list-styles-list {
+			grid-template-columns: repeat( 4, auto );
+		}
+
+		/* When list styles are rendered and property fields are in a collapsible. */
+		& > .ck-collapsible {
+			border-top: 1px solid var(--ck-color-base-border);
+
+			& > .ck-collapsible__children {
+				& > * {
+					width: 100%;
+
+					& + * {
+						margin-top: var(--ck-spacing-standard);
+					}
+				}
+			}
+		}
+	}
+
+	& .ck.ck-numbered-list-properties__start-index .ck-input {
+		min-width: auto;
+		width: 100%;
+	}
+
+	& .ck.ck-numbered-list-properties__reversed-order {
+		background: transparent;
+		padding-left: 0;
+		padding-right: 0;
+		padding-bottom: 0;
+
+		&:active, &:hover {
+			box-shadow: none;
+			border-color: transparent;
+			background: none;
+		}
+	}
+}

From 9a10b1411980bd69aa8e6c8661700ff7b2b7d3bb Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 30 Nov 2021 15:18:30 +0100
Subject: [PATCH 13/26] Docs and code refactoring.

---
 .../ckeditor5-list/src/liststyleediting.js    |  4 ++--
 .../ckeditor5-list/src/ui/collapsibleview.js  |  1 +
 .../ckeditor5-list/src/ui/inputnumberview.js  |  6 +++---
 .../src/ui/listpropertiesview.js              | 20 ++++++++++++++++---
 packages/ckeditor5-list/tests/liststyleui.js  |  4 ++--
 packages/ckeditor5-ui/src/input/inputview.js  |  2 +-
 6 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/packages/ckeditor5-list/src/liststyleediting.js b/packages/ckeditor5-list/src/liststyleediting.js
index 6e7f51f5645..873005b0813 100644
--- a/packages/ckeditor5-list/src/liststyleediting.js
+++ b/packages/ckeditor5-list/src/liststyleediting.js
@@ -79,8 +79,8 @@ export default class ListStyleEditing extends Plugin {
 
 		editor.commands.get( 'listStart' ).isEnabled = true;
 		editor.commands.get( 'listStart' ).value = 1;
-		editor.commands.get( 'listStart' ).execute = value => {
-			editor.commands.get( 'listStart' ).value = value;
+		editor.commands.get( 'listStart' ).execute = ( { startIndex } ) => {
+			editor.commands.get( 'listStart' ).value = startIndex;
 			// console.log( 'listStart#value', editor.commands.get( 'listStart' ).value );
 		};
 
diff --git a/packages/ckeditor5-list/src/ui/collapsibleview.js b/packages/ckeditor5-list/src/ui/collapsibleview.js
index 3f6899a6245..90efa4c0ed5 100644
--- a/packages/ckeditor5-list/src/ui/collapsibleview.js
+++ b/packages/ckeditor5-list/src/ui/collapsibleview.js
@@ -123,6 +123,7 @@ export default class CollapsibleView extends View {
 	/**
 	 * Creates the main {@link #buttonView} of the collapsible.
 	 *
+	 * @private
 	 * @returns {module:ui/button/buttonview~ButtonView}
 	 */
 	_createButtonView() {
diff --git a/packages/ckeditor5-list/src/ui/inputnumberview.js b/packages/ckeditor5-list/src/ui/inputnumberview.js
index 8e53a4a9f3c..56d3bab70a6 100644
--- a/packages/ckeditor5-list/src/ui/inputnumberview.js
+++ b/packages/ckeditor5-list/src/ui/inputnumberview.js
@@ -33,7 +33,7 @@ export default class InputNumberView extends InputView {
 		 *
 		 * @observable
 		 * @default undefined
-		 * @member {Number}
+		 * @member {Number} #min
 		 */
 		this.set( 'min', min );
 
@@ -42,7 +42,7 @@ export default class InputNumberView extends InputView {
 		 *
 		 * @observable
 		 * @default undefined
-		 * @member {Number}
+		 * @member {Number} #max
 		 */
 		this.set( 'max', max );
 
@@ -51,7 +51,7 @@ export default class InputNumberView extends InputView {
 		 *
 		 * @observable
 		 * @default undefined
-		 * @member {Number}
+		 * @member {Number} #step
 		 */
 		this.set( 'step', step );
 
diff --git a/packages/ckeditor5-list/src/ui/listpropertiesview.js b/packages/ckeditor5-list/src/ui/listpropertiesview.js
index f94dabaf237..2a33d6d9730 100644
--- a/packages/ckeditor5-list/src/ui/listpropertiesview.js
+++ b/packages/ckeditor5-list/src/ui/listpropertiesview.js
@@ -68,7 +68,7 @@ export default class ListPropertiesView extends View {
 		this.stylesView = null;
 
 		/**
-		 * A labeled field allowing the user to set the start index of the list.
+		 * A labeled number field allowing the user to set the start index of the list.
 		 *
 		 * **Note**: Only present when the view represents **numbered** list properties.
 		 *
@@ -78,7 +78,7 @@ export default class ListPropertiesView extends View {
 		this.startIndexFieldView = null;
 
 		/**
-		 * A field allowing the user to make the edited list reversed.
+		 * A switch button allowing the user to make the edited list reversed.
 		 *
 		 * **Note**: Only present when the view represents **numbered** list properties.
 		 *
@@ -327,7 +327,7 @@ export default class ListPropertiesView extends View {
 				if ( parsedValue < 1 ) {
 					startIndexFieldView.errorText = t( 'Start index must be greater than 0.' );
 				} else {
-					this.fire( 'listStart', parsedValue );
+					this.fire( 'listStart', { startIndex: parsedValue } );
 				}
 			}
 		} );
@@ -356,4 +356,18 @@ export default class ListPropertiesView extends View {
 
 		return reversedButtonView;
 	}
+
+	/**
+	 * Fired when the list start index value has changed via {@link #startIndexFieldView}.
+	 *
+	 * @event listStart
+	 * @param {Object} data
+	 * @param {Number} data.startIndex The new start index of the list.
+	 */
+
+	/**
+	 * Fired when the list order has changed (reversed) via {@link #reversedSwitchButtonView}.
+	 *
+	 * @event listReversed
+	 */
 }
diff --git a/packages/ckeditor5-list/tests/liststyleui.js b/packages/ckeditor5-list/tests/liststyleui.js
index bafded104bb..d9309580bda 100644
--- a/packages/ckeditor5-list/tests/liststyleui.js
+++ b/packages/ckeditor5-list/tests/liststyleui.js
@@ -603,10 +603,10 @@ describe( 'ListStyleUI', () => {
 				it( 'should execute the list start command when the list property view fires #listStart', () => {
 					const spy = sinon.spy( editor, 'execute' );
 
-					listPropertiesView.fire( 'listStart', 1234 );
+					listPropertiesView.fire( 'listStart', { startIndex: 1234 } );
 
 					sinon.assert.calledOnce( spy );
-					sinon.assert.calledWithExactly( spy, 'listStart', 1234 );
+					sinon.assert.calledWithExactly( spy, 'listStart', { startIndex: 1234 } );
 				} );
 			} );
 
diff --git a/packages/ckeditor5-ui/src/input/inputview.js b/packages/ckeditor5-ui/src/input/inputview.js
index 46015ab7be8..278b96851fe 100644
--- a/packages/ckeditor5-ui/src/input/inputview.js
+++ b/packages/ckeditor5-ui/src/input/inputview.js
@@ -109,7 +109,7 @@ export default class InputView extends View {
 		 * Corresponds to the `inputmode` DOM attribute. Can be `text`, `numeric`, `decimal`, etc..
 		 *
 		 * @observable
-		 * @member {Boolean}
+		 * @member {Boolean} #inputMode
 		 * @default 'text'
 		 */
 		this.set( 'inputMode', 'text' );

From 8f99dba0f4e30c2ec3b51f668715090da81c8664 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 30 Nov 2021 15:25:24 +0100
Subject: [PATCH 14/26] Docs and code refactoring.

---
 .../ckeditor5-list/src/ui/collapsibleview.js    |  8 ++++----
 .../ckeditor5-list/src/ui/listpropertiesview.js | 17 +++++++++--------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/ckeditor5-list/src/ui/collapsibleview.js b/packages/ckeditor5-list/src/ui/collapsibleview.js
index 90efa4c0ed5..8ba18552479 100644
--- a/packages/ckeditor5-list/src/ui/collapsibleview.js
+++ b/packages/ckeditor5-list/src/ui/collapsibleview.js
@@ -39,7 +39,7 @@ export default class CollapsibleView extends View {
 		 * `true` when the container with {@link #children} is collapsed. `false` otherwise.
 		 *
 		 * @observable
-		 * @member {Boolean}
+		 * @member {Boolean} #isCollapsed
 		 */
 		this.set( 'isCollapsed', false );
 
@@ -47,7 +47,7 @@ export default class CollapsibleView extends View {
 		 * The text label of the {@link #buttonView}.
 		 *
 		 * @observable
-		 * @member {String}
+		 * @member {String} #label
 		 * @default 'Show more'
 		 */
 		this.set( 'label', t( 'Show more' ) );
@@ -64,7 +64,7 @@ export default class CollapsibleView extends View {
 		 * A collection of the child views that can be collapsed by clicking the {@link #buttonView}.
 		 *
 		 * @readonly
-		 * @member {module:ui/viewcollection~ViewCollection}
+		 * @member {module:ui/viewcollection~ViewCollection} #children
 		 */
 		this.children = this.createCollection();
 
@@ -75,7 +75,7 @@ export default class CollapsibleView extends View {
 		 * @private
 		 * @readonly
 		 * @observable
-		 * @member {String}
+		 * @member {String} #_collapsibleAriaLabelUid
 		 */
 		this.set( '_collapsibleAriaLabelUid' );
 
diff --git a/packages/ckeditor5-list/src/ui/listpropertiesview.js b/packages/ckeditor5-list/src/ui/listpropertiesview.js
index 2a33d6d9730..95341061e78 100644
--- a/packages/ckeditor5-list/src/ui/listpropertiesview.js
+++ b/packages/ckeditor5-list/src/ui/listpropertiesview.js
@@ -319,16 +319,17 @@ export default class ListPropertiesView extends View {
 		} );
 
 		startIndexFieldView.fieldView.on( 'input', () => {
-			const value = startIndexFieldView.fieldView.element.value;
+			const inputElement = startIndexFieldView.fieldView.element;
+			const startIndex = inputElement.valueAsNumber;
 
-			if ( value !== '' ) {
-				const parsedValue = Number.parseInt( value );
+			if ( Number.isNaN( startIndex ) ) {
+				return;
+			}
 
-				if ( parsedValue < 1 ) {
-					startIndexFieldView.errorText = t( 'Start index must be greater than 0.' );
-				} else {
-					this.fire( 'listStart', { startIndex: parsedValue } );
-				}
+			if ( !inputElement.checkValidity() ) {
+				startIndexFieldView.errorText = t( 'Start index must be greater than 0.' );
+			} else {
+				this.fire( 'listStart', { startIndex } );
 			}
 		} );
 

From 6413f53079e7da5ea9d919edeb2e4a611967b5ac Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 30 Nov 2021 15:45:03 +0100
Subject: [PATCH 15/26] Added translation contexts to contexts.json.

---
 packages/ckeditor5-list/lang/contexts.json          | 6 +++++-
 packages/ckeditor5-list/src/ui/collapsibleview.js   | 3 +--
 packages/ckeditor5-list/tests/ui/collapsibleview.js | 4 ++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/ckeditor5-list/lang/contexts.json b/packages/ckeditor5-list/lang/contexts.json
index 33cd5248b91..2281d7c83b4 100644
--- a/packages/ckeditor5-list/lang/contexts.json
+++ b/packages/ckeditor5-list/lang/contexts.json
@@ -21,5 +21,9 @@
 	"Lower–roman": "The tooltip text of the button that toggles the \"lower–roman\" list style.",
 	"Upper-roman": "The tooltip text of the button that toggles the \"upper–roman\" list style.",
 	"Lower-latin": "The tooltip text of the button that toggles the \"lower–latin\" list style.",
-	"Upper-latin": "The tooltip text of the button that toggles the \"upper–latin\" list style."
+	"Upper-latin": "The tooltip text of the button that toggles the \"upper–latin\" list style.",
+	"List properties": "The label of the button that toggles the visibility of additional numbered list property UI fields.",
+	"Start at": "The label of the input allowing to change the start index of a numbered list.",
+	"Start index must be greater than 0.": "The error message displayed when the numbered list start index input value is invalid.",
+	"Reversed order": "The label of the switch button that reverses the order of the numbered list."
 }
diff --git a/packages/ckeditor5-list/src/ui/collapsibleview.js b/packages/ckeditor5-list/src/ui/collapsibleview.js
index 8ba18552479..97a29d3b14b 100644
--- a/packages/ckeditor5-list/src/ui/collapsibleview.js
+++ b/packages/ckeditor5-list/src/ui/collapsibleview.js
@@ -33,7 +33,6 @@ export default class CollapsibleView extends View {
 		super( locale );
 
 		const bind = this.bindTemplate;
-		const t = locale.t;
 
 		/**
 		 * `true` when the container with {@link #children} is collapsed. `false` otherwise.
@@ -50,7 +49,7 @@ export default class CollapsibleView extends View {
 		 * @member {String} #label
 		 * @default 'Show more'
 		 */
-		this.set( 'label', t( 'Show more' ) );
+		this.set( 'label', '' );
 
 		/**
 		 * The main button that, when clicked, collapses or expands the container with {@link #children}.
diff --git a/packages/ckeditor5-list/tests/ui/collapsibleview.js b/packages/ckeditor5-list/tests/ui/collapsibleview.js
index 06baf4a961f..6eb848077bc 100644
--- a/packages/ckeditor5-list/tests/ui/collapsibleview.js
+++ b/packages/ckeditor5-list/tests/ui/collapsibleview.js
@@ -77,14 +77,14 @@ describe( 'CollapsibleView', () => {
 		} );
 
 		it( 'should have #label with default value', () => {
-			expect( view.label ).to.equal( 'Show more' );
+			expect( view.label ).to.equal( '' );
 		} );
 	} );
 
 	describe( 'DOM bindings', () => {
 		describe( 'button label', () => {
 			it( 'should react on view#label', () => {
-				expect( view.buttonView.element.innerText ).to.equal( 'Show more' );
+				expect( view.buttonView.element.innerText ).to.equal( '' );
 
 				view.label = 'Foo';
 

From eda31500d5454849e22b6806f3864888cd080c75 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 30 Nov 2021 15:58:11 +0100
Subject: [PATCH 16/26] Improved focus tracking on the ListPropertiesView.

---
 packages/ckeditor5-list/src/ui/inputnumberview.js      |  4 ++--
 packages/ckeditor5-list/src/ui/listpropertiesview.js   |  6 ++++++
 packages/ckeditor5-list/tests/ui/listpropertiesview.js | 10 ++++++----
 .../theme/ckeditor5-list/listproperties.css            |  2 +-
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/ckeditor5-list/src/ui/inputnumberview.js b/packages/ckeditor5-list/src/ui/inputnumberview.js
index 56d3bab70a6..a513818465d 100644
--- a/packages/ckeditor5-list/src/ui/inputnumberview.js
+++ b/packages/ckeditor5-list/src/ui/inputnumberview.js
@@ -28,6 +28,8 @@ export default class InputNumberView extends InputView {
 	constructor( locale, { min, max, step } = {} ) {
 		super( locale );
 
+		const bind = this.bindTemplate;
+
 		/**
 		 * The value of the `min` DOM attribute (the lowest accepted value) set on the {@link #element}.
 		 *
@@ -55,8 +57,6 @@ export default class InputNumberView extends InputView {
 		 */
 		this.set( 'step', step );
 
-		const bind = this.bindTemplate;
-
 		this.extendTemplate( {
 			attributes: {
 				type: 'number',
diff --git a/packages/ckeditor5-list/src/ui/listpropertiesview.js b/packages/ckeditor5-list/src/ui/listpropertiesview.js
index 95341061e78..7c887dca4f3 100644
--- a/packages/ckeditor5-list/src/ui/listpropertiesview.js
+++ b/packages/ckeditor5-list/src/ui/listpropertiesview.js
@@ -171,6 +171,12 @@ export default class ListPropertiesView extends View {
 				// Register the view in the focus tracker.
 				this.focusTracker.add( styleButtonView.element );
 			}
+
+			// Register the collapsible toggle button to the focus system.
+			if ( this.startIndexFieldView || this.reversedSwitchButtonView ) {
+				this.focusables.add( this.children.last.buttonView );
+				this.focusTracker.add( this.children.last.buttonView.element );
+			}
 		}
 
 		if ( this.startIndexFieldView ) {
diff --git a/packages/ckeditor5-list/tests/ui/listpropertiesview.js b/packages/ckeditor5-list/tests/ui/listpropertiesview.js
index d5ee96e6309..0fc50389ec1 100644
--- a/packages/ckeditor5-list/tests/ui/listpropertiesview.js
+++ b/packages/ckeditor5-list/tests/ui/listpropertiesview.js
@@ -265,6 +265,7 @@ describe( 'ListPropertiesView', () => {
 					expect( view.focusables.map( f => f ) ).to.have.members( [
 						view.stylesView.children.first,
 						view.stylesView.children.last,
+						view.children.last.buttonView,
 						view.startIndexFieldView,
 						view.reversedSwitchButtonView
 					] );
@@ -290,8 +291,9 @@ describe( 'ListPropertiesView', () => {
 
 					sinon.assert.calledWithExactly( spy.getCall( 0 ), view.stylesView.children.first.element );
 					sinon.assert.calledWithExactly( spy.getCall( 1 ), view.stylesView.children.last.element );
-					sinon.assert.calledWithExactly( spy.getCall( 2 ), view.startIndexFieldView.element );
-					sinon.assert.calledWithExactly( spy.getCall( 3 ), view.reversedSwitchButtonView.element );
+					sinon.assert.calledWithExactly( spy.getCall( 2 ), view.children.last.buttonView.element );
+					sinon.assert.calledWithExactly( spy.getCall( 3 ), view.startIndexFieldView.element );
+					sinon.assert.calledWithExactly( spy.getCall( 4 ), view.reversedSwitchButtonView.element );
 
 					view.destroy();
 				} );
@@ -514,8 +516,8 @@ describe( 'ListPropertiesView', () => {
 			sinon.assert.calledOnce( spy );
 		} );
 
-		it( 'should focus the last style button when numbered list properies are collapsed', () => {
-			const spy = sinon.spy( view.children.first.children.last, 'focus' );
+		it( 'should focus the collapse button when numbered list properies are collapsed', () => {
+			const spy = sinon.spy( view.children.last.buttonView, 'focus' );
 
 			view.children.last.isCollapsed = true;
 			view.focusLast();
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-list/listproperties.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-list/listproperties.css
index 1abdb6da63e..e8bff8be263 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-list/listproperties.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-list/listproperties.css
@@ -51,7 +51,7 @@
 		background: transparent;
 		padding-left: 0;
 		padding-right: 0;
-		padding-bottom: 0;
+		margin-bottom: calc(-1 * var(--ck-spacing-tiny));
 
 		&:active, &:hover {
 			box-shadow: none;

From 834c2d48ca355bf42bcac2d7e6b63415105298b3 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 30 Nov 2021 16:05:46 +0100
Subject: [PATCH 17/26] Tests: Updated list-properties manual test.

---
 .../tests/manual/list-properties.html           | 10 +++++-----
 .../tests/manual/list-properties.md             | 17 ++++++++++++++++-
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/ckeditor5-list/tests/manual/list-properties.html b/packages/ckeditor5-list/tests/manual/list-properties.html
index 5b424a31c22..e2a9640056f 100644
--- a/packages/ckeditor5-list/tests/manual/list-properties.html
+++ b/packages/ckeditor5-list/tests/manual/list-properties.html
@@ -1,9 +1,9 @@
 <h2>Styles and properties</h2>
 
-<h3>Styles + Start + Reversed</h3>
+<h3>Styles + Start index + Reversed</h3>
 <div id="editor-a"></div>
 
-<h3>Styles + Start</h3>
+<h3>Styles + Start index</h3>
 <div id="editor-b"></div>
 
 <h3>Styles + Reversed</h3>
@@ -11,15 +11,15 @@ <h3>Styles + Reversed</h3>
 
 <h2>Only properties</h2>
 
-<h3>Start + Reversed</h3>
+<h3>Start index + Reversed</h3>
 <div id="editor-d"></div>
 
-<h3>Start</h3>
+<h3>Start index</h3>
 <div id="editor-e"></div>
 
 <h3>Reversed</h3>
 <div id="editor-f"></div>
 
-<h2>No properties</h2>
+<h2>No properties, just styles</h2>
 
 <div id="editor-g"></div>
diff --git a/packages/ckeditor5-list/tests/manual/list-properties.md b/packages/ckeditor5-list/tests/manual/list-properties.md
index 9b246f01eb5..f0eb231664e 100644
--- a/packages/ckeditor5-list/tests/manual/list-properties.md
+++ b/packages/ckeditor5-list/tests/manual/list-properties.md
@@ -1,3 +1,18 @@
 # List properties feature
 
-TODO
+Several editors were configured in this manual.
+
+## Basics
+
+1. Open the numbered list dropdown in each editor.
+2. Make sure the UI of the dropdown matches the description of the editor.
+3. Open the bulleted list dropdown and make sure it always looks the same.
+
+## Accessibility
+
+1. In each editor, focus the editing root and hit <kbd>(Fn+)Alt+F10</kbd>.
+2. Hit arrow down when the numbered list dropdown is highlighted.
+3. Hit arrow down (or up) again to focus the first (last) item in the dropdown.
+4. Navigate using <kbd>Tab</kbd> across the UI.
+5. Make sure the navigation works both ways by using <kbd>Shift</kbd>+<kbd>Tab</kbd>.
+6. Make sure you can enter numbered list properties when collapsed.

From 267e21e6bb1b2f91609b67aa8733e341c7252fb3 Mon Sep 17 00:00:00 2001
From: Arkadiusz Filipczak <ark.flp@gmail.com>
Date: Wed, 15 Dec 2021 16:32:25 +0100
Subject: [PATCH 18/26] ListStyleUI integration with ListStyleEditing

---
 packages/ckeditor5-list/src/liststyleui.js | 34 ++++++++++++++++------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/packages/ckeditor5-list/src/liststyleui.js b/packages/ckeditor5-list/src/liststyleui.js
index 306c0c79dfa..09b70bef754 100644
--- a/packages/ckeditor5-list/src/liststyleui.js
+++ b/packages/ckeditor5-list/src/liststyleui.js
@@ -250,14 +250,26 @@ function createListPropertiesView( {
 	styleGridAriaLabel
 } ) {
 	const locale = editor.locale;
-	const listStyleCommand = editor.commands.get( 'listStyle' );
-	const enabledProperties = parentCommandName == 'numberedList' ? editor.config.get( 'list.numberedProperties' ) : { styles: true };
-	const styleButtonCreator = getStyleButtonCreator( {
-		editor,
-		parentCommandName,
-		listStyleCommand
-	} );
-	const styleButtonViews = enabledProperties.styles ? styleDefinitions.map( styleButtonCreator ) : null;
+	const enabledProperties = editor.config.get( 'list.numberedProperties' );
+	let styleButtonViews;
+
+	if ( parentCommandName != 'numberedList' ) {
+		enabledProperties.startIndex = false;
+		enabledProperties.reversed = false;
+	}
+
+	if ( enabledProperties.styles ) {
+		const listStyleCommand = editor.commands.get( 'listStyle' );
+
+		const styleButtonCreator = getStyleButtonCreator( {
+			editor,
+			parentCommandName,
+			listStyleCommand
+		} );
+
+		styleButtonViews = styleDefinitions.map( styleButtonCreator );
+	}
+
 	const listPropertiesView = new ListPropertiesView( locale, {
 		styleGridAriaLabel,
 		enabledProperties,
@@ -277,7 +289,11 @@ function createListPropertiesView( {
 
 		listPropertiesView.reversedSwitchButtonView.bind( 'isEnabled' ).to( listReversedCommand );
 		listPropertiesView.reversedSwitchButtonView.bind( 'isOn' ).to( listReversedCommand, 'value' );
-		listPropertiesView.on( 'listReversed', () => editor.execute( 'listReversed' ) );
+		listPropertiesView.on( 'listReversed', () => {
+			const isReversed = listReversedCommand.value;
+
+			editor.execute( 'listReversed', { reversed: !isReversed } );
+		} );
 	}
 
 	// Make sure applying styles closes the dropdown.

From ff345788668c98f249ce31deb111b47ebf03dda6 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 15 Dec 2021 16:49:34 +0100
Subject: [PATCH 19/26] Tests: Adjusted ListStyleUI tests to recent
 refactoring.

---
 packages/ckeditor5-list/tests/liststyleui.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/ckeditor5-list/tests/liststyleui.js b/packages/ckeditor5-list/tests/liststyleui.js
index d9309580bda..84c0d1b3e28 100644
--- a/packages/ckeditor5-list/tests/liststyleui.js
+++ b/packages/ckeditor5-list/tests/liststyleui.js
@@ -37,7 +37,14 @@ describe( 'ListStyleUI', () => {
 		document.body.appendChild( editorElement );
 
 		return ClassicTestEditor.create( editorElement, {
-			plugins: [ Paragraph, BlockQuote, ListStyle, UndoEditing ]
+			plugins: [ Paragraph, BlockQuote, ListStyle, UndoEditing ],
+			list: {
+				numberedProperties: {
+					styles: true,
+					startIndex: true,
+					reversed: true
+				}
+			}
 		} ).then( newEditor => {
 			editor = newEditor;
 			model = editor.model;
@@ -564,7 +571,14 @@ describe( 'ListStyleUI', () => {
 						styleButtonView.fire( 'execute' );
 
 						expect( getData( model ) ).to.equal(
-							'<listItem listIndent="0" listStyle="decimal-leading-zero" listType="numbered">foo[]</listItem>'
+							'<listItem ' +
+								'listIndent="0" ' +
+								'listReversed="false" ' +
+								'listStart="1" ' +
+								'listStyle="decimal-leading-zero" ' +
+								'listType="numbered">' +
+								'foo[]' +
+							'</listItem>'
 						);
 
 						editor.execute( 'undo' );
@@ -640,7 +654,7 @@ describe( 'ListStyleUI', () => {
 					listPropertiesView.fire( 'listReversed' );
 
 					sinon.assert.calledOnce( spy );
-					sinon.assert.calledWithExactly( spy, 'listReversed' );
+					sinon.assert.calledWithExactly( spy, 'listReversed', { reversed: true } );
 				} );
 			} );
 		} );

From 0689c9651bd673de0b860e8a8cfb7318192fe803 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 16 Dec 2021 10:49:34 +0100
Subject: [PATCH 20/26] Tests: Refactoring in test names.

---
 packages/ckeditor5-list/tests/liststyleui.js           |  4 ++--
 packages/ckeditor5-list/tests/ui/listpropertiesview.js | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/ckeditor5-list/tests/liststyleui.js b/packages/ckeditor5-list/tests/liststyleui.js
index 84c0d1b3e28..2589f9fa513 100644
--- a/packages/ckeditor5-list/tests/liststyleui.js
+++ b/packages/ckeditor5-list/tests/liststyleui.js
@@ -305,7 +305,7 @@ describe( 'ListStyleUI', () => {
 			} );
 
 			describe( 'support of config.list.numberedProperties', () => {
-				it( 'should have styles grid and all numbered list property fields when all enabled in the config', async () => {
+				it( 'should have styles grid, start index, and reversed fields when all properties are enabled in the config', async () => {
 					const editorElement = document.createElement( 'div' );
 					document.body.appendChild( editorElement );
 
@@ -331,7 +331,7 @@ describe( 'ListStyleUI', () => {
 					await editor.destroy();
 				} );
 
-				it( 'should have only the styles grid UI when numbered properties are disabled', async () => {
+				it( 'should have only the styles grid when start index and reversed properties are disabled', async () => {
 					const editorElement = document.createElement( 'div' );
 					document.body.appendChild( editorElement );
 
diff --git a/packages/ckeditor5-list/tests/ui/listpropertiesview.js b/packages/ckeditor5-list/tests/ui/listpropertiesview.js
index 0fc50389ec1..aadb06eedec 100644
--- a/packages/ckeditor5-list/tests/ui/listpropertiesview.js
+++ b/packages/ckeditor5-list/tests/ui/listpropertiesview.js
@@ -59,7 +59,7 @@ describe( 'ListPropertiesView', () => {
 				expect( view.element.classList.contains( 'ck-list-properties_with-numbered-properties' ) ).to.be.true;
 			} );
 
-			describe( 'when both styles grid and numbered properties are enabled', () => {
+			describe( 'when styles, start index, and reversed properties are enabled', () => {
 				it( 'should use collapsible to host property fields', () => {
 					expect( view.children.first ).to.equal( view.stylesView );
 					expect( view.children.last ).to.be.instanceOf( CollapsibleView );
@@ -70,7 +70,7 @@ describe( 'ListPropertiesView', () => {
 				} );
 			} );
 
-			describe( 'when styles grid is disabled and numbered properties are enabled', () => {
+			describe( 'when styles are disabled but start index and reversed properties are enabled', () => {
 				it( 'should have no #stylesView and get a specific CSS class', () => {
 					const view = new ListPropertiesView( locale, {
 						enabledProperties: {
@@ -112,7 +112,7 @@ describe( 'ListPropertiesView', () => {
 				} );
 			} );
 
-			describe( 'when styles grid is enabled but numbered properties are not', () => {
+			describe( 'when only styles property is enabled', () => {
 				it( 'should not have no #startIndexFieldView, no #reversedSwitchButtonView, and no specific CSS class', () => {
 					const view = new ListPropertiesView( locale, {
 						enabledProperties: {
@@ -136,7 +136,7 @@ describe( 'ListPropertiesView', () => {
 				} );
 			} );
 
-			describe( 'when only start index field is enabled', () => {
+			describe( 'when only start index property is enabled', () => {
 				it( 'should not have no #stylesView, no #reversedSwitchButtonView', () => {
 					const view = new ListPropertiesView( locale, {
 						enabledProperties: {
@@ -161,7 +161,7 @@ describe( 'ListPropertiesView', () => {
 				} );
 			} );
 
-			describe( 'when only reversed field is enabled', () => {
+			describe( 'when only reversed property is enabled', () => {
 				it( 'should not have no #stylesView, no #startIndexFieldView', () => {
 					const view = new ListPropertiesView( locale, {
 						enabledProperties: {

From e7549d76262e60a451f6fe8e5d3aa8c9615614e2 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 16 Dec 2021 11:25:28 +0100
Subject: [PATCH 21/26] The list properties collapsible should stay disabled
 and collapsed when the user selection is outside a list.

---
 .../src/ui/listpropertiesview.js              | 37 ++++++++++++---
 .../tests/ui/listpropertiesview.js            | 45 +++++++++++++++++++
 2 files changed, 76 insertions(+), 6 deletions(-)

diff --git a/packages/ckeditor5-list/src/ui/listpropertiesview.js b/packages/ckeditor5-list/src/ui/listpropertiesview.js
index 7c887dca4f3..0ce56d88f25 100644
--- a/packages/ckeditor5-list/src/ui/listpropertiesview.js
+++ b/packages/ckeditor5-list/src/ui/listpropertiesview.js
@@ -63,17 +63,31 @@ export default class ListPropertiesView extends View {
 		 * A view that renders the grid of list styles.
 		 *
 		 * @readonly
-		 * @member {module:ui/view~View}
+		 * @member {module:ui/view~View|null}
 		 */
 		this.stylesView = null;
 
+		/**
+		 * A collapsible view that hosts additional list property fields ({@link #startIndexFieldView} and
+		 * {@link #reversedSwitchButtonView}) to visually separate them from the {@link #stylesView grid of styles}.
+		 *
+		 * **Note**: Only present when
+		 * * the view represents **numbered** list properties,
+		 * * and the {@link #stylesView} is rendered,
+		 * * and either {@link #startIndexFieldView} or {@link #reversedSwitchButtonView} is rendered.
+		 *
+		 * @readonly
+		 * @member {module:list/ui/collapsibleview~CollapsibleView|null}
+		 */
+		this.additionalPropertiesCollapsibleView = null;
+
 		/**
 		 * A labeled number field allowing the user to set the start index of the list.
 		 *
 		 * **Note**: Only present when the view represents **numbered** list properties.
 		 *
 		 * @readonly
-		 * @member {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
+		 * @member {module:ui/labeledfield/labeledfieldview~LabeledFieldView|null}
 		 */
 		this.startIndexFieldView = null;
 
@@ -83,7 +97,7 @@ export default class ListPropertiesView extends View {
 		 * **Note**: Only present when the view represents **numbered** list properties.
 		 *
 		 * @readonly
-		 * @member {module:ui/button/switchbuttonview~SwitchButtonView}
+		 * @member {module:ui/button/switchbuttonview~SwitchButtonView|null}
 		 */
 		this.reversedSwitchButtonView = null;
 
@@ -288,14 +302,25 @@ export default class ListPropertiesView extends View {
 
 		// When there are some style buttons, pack the numbered list properties into a collapsible to separate them.
 		if ( enabledProperties.styles ) {
-			const collapsibleView = new CollapsibleView( this.locale, numberedPropertyViews );
+			this.additionalPropertiesCollapsibleView = new CollapsibleView( this.locale, numberedPropertyViews );
 
-			collapsibleView.set( {
+			this.additionalPropertiesCollapsibleView.set( {
 				label: t( 'List properties' ),
 				isCollapsed: true
 			} );
 
-			this.children.add( collapsibleView );
+			// Don't enable the collapsible view unless either start index or reversed field is enabled (e.g. when no list is selected).
+			this.additionalPropertiesCollapsibleView.buttonView.bind( 'isEnabled' ).toMany(
+				numberedPropertyViews, 'isEnabled', ( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled ) );
+
+			// Automatically collapse the additional properties collapsible when either start index or reversed field gets disabled.
+			this.additionalPropertiesCollapsibleView.buttonView.on( 'change:isEnabled', ( evt, data, isEnabled ) => {
+				if ( !isEnabled ) {
+					this.additionalPropertiesCollapsibleView.isCollapsed = true;
+				}
+			} );
+
+			this.children.add( this.additionalPropertiesCollapsibleView );
 		} else {
 			this.children.addMany( numberedPropertyViews );
 		}
diff --git a/packages/ckeditor5-list/tests/ui/listpropertiesview.js b/packages/ckeditor5-list/tests/ui/listpropertiesview.js
index aadb06eedec..444234c3a50 100644
--- a/packages/ckeditor5-list/tests/ui/listpropertiesview.js
+++ b/packages/ckeditor5-list/tests/ui/listpropertiesview.js
@@ -68,6 +68,51 @@ describe( 'ListPropertiesView', () => {
 					expect( view.children.last.children.first ).to.equal( view.startIndexFieldView );
 					expect( view.children.last.children.last ).to.equal( view.reversedSwitchButtonView );
 				} );
+
+				it( 'should keep the collapsible button enabled as longs as either start index or reversed field is enabled', () => {
+					const collapsibleView = view.children.last;
+
+					expect( collapsibleView.buttonView.isEnabled, 'A' ).to.be.true;
+
+					view.startIndexFieldView.isEnabled = false;
+					view.reversedSwitchButtonView.isEnabled = true;
+					expect( collapsibleView.buttonView.isEnabled, 'B' ).to.be.true;
+
+					view.startIndexFieldView.isEnabled = true;
+					view.reversedSwitchButtonView.isEnabled = false;
+					expect( collapsibleView.buttonView.isEnabled, 'C' ).to.be.true;
+
+					view.startIndexFieldView.isEnabled = true;
+					view.reversedSwitchButtonView.isEnabled = true;
+					expect( collapsibleView.buttonView.isEnabled, 'D' ).to.be.true;
+
+					view.startIndexFieldView.isEnabled = false;
+					view.reversedSwitchButtonView.isEnabled = false;
+					expect( collapsibleView.buttonView.isEnabled, 'E' ).to.be.false;
+				} );
+
+				it( 'should automatically collapse the collapsible when its button gets gets disabled', () => {
+					const collapsibleView = view.children.last;
+
+					collapsibleView.isCollapsed = false;
+
+					view.startIndexFieldView.isEnabled = false;
+					view.reversedSwitchButtonView.isEnabled = true;
+					expect( collapsibleView.isCollapsed, 'A' ).to.be.false;
+
+					view.startIndexFieldView.isEnabled = true;
+					view.reversedSwitchButtonView.isEnabled = false;
+					expect( collapsibleView.isCollapsed, 'B' ).to.be.false;
+
+					view.startIndexFieldView.isEnabled = false;
+					view.reversedSwitchButtonView.isEnabled = false;
+					expect( collapsibleView.isCollapsed, 'C' ).to.be.true;
+
+					// It should work only one way. It should not uncollapse when property fields get enabled.
+					view.startIndexFieldView.isEnabled = true;
+					view.reversedSwitchButtonView.isEnabled = true;
+					expect( collapsibleView.isCollapsed, 'D' ).to.be.true;
+				} );
 			} );
 
 			describe( 'when styles are disabled but start index and reversed properties are enabled', () => {

From 143824dd7b63d772923d856f9841b8c3057dd2df Mon Sep 17 00:00:00 2001
From: Arkadiusz Filipczak <ark.flp@gmail.com>
Date: Thu, 16 Dec 2021 13:24:23 +0100
Subject: [PATCH 22/26] ListStyleUI: use  instead of

---
 packages/ckeditor5-list/src/liststyleui.js         |  2 +-
 packages/ckeditor5-list/tests/liststyleui.js       | 10 +++++-----
 .../ckeditor5-list/tests/manual/list-properties.js | 14 +++++++-------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/ckeditor5-list/src/liststyleui.js b/packages/ckeditor5-list/src/liststyleui.js
index 09b70bef754..66a1d625cae 100644
--- a/packages/ckeditor5-list/src/liststyleui.js
+++ b/packages/ckeditor5-list/src/liststyleui.js
@@ -250,7 +250,7 @@ function createListPropertiesView( {
 	styleGridAriaLabel
 } ) {
 	const locale = editor.locale;
-	const enabledProperties = editor.config.get( 'list.numberedProperties' );
+	const enabledProperties = editor.config.get( 'list.properties' );
 	let styleButtonViews;
 
 	if ( parentCommandName != 'numberedList' ) {
diff --git a/packages/ckeditor5-list/tests/liststyleui.js b/packages/ckeditor5-list/tests/liststyleui.js
index 2589f9fa513..09dc64cca98 100644
--- a/packages/ckeditor5-list/tests/liststyleui.js
+++ b/packages/ckeditor5-list/tests/liststyleui.js
@@ -39,7 +39,7 @@ describe( 'ListStyleUI', () => {
 		return ClassicTestEditor.create( editorElement, {
 			plugins: [ Paragraph, BlockQuote, ListStyle, UndoEditing ],
 			list: {
-				numberedProperties: {
+				properties: {
 					styles: true,
 					startIndex: true,
 					reversed: true
@@ -304,7 +304,7 @@ describe( 'ListStyleUI', () => {
 				expect( numberedListDropdown.class ).to.equal( 'ck-list-styles-dropdown' );
 			} );
 
-			describe( 'support of config.list.numberedProperties', () => {
+			describe( 'support of config.list.properties', () => {
 				it( 'should have styles grid, start index, and reversed fields when all properties are enabled in the config', async () => {
 					const editorElement = document.createElement( 'div' );
 					document.body.appendChild( editorElement );
@@ -312,7 +312,7 @@ describe( 'ListStyleUI', () => {
 					const editor = await ClassicTestEditor.create( editorElement, {
 						plugins: [ Paragraph, BlockQuote, ListStyle, UndoEditing ],
 						list: {
-							numberedProperties: {
+							properties: {
 								styles: true,
 								startIndex: true,
 								reversed: true
@@ -338,7 +338,7 @@ describe( 'ListStyleUI', () => {
 					const editor = await ClassicTestEditor.create( editorElement, {
 						plugins: [ Paragraph, BlockQuote, ListStyle, UndoEditing ],
 						list: {
-							numberedProperties: {
+							properties: {
 								styles: true,
 								startIndex: false,
 								reversed: false
@@ -364,7 +364,7 @@ describe( 'ListStyleUI', () => {
 					const editor = await ClassicTestEditor.create( editorElement, {
 						plugins: [ Paragraph, BlockQuote, ListStyle, UndoEditing ],
 						list: {
-							numberedProperties: {
+							properties: {
 								styles: false,
 								startIndex: true,
 								reversed: true
diff --git a/packages/ckeditor5-list/tests/manual/list-properties.js b/packages/ckeditor5-list/tests/manual/list-properties.js
index cc17f9e9abc..9727bc757ab 100644
--- a/packages/ckeditor5-list/tests/manual/list-properties.js
+++ b/packages/ckeditor5-list/tests/manual/list-properties.js
@@ -63,7 +63,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor-a' ), {
 		...config,
 		list: {
-			numberedProperties: {
+			properties: {
 				styles: true,
 				startIndex: true,
 				reversed: true
@@ -78,7 +78,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor-b' ), {
 		...config,
 		list: {
-			numberedProperties: {
+			properties: {
 				styles: true,
 				startIndex: true,
 				reversed: false
@@ -93,7 +93,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor-c' ), {
 		...config,
 		list: {
-			numberedProperties: {
+			properties: {
 				styles: true,
 				startIndex: false,
 				reversed: true
@@ -110,7 +110,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor-d' ), {
 		...config,
 		list: {
-			numberedProperties: {
+			properties: {
 				styles: false,
 				startIndex: true,
 				reversed: true
@@ -125,7 +125,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor-e' ), {
 		...config,
 		list: {
-			numberedProperties: {
+			properties: {
 				styles: false,
 				startIndex: true,
 				reversed: false
@@ -140,7 +140,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor-f' ), {
 		...config,
 		list: {
-			numberedProperties: {
+			properties: {
 				styles: false,
 				startIndex: false,
 				reversed: true
@@ -157,7 +157,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor-g' ), {
 		...config,
 		list: {
-			numberedProperties: {
+			properties: {
 				styles: true,
 				startIndex: false,
 				reversed: false

From b695b10bae5a49d0208b123f8dece53f2d6e60e0 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 16 Dec 2021 15:13:51 +0100
Subject: [PATCH 23/26] Update packages/ckeditor5-utils/src/dom/isvisible.js

Co-authored-by: Arkadiusz Filipczak <ark.flp@gmail.com>
---
 packages/ckeditor5-utils/src/dom/isvisible.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ckeditor5-utils/src/dom/isvisible.js b/packages/ckeditor5-utils/src/dom/isvisible.js
index df4a995f5b8..1f9c2d1f8b5 100644
--- a/packages/ckeditor5-utils/src/dom/isvisible.js
+++ b/packages/ckeditor5-utils/src/dom/isvisible.js
@@ -17,7 +17,7 @@
  * **Note**: This helper does not check whether the element is hidden by cropping, overflow, etc..
  * To check that, use {@link module:utils/dom/rect~Rect} instead.
  *
- * @param {HTMLElement} element
+ * @param {HTMLElement|null|undefined} element
  * @returns {Boolean}
  */
 export default function isVisible( element ) {

From 9714cac2724e412247256f964e12b72a2958e44f Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 16 Dec 2021 15:14:15 +0100
Subject: [PATCH 24/26] Update packages/ckeditor5-ui/tests/input/inputview.js

Co-authored-by: Arkadiusz Filipczak <ark.flp@gmail.com>
---
 packages/ckeditor5-ui/tests/input/inputview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ckeditor5-ui/tests/input/inputview.js b/packages/ckeditor5-ui/tests/input/inputview.js
index 793cd0d4d31..3429e5679f4 100644
--- a/packages/ckeditor5-ui/tests/input/inputview.js
+++ b/packages/ckeditor5-ui/tests/input/inputview.js
@@ -23,7 +23,7 @@ describe( 'InputView', () => {
 	} );
 
 	describe( 'constructor()', () => {
-		it( 'should creates element from template', () => {
+		it( 'should create element from template', () => {
 			expect( view.element.tagName ).to.equal( 'INPUT' );
 			expect( view.element.type ).to.equal( 'text' );
 			expect( view.element.getAttribute( 'type' ) ).to.be.null;

From 4303f22ec283ab6b4c81704bad55cbb62f98119d Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 16 Dec 2021 15:14:23 +0100
Subject: [PATCH 25/26] Update
 packages/ckeditor5-list/tests/ui/inputnumberview.js

Co-authored-by: Arkadiusz Filipczak <ark.flp@gmail.com>
---
 packages/ckeditor5-list/tests/ui/inputnumberview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ckeditor5-list/tests/ui/inputnumberview.js b/packages/ckeditor5-list/tests/ui/inputnumberview.js
index f96d1a3ea33..3891dd0e5fb 100644
--- a/packages/ckeditor5-list/tests/ui/inputnumberview.js
+++ b/packages/ckeditor5-list/tests/ui/inputnumberview.js
@@ -24,7 +24,7 @@ describe( 'InputNumberView', () => {
 			expect( view ).to.be.instanceOf( InputView );
 		} );
 
-		it( 'should creates element from template', () => {
+		it( 'should create element from template', () => {
 			expect( view.element.getAttribute( 'type' ) ).to.equal( 'number' );
 			expect( view.element.type ).to.equal( 'number' );
 			expect( view.element.classList.contains( 'ck-input-number' ) ).to.be.true;

From d3bf610cfc6003551860b2005b1431936f67fb12 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 16 Dec 2021 15:19:36 +0100
Subject: [PATCH 26/26] Tests: Added initial data to editor in the list
 properties manual test.

---
 .../ckeditor5-list/tests/manual/list-properties.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/ckeditor5-list/tests/manual/list-properties.js b/packages/ckeditor5-list/tests/manual/list-properties.js
index 9727bc757ab..fe0e18e108b 100644
--- a/packages/ckeditor5-list/tests/manual/list-properties.js
+++ b/packages/ckeditor5-list/tests/manual/list-properties.js
@@ -23,6 +23,20 @@ import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
 import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
 
 const config = {
+	initialData: `
+		<h3>Ordered list</h3>
+		<ol>
+			<li>First item</li>
+			<li>Second item</li>
+			<li>Third item</li>
+		</ol>
+		<h3>Unordered list</h3>
+		<ul>
+			<li>First item</li>
+			<li>Second item</li>
+			<li>Third item</li>
+		</ul>
+	`,
 	plugins: [
 		Essentials,
 		Bold,