@ckeditor/ckeditor5-ui 41.0.0 → 41.2.0

package/src/bindings/draggableviewmixin.js

@@ -14,12 +14,12 @@ import { global } from '@ckeditor/ckeditor5-utils';
  * ```
  *
  * Creating a class extending it attaches a set of mouse and touch listeners allowing to observe dragging of the view element:
- * * `mousedown` and `touchstart` on the view element - starting the dragging,
- * * `mousemove` and `touchmove` on the document - updating the view coordinates,
+ * * `mousedown` and `touchstart` on the view element - starting the dragging.
+ * * `mousemove` and `touchmove` on the document - updating the view coordinates.
  * * `mouseup` and `touchend` on the document - stopping the dragging.
  *
- * The mixin itself doesn't provide a visual feedback (i.e. the dragged element doesn't change its position) -
- * it's up to the developer to implement it.
+ * The mixin itself does not provide a visual feedback (that is, the dragged element does not change its position) -
+ * it is up to the developer to implement it.
  */
 export default function DraggableViewMixin(view) {
     class DraggableMixin extends view {
@@ -37,7 +37,7 @@ export default function DraggableViewMixin(view) {
              */
             this._onDragEndBound = this._onDragEnd.bind(this);
             /**
-             * The last coordinates of the view. It's updated on every mouse move.
+             * The last coordinates of the view. It is updated on every mouse move.
              */
             this._lastDraggingCoordinates = { x: 0, y: 0 };
             this.on('render', () => {

package/src/button/button.d.ts

@@ -118,6 +118,9 @@ export default interface Button {
      * (Optional) An XML {@link module:ui/icon/iconview~IconView#content content} of the icon.
      * When defined, an `iconView` should be added to the button.
      *
+     * The user must provide the entire XML string, not just the path. See the
+     * {@glink framework/architecture/ui-library#setting-label-icon-and-tooltip UI library} guide for details.
+     *
      * @observable
      */
     icon: string | undefined;

package/src/colorpicker/colorpickerview.d.ts

@@ -9,8 +9,13 @@ import { type ColorPickerViewConfig } from './utils.js';
 import { type Locale } from '@ckeditor/ckeditor5-utils';
 import View from '../view.js';
 import type ViewCollection from '../viewcollection.js';
-import 'vanilla-colorful/hex-color-picker.js';
+import { HexBase } from 'vanilla-colorful/lib/entrypoints/hex';
 import '../../theme/components/colorpicker/colorpicker.css';
+declare global {
+    interface HTMLElementTagNameMap {
+        'hex-color-picker': HexBase;
+    }
+}
 /**
  * A class which represents a color picker with an input field for defining custom colors.
  */
@@ -18,7 +23,7 @@ export default class ColorPickerView extends View {
     /**
      * Element with saturation and hue sliders.
      */
-    picker: HTMLElement;
+    picker: HexBase;
     /**
      * Container for a `#` sign prefix and an input for displaying and defining custom colors
      * in HEX format.
@@ -96,7 +101,7 @@ export default class ColorPickerView extends View {
 }
 declare class SliderView extends View {
     /**
-     * @param element HTML elemnt of slider in color picker.
+     * @param element HTML element of slider in color picker.
      */
     constructor(element: HTMLElement);
     /**

package/src/colorpicker/colorpickerview.js

@@ -5,13 +5,15 @@
 /**
  * @module ui/colorpicker/colorpickerview
  */
-import { convertColor, convertToHex } from './utils.js';
+import { convertColor, convertToHex, registerCustomElement } from './utils.js';
 import { global, env } from '@ckeditor/ckeditor5-utils';
 import { debounce } from 'lodash-es';
 import View from '../view.js';
 import LabeledFieldView from '../labeledfield/labeledfieldview.js';
 import { createLabeledInputText } from '../labeledfield/utils.js';
-import 'vanilla-colorful/hex-color-picker.js';
+// Custom export due to https://github.com/ckeditor/ckeditor5/issues/15698.
+// eslint-disable-next-line ckeditor5-rules/require-file-extensions-in-imports
+import { HexBase } from 'vanilla-colorful/lib/entrypoints/hex';
 import '../../theme/components/colorpicker/colorpicker.css';
 const waitingTime = 150;
 /**
@@ -79,6 +81,8 @@ export default class ColorPickerView extends View {
      */
     render() {
         super.render();
+        // Extracted to the helper to make it testable.
+        registerCustomElement('hex-color-picker', HexBase);
         this.picker = global.document.createElement('hex-color-picker');
         this.picker.setAttribute('class', 'hex-color-picker');
         this.picker.setAttribute('tabindex', '-1');
@@ -100,8 +104,7 @@ export default class ColorPickerView extends View {
             this.picker.shadowRoot.appendChild(styleSheetForFocusedColorPicker);
         }
         this.picker.addEventListener('color-changed', event => {
-            const customEvent = event;
-            const color = customEvent.detail.value;
+            const color = event.detail.value;
             this._debounceColorPickerEvent(color);
         });
     }
@@ -213,7 +216,7 @@ function convertColorToCommonHexFormat(inputColor) {
 // View abstraction over pointer in color picker.
 class SliderView extends View {
     /**
-     * @param element HTML elemnt of slider in color picker.
+     * @param element HTML element of slider in color picker.
      */
     constructor(element) {
         super();

package/src/colorpicker/utils.d.ts

@@ -41,3 +41,8 @@ export declare function convertColor(color: string, outputFormat: ColorPickerOut
  * @returns A color string.
  */
 export declare function convertToHex(color: string): string;
+/**
+ * Registers the custom element in the
+ * [CustomElementsRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry).
+ */
+export declare function registerCustomElement(elementName: string, constructor: CustomElementConstructor): void;

package/src/colorpicker/utils.js

@@ -58,6 +58,15 @@ export function convertToHex(color) {
     }
     return convertColor(color, 'hex');
 }
+/**
+ * Registers the custom element in the
+ * [CustomElementsRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry).
+ */
+export function registerCustomElement(elementName, constructor) {
+    if (customElements.get(elementName) === undefined) {
+        customElements.define(elementName, constructor);
+    }
+}
 /**
  * Formats the passed color channels according to the requested format.
  *

package/src/colorselector/colorgridsfragmentview.js

@@ -133,7 +133,6 @@ export default class ColorGridsFragmentView extends View {
         }
         this._createColorPickerButton();
         this._addColorSelectorElementsToFocusTracker();
-        this.focus();
     }
     /**
      * Focuses the component.

package/src/dialog/dialog.d.ts

@@ -54,15 +54,15 @@ export default class Dialog extends Plugin {
     /**
      * Initiates listeners for the `show` and `hide` events emitted by this plugin.
      *
-     * We couldn't simply decorate the {@link #show} and {@link #hide} methods to fire events,
-     * because they would be fired in the wrong order - first would be `show` and then `hide`
+     * We could not simply decorate the {@link #show} and {@link #hide} methods to fire events,
+     * because they would be fired in the wrong order – first would be `show` and then `hide`
      * (because showing the dialog actually starts with hiding the previously visible one).
      * Hence, we added private methods {@link #_show} and {@link #_hide} which are called on events
      * in the desired sequence.
      */
     private _initShowHideListeners;
     /**
-     * Initiates keystroke handler for toggling the focus between the editor and dialog view.
+     * Initiates keystroke handler for toggling the focus between the editor and the dialog view.
      */
     private _initFocusToggler;
     /**
@@ -72,12 +72,12 @@ export default class Dialog extends Plugin {
     /**
      * Displays a dialog window.
      *
-     * This method requires a {@link ~DialogDefinition} that defines dialog's content, title, icon, action buttons, etc.
+     * This method requires a {@link ~DialogDefinition} that defines the dialog's content, title, icon, action buttons, etc.
      *
      * For example, the following definition will create a dialog with:
-     * * a header consisting of an icon, a title and a "Close" button (it's added by default),
-     * * a content consisting of a view with a single paragraph,
-     * * a footer consisting of two buttons: "Yes" and "No".
+     * * A header consisting of an icon, a title, and a "Close" button (it is added by default).
+     * * A content consisting of a view with a single paragraph.
+     * * A footer consisting of two buttons: "Yes" and "No".
      *
      * ```js
      * // Create the view that will be used as the dialog's content.
@@ -102,7 +102,7 @@ export default class Dialog extends Plugin {
      * // Show the dialog.
      * editor.plugins.get( 'Dialog' ).show( {
      *	id: 'myDialog',
-     * 	icon: 'myIcon', // this should be an SVG string
+     * 	icon: 'myIcon', // This should be an SVG string.
      * 	title: 'My dialog',
      * 	content: textView,
      * 	actionButtons: [
@@ -122,18 +122,18 @@ export default class Dialog extends Plugin {
      * ```
      *
      * By specifying the {@link ~DialogDefinition#onShow} and {@link ~DialogDefinition#onHide} callbacks
-     * it's also possible to add callbacks that will be called when the dialog is shown or hidden.
+     * it is also possible to add callbacks that will be called when the dialog is shown or hidden.
      *
      * For example, the callbacks in the following definition:
-     * * disable the default behavior of the `Esc` key,
-     * * fire a custom event when the dialog gets hidden.
+     * * Disable the default behavior of the <kbd>Esc</kbd> key.
+     * * Fire a custom event when the dialog gets hidden.
      *
      * ```js
      * editor.plugins.get( 'Dialog' ).show( {
      * 	// ...
      * 	onShow: dialog => {
      * 		dialog.view.on( 'close', ( evt, data ) => {
-     * 			// Only prevent the event from `Esc` key - don't affect the other ways of closing the dialog.
+     * 			// Only prevent the event from the "Esc" key - do not affect the other ways of closing the dialog.
      * 			if ( data.source === 'escKeyPress' ) {
      * 				evt.stop();
      * 			}
@@ -173,8 +173,8 @@ export default class Dialog extends Plugin {
  */
 export interface DialogDefinition {
     /**
-     * A unique identifier of the dialog. Allows for distinguishing between different dialogs and their visibility.
-     * For instance, when open, the id of currently visible dialog is stored in {@link module:ui/dialog/dialog~Dialog#id}.
+     * A unique identifier of the dialog. It allows for distinguishing between different dialogs and their visibility.
+     * For instance, when open, the ID of the currently visible dialog is stored in {@link module:ui/dialog/dialog~Dialog#id}.
      *
      * The `id` is also passed along the {@link module:ui/dialog/dialog~DialogShowEvent} and {@link module:ui/dialog/dialog~DialogHideEvent}
      * events.
@@ -188,7 +188,7 @@ export interface DialogDefinition {
      */
     icon?: string;
     /**
-     * A title displayed in dialogs's header. Also works as an accessible name of the dialog used by assistive technologies.
+     * A title displayed in the dialogs's header. It also works as an accessible name of the dialog used by assistive technologies.
      *
      * When not set, the header is not displayed. Affects {@link #icon} and {@link #hasCloseButton}.
      */
@@ -213,7 +213,7 @@ export interface DialogDefinition {
      */
     className?: string;
     /**
-     * When set `true`, the dialog will become a modal, i.e. it will block the UI until it is closed.
+     * When set to `true`, the dialog will become a modal, that is, it will block the UI until it is closed.
      */
     isModal?: boolean;
     /**
@@ -224,18 +224,18 @@ export interface DialogDefinition {
      */
     position?: typeof DialogViewPosition[keyof typeof DialogViewPosition];
     /**
-     * A callback called when the dialog shows up with `low` priority. It allows for setting up the dialog's {@link #content}.
+     * A callback called when the dialog shows up with a `low` priority. It allows for setting up the dialog's {@link #content}.
      */
     onShow?: (dialog: Dialog) => void;
     /**
-     * A callback called when the dialog hides with `low` priority.
-     * It allows for cleaning up (e.g. resetting) the dialog's {@link #content}.
+     * A callback called when the dialog hides with a `low` priority.
+     * It allows for cleaning up (for example, resetting) the dialog's {@link #content}.
      */
     onHide?: (dialog: Dialog) => void;
 }
 /**
- * An event fired after {@link module:ui/dialog/dialog~Dialog#show} is called. You can use it to customize behavior
- * any dialog.
+ * An event fired after {@link module:ui/dialog/dialog~Dialog#show} is called. You can use it to customize the behavior
+ * of any dialog.
  *
  * ```js
  * import { DialogViewPosition } from 'ckeditor5/src/ui.js';
@@ -255,8 +255,8 @@ export type DialogShowEvent = {
     args: [dialogDefinition: DialogDefinition];
 };
 /**
- * An event fired after {@link module:ui/dialog/dialog~Dialog#hide} is called. You can use it to customize behavior
- * any dialog.
+ * An event fired after {@link module:ui/dialog/dialog~Dialog#hide} is called. You can use it to customize the behavior
+ * of any dialog.
  *
  * ```js
  * // Logs after the "Find and Replace" dialog gets hidden

package/src/dialog/dialog.js

@@ -19,16 +19,26 @@ export default class Dialog extends Plugin {
      */
     constructor(editor) {
         super(editor);
+        const t = editor.t;
         this._initShowHideListeners();
         this._initFocusToggler();
         this._initMultiRootIntegration();
         this.set('id', null);
+        // Add the information about the keystroke to the accessibility database.
+        editor.accessibility.addKeystrokeInfos({
+            categoryId: 'navigation',
+            keystrokes: [{
+                    label: t('Move focus in and out of an active dialog window'),
+                    keystroke: 'Ctrl+F6',
+                    mayRequireFn: true
+                }]
+        });
     }
     /**
      * Initiates listeners for the `show` and `hide` events emitted by this plugin.
      *
-     * We couldn't simply decorate the {@link #show} and {@link #hide} methods to fire events,
-     * because they would be fired in the wrong order - first would be `show` and then `hide`
+     * We could not simply decorate the {@link #show} and {@link #hide} methods to fire events,
+     * because they would be fired in the wrong order – first would be `show` and then `hide`
      * (because showing the dialog actually starts with hiding the previously visible one).
      * Hence, we added private methods {@link #_show} and {@link #_hide} which are called on events
      * in the desired sequence.
@@ -57,7 +67,7 @@ export default class Dialog extends Plugin {
         }, { priority: 'low' });
     }
     /**
-     * Initiates keystroke handler for toggling the focus between the editor and dialog view.
+     * Initiates keystroke handler for toggling the focus between the editor and the dialog view.
      */
     _initFocusToggler() {
         const editor = this.editor;
@@ -94,12 +104,12 @@ export default class Dialog extends Plugin {
     /**
      * Displays a dialog window.
      *
-     * This method requires a {@link ~DialogDefinition} that defines dialog's content, title, icon, action buttons, etc.
+     * This method requires a {@link ~DialogDefinition} that defines the dialog's content, title, icon, action buttons, etc.
      *
      * For example, the following definition will create a dialog with:
-     * * a header consisting of an icon, a title and a "Close" button (it's added by default),
-     * * a content consisting of a view with a single paragraph,
-     * * a footer consisting of two buttons: "Yes" and "No".
+     * * A header consisting of an icon, a title, and a "Close" button (it is added by default).
+     * * A content consisting of a view with a single paragraph.
+     * * A footer consisting of two buttons: "Yes" and "No".
      *
      * ```js
      * // Create the view that will be used as the dialog's content.
@@ -124,7 +134,7 @@ export default class Dialog extends Plugin {
      * // Show the dialog.
      * editor.plugins.get( 'Dialog' ).show( {
      *	id: 'myDialog',
-     * 	icon: 'myIcon', // this should be an SVG string
+     * 	icon: 'myIcon', // This should be an SVG string.
      * 	title: 'My dialog',
      * 	content: textView,
      * 	actionButtons: [
@@ -144,18 +154,18 @@ export default class Dialog extends Plugin {
      * ```
      *
      * By specifying the {@link ~DialogDefinition#onShow} and {@link ~DialogDefinition#onHide} callbacks
-     * it's also possible to add callbacks that will be called when the dialog is shown or hidden.
+     * it is also possible to add callbacks that will be called when the dialog is shown or hidden.
      *
      * For example, the callbacks in the following definition:
-     * * disable the default behavior of the `Esc` key,
-     * * fire a custom event when the dialog gets hidden.
+     * * Disable the default behavior of the <kbd>Esc</kbd> key.
+     * * Fire a custom event when the dialog gets hidden.
      *
      * ```js
      * editor.plugins.get( 'Dialog' ).show( {
      * 	// ...
      * 	onShow: dialog => {
      * 		dialog.view.on( 'close', ( evt, data ) => {
-     * 			// Only prevent the event from `Esc` key - don't affect the other ways of closing the dialog.
+     * 			// Only prevent the event from the "Esc" key - do not affect the other ways of closing the dialog.
      * 			if ( data.source === 'escKeyPress' ) {
      * 				evt.stop();
      * 			}

package/src/dialog/dialogactionsview.d.ts

@@ -13,7 +13,7 @@ import ViewCollection from '../viewcollection.js';
 import FocusCycler, { type FocusableView } from '../focuscycler.js';
 import '../../theme/components/dialog/dialogactions.css';
 /**
- * A dialog actions view class. Contains button views which are used to execute dialog actions.
+ * A dialog actions view class. It contains button views which are used to execute dialog actions.
  */
 export default class DialogActionsView extends View {
     /**
@@ -54,13 +54,13 @@ export default class DialogActionsView extends View {
      */
     focus(direction?: 1 | -1): void;
     /**
-     * Add all elements from the {@link #children} collection to the {@link #_focusables} collection
+     * Adds all elements from the {@link #children} collection to the {@link #_focusables} collection
      * and to the {@link #_focusTracker} instance.
      */
     private _updateFocusCyclableItems;
 }
 /**
- * A dialog action button definition. It's a slightly modified version
+ * A dialog action button definition. It is a slightly modified version
  * of the {@link module:ui/button/button~Button} definition.
  */
 export type DialogActionButtonDefinition = Pick<Button, 'label'> & Partial<Pick<Button, 'withText' | 'class' | 'icon'>> & {

package/src/dialog/dialogactionsview.js

@@ -12,7 +12,7 @@ import ViewCollection from '../viewcollection.js';
 import FocusCycler from '../focuscycler.js';
 import '../../theme/components/dialog/dialogactions.css';
 /**
- * A dialog actions view class. Contains button views which are used to execute dialog actions.
+ * A dialog actions view class. It contains button views which are used to execute dialog actions.
  */
 export default class DialogActionsView extends View {
     /**
@@ -86,7 +86,7 @@ export default class DialogActionsView extends View {
         }
     }
     /**
-     * Add all elements from the {@link #children} collection to the {@link #_focusables} collection
+     * Adds all elements from the {@link #children} collection to the {@link #_focusables} collection
      * and to the {@link #_focusTracker} instance.
      */
     _updateFocusCyclableItems() {

package/src/dialog/dialogview.d.ts

@@ -18,17 +18,17 @@ import '../../theme/components/dialog/dialog.css';
 /**
  * Available dialog view positions:
  *
- * * `DialogViewPosition.SCREEN_CENTER` - a fixed position in the center of the screen,
- * * `DialogViewPosition.EDITOR_CENTER` - a dynamic position in the center of the editor editable area,
- * * `DialogViewPosition.EDITOR_TOP_SIDE` - a dynamic position at the top-right (for the left-to-right languages)
- * or top-left (for right-to-left languages) corner of the editor editable area,
- * * `DialogViewPosition.EDITOR_TOP_CENTER` - a dynamic position at the top-center of the editor editable area,
- * * `DialogViewPosition.EDITOR_BOTTOM_CENTER` - a dynamic position at the bottom-center of the editor editable area,
- * * `DialogViewPosition.EDITOR_ABOVE_CENTER` - a dynamic position centered above the editor editable area,
- * * `DialogViewPosition.EDITOR_BELOW_CENTER` - a dynamic position centered below the editor editable area.
+ * * `DialogViewPosition.SCREEN_CENTER` – A fixed position in the center of the screen.
+ * * `DialogViewPosition.EDITOR_CENTER` – A dynamic position in the center of the editor editable area.
+ * * `DialogViewPosition.EDITOR_TOP_SIDE` – A dynamic position at the top-right (for the left-to-right languages)
+ * or top-left (for right-to-left languages) corner of the editor editable area.
+ * * `DialogViewPosition.EDITOR_TOP_CENTER` – A dynamic position at the top-center of the editor editable area.
+ * * `DialogViewPosition.EDITOR_BOTTOM_CENTER` – A dynamic position at the bottom-center of the editor editable area.
+ * * `DialogViewPosition.EDITOR_ABOVE_CENTER` – A dynamic position centered above the editor editable area.
+ * * `DialogViewPosition.EDITOR_BELOW_CENTER` – A dynamic position centered below the editor editable area.
  *
  * The position of a dialog is specified by a {@link module:ui/dialog/dialog~DialogDefinition#position `position` property} of a
- * definition passed to {@link module:ui/dialog/dialog~Dialog#show} method.
+ * definition passed to the {@link module:ui/dialog/dialog~Dialog#show} method.
  */
 export declare const DialogViewPosition: {
     readonly SCREEN_CENTER: "screen-center";
@@ -46,15 +46,15 @@ declare const DialogView_base: import("@ckeditor/ckeditor5-utils").Mixed<typeof
 export default class DialogView extends DialogView_base implements DraggableView {
     /**
      * A collection of the child views inside of the dialog.
-     * Dialog can have 3 optional parts: header, content and actions.
+     * A dialog can have 3 optional parts: header, content, and actions.
      */
     readonly parts: ViewCollection;
     /**
-     * A header view of the dialog. It's also a drag handle of the dialog.
+     * A header view of the dialog. It is also a drag handle of the dialog.
      */
     headerView?: FormHeaderView;
     /**
-     * A close button view. It's automatically added to the header view if present.
+     * A close button view. It is automatically added to the header view if present.
      */
     closeButtonView?: ButtonView;
     /**
@@ -79,11 +79,11 @@ export default class DialogView extends DialogView_base implements DraggableView
     readonly focusTracker: FocusTracker;
     /**
      * A flag indicating if the dialog was moved manually. If so, its position
-     * won't be updated automatically upon window resize or document scroll.
+     * will not be updated automatically upon window resize or document scroll.
      */
     wasMoved: boolean;
     /**
-     * A flag indicating if this DialogView is a modal.
+     * A flag indicating if this dialog view is a modal.
      *
      * @observable
      */
@@ -117,7 +117,7 @@ export default class DialogView extends DialogView_base implements DraggableView
      */
     _isVisible: boolean;
     /**
-     * A flag indicating if dialog is transparent. It is used to prevent the dialog from being visible
+     * A flag indicating if a dialog is transparent. It is used to prevent the dialog from being visible
      * before its position is calculated.
      *
      * @observable
@@ -125,25 +125,25 @@ export default class DialogView extends DialogView_base implements DraggableView
      */
     _isTransparent: boolean;
     /**
-     * The calculated `top` CSS dialog property used for positioning.
+     * The calculated dialog `top` CSS property used for positioning.
      *
      * @observable
      * @internal
      */
     _top: number;
     /**
-     * The calculated `left` CSS dialog property used for positioning.
+     * The calculated dialog `left` CSS property used for positioning.
      *
      * @observable
      * @internal
      */
     _left: number;
     /**
-     * Callback returning the DOM root that requested the dialog.
+     * A callback returning the DOM root that requested the dialog.
      */
     private _getCurrentDomRoot;
     /**
-     * Callback returning the configured editor viewport offset.
+     * A callback returning the configured editor viewport offset.
      */
     private _getViewportOffset;
     /**
@@ -171,7 +171,7 @@ export default class DialogView extends DialogView_base implements DraggableView
     get dragHandleElement(): HTMLElement | null;
     /**
      * Creates the dialog parts. Which of them are created depends on the arguments passed to the method.
-     * There are no rules regarding the dialog construction, i.e. no part is mandatory.
+     * There are no rules regarding the dialog construction, that is, no part is mandatory.
      * Each part can only be created once.
      *
      * @internal
@@ -188,7 +188,7 @@ export default class DialogView extends DialogView_base implements DraggableView
      */
     focus(): void;
     /**
-     * Normalises the passed coordinates to make sure the dialog view
+     * Normalizes the passed coordinates to make sure the dialog view
      * is displayed within the visible viewport and moves it there.
      *
      * @internal
@@ -206,11 +206,11 @@ export default class DialogView extends DialogView_base implements DraggableView
     moveBy(left: number, top: number): void;
     /**
      * Moves the dialog view to the off-screen position.
-     * Used when there's no space to display the dialog.
+     * Used when there is no space to display the dialog.
      */
     private _moveOffScreen;
     /**
-     * Recalculates the dialog according to the set position and viewport
+     * Recalculates the dialog according to the set position and viewport,
      * and moves it to the new position.
      */
     updatePosition(): void;
@@ -232,7 +232,7 @@ export default class DialogView extends DialogView_base implements DraggableView
      */
     private _updateFocusCyclableItems;
     /**
-     * Creates a close button view that is displayed in the header view corner.
+     * Creates the close button view that is displayed in the header view corner.
      */
     private _createCloseButton;
 }

package/src/dialog/dialogview.js

@@ -6,6 +6,7 @@
  * @module ui/dialog/dialogview
  */
 import { KeystrokeHandler, FocusTracker, Rect, global, toUnit } from '@ckeditor/ckeditor5-utils';
+import { icons } from '@ckeditor/ckeditor5-core';
 import ViewCollection from '../viewcollection.js';
 import View from '../view.js';
 import FormHeaderView from '../formheader/formheaderview.js';
@@ -16,21 +17,20 @@ import DialogActionsView from './dialogactionsview.js';
 import DialogContentView from './dialogcontentview.js';
 import '../../theme/components/dialog/dialog.css';
 // @if CK_DEBUG_DIALOG // const RectDrawer = require( '@ckeditor/ckeditor5-utils/tests/_utils/rectdrawer' ).default;
-import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
 /**
  * Available dialog view positions:
  *
- * * `DialogViewPosition.SCREEN_CENTER` - a fixed position in the center of the screen,
- * * `DialogViewPosition.EDITOR_CENTER` - a dynamic position in the center of the editor editable area,
- * * `DialogViewPosition.EDITOR_TOP_SIDE` - a dynamic position at the top-right (for the left-to-right languages)
- * or top-left (for right-to-left languages) corner of the editor editable area,
- * * `DialogViewPosition.EDITOR_TOP_CENTER` - a dynamic position at the top-center of the editor editable area,
- * * `DialogViewPosition.EDITOR_BOTTOM_CENTER` - a dynamic position at the bottom-center of the editor editable area,
- * * `DialogViewPosition.EDITOR_ABOVE_CENTER` - a dynamic position centered above the editor editable area,
- * * `DialogViewPosition.EDITOR_BELOW_CENTER` - a dynamic position centered below the editor editable area.
+ * * `DialogViewPosition.SCREEN_CENTER` – A fixed position in the center of the screen.
+ * * `DialogViewPosition.EDITOR_CENTER` – A dynamic position in the center of the editor editable area.
+ * * `DialogViewPosition.EDITOR_TOP_SIDE` – A dynamic position at the top-right (for the left-to-right languages)
+ * or top-left (for right-to-left languages) corner of the editor editable area.
+ * * `DialogViewPosition.EDITOR_TOP_CENTER` – A dynamic position at the top-center of the editor editable area.
+ * * `DialogViewPosition.EDITOR_BOTTOM_CENTER` – A dynamic position at the bottom-center of the editor editable area.
+ * * `DialogViewPosition.EDITOR_ABOVE_CENTER` – A dynamic position centered above the editor editable area.
+ * * `DialogViewPosition.EDITOR_BELOW_CENTER` – A dynamic position centered below the editor editable area.
  *
  * The position of a dialog is specified by a {@link module:ui/dialog/dialog~DialogDefinition#position `position` property} of a
- * definition passed to {@link module:ui/dialog/dialog~Dialog#show} method.
+ * definition passed to the {@link module:ui/dialog/dialog~Dialog#show} method.
  */
 export const DialogViewPosition = {
     SCREEN_CENTER: 'screen-center',
@@ -53,7 +53,7 @@ class DialogView extends DraggableViewMixin(View) {
         super(locale);
         /**
          * A flag indicating if the dialog was moved manually. If so, its position
-         * won't be updated automatically upon window resize or document scroll.
+         * will not be updated automatically upon window resize or document scroll.
          */
         this.wasMoved = false;
         const bind = this.bindTemplate;
@@ -176,7 +176,7 @@ class DialogView extends DraggableViewMixin(View) {
     }
     /**
      * Creates the dialog parts. Which of them are created depends on the arguments passed to the method.
-     * There are no rules regarding the dialog construction, i.e. no part is mandatory.
+     * There are no rules regarding the dialog construction, that is, no part is mandatory.
      * Each part can only be created once.
      *
      * @internal
@@ -215,7 +215,7 @@ class DialogView extends DraggableViewMixin(View) {
         this._focusCycler.focusFirst();
     }
     /**
-     * Normalises the passed coordinates to make sure the dialog view
+     * Normalizes the passed coordinates to make sure the dialog view
      * is displayed within the visible viewport and moves it there.
      *
      * @internal
@@ -256,13 +256,13 @@ class DialogView extends DraggableViewMixin(View) {
     }
     /**
      * Moves the dialog view to the off-screen position.
-     * Used when there's no space to display the dialog.
+     * Used when there is no space to display the dialog.
      */
     _moveOffScreen() {
         this._moveTo(-9999, -9999);
     }
     /**
-     * Recalculates the dialog according to the set position and viewport
+     * Recalculates the dialog according to the set position and viewport,
      * and moves it to the new position.
      */
     updatePosition() {
@@ -431,7 +431,7 @@ class DialogView extends DraggableViewMixin(View) {
         });
     }
     /**
-     * Creates a close button view that is displayed in the header view corner.
+     * Creates the close button view that is displayed in the header view corner.
      */
     _createCloseButton() {
         const buttonView = new ButtonView(this.locale);
@@ -439,7 +439,7 @@ class DialogView extends DraggableViewMixin(View) {
         buttonView.set({
             label: t('Close'),
             tooltip: true,
-            icon: cancelIcon
+            icon: icons.cancel
         });
         buttonView.on('execute', () => this.fire('close', { source: 'closeButton' }));
         return buttonView;