@ckeditor/ckeditor5-ui 44.3.0 → 45.0.0-alpha.1

package/src/editorui/accessibilityhelp/accessibilityhelp.js

@@ -6,12 +6,12 @@
  * @module ui/editorui/accessibilityhelp/accessibilityhelp
  */
 import { Plugin } from '@ckeditor/ckeditor5-core';
+import { IconAccessibility } from '@ckeditor/ckeditor5-icons';
 import ButtonView from '../../button/buttonview.js';
 import Dialog from '../../dialog/dialog.js';
 import MenuBarMenuListItemButtonView from '../../menubar/menubarmenulistitembuttonview.js';
 import AccessibilityHelpContentView from './accessibilityhelpcontentview.js';
 import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils';
-import accessibilityIcon from '../../../theme/icons/accessibility.svg';
 import '../../../theme/components/editorui/accessibilityhelp.css';
 /**
  * A plugin that brings the accessibility help dialog to the editor available under the <kbd>Alt</kbd>+<kbd>0</kbd>
@@ -22,14 +22,11 @@ import '../../../theme/components/editorui/accessibilityhelp.css';
  * added using the API provided by the {@link module:core/accessibility~Accessibility} class.
  */
 export default class AccessibilityHelp extends Plugin {
-    constructor() {
-        super(...arguments);
-        /**
-         * The view that displays the dialog content (list of keystrokes).
-         * Created when the dialog is opened for the first time.
-         */
-        this.contentView = null;
-    }
+    /**
+     * The view that displays the dialog content (list of keystrokes).
+     * Created when the dialog is opened for the first time.
+     */
+    contentView = null;
     /**
      * @inheritDoc
      */
@@ -84,7 +81,7 @@ export default class AccessibilityHelp extends Plugin {
         const view = new ButtonClass(locale);
         view.set({
             keystroke: 'Alt+0',
-            icon: accessibilityIcon,
+            icon: IconAccessibility,
             isToggleable: true
         });
         view.on('execute', () => this._toggleDialog());
@@ -136,7 +133,7 @@ export default class AccessibilityHelp extends Plugin {
                 id: 'accessibilityHelp',
                 className: 'ck-accessibility-help-dialog',
                 title: t('Accessibility help'),
-                icon: accessibilityIcon,
+                icon: IconAccessibility,
                 hasCloseButton: true,
                 content: this.contentView
             });

package/src/editorui/bodycollection.js

@@ -57,6 +57,19 @@ import { createElement } from '@ckeditor/ckeditor5-utils';
  * last body collection is {@link ~BodyCollection#detachFromDom detached} and does not require any special handling.
  */
 export default class BodyCollection extends ViewCollection {
+    /**
+     * The {@link module:core/editor/editor~Editor#locale editor's locale} instance.
+     * See the view {@link module:ui/view~View#locale locale} property.
+     */
+    locale;
+    /**
+     * The element holding elements of the body collection.
+     */
+    _bodyCollectionContainer;
+    /**
+     * The wrapper element that holds all of the {@link #_bodyCollectionContainer} elements.
+     */
+    static _bodyWrapper;
     /**
      * Creates a new instance of the {@link module:ui/editorui/bodycollection~BodyCollection}.
      *

package/src/editorui/boxed/boxededitoruiview.js

@@ -12,6 +12,20 @@ import LabelView from '../../label/labelview.js';
  * consisting of a toolbar and an editable area, enclosed within a box.
  */
 export default class BoxedEditorUIView extends EditorUIView {
+    /**
+     * Collection of the child views located in the top (`.ck-editor__top`)
+     * area of the UI.
+     */
+    top;
+    /**
+     * Collection of the child views located in the main (`.ck-editor__main`)
+     * area of the UI.
+     */
+    main;
+    /**
+     * Voice label of the UI.
+     */
+    _voiceLabelView;
     /**
      * Creates an instance of the boxed editor UI view class.
      *

package/src/editorui/editorui.d.ts

@@ -228,7 +228,7 @@ export default abstract class EditorUI extends /* #__PURE__ */ EditorUI_base {
     /**
      * Initializes menu bar.
      */
-    protected _initMenuBar(menuBarView: MenuBarView): void;
+    initMenuBar(menuBarView: MenuBarView): void;
     /**
      * Returns viewport offsets object:
      *

package/src/editorui/editorui.js

@@ -17,6 +17,60 @@ import { normalizeMenuBarConfig } from '../menubar/utils.js';
  * A class providing the minimal interface that is required to successfully bootstrap any editor UI.
  */
 export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
+    /**
+     * The editor that the UI belongs to.
+     */
+    editor;
+    /**
+     * An instance of the {@link module:ui/componentfactory~ComponentFactory}, a registry used by plugins
+     * to register factories of specific UI components.
+     */
+    componentFactory;
+    /**
+     * Stores the information about the editor UI focus and propagates it so various plugins and components
+     * are unified as a focus group.
+     */
+    focusTracker;
+    /**
+     * Manages the tooltips displayed on mouseover and focus across the UI.
+     */
+    tooltipManager;
+    /**
+     * A helper that enables the "powered by" feature in the editor and renders a link to the project's webpage.
+     */
+    poweredBy;
+    /**
+     * A helper that enables the "evaluation badge" feature in the editor.
+     */
+    evaluationBadge;
+    /**
+     * A helper that manages the content of an `aria-live` regions used by editor features to announce status changes
+     * to screen readers.
+     */
+    ariaLiveAnnouncer;
+    /**
+     * Indicates the UI is ready. Set `true` after {@link #event:ready} event is fired.
+     *
+     * @readonly
+     * @default false
+     */
+    isReady = false;
+    /**
+     * Stores all editable elements used by the editor instance.
+     */
+    _editableElementsMap = new Map();
+    /**
+     * All available & focusable toolbars.
+     */
+    _focusableToolbarDefinitions = [];
+    /**
+     * All additional menu bar items, groups or menus that have their default location defined.
+     */
+    _extraMenuBarElements = [];
+    /**
+     * The last focused element to which focus should return on `Esc` press.
+     */
+    _lastFocusedForeignElement = null;
     /**
      * Creates an instance of the editor UI class.
      *
@@ -24,29 +78,6 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
      */
     constructor(editor) {
         super();
-        /**
-         * Indicates the UI is ready. Set `true` after {@link #event:ready} event is fired.
-         *
-         * @readonly
-         * @default false
-         */
-        this.isReady = false;
-        /**
-         * Stores all editable elements used by the editor instance.
-         */
-        this._editableElementsMap = new Map();
-        /**
-         * All available & focusable toolbars.
-         */
-        this._focusableToolbarDefinitions = [];
-        /**
-         * All additional menu bar items, groups or menus that have their default location defined.
-         */
-        this._extraMenuBarElements = [];
-        /**
-         * The last focused element to which focus should return on `Esc` press.
-         */
-        this._lastFocusedForeignElement = null;
         const editingView = editor.editing.view;
         this.editor = editor;
         this.componentFactory = new ComponentFactory(editor);
@@ -257,7 +288,7 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
     /**
      * Initializes menu bar.
      */
-    _initMenuBar(menuBarView) {
+    initMenuBar(menuBarView) {
         const menuBarViewElement = menuBarView.element;
         this.focusTracker.add(menuBarViewElement);
         this.editor.keystrokes.listenTo(menuBarViewElement);
@@ -516,7 +547,7 @@ function getToolbarDefinitionWeight(toolbarDef) {
     }
     // Prioritize contextual toolbars. They are displayed at the selection.
     if (options.isContextual) {
-        weight--;
+        weight -= 2;
     }
     return weight;
 }

package/src/editorui/editoruiview.d.ts

@@ -11,6 +11,7 @@ import type EditableUIView from '../editableui/editableuiview.js';
 import type { Locale, LocaleTranslate } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/editorui/editorui.css';
 import type MenuBarView from '../menubar/menubarview.js';
+import type ToolbarView from '../toolbar/toolbarview.js';
 /**
  * The editor UI view class. Base class for the editor main views.
  */
@@ -24,9 +25,22 @@ export default abstract class EditorUIView extends View {
     t: LocaleTranslate;
     abstract get editable(): EditableUIView;
     /**
-     * Menu bar view instance. May not be initialized in some editor types.
+     * Menu bar view instance. Initialized by default in:
+     *
+     * * balloon editor;
+     * * decoupled editor;
+     * * multiroot editor.
      */
     menuBarView?: MenuBarView;
+    /**
+     * Toolbar view instance. Initialized by default in:
+     *
+     * * classic editor;
+     * * decoupled editor;
+     * * inline editor;
+     * * multiroot editor.
+     */
+    toolbar?: ToolbarView;
     /**
      * Creates an instance of the editor UI view class.
      *

package/src/editorui/editoruiview.js

@@ -12,6 +12,28 @@ import '../../theme/components/editorui/editorui.css';
  * The editor UI view class. Base class for the editor main views.
  */
 export default class EditorUIView extends View {
+    /**
+     * Collection of the child views, detached from the DOM
+     * structure of the editor, like panels, icons etc.
+     */
+    body;
+    /**
+     * Menu bar view instance. Initialized by default in:
+     *
+     * * balloon editor;
+     * * decoupled editor;
+     * * multiroot editor.
+     */
+    menuBarView;
+    /**
+     * Toolbar view instance. Initialized by default in:
+     *
+     * * classic editor;
+     * * decoupled editor;
+     * * inline editor;
+     * * multiroot editor.
+     */
+    toolbar;
     /**
      * Creates an instance of the editor UI view class.
      *

package/src/editorui/evaluationbadge.js

@@ -12,13 +12,13 @@ import Badge from '../badge/badge.js';
  * @private
  */
 export default class EvaluationBadge extends Badge {
+    licenseTypeMessage = {
+        evaluation: 'For evaluation purposes only',
+        trial: 'For evaluation purposes only',
+        development: 'For development purposes only'
+    };
     constructor(editor) {
         super(editor, { balloonClass: 'ck-evaluation-badge-balloon' });
-        this.licenseTypeMessage = {
-            evaluation: 'For evaluation purposes only',
-            trial: 'For evaluation purposes only',
-            development: 'For development purposes only'
-        };
     }
     /**
      * Enables "evaluation badge" label.

package/src/editorui/poweredby.d.ts

@@ -2,12 +2,9 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-/**
- * @module ui/editorui/poweredby
- */
-import type { Editor, UiConfig } from '@ckeditor/ckeditor5-core';
 import View from '../view.js';
 import Badge from '../badge/badge.js';
+import type { Editor, UiConfig } from '@ckeditor/ckeditor5-core';
 type PoweredByConfig = Required<UiConfig>['poweredBy'];
 /**
  * A helper that enables the "powered by" feature in the editor and renders a link to the project's

package/src/editorui/poweredby.js

@@ -2,11 +2,14 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
+/**
+ * @module ui/editorui/poweredby
+ */
+import { IconProjectLogo } from '@ckeditor/ckeditor5-icons';
 import { parseBase64EncodedObject } from '@ckeditor/ckeditor5-utils';
 import View from '../view.js';
 import Badge from '../badge/badge.js';
 import IconView from '../icon/iconview.js';
-import poweredByIcon from '../../theme/icons/project-logo.svg';
 const DEFAULT_LABEL = 'Powered by';
 /**
  * A helper that enables the "powered by" feature in the editor and renders a link to the project's
@@ -77,7 +80,7 @@ class PoweredByView extends View {
         const iconView = new IconView();
         const bind = this.bindTemplate;
         iconView.set({
-            content: poweredByIcon,
+            content: IconProjectLogo,
             isColorInherited: false
         });
         this.setTemplate({

package/src/focuscycler.js

@@ -59,6 +59,37 @@ import { isVisible, EmitterMixin } from '@ckeditor/ckeditor5-utils';
  * Check out the {@glink framework/deep-dive/ui/focus-tracking "Deep dive into focus tracking"} guide to learn more.
  */
 export default class FocusCycler extends /* #__PURE__ */ EmitterMixin() {
+    /**
+     * A {@link module:ui/focuscycler~FocusableView focusable views} collection that the cycler operates on.
+     */
+    focusables;
+    /**
+     * A focus tracker instance that the cycler uses to determine the current focus
+     * state in {@link #focusables}.
+     */
+    focusTracker;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}
+     * which can respond to certain keystrokes and cycle the focus.
+     */
+    keystrokeHandler;
+    /**
+     * Actions that the cycler can take when a keystroke is pressed. Requires
+     * `options.keystrokeHandler` to be passed and working. When an action is
+     * performed, `preventDefault` and `stopPropagation` will be called on the event
+     * the keystroke fired in the DOM.
+     *
+     * ```ts
+     * actions: {
+     * 	// Will call #focusPrevious() when arrowleft or arrowup is pressed.
+     * 	focusPrevious: [ 'arrowleft', 'arrowup' ],
+     *
+     * 	// Will call #focusNext() when arrowdown is pressed.
+     * 	focusNext: 'arrowdown'
+     * }
+     * ```
+     */
+    actions;
     /**
      * Creates an instance of the focus cycler utility.
      *

package/src/formheader/formheaderview.js

@@ -21,6 +21,14 @@ import '../../theme/components/formheader/formheader.css';
  * The latter is an example, where the component has been extended by {@link module:ui/dropdown/dropdownview~DropdownView} view.
  */
 export default class FormHeaderView extends View {
+    /**
+     * A collection of header items.
+     */
+    children;
+    /**
+     * The icon view instance. Defined only if icon was passed in the constructor's options.
+     */
+    iconView;
     /**
      * Creates an instance of the form header class.
      *

package/src/formrow/formrowview.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module ui/formrow/formrowview
+ */
+import View from '../view.js';
+import type ViewCollection from '../viewcollection.js';
+import type LabelView from '../label/labelview.js';
+import { type ArrayOrItem, type Locale } from '@ckeditor/ckeditor5-utils';
+import '../../theme/components/formrow/formrow.css';
+/**
+ * The class representing a single row in a form,
+ */
+export default class FormRowView extends View {
+    /**
+     * An additional CSS class added to the {@link #element}.
+     *
+     * @observable
+     */
+    class: Array<string>;
+    /**
+     * A collection of row items (buttons, dropdowns, etc.).
+     */
+    readonly children: ViewCollection;
+    /**
+     * The role property reflected by the `role` DOM attribute of the {@link #element}.
+     *
+     * **Note**: Used only when a `labelView` is passed to constructor `options`.
+     *
+     * @observable
+     * @internal
+     */
+    _role: string | null;
+    /**
+     * The ARIA property reflected by the `aria-labelledby` DOM attribute of the {@link #element}.
+     *
+     * **Note**: Used only when a `labelView` is passed to constructor `options`.
+     *
+     * @observable
+     * @internal
+     */
+    _ariaLabelledBy: string | null;
+    /**
+     * Creates an instance of the form row class.
+     *
+     * @param locale The locale instance.
+     * @param options.labelView When passed, the row gets the `group` and `aria-labelledby`
+     * DOM attributes and gets described by the label.
+     */
+    constructor(locale: Locale, options?: {
+        children?: Array<View>;
+        class?: ArrayOrItem<string>;
+        labelView?: LabelView;
+    });
+}

package/src/formrow/formrowview.js

@@ -0,0 +1,56 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module ui/formrow/formrowview
+ */
+import View from '../view.js';
+import { toArray } from '@ckeditor/ckeditor5-utils';
+import '../../theme/components/formrow/formrow.css';
+/**
+ * The class representing a single row in a form,
+ */
+export default class FormRowView extends View {
+    /**
+     * A collection of row items (buttons, dropdowns, etc.).
+     */
+    children;
+    /**
+     * Creates an instance of the form row class.
+     *
+     * @param locale The locale instance.
+     * @param options.labelView When passed, the row gets the `group` and `aria-labelledby`
+     * DOM attributes and gets described by the label.
+     */
+    constructor(locale, options = {}) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('class', [
+            'ck',
+            'ck-form__row',
+            ...toArray(options.class || [])
+        ]);
+        this.children = this.createCollection();
+        if (options.children) {
+            options.children.forEach(child => this.children.add(child));
+        }
+        this.set('_role', null);
+        this.set('_ariaLabelledBy', null);
+        if (options.labelView) {
+            this.set({
+                _role: 'group',
+                _ariaLabelledBy: options.labelView.id
+            });
+        }
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: bind.to('class', classes => classes.join(' ')),
+                role: bind.to('_role'),
+                'aria-labelledby': bind.to('_ariaLabelledBy')
+            },
+            children: this.children
+        });
+    }
+}

package/src/highlightedtext/highlightedtextview.js

@@ -6,7 +6,7 @@
  * @module ui/highlightedtext/highlightedtextview
  */
 import View from '../view.js';
-import { escape } from 'lodash-es';
+import { escape } from 'es-toolkit/compat';
 import '../../theme/components/highlightedtext/highlightedtext.css';
 /**
  * A class representing a view that displays a text which subset can be highlighted using the

package/src/highlightedtext/labelwithhighlightview.js

@@ -11,6 +11,10 @@ import { uid } from '@ckeditor/ckeditor5-utils';
  * A label view that can highlight a text fragment.
  */
 export default class LabelWithHighlightView extends HighlightedTextView {
+    /**
+     * @inheritDoc
+     */
+    id;
     /**
      * @inheritDoc
      */

package/src/icon/iconview.js

@@ -7,11 +7,28 @@
  * @module ui/icon/iconview
  */
 import View from '../view.js';
+import { CKEditorError } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/icon/icon.css';
 /**
  * The icon view class.
  */
 class IconView extends View {
+    /**
+     * A list of presentational attributes that can be set on the `<svg>` element and should be preserved
+     * when the icon {@link module:ui/icon/iconview~IconView#content content} is loaded.
+     *
+     * See the [specification](https://www.w3.org/TR/SVG/styling.html#TermPresentationAttribute) to learn more.
+     */
+    static presentationalAttributeNames = [
+        'alignment-baseline', 'baseline-shift', 'clip-path', 'clip-rule', 'color', 'color-interpolation',
+        'color-interpolation-filters', 'color-rendering', 'cursor', 'direction', 'display', 'dominant-baseline', 'fill', 'fill-opacity',
+        'fill-rule', 'filter', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style',
+        'font-variant', 'font-weight', 'image-rendering', 'letter-spacing', 'lighting-color', 'marker-end', 'marker-mid', 'marker-start',
+        'mask', 'opacity', 'overflow', 'paint-order', 'pointer-events', 'shape-rendering', 'stop-color', 'stop-opacity', 'stroke',
+        'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width',
+        'text-anchor', 'text-decoration', 'text-overflow', 'text-rendering', 'transform', 'unicode-bidi', 'vector-effect',
+        'visibility', 'white-space', 'word-spacing', 'writing-mode'
+    ];
     /**
      * @inheritDoc
      */
@@ -67,6 +84,14 @@ class IconView extends View {
         if (this.content) {
             const parsed = new DOMParser().parseFromString(this.content.trim(), 'image/svg+xml');
             const svg = parsed.querySelector('svg');
+            if (!svg) {
+                /**
+                 * The provided icon content is not a valid SVG.
+                 *
+                 * @error ui-iconview-invalid-svg
+                 */
+                throw new CKEditorError('ui-iconview-invalid-svg', this);
+            }
             const viewBox = svg.getAttribute('viewBox');
             if (viewBox) {
                 this.viewBox = viewBox;
@@ -97,20 +122,4 @@ class IconView extends View {
         }
     }
 }
-/**
- * A list of presentational attributes that can be set on the `<svg>` element and should be preserved
- * when the icon {@link module:ui/icon/iconview~IconView#content content} is loaded.
- *
- * See the [specification](https://www.w3.org/TR/SVG/styling.html#TermPresentationAttribute) to learn more.
- */
-IconView.presentationalAttributeNames = [
-    'alignment-baseline', 'baseline-shift', 'clip-path', 'clip-rule', 'color', 'color-interpolation',
-    'color-interpolation-filters', 'color-rendering', 'cursor', 'direction', 'display', 'dominant-baseline', 'fill', 'fill-opacity',
-    'fill-rule', 'filter', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style',
-    'font-variant', 'font-weight', 'image-rendering', 'letter-spacing', 'lighting-color', 'marker-end', 'marker-mid', 'marker-start',
-    'mask', 'opacity', 'overflow', 'paint-order', 'pointer-events', 'shape-rendering', 'stop-color', 'stop-opacity', 'stroke',
-    'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width',
-    'text-anchor', 'text-decoration', 'text-overflow', 'text-rendering', 'transform', 'unicode-bidi', 'vector-effect',
-    'visibility', 'white-space', 'word-spacing', 'writing-mode'
-];
 export default IconView;

package/src/index.d.ts

@@ -46,6 +46,7 @@ export { default as EditorUI, type EditorUIReadyEvent, type EditorUIUpdateEvent
 export { default as EditorUIView } from './editorui/editoruiview.js';
 export { default as BoxedEditorUIView } from './editorui/boxed/boxededitoruiview.js';
 export { default as InlineEditableUIView } from './editableui/inline/inlineeditableuiview.js';
+export { default as FormRowView } from './formrow/formrowview.js';
 export { default as FormHeaderView } from './formheader/formheaderview.js';
 export { default as FocusCycler, type FocusableView, type ViewWithFocusCycler, type FocusCyclerForwardCycleEvent, type FocusCyclerBackwardCycleEvent, isViewWithFocusCycler, isFocusable } from './focuscycler.js';
 export { default as IconView } from './icon/iconview.js';

package/src/index.js

@@ -44,6 +44,7 @@ export { default as EditorUI } from './editorui/editorui.js';
 export { default as EditorUIView } from './editorui/editoruiview.js';
 export { default as BoxedEditorUIView } from './editorui/boxed/boxededitoruiview.js';
 export { default as InlineEditableUIView } from './editableui/inline/inlineeditableuiview.js';
+export { default as FormRowView } from './formrow/formrowview.js';
 export { default as FormHeaderView } from './formheader/formheaderview.js';
 export { default as FocusCycler, isViewWithFocusCycler, isFocusable } from './focuscycler.js';
 export { default as IconView } from './icon/iconview.js';

package/src/input/inputbase.js

@@ -11,6 +11,11 @@ import { FocusTracker } from '@ckeditor/ckeditor5-utils';
  * The base input view class.
  */
 export default class InputBase extends View {
+    /**
+     * Stores information about the editor UI focus and propagates it so various plugins and components
+     * are unified as a focus group.
+     */
+    focusTracker;
     /**
      * @inheritDoc
      */

package/src/label/labelview.js

@@ -12,6 +12,11 @@ import '../../theme/components/label/label.css';
  * The label view class.
  */
 export default class LabelView extends View {
+    /**
+     * An unique id of the label. It can be used by other UI components to reference
+     * the label, for instance, using the `aria-describedby` DOM attribute.
+     */
+    id;
     /**
      * @inheritDoc
      */

package/src/labeledfield/labeledfieldview.js

@@ -48,6 +48,26 @@ import '../../theme/components/labeledfield/labeledfieldview.css';
  * UI components.
  */
 export default class LabeledFieldView extends View {
+    /**
+     * The field view that gets labeled.
+     */
+    fieldView;
+    /**
+     * The label view instance that describes the entire view.
+     */
+    labelView;
+    /**
+     * The status view for the {@link #fieldView}. It displays {@link #errorText} and
+     * {@link #infoText}.
+     */
+    statusView;
+    /**
+     * A collection of children of the internal wrapper element. Allows inserting additional DOM elements (views) next to
+     * the {@link #fieldView} for easy styling (e.g. positioning).
+     *
+     * By default, the collection contains {@link #fieldView} and {@link #labelView}.
+     */
+    fieldWrapperChildren;
     /**
      * Creates an instance of the labeled field view class using a provided creator function
      * that provides the view to be labeled.