		Changelog
		=========

		## [18.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v17.0.0...v18.0.0) (2020-03-19)

		### MAJOR BREAKING CHANGES

		* The `BalloonToolbar` plugin now groups the overflowing items by default. This can be disabled by setting [`config.balloonToolbar.shouldNotGroupWhenFull`](https://ckeditor.com/docs/ckeditor5/latest/api/module_ui_toolbar_toolbarview-ToolbarOptions.html#member-shouldGroupWhenFull) configuration to `true`.

		### Features

		* The `BalloonToolbar` plugin should group items when its width is close to related editable's width. Closes [ckeditor/ckeditor5#5597](https://github.com/ckeditor/ckeditor5/issues/5597). Closes [ckeditor/ckeditor5#5501](https://github.com/ckeditor/ckeditor5/issues/5501). ([d36fd23](https://github.com/ckeditor/ckeditor5-ui/commit/d36fd23))

		[`BalloonPanelView.defaultPositions`](https://ckeditor.com/docs/ckeditor5/latest/api/module_ui_panel_balloon_balloonpanelview-BalloonPanelView.html#static-member-defaultPositions) has been extended with additional positions. Please refer to the documentation to learn more.

		### Other changes

		* Updated translations. ([ace38eb](https://github.com/ckeditor/ckeditor5-ui/commit/ace38eb))


		## [17.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v16.0.0...v17.0.0) (2020-02-19)
		@@ -5,0 +22,0 @@

package.json

		{
		"name": "@ckeditor/ckeditor5-ui",
		"version": "17.0.0",
		"version": "18.0.0",
		"description": "The UI framework and standard UI library of CKEditor 5.",
		@@ -12,21 +12,21 @@ "keywords": [
		"dependencies": {
		"@ckeditor/ckeditor5-core": "^17.0.0",
		"@ckeditor/ckeditor5-utils": "^17.0.0",
		"@ckeditor/ckeditor5-core": "^18.0.0",
		"@ckeditor/ckeditor5-utils": "^18.0.0",
		"lodash-es": "^4.17.10"
		},
		"devDependencies": {
		"@ckeditor/ckeditor5-basic-styles": "^17.0.0",
		"@ckeditor/ckeditor5-block-quote": "^17.0.0",
		"@ckeditor/ckeditor5-editor-balloon": "^17.0.0",
		"@ckeditor/ckeditor5-editor-classic": "^17.0.0",
		"@ckeditor/ckeditor5-engine": "^17.0.0",
		"@ckeditor/ckeditor5-enter": "^17.0.0",
		"@ckeditor/ckeditor5-essentials": "^17.0.0",
		"@ckeditor/ckeditor5-heading": "^17.0.0",
		"@ckeditor/ckeditor5-image": "^17.0.0",
		"@ckeditor/ckeditor5-link": "^17.0.0",
		"@ckeditor/ckeditor5-list": "^17.0.0",
		"@ckeditor/ckeditor5-mention": "^17.0.0",
		"@ckeditor/ckeditor5-paragraph": "^17.0.0",
		"@ckeditor/ckeditor5-typing": "^17.0.0",
		"@ckeditor/ckeditor5-basic-styles": "^18.0.0",
		"@ckeditor/ckeditor5-block-quote": "^18.0.0",
		"@ckeditor/ckeditor5-editor-balloon": "^18.0.0",
		"@ckeditor/ckeditor5-editor-classic": "^18.0.0",
		"@ckeditor/ckeditor5-engine": "^18.0.0",
		"@ckeditor/ckeditor5-enter": "^18.0.0",
		"@ckeditor/ckeditor5-essentials": "^18.0.0",
		"@ckeditor/ckeditor5-heading": "^18.0.0",
		"@ckeditor/ckeditor5-image": "^18.0.0",
		"@ckeditor/ckeditor5-link": "^18.0.0",
		"@ckeditor/ckeditor5-list": "^18.0.0",
		"@ckeditor/ckeditor5-mention": "^18.0.0",
		"@ckeditor/ckeditor5-paragraph": "^18.0.0",
		"@ckeditor/ckeditor5-typing": "^18.0.0",
		"eslint": "^5.5.0",
		@@ -33,0 +33,0 @@ "eslint-config-ckeditor5": "^2.0.0",

src/button/buttonview.js

		@@ -142,3 +142,3 @@ /**
		bind.if( 'withText', 'ck-button_with-text' ),
		bind.if( 'withKeystroke', 'ck-button_with-keystroke' ),
		bind.if( 'withKeystroke', 'ck-button_with-keystroke' )
		],
		@@ -236,3 +236,3 @@ type: bind.to( 'type', value => value ? value : 'button' ),
		style: bind.to( 'labelStyle' ),
		id: `ck-editor__aria-label_${ ariaLabelUid }`,
		id: `ck-editor__aria-label_${ ariaLabelUid }`
		},
		@@ -239,0 +239,0 @@

src/button/switchbuttonview.js

		@@ -80,3 +80,3 @@ /**
		'ck-button__toggle'
		],
		]
		},
		@@ -92,3 +92,3 @@
		'ck-button__toggle__inner'
		],
		]
		}
		@@ -95,0 +95,0 @@ }

src/colorgrid/colorgridview.js

		@@ -90,3 +90,3 @@ /**
		// Navigate grid items forwards using the arrowdown key.
		focusNext: 'arrowright',
		focusNext: 'arrowright'
		}
		@@ -93,0 +93,0 @@ } );

src/dropdown/dropdownview.js

		@@ -201,3 +201,3 @@ /**
		class: [
		'ck-dropdown__button',
		'ck-dropdown__button'
		]
		@@ -204,0 +204,0 @@ }

src/editorui/bodycollection.js

		@@ -56,3 +56,3 @@ /**
		],
		dir: this.locale.uiLanguageDirection,
		dir: this.locale.uiLanguageDirection
		},
		@@ -59,0 +59,0 @@ children: this

src/list/listview.js

		@@ -70,3 +70,3 @@ /**
		// Navigate toolbar items forwards using the arrowdown key.
		focusNext: 'arrowdown',
		focusNext: 'arrowdown'
		}
		@@ -73,0 +73,0 @@ } );

407

src/panel/balloon/balloonpanelview.js

		@@ -227,5 +227,9 @@ /**
		defaultPositions.southArrowNorth,
		defaultPositions.southArrowNorthMiddleWest,
		defaultPositions.southArrowNorthMiddleEast,
		defaultPositions.southArrowNorthWest,
		defaultPositions.southArrowNorthEast,
		defaultPositions.northArrowSouth,
		defaultPositions.northArrowSouthMiddleWest,
		defaultPositions.northArrowSouthMiddleEast,
		defaultPositions.northArrowSouthWest,
		@@ -439,82 +443,154 @@ defaultPositions.northArrowSouthEast
		*
		* North
		*
		* * `northArrowSouth`
		*
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		* North west
		*
		* * `northArrowSouthEast`
		* * `northWestArrowSouthWest`
		*
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		*
		* * `northArrowSouthWest`
		* * `northWestArrowSouthMiddleWest`
		*
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		*
		* North west
		*
		* * `northWestArrowSouth`
		*
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		*
		* * `northWestArrowSouthWest`
		* * `northWestArrowSouthMiddleEast`
		*
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		*
		* * `northWestArrowSouthEast`
		*
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		*
		*
		*
		* North
		*
		* * `northArrowSouthWest`
		*
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		*
		* * `northArrowSouthMiddleWest`
		*
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		*
		* * `northArrowSouth`
		*
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		*
		* * `northArrowSouthMiddleEast`
		*
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		*
		* * `northArrowSouthEast`
		*
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		*
		* North east
		*
		* * `northEastArrowSouthWest`
		*
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		*
		*
		* * `northEastArrowSouthMiddleWest`
		*
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		*
		* * `northEastArrowSouth`
		*
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		*
		* * `northEastArrowSouthMiddleEast`
		*
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		*
		* * `northEastArrowSouthEast`
		*
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		*
		* * `northEastArrowSouthWest`
		*
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* V
		* [ Target ]
		*
		* South
		*
		*
		* * `southArrowNorthWest`
		*
		* [ Target ]
		* ^
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		*
		* * `southArrowNorthMiddleWest`
		*
		* [ Target ]
		* ^
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		*
		* * `southArrowNorth`
		@@ -528,6 +604,14 @@ *
		*
		* * `southArrowNorthMiddleEast`
		*
		* [ Target ]
		* ^
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		*
		* * `southArrowNorthEast`
		*
		* [ Target ]
		* ^
		* [ Target ]
		* ^
		* +-----------------+
		@@ -537,12 +621,22 @@ * \| Balloon \|
		*
		* * `southArrowNorthWest`
		*
		* [ Target ]
		* ^
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		*
		* South west
		*
		* * `southWestArrowNorthWest`
		*
		* [ Target ]
		* ^
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		*
		* * `southWestArrowNorthMiddleWest`
		*
		* [ Target ]
		* ^
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		*
		* * `southWestArrowNorth`
		@@ -556,6 +650,6 @@ *
		*
		* * `southWestArrowNorthWest`
		* * `southWestArrowNorthMiddleEast`
		*
		* [ Target ]
		* ^
		* [ Target ]
		* ^
		* +-----------------+
		@@ -567,4 +661,4 @@ * \| Balloon \|
		*
		* [ Target ]
		* ^
		* [ Target ]
		* ^
		* +-----------------+
		@@ -574,4 +668,21 @@ * \| Balloon \|
		*
		*
		*
		* South east
		*
		* * `southEastArrowNorthWest`
		*
		* [ Target ]
		* ^
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		* * `southEastArrowNorthMiddleWest`
		*
		* [ Target ]
		* ^
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		*
		* * `southEastArrowNorth`
		@@ -585,6 +696,14 @@ *
		*
		* * `southEastArrowNorthMiddleEast`
		*
		* [ Target ]
		* ^
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		*
		* * `southEastArrowNorthEast`
		*
		* [ Target ]
		* ^
		* [ Target ]
		* ^
		* +-----------------+
		@@ -594,10 +713,3 @@ * \| Balloon \|
		*
		* * `southEastArrowNorthWest`
		*
		* [ Target ]
		* ^
		* +-----------------+
		* \| Balloon \|
		* +-----------------+
		*
		* See {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#attachTo}.
		@@ -613,16 +725,37 @@ *
		BalloonPanelView.defaultPositions = {
		// ------- North

		northArrowSouth: ( targetRect, balloonRect ) => ( {
		// ------- North west

		northWestArrowSouthWest: ( targetRect, balloonRect ) => ( {
		top: getNorthTop( targetRect, balloonRect ),
		left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
		left: targetRect.left - BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_sw'
		} ),

		northWestArrowSouthMiddleWest: ( targetRect, balloonRect ) => ( {
		top: getNorthTop( targetRect, balloonRect ),
		left: targetRect.left - ( balloonRect.width * .25 ) - BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_smw'
		} ),

		northWestArrowSouth: ( targetRect, balloonRect ) => ( {
		top: getNorthTop( targetRect, balloonRect ),
		left: targetRect.left - balloonRect.width / 2,
		name: 'arrow_s'
		} ),

		northArrowSouthEast: ( targetRect, balloonRect ) => ( {
		northWestArrowSouthMiddleEast: ( targetRect, balloonRect ) => ( {
		top: getNorthTop( targetRect, balloonRect ),
		left: targetRect.left + targetRect.width / 2 - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
		left: targetRect.left - ( balloonRect.width * .75 ) + BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_sme'
		} ),

		northWestArrowSouthEast: ( targetRect, balloonRect ) => ( {
		top: getNorthTop( targetRect, balloonRect ),
		left: targetRect.left - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_se'
		} ),

		// ------- North

		northArrowSouthWest: ( targetRect, balloonRect ) => ( {
		@@ -634,19 +767,23 @@ top: getNorthTop( targetRect, balloonRect ),

		// ------- North west
		northArrowSouthMiddleWest: ( targetRect, balloonRect ) => ( {
		top: getNorthTop( targetRect, balloonRect ),
		left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * .25 ) - BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_smw'
		} ),

		northWestArrowSouth: ( targetRect, balloonRect ) => ( {
		northArrowSouth: ( targetRect, balloonRect ) => ( {
		top: getNorthTop( targetRect, balloonRect ),
		left: targetRect.left - balloonRect.width / 2,
		left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
		name: 'arrow_s'
		} ),

		northWestArrowSouthWest: ( targetRect, balloonRect ) => ( {
		northArrowSouthMiddleEast: ( targetRect, balloonRect ) => ( {
		top: getNorthTop( targetRect, balloonRect ),
		left: targetRect.left - BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_sw'
		left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * .75 ) + BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_sme'
		} ),

		northWestArrowSouthEast: ( targetRect, balloonRect ) => ( {
		northArrowSouthEast: ( targetRect, balloonRect ) => ( {
		top: getNorthTop( targetRect, balloonRect ),
		left: targetRect.left - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
		left: targetRect.left + targetRect.width / 2 - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_se'
		@@ -657,2 +794,13 @@ } ),

		northEastArrowSouthWest: ( targetRect, balloonRect ) => ( {
		top: getNorthTop( targetRect, balloonRect ),
		left: targetRect.right - BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_sw'
		} ),

		northEastArrowSouthMiddleWest: ( targetRect, balloonRect ) => ( {
		top: getNorthTop( targetRect, balloonRect ),
		left: targetRect.right - ( balloonRect.width * .25 ) - BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_smw'
		} ),
		northEastArrowSouth: ( targetRect, balloonRect ) => ( {
		@@ -664,2 +812,8 @@ top: getNorthTop( targetRect, balloonRect ),

		northEastArrowSouthMiddleEast: ( targetRect, balloonRect ) => ( {
		top: getNorthTop( targetRect, balloonRect ),
		left: targetRect.right - ( balloonRect.width * .75 ) + BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_sme'
		} ),

		northEastArrowSouthEast: ( targetRect, balloonRect ) => ( {
		@@ -670,23 +824,36 @@ top: getNorthTop( targetRect, balloonRect ),
		} ),
		// ------- South west

		northEastArrowSouthWest: ( targetRect, balloonRect ) => ( {
		top: getNorthTop( targetRect, balloonRect ),
		left: targetRect.right - BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_sw'
		southWestArrowNorthWest: ( targetRect, balloonRect ) => ( {
		top: getSouthTop( targetRect, balloonRect ),
		left: targetRect.left - BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_nw'
		} ),

		// ------- South
		southWestArrowNorthMiddleWest: ( targetRect, balloonRect ) => ( {
		top: getSouthTop( targetRect, balloonRect ),
		left: targetRect.left - ( balloonRect.width * .25 ) - BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_nmw'
		} ),

		southArrowNorth: ( targetRect, balloonRect ) => ( {
		southWestArrowNorth: ( targetRect, balloonRect ) => ( {
		top: getSouthTop( targetRect, balloonRect ),
		left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
		left: targetRect.left - balloonRect.width / 2,
		name: 'arrow_n'
		} ),

		southArrowNorthEast: ( targetRect, balloonRect ) => ( {
		southWestArrowNorthMiddleEast: ( targetRect, balloonRect ) => ( {
		top: getSouthTop( targetRect, balloonRect ),
		left: targetRect.left + targetRect.width / 2 - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
		left: targetRect.left - ( balloonRect.width * .75 ) + BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_nme'
		} ),

		southWestArrowNorthEast: ( targetRect, balloonRect ) => ( {
		top: getSouthTop( targetRect, balloonRect ),
		left: targetRect.left - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_ne'
		} ),

		// ------- South

		southArrowNorthWest: ( targetRect, balloonRect ) => ( {
		@@ -697,20 +864,23 @@ top: getSouthTop( targetRect, balloonRect ),
		} ),
		southArrowNorthMiddleWest: ( targetRect, balloonRect ) => ( {
		top: getSouthTop( targetRect, balloonRect ),
		left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * 0.25 ) - BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_nmw'
		} ),

		// ------- South west

		southWestArrowNorth: ( targetRect, balloonRect ) => ( {
		southArrowNorth: ( targetRect, balloonRect ) => ( {
		top: getSouthTop( targetRect, balloonRect ),
		left: targetRect.left - balloonRect.width / 2,
		left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
		name: 'arrow_n'
		} ),

		southWestArrowNorthWest: ( targetRect, balloonRect ) => ( {
		southArrowNorthMiddleEast: ( targetRect, balloonRect ) => ( {
		top: getSouthTop( targetRect, balloonRect ),
		left: targetRect.left - BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_nw'
		left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * 0.75 ) + BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_nme'
		} ),

		southWestArrowNorthEast: ( targetRect, balloonRect ) => ( {
		southArrowNorthEast: ( targetRect, balloonRect ) => ( {
		top: getSouthTop( targetRect, balloonRect ),
		left: targetRect.left - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
		left: targetRect.left + targetRect.width / 2 - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_ne'
		@@ -721,2 +891,14 @@ } ),

		southEastArrowNorthWest: ( targetRect, balloonRect ) => ( {
		top: getSouthTop( targetRect, balloonRect ),
		left: targetRect.right - BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_nw'
		} ),

		southEastArrowNorthMiddleWest: ( targetRect, balloonRect ) => ( {
		top: getSouthTop( targetRect, balloonRect ),
		left: targetRect.right - ( balloonRect.width * .25 ) - BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_nmw'
		} ),

		southEastArrowNorth: ( targetRect, balloonRect ) => ( {
		@@ -728,2 +910,8 @@ top: getSouthTop( targetRect, balloonRect ),

		southEastArrowNorthMiddleEast: ( targetRect, balloonRect ) => ( {
		top: getSouthTop( targetRect, balloonRect ),
		left: targetRect.right - ( balloonRect.width * .75 ) + BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_nme'
		} ),

		southEastArrowNorthEast: ( targetRect, balloonRect ) => ( {
		@@ -733,9 +921,4 @@ top: getSouthTop( targetRect, balloonRect ),
		name: 'arrow_ne'
		} ),
		} )

		southEastArrowNorthWest: ( targetRect, balloonRect ) => ( {
		top: getSouthTop( targetRect, balloonRect ),
		left: targetRect.right - BalloonPanelView.arrowHorizontalOffset,
		name: 'arrow_nw'
		} ),
		};
		@@ -742,0 +925,0 @@

src/panel/balloon/contextualballoon.js

		@@ -600,3 +600,3 @@ /**
		},
		this.buttonNextView,
		this.buttonNextView
		]
		@@ -603,0 +603,0 @@ },

src/panel/sticky/stickypanelview.js

		@@ -185,3 +185,3 @@ /**
		bind.if( 'isSticky', 'ck-sticky-panel__content_sticky' ),
		bind.if( '_isStickyToTheLimiter', 'ck-sticky-panel__content_sticky_bottom-limit' ),
		bind.if( '_isStickyToTheLimiter', 'ck-sticky-panel__content_sticky_bottom-limit' )
		],
		@@ -188,0 +188,0 @@ style: {

src/toolbar/balloon/balloontoolbar.js

		@@ -18,3 +18,7 @@ /**
		import { debounce } from 'lodash-es';
		import ResizeObserver from '@ckeditor/ckeditor5-utils/src/dom/resizeobserver';
		import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';

		const toPx = toUnit( 'px' );

		/**
		@@ -49,2 +53,10 @@ * The contextual toolbar.
		/**
		* A cached and normalized `config.balloonToolbar` object.
		*
		* @type {module:core/editor/editorconfig~EditorConfig#balloonToolbar}
		* @private
		*/
		this._balloonConfig = normalizeToolbarConfig( editor.config.get( 'balloonToolbar' ) );

		/**
		* The toolbar view displayed in the balloon.
		@@ -72,2 +84,16 @@ *
		/**
		* An instance of the resize observer that allows to respond to changes in editable's geometry
		* so the toolbar can stay within its boundaries (and group toolbar items that do not fit).
		*
		* Note: Used only when `shouldNotGroupWhenFull` was not set in the
		* {@link module:core/editor/editorconfig~EditorConfig#balloonToolbar configuration}.
		*
		* Note: Created in {@link #init}.
		*
		* @protected
		* @member {module:utils/dom/resizeobserver~ResizeObserver}
		*/
		this._resizeObserver = null;

		/**
		* The contextual balloon plugin instance.
		@@ -131,2 +157,16 @@ *
		} );

		if ( !this._balloonConfig.shouldNotGroupWhenFull ) {
		this.listenTo( editor, 'ready', () => {
		const editableElement = editor.ui.view.editable.element;

		// Set #toolbarView's max-width on the initialization and update it on the editable resize.
		this._resizeObserver = new ResizeObserver( editableElement, () => {
		// The max-width equals 90% of the editable's width for the best user experience.
		// The value keeps the balloon very close to the boundaries of the editable and limits the cases
		// when the balloon juts out from the editable element it belongs to.
		this.toolbarView.maxWidth = toPx( new Rect( editableElement ).width * .9 );
		} );
		} );
		}
		}
		@@ -141,6 +181,5 @@
		afterInit() {
		const config = normalizeToolbarConfig( this.editor.config.get( 'balloonToolbar' ) );
		const factory = this.editor.ui.componentFactory;

		this.toolbarView.fillFromConfig( config.items, factory );
		this.toolbarView.fillFromConfig( this._balloonConfig.items, factory );
		}
		@@ -155,3 +194,6 @@
		_createToolbarView() {
		const toolbarView = new ToolbarView( this.editor.locale );
		const shouldGroupWhenFull = !this._balloonConfig.shouldNotGroupWhenFull;
		const toolbarView = new ToolbarView( this.editor.locale, {
		shouldGroupWhenFull
		} );

		@@ -269,2 +311,6 @@ toolbarView.extendTemplate( {
		this.focusTracker.destroy();

		if ( this._resizeObserver ) {
		this._resizeObserver.destroy();
		}
		}
		@@ -299,5 +345,9 @@
		defaultPositions.northWestArrowSouthEast,
		defaultPositions.northWestArrowSouthMiddleEast,
		defaultPositions.northWestArrowSouthMiddleWest,
		defaultPositions.southWestArrowNorth,
		defaultPositions.southWestArrowNorthWest,
		defaultPositions.southWestArrowNorthEast
		defaultPositions.southWestArrowNorthEast,
		defaultPositions.southWestArrowNorthMiddleWest,
		defaultPositions.southWestArrowNorthMiddleEast
		] : [
		@@ -307,5 +357,9 @@ defaultPositions.southEastArrowNorth,
		defaultPositions.southEastArrowNorthWest,
		defaultPositions.southEastArrowNorthMiddleEast,
		defaultPositions.southEastArrowNorthMiddleWest,
		defaultPositions.northEastArrowSouth,
		defaultPositions.northEastArrowSouthEast,
		defaultPositions.northEastArrowSouthWest
		defaultPositions.northEastArrowSouthWest,
		defaultPositions.northEastArrowSouthMiddleEast,
		defaultPositions.northEastArrowSouthMiddleWest
		];
		@@ -318,2 +372,4 @@ }
		*
		* ## Configuring toolbar items
		*
		* const config = {
		@@ -331,3 +387,14 @@ * balloonToolbar: [ 'bold', 'italic', 'undo', 'redo' ]
		*
		* ## Configuring items grouping
		*
		* You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
		*
		* const config = {
		* balloonToolbar: {
		* items: [ 'bold', 'italic', 'undo', 'redo' ]
		* },
		* shouldNotGroupWhenFull: true
		* };
		*
		* @member {Array.<String>\|Object} module:core/editor/editorconfig~EditorConfig#balloonToolbar
		*/

src/toolbar/block/blockbuttonview.js

		@@ -58,3 +58,3 @@ /**
		top: bind.to( 'top', val => toPx( val ) ),
		left: bind.to( 'left', val => toPx( val ) ),
		left: bind.to( 'left', val => toPx( val ) )
		}
		@@ -61,0 +61,0 @@ }

src/toolbar/toolbarview.js

		@@ -65,2 +65,15 @@ /**
		/**
		* The maximum width of the toolbar element.
		*
		* Note: When set to a specific value (e.g. `'200px'`), the value will affect the behavior of the
		* {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull}
		* option by changing the number of {@link #items} that will be displayed in the toolbar at a time.
		*
		* @observable
		* @default 'auto'
		* @member {String} #maxWidth
		*/
		this.set( 'maxWidth', 'auto' );

		/**
		* A collection of toolbar items (buttons, dropdowns, etc.).
		@@ -182,6 +195,9 @@ *
		bind.to( 'class' ),
		bind.if( 'isCompact', 'ck-toolbar_compact' ),
		bind.if( 'isCompact', 'ck-toolbar_compact' )
		],
		role: 'toolbar',
		'aria-label': bind.to( 'ariaLabel' )
		'aria-label': bind.to( 'ariaLabel' ),
		style: {
		maxWidth: bind.to( 'maxWidth' )
		}
		},
		@@ -323,3 +339,3 @@
		'ck-toolbar__items'
		],
		]
		},
		@@ -576,2 +592,3 @@ children: this.children
		this._enableGroupingOnResize();
		this._enableGroupingOnMaxWidthChange( view );
		}
		@@ -702,2 +719,14 @@
		/**
		* Enables the grouping functionality, just like {@link #_enableGroupingOnResize} but the difference is that
		* it listens to the changes of {@link module:ui/toolbar/toolbarview~ToolbarView#maxWidth} instead.
		*
		* @private
		*/
		_enableGroupingOnMaxWidthChange( view ) {
		view.on( 'change:maxWidth', () => {
		this._updateGrouping();
		} );
		}

		/**
		* When called, it will remove the last item from {@link #ungroupedItems} and move it back
		@@ -806,2 +835,4 @@ * to the {@link #groupedItems} collection.
		*
		* Also see: {@link module:ui/toolbar/toolbarview~ToolbarView#maxWidth}.
		*
		* @member {Boolean} module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull
		@@ -808,0 +839,0 @@ */

src/tooltip/tooltipview.js

		@@ -80,3 +80,3 @@ /**
		{
		text: bind.to( 'text' ),
		text: bind.to( 'text' )
		}
		@@ -83,0 +83,0 @@ ]

lang/translations/ar.po