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

package/src/toolbar/toolbarview.js

@@ -13,24 +13,77 @@ import preventDefault from '../bindings/preventdefault.js';
 import { createDropdown, addToolbarToDropdown } from '../dropdown/utils.js';
 import normalizeToolbarConfig from './normalizetoolbarconfig.js';
 import { FocusTracker, KeystrokeHandler, Rect, ResizeObserver, global, isVisible, logWarning } from '@ckeditor/ckeditor5-utils';
-import { icons } from '@ckeditor/ckeditor5-core';
-import { isObject } from 'lodash-es';
+import { IconAlignLeft, IconBold, IconImportExport, IconParagraph, IconPlus, IconText, IconThreeVerticalDots, IconPilcrow, IconDragIndicator } from '@ckeditor/ckeditor5-icons';
+import { isObject } from 'es-toolkit/compat';
 import '../../theme/components/toolbar/toolbar.css';
 export const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (() => ({
-    alignLeft: icons.alignLeft,
-    bold: icons.bold,
-    importExport: icons.importExport,
-    paragraph: icons.paragraph,
-    plus: icons.plus,
-    text: icons.text,
-    threeVerticalDots: icons.threeVerticalDots,
-    pilcrow: icons.pilcrow,
-    dragIndicator: icons.dragIndicator
+    alignLeft: IconAlignLeft,
+    bold: IconBold,
+    importExport: IconImportExport,
+    paragraph: IconParagraph,
+    plus: IconPlus,
+    text: IconText,
+    threeVerticalDots: IconThreeVerticalDots,
+    pilcrow: IconPilcrow,
+    dragIndicator: IconDragIndicator
 }))();
 /**
  * The toolbar view class.
  */
 export default class ToolbarView extends View {
+    /**
+     * A reference to the options object passed to the constructor.
+     */
+    options;
+    /**
+     * A collection of toolbar items (buttons, dropdowns, etc.).
+     */
+    items;
+    /**
+     * Tracks information about the DOM focus in the toolbar.
+     */
+    focusTracker;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}
+     * to handle keyboard navigation in the toolbar.
+     */
+    keystrokes;
+    /**
+     * A (child) view containing {@link #items toolbar items}.
+     */
+    itemsView;
+    /**
+     * A top–level collection aggregating building blocks of the toolbar.
+     *
+     *	┌───────────────── ToolbarView ─────────────────┐
+     *	| ┌──────────────── #children ────────────────┐ |
+     *	| |   ┌──────────── #itemsView ───────────┐   | |
+     *	| |   | [ item1 ] [ item2 ] ... [ itemN ] |   | |
+     *	| |   └──────────────────────────────────-┘   | |
+     *	| └───────────────────────────────────────────┘ |
+     *	└───────────────────────────────────────────────┘
+     *
+     * By default, it contains the {@link #itemsView} but it can be extended with additional
+     * UI elements when necessary.
+     */
+    children;
+    /**
+     * A collection of {@link #items} that take part in the focus cycling
+     * (i.e. navigation using the keyboard). Usually, it contains a subset of {@link #items} with
+     * some optional UI elements that also belong to the toolbar and should be focusable
+     * by the user.
+     */
+    focusables;
+    /**
+     * Helps cycling over {@link #focusables focusable items} in the toolbar.
+     */
+    _focusCycler;
+    /**
+     * An instance of the active toolbar behavior that shapes its look and functionality.
+     *
+     * See {@link module:ui/toolbar/toolbarview~ToolbarBehavior} to learn more.
+     */
+    _behavior;
     /**
      * Creates an instance of the {@link module:ui/toolbar/toolbarview~ToolbarView} class.
      *
@@ -47,11 +100,14 @@ export default class ToolbarView extends View {
         this.set('ariaLabel', t('Editor toolbar'));
         this.set('maxWidth', 'auto');
         this.set('role', 'toolbar');
+        this.set('isGrouping', !!this.options.shouldGroupWhenFull);
         this.items = this.createCollection();
         this.focusTracker = new FocusTracker();
         this.keystrokes = new KeystrokeHandler();
         this.set('class', undefined);
         this.set('isCompact', false);
+        // Static toolbar can be vertical when needed.
+        this.set('isVertical', false);
         this.itemsView = new ItemsView(locale);
         this.children = this.createCollection();
         this.children.add(this.itemsView);
@@ -72,7 +128,11 @@ export default class ToolbarView extends View {
             'ck',
             'ck-toolbar',
             bind.to('class'),
-            bind.if('isCompact', 'ck-toolbar_compact')
+            bind.if('isCompact', 'ck-toolbar_compact'),
+            // To group items dynamically, the toolbar needs a dedicated CSS class. Only used for dynamic grouping.
+            bind.if('isGrouping', 'ck-toolbar_grouping'),
+            // When vertical, the toolbar has an additional CSS class. Only used for static layout.
+            bind.if('isVertical', 'ck-toolbar_vertical')
         ];
         if (this.options.shouldGroupWhenFull && this.options.isFloating) {
             classes.push('ck-toolbar_floating');
@@ -149,6 +209,25 @@ export default class ToolbarView extends View {
     fillFromConfig(itemsOrConfig, factory, removeItems) {
         this.items.addMany(this._buildItemsFromConfig(itemsOrConfig, factory, removeItems));
     }
+    /**
+     * Changes the behavior of toolbar if it does not fit into the available space.
+     */
+    switchBehavior(newBehaviorType) {
+        if (this._behavior.type !== newBehaviorType) {
+            this._behavior.destroy();
+            this.itemsView.children.clear();
+            this.focusables.clear();
+            if (newBehaviorType === 'dynamic') {
+                this._behavior = new DynamicGrouping(this);
+                this._behavior.render(this);
+                this._behavior.refreshItems();
+            }
+            else {
+                this._behavior = new StaticLayout(this);
+                this._behavior.render(this);
+            }
+        }
+    }
     /**
      * A utility that expands the plain toolbar configuration into a list of view items using a given component factory.
      *
@@ -336,7 +415,7 @@ export default class ToolbarView extends View {
         // Allow disabling icon by passing false.
         if (icon !== false) {
             // A pre-defined icon picked by name, SVG string, a fallback (default) icon.
-            dropdownView.buttonView.icon = NESTED_TOOLBAR_ICONS[icon] || icon || icons.threeVerticalDots;
+            dropdownView.buttonView.icon = NESTED_TOOLBAR_ICONS[icon] || icon || IconThreeVerticalDots;
         }
         // If the icon is disabled, display the label automatically.
         else {
@@ -351,6 +430,10 @@ export default class ToolbarView extends View {
  * {@link module:ui/toolbar/toolbarview~ToolbarView#items}.
  */
 class ItemsView extends View {
+    /**
+     * A collection of items (buttons, dropdowns, etc.).
+     */
+    children;
     /**
      * @inheritDoc
      */
@@ -375,6 +458,10 @@ class ItemsView extends View {
  * using the {@link module:ui/toolbar/toolbarview~ToolbarView#isVertical} property.
  */
 class StaticLayout {
+    /**
+     * Toolbar behavior type.
+     */
+    type = 'static';
     /**
      * Creates an instance of the {@link module:ui/toolbar/toolbarview~StaticLayout} toolbar
      * behavior.
@@ -382,21 +469,11 @@ class StaticLayout {
      * @param view An instance of the toolbar that this behavior is added to.
      */
     constructor(view) {
-        const bind = view.bindTemplate;
-        // Static toolbar can be vertical when needed.
-        view.set('isVertical', false);
+        view.isGrouping = false;
         // 1:1 pass–through binding, all ToolbarView#items are visible.
         view.itemsView.children.bindTo(view.items).using(item => item);
         // 1:1 pass–through binding, all ToolbarView#items are focusable.
         view.focusables.bindTo(view.items).using(item => isFocusable(item) ? item : null);
-        view.extendTemplate({
-            attributes: {
-                class: [
-                    // When vertical, the toolbar has an additional CSS class.
-                    bind.if('isVertical', 'ck-toolbar_vertical')
-                ]
-            }
-        });
     }
     /**
      * @inheritDoc
@@ -426,6 +503,91 @@ class StaticLayout {
  * ```
  */
 class DynamicGrouping {
+    /**
+     * Toolbar behavior type.
+     */
+    type = 'dynamic';
+    /**
+     * A toolbar view this behavior belongs to.
+     */
+    view;
+    /**
+     * A collection of toolbar children.
+     */
+    viewChildren;
+    /**
+     * A collection of focusable toolbar elements.
+     */
+    viewFocusables;
+    /**
+     * A view containing toolbar items.
+     */
+    viewItemsView;
+    /**
+     * Toolbar focus tracker.
+     */
+    viewFocusTracker;
+    /**
+     * Toolbar locale.
+     */
+    viewLocale;
+    /**
+     * A subset of toolbar {@link module:ui/toolbar/toolbarview~ToolbarView#items}.
+     * Aggregates items that fit into a single row of the toolbar and were not {@link #groupedItems grouped}
+     * into a {@link #groupedItemsDropdown dropdown}. Items of this collection are displayed in the
+     * {@link module:ui/toolbar/toolbarview~ToolbarView#itemsView}.
+     *
+     * When none of the {@link module:ui/toolbar/toolbarview~ToolbarView#items} were grouped, it
+     * matches the {@link module:ui/toolbar/toolbarview~ToolbarView#items} collection in size and order.
+     */
+    ungroupedItems;
+    /**
+     * A subset of toolbar {@link module:ui/toolbar/toolbarview~ToolbarView#items}.
+     * A collection of the toolbar items that do not fit into a single row of the toolbar.
+     * Grouped items are displayed in a dedicated {@link #groupedItemsDropdown dropdown}.
+     *
+     * When none of the {@link module:ui/toolbar/toolbarview~ToolbarView#items} were grouped,
+     * this collection is empty.
+     */
+    groupedItems;
+    /**
+     * The dropdown that aggregates {@link #groupedItems grouped items} that do not fit into a single
+     * row of the toolbar. It is displayed on demand as the last of
+     * {@link module:ui/toolbar/toolbarview~ToolbarView#children toolbar children} and offers another
+     * (nested) toolbar which displays items that would normally overflow.
+     */
+    groupedItemsDropdown;
+    /**
+     * An instance of the resize observer that helps dynamically determine the geometry of the toolbar
+     * and manage items that do not fit into a single row.
+     *
+     * **Note:** Created in {@link #_enableGroupingOnResize}.
+     *
+     * @readonly
+     */
+    resizeObserver = null;
+    /**
+     * A cached value of the horizontal padding style used by {@link #_updateGrouping}
+     * to manage the {@link module:ui/toolbar/toolbarview~ToolbarView#items} that do not fit into
+     * a single toolbar line. This value can be reused between updates because it is unlikely that
+     * the padding will change and re–using `Window.getComputedStyle()` is expensive.
+     *
+     * @readonly
+     */
+    cachedPadding = null;
+    /**
+     * A flag indicating that an items grouping update has been queued (e.g. due to the toolbar being visible)
+     * and should be executed immediately the next time the toolbar shows up.
+     *
+     * @readonly
+     */
+    shouldUpdateGroupingOnNextResize = false;
+    /**
+     * Toolbar element.
+     *
+     * @readonly
+     */
+    viewElement;
     /**
      * Creates an instance of the {@link module:ui/toolbar/toolbarview~DynamicGrouping} toolbar
      * behavior.
@@ -433,37 +595,13 @@ class DynamicGrouping {
      * @param view An instance of the toolbar that this behavior is added to.
      */
     constructor(view) {
-        /**
-         * An instance of the resize observer that helps dynamically determine the geometry of the toolbar
-         * and manage items that do not fit into a single row.
-         *
-         * **Note:** Created in {@link #_enableGroupingOnResize}.
-         *
-         * @readonly
-         */
-        this.resizeObserver = null;
-        /**
-         * A cached value of the horizontal padding style used by {@link #_updateGrouping}
-         * to manage the {@link module:ui/toolbar/toolbarview~ToolbarView#items} that do not fit into
-         * a single toolbar line. This value can be reused between updates because it is unlikely that
-         * the padding will change and re–using `Window.getComputedStyle()` is expensive.
-         *
-         * @readonly
-         */
-        this.cachedPadding = null;
-        /**
-         * A flag indicating that an items grouping update has been queued (e.g. due to the toolbar being visible)
-         * and should be executed immediately the next time the toolbar shows up.
-         *
-         * @readonly
-         */
-        this.shouldUpdateGroupingOnNextResize = false;
         this.view = view;
         this.viewChildren = view.children;
         this.viewFocusables = view.focusables;
         this.viewItemsView = view.itemsView;
         this.viewFocusTracker = view.focusTracker;
         this.viewLocale = view.locale;
+        this.view.isGrouping = true;
         this.ungroupedItems = view.createCollection();
         this.groupedItems = view.createCollection();
         this.groupedItemsDropdown = this._createGroupedItemsDropdown();
@@ -505,14 +643,6 @@ class DynamicGrouping {
             // some new space is available and we could do some ungrouping.
             this._updateGrouping();
         });
-        view.extendTemplate({
-            attributes: {
-                class: [
-                    // To group items dynamically, the toolbar needs a dedicated CSS class.
-                    'ck-toolbar_grouping'
-                ]
-            }
-        });
     }
     /**
      * Enables dynamic items grouping based on the dimensions of the toolbar.
@@ -531,8 +661,26 @@ class DynamicGrouping {
         // The dropdown may not be in ToolbarView#children at the moment of toolbar destruction
         // so let's make sure it's actually destroyed along with the toolbar.
         this.groupedItemsDropdown.destroy();
+        // Do not try to remove the same elements if they are already removed.
+        if (this.viewChildren.length > 1) {
+            this.viewChildren.remove(this.groupedItemsDropdown);
+            this.viewChildren.remove(this.viewChildren.last);
+        }
         this.resizeObserver.destroy();
     }
+    /**
+     * Re-adds all items to the toolbar. Use when the toolbar is re-rendered and the items grouping is lost.
+     */
+    refreshItems() {
+        const view = this.view;
+        if (view.items.length) {
+            for (let currentIndex = 0; currentIndex < view.items.length; currentIndex++) {
+                const item = [...view.items][currentIndex];
+                this.ungroupedItems.add(item, currentIndex);
+            }
+            this._updateGrouping();
+        }
+    }
     /**
      * When called, it will check if any of the {@link #ungroupedItems} do not fit into a single row of the toolbar,
      * and it will move them to the {@link #groupedItems} when it happens.
@@ -694,7 +842,7 @@ class DynamicGrouping {
             label: t('Show more items'),
             tooltip: true,
             tooltipPosition: locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw',
-            icon: icons.threeVerticalDots
+            icon: IconThreeVerticalDots
         });
         return dropdown;
     }

package/src/tooltipmanager.js

@@ -8,7 +8,7 @@
 import View from './view.js';
 import BalloonPanelView from './panel/balloon/balloonpanelview.js';
 import { DomEmitterMixin, first, global, isVisible } from '@ckeditor/ckeditor5-utils';
-import { isElement, debounce } from 'lodash-es';
+import { isElement, debounce } from 'es-toolkit/compat';
 import '../theme/components/tooltip/tooltip.css';
 const BALLOON_CLASS = 'ck-tooltip';
 /**
@@ -74,24 +74,60 @@ const BALLOON_CLASS = 'ck-tooltip';
  * {@link module:ui/editorui/editorui~EditorUI} of the first editor.
  */
 class TooltipManager extends /* #__PURE__ */ DomEmitterMixin() {
+    /**
+     * The view rendering text of the tooltip.
+     */
+    tooltipTextView;
+    /**
+     * The instance of the balloon panel that renders and positions the tooltip.
+     */
+    balloonPanelView;
+    /**
+     * A set of default {@link module:utils/dom/position~PositioningFunction positioning functions} used by the `TooltipManager`
+     * to pin tooltips in different positions.
+     */
+    static defaultBalloonPositions = /* #__PURE__ */ BalloonPanelView.generatePositions({
+        heightOffset: 5,
+        sideOffset: 13
+    });
+    /**
+     * Stores the reference to the DOM element the tooltip is attached to. `null` when there's no tooltip
+     * in the UI.
+     */
+    _currentElementWithTooltip = null;
+    /**
+     * Stores the current tooltip position. `null` when there's no tooltip in the UI.
+     */
+    _currentTooltipPosition = null;
+    /**
+     * An instance of the mutation observer that keeps track on target element attributes changes.
+     */
+    _mutationObserver = null;
+    /**
+     * A debounced version of {@link #_pinTooltip}. Tooltips show with a delay to avoid flashing and
+     * to improve the UX.
+     */
+    _pinTooltipDebounced;
+    /**
+     * A debounced version of {@link #_unpinTooltip}. Tooltips hide with a delay to allow hovering of their titles.
+     */
+    _unpinTooltipDebounced;
+    _watchdogExcluded;
+    /**
+     * A set of editors the single tooltip manager instance must listen to.
+     * This is mostly to handle `EditorUI#update` listeners from individual editors.
+     */
+    static _editors = new Set();
+    /**
+     * A reference to the `TooltipManager` instance. The class is a singleton and as such,
+     * successive attempts at creating instances should return this instance.
+     */
+    static _instance = null;
     /**
      * Creates an instance of the tooltip manager.
      */
     constructor(editor) {
         super();
-        /**
-         * Stores the reference to the DOM element the tooltip is attached to. `null` when there's no tooltip
-         * in the UI.
-         */
-        this._currentElementWithTooltip = null;
-        /**
-         * Stores the current tooltip position. `null` when there's no tooltip in the UI.
-         */
-        this._currentTooltipPosition = null;
-        /**
-         * An instance of the mutation observer that keeps track on target element attributes changes.
-         */
-        this._mutationObserver = null;
         TooltipManager._editors.add(editor);
         // TooltipManager must be a singleton. Multiple instances would mean multiple tooltips attached
         // to the same DOM element with data-cke-tooltip-* attributes.
@@ -383,24 +419,6 @@ class TooltipManager extends /* #__PURE__ */ DomEmitterMixin() {
         });
     }
 }
-/**
- * A set of default {@link module:utils/dom/position~PositioningFunction positioning functions} used by the `TooltipManager`
- * to pin tooltips in different positions.
- */
-TooltipManager.defaultBalloonPositions = BalloonPanelView.generatePositions({
-    heightOffset: 5,
-    sideOffset: 13
-});
-/**
- * A set of editors the single tooltip manager instance must listen to.
- * This is mostly to handle `EditorUI#update` listeners from individual editors.
- */
-TooltipManager._editors = new Set();
-/**
- * A reference to the `TooltipManager` instance. The class is a singleton and as such,
- * successive attempts at creating instances should return this instance.
- */
-TooltipManager._instance = null;
 export default TooltipManager;
 function getDescendantWithTooltip(element) {
     if (!isElement(element)) {

package/src/view.js

@@ -76,6 +76,82 @@ import '../theme/globals/globals.css';
  * ```
  */
 export default class View extends /* #__PURE__ */ DomEmitterMixin(/* #__PURE__ */ ObservableMixin()) {
+    /**
+     * An HTML element of the view. `null` until {@link #render rendered}
+     * from the {@link #template}.
+     *
+     * ```ts
+     * class SampleView extends View {
+     * 	constructor() {
+     * 		super();
+     *
+     * 		// A template instance the #element will be created from.
+     * 		this.setTemplate( {
+     * 			tag: 'p'
+     *
+     * 			// ...
+     * 		} );
+     * 	}
+     * }
+     *
+     * const view = new SampleView();
+     *
+     * // Renders the #template.
+     * view.render();
+     *
+     * // Append the HTML element of the view to <body>.
+     * document.body.appendChild( view.element );
+     * ```
+     *
+     * **Note**: The element of the view can also be assigned directly:
+     *
+     * ```ts
+     * view.element = document.querySelector( '#my-container' );
+     * ```
+     */
+    element;
+    /**
+     * Set `true` when the view has already been {@link module:ui/view~View#render rendered}.
+     *
+     * @readonly
+     */
+    isRendered;
+    /**
+     * A set of tools to localize the user interface.
+     *
+     * Also see {@link module:core/editor/editor~Editor#locale}.
+     *
+     * @readonly
+     */
+    locale;
+    /**
+     * Shorthand for {@link module:utils/locale~Locale#t}.
+     *
+     * Note: If {@link #locale} instance hasn't been passed to the view this method may not
+     * be available.
+     *
+     * @see module:utils/locale~Locale#t
+     */
+    t;
+    /**
+     * Template of this view. It provides the {@link #element} representing
+     * the view in DOM, which is {@link #render rendered}.
+     */
+    template;
+    /**
+     * Collections registered with {@link #createCollection}.
+     */
+    _viewCollections;
+    /**
+     * A collection of view instances, which have been added directly
+     * into the {@link module:ui/template~Template#children}.
+     */
+    _unboundChildren;
+    /**
+     * Cached {@link module:ui/template~BindChain bind chain} object created by the
+     * {@link #template}. See {@link #bindTemplate}.
+     */
+    _bindTemplate;
     /**
      * Creates an instance of the {@link module:ui/view~View} class.
      *

package/src/viewcollection.js

@@ -47,6 +47,10 @@ import { CKEditorError, Collection } from '@ckeditor/ckeditor5-utils';
  * of a {@link module:ui/template~Template template}.
  */
 export default class ViewCollection extends Collection {
+    /**
+     * A parent element within which child views are rendered and managed in DOM.
+     */
+    _parentElement;
     /**
      * Creates a new instance of the {@link module:ui/viewcollection~ViewCollection}.
      *

package/theme/components/form/form.css

@@ -0,0 +1,87 @@
+/*
+ * 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
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+:root {
+	--ck-form-default-width: 340px;
+}
+
+.ck.ck-form {
+	padding: 0 0 var(--ck-spacing-large);
+
+	&.ck-form_default-width {
+		width: var(--ck-form-default-width);
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	& .ck.ck-input-text,
+	& .ck.ck-input-number {
+		min-width: 100%;
+		width: 0;
+	}
+
+	& .ck.ck-dropdown {
+		min-width: 100%;
+
+		& .ck-dropdown__button {
+			&:not(:focus) {
+				border: 1px solid var(--ck-color-base-border);
+			}
+
+			& .ck-button__label {
+				width: 100%;
+			}
+		}
+	}
+
+	/* Default `ck-responsive-form` customization when it lies next to `ck-form` class */
+	&.ck-responsive-form {
+		& .ck.ck-form__row {
+			&.ck-form__row_with-submit {
+				@mixin ck-media-phone {
+					flex-direction: column;
+					align-items: stretch;
+					padding: 0;
+				}
+
+				> .ck {
+					@mixin ck-media-phone {
+						margin: var(--ck-spacing-large) var(--ck-spacing-large) 0;
+					}
+				}
+
+				.ck-button_with-text {
+					@mixin ck-media-phone {
+						justify-content: center;
+					}
+				}
+			}
+
+			&.ck-form__row_large-bottom-padding {
+				@mixin ck-media-phone {
+					padding-bottom: var(--ck-spacing-large);
+				}
+			}
+		}
+
+		@mixin ck-dir ltr {
+			& > :not(:first-child) {
+				margin-left: 0;
+			}
+		}
+
+		@mixin ck-dir rtl {
+			& > :not(:last-child) {
+				margin-left: 0;
+			}
+		}
+	}
+	/* End of `ck-responsive-form` customization */
+}

package/theme/components/formrow/formrow.css

@@ -0,0 +1,32 @@
+/*
+ * 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
+ */
+
+.ck.ck-form__row {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: flex-start;
+	padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0;
+
+	&.ck-form__row_large-top-padding {
+		padding-top: var(--ck-spacing-large);
+	}
+
+	&.ck-form__row_large-bottom-padding {
+		padding-bottom: var(--ck-spacing-large);
+	}
+
+	&.ck-form__row_with-submit {
+		flex-wrap: nowrap;
+
+		& > *:not(:first-child) {
+			margin-inline-start: var(--ck-spacing-standard);
+		}
+	}
+
+	& > .ck.ck-form__row {
+		padding: 0;
+	}
+}