@ckeditor/ckeditor5-ui 45.0.0-alpha.9 → 45.1.0-alpha.0

package/LICENSE.md

@@ -18,7 +18,11 @@ Where not otherwise indicated, all CKEditor content is authored by CKSource engi
 
 The following libraries are included in CKEditor under the [MIT license](https://opensource.org/licenses/MIT):
 
+* @types/color-convert - Copyright (c) DefinitelyTyped.
 * es-toolkit - Copyright (c) 2024 Viva Republica, Inc.
+* color-convert - Copyright (c) 2011–2016 Heather Arthur <fayearthur@gmail.com>, copyright (c) 2016–2021 Josh Junon <josh@junon.me>.
+* color-parse - Copyright (c) 2015 Dmitry Ivanov.
+* vanilla-colorful - Copyright (c) 2020 Serhii Kulykov <iamkulykov@gmail.com>.
 
 Trademarks
 ----------

package/dist/index.js

@@ -2,7 +2,7 @@
  * @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
  */
-import { Collection, CKEditorError, EmitterMixin, isNode, toArray, DomEmitterMixin, ObservableMixin, isIterable, uid, env, delay, getEnvKeystrokeText, isVisible, global, KeystrokeHandler, FocusTracker, toUnit, Rect, createElement, ResizeObserver, getBorderWidths, logWarning, getOptimalPosition, isText, isRange, priorities, first, parseBase64EncodedObject, getAncestors } from '@ckeditor/ckeditor5-utils/dist/index.js';
+import { Collection, CKEditorError, EmitterMixin, isNode, toArray, DomEmitterMixin, ObservableMixin, isIterable, uid, env, delay, getEnvKeystrokeText, isVisible, global, KeystrokeHandler, FocusTracker, toUnit, Rect, createElement, ResizeObserver, getBorderWidths, logWarning, getOptimalPosition, isText, isRange, priorities, first, parseBase64EncodedObject, getVisualViewportOffset, getAncestors } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { cloneDeepWith, isObject, isElement, debounce, throttle, cloneDeep, extend, escapeRegExp, escape } from 'es-toolkit/compat';
 import { Plugin, ContextPlugin } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { IconCancel, IconCheck, IconAccessibility, IconDropdownArrow, IconColorTileCheck, IconDragIndicator, IconPilcrow, IconThreeVerticalDots, IconText, IconPlus, IconParagraph, IconImportExport, IconBold, IconAlignLeft, IconColorPalette, IconEraser, IconProjectLogo, IconPreviousArrow, IconNextArrow, IconLoupe } from '@ckeditor/ckeditor5-icons/dist/index.js';
@@ -87,7 +87,7 @@ import { Observer } from '@ckeditor/ckeditor5-engine/dist/index.js';
 	 * {@link #remove removing} views in the collection synchronizes their
 	 * {@link module:ui/view~View#element elements} in the parent element.
 	 *
-	 * @param element A new parent element.
+	 * @param elementOrDocFragment A new parent element or document fragment.
 	 */ setParent(elementOrDocFragment) {
         this._parentElement = elementOrDocFragment;
         // Take care of the initial collection items passed to the constructor.
@@ -5715,9 +5715,9 @@ function isInputElementEmpty(domElement) {
 			 * The minimum number of rows is greater than the maximum number of rows.
 			 *
 			 * @error ui-textarea-view-min-rows-greater-than-max-rows
-			 * @param textareaView The misconfigured textarea view instance.
-			 * @param minRows The value of `minRows` property.
-			 * @param maxRows The value of `maxRows` property.
+			 * @param {module:ui/textarea/textareaview~TextareaView} textareaView The misconfigured textarea view instance.
+			 * @param {number} minRows The value of `minRows` property.
+			 * @param {number} maxRows The value of `maxRows` property.
 			 */ throw new CKEditorError('ui-textarea-view-min-rows-greater-than-max-rows', {
                 textareaView: this,
                 minRows: this.minRows,
@@ -5808,8 +5808,8 @@ function getTextareaElementClone(element, value) {
 				 * provides the `focus()` method for the best user experience.
 				 *
 				 * @error ui-dropdown-panel-focus-child-missing-focus
-				 * @param childView
-				 * @param dropdownPanel
+				 * @param {module:ui/view~View} childView Child view.
+				 * @param {module:ui/dropdown/dropdownpanelview~DropdownPanelView} dropdownPanel A parent of a child.
 				 */ logWarning('ui-dropdown-panel-focus-child-missing-focus', {
                     childView: this.children.first,
                     dropdownPanel: this
@@ -7522,18 +7522,25 @@ const POSITION_OFF_SCREEN = {
                     }
                 }),
             // ------- Sticky
-            viewportStickyNorth: (targetRect, balloonRect, viewportRect, limiterRect)=>{
-                const boundaryRect = limiterRect || viewportRect;
-                if (!targetRect.getIntersection(boundaryRect)) {
+            viewportStickyNorth: (targetRect, balloonRect, viewportRect)=>{
+                // Get the intersection of the viewport and the document body.
+                const boundaryRect = new Rect(global.document.body).getIntersection(viewportRect.getVisible());
+                if (!boundaryRect) {
                     return null;
                 }
-                // Engage when the target top and bottom edges are close or off the boundary.
-                // By close, it means there's not enough space for the balloon arrow (offset).
-                if (boundaryRect.height - targetRect.height > stickyVerticalOffset) {
+                // Get the visible intersection of the boundary and the document body.
+                const visibleBoundaryRect = boundaryRect.getVisible();
+                // Check if the target is in the boundary.
+                if (!targetRect.getIntersection(visibleBoundaryRect)) {
+                    return null;
+                }
+                // Checks if there is enough space to put the balloon on the top or bottom of the target.
+                // If not, makes the balloon sticky.
+                if (!(visibleBoundaryRect.top - targetRect.top - stickyVerticalOffset < balloonRect.height && visibleBoundaryRect.bottom - targetRect.bottom < balloonRect.height)) {
                     return null;
                 }
                 return {
-                    top: boundaryRect.top + stickyVerticalOffset,
+                    top: visibleBoundaryRect.top + stickyVerticalOffset,
                     left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
                     name: 'arrowless',
                     config: {
@@ -8821,7 +8828,7 @@ const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (()=>({
 					 * ```
 					 *
 					 * @error toolbarview-item-unavailable
-					 * @param item The name of the component or nested toolbar definition.
+					 * @param {string} item The name of the component or nested toolbar definition.
 					 */ logWarning('toolbarview-item-unavailable', {
                     item
                 });
@@ -9544,8 +9551,6 @@ const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (()=>({
  *
  * @param locale The locale instance.
  * @param ButtonClassOrInstance The dropdown button view class. Needs to implement the
- * @param behaviorOptions Attributes for the default behavior of the dropdown.
- *
  * {@link module:ui/dropdown/button/dropdownbutton~DropdownButton} interface.
  * @returns The dropdown view instance.
  */ function createDropdown(locale, ButtonClassOrInstance = DropdownButtonView) {
@@ -9844,7 +9849,7 @@ function addMenuToOpenDropdown(dropdownView, options) {
 			 * experience.
 			 *
 			 * @error ui-dropdown-focus-child-on-open-child-missing-focus
-			 * @param {module:ui/view~View} view
+			 * @param {module:ui/view~View} view Child to focus.
 			 */ logWarning('ui-dropdown-focus-child-on-open-child-missing-focus', {
                 view: childToFocus
             });
@@ -9975,25 +9980,7 @@ function addMenuToOpenDropdown(dropdownView, options) {
  * @param definitions
  * @param locale
  */ function bindViewCollectionItemsToDefinitions(dropdownView, listItems, definitions, locale) {
-    // List item checkboxes have a reserved space for the check icon, so we need to know if there are any checkboxes in the list
-    // to adjust the layout accordingly. It'd look weird if the items on the list were not aligned horizontally.
-    //
-    // Possible theoretical performance problem if many items are added one by one, as this will be called for each item.
-    listItems.on('change', ()=>{
-        // Filter-map. Check all items, leave only these that have buttons and return the buttons.
-        const listItemButtons = [
-            ...listItems
-        ].reduce((acc, item)=>{
-            if (item instanceof ListItemView && item.children.first instanceof ListItemButtonView) {
-                acc.push(item.children.first);
-            }
-            return acc;
-        }, []);
-        const hasAnyCheckboxOnList = listItemButtons.some((button)=>button.isToggleable);
-        listItemButtons.forEach((item)=>{
-            item.hasCheckSpace = hasAnyCheckboxOnList;
-        });
-    });
+    bindDropdownToggleableButtonsAlignment(listItems);
     listItems.bindTo(definitions).using((def)=>{
         if (def.type === 'separator') {
             return new ListSeparatorView(locale);
@@ -10026,6 +10013,100 @@ function addMenuToOpenDropdown(dropdownView, options) {
         return null;
     });
 }
+/**
+ * Sets up alignment handling for toggleable buttons in a dropdown list.
+ *
+ * Buttons in dropdowns have reserved space for a check icon when they are toggleable.
+ * When at least one button in the list is toggleable, all other buttons (even non-toggleable ones)
+ * will have space on their left side to align with toggleable buttons.
+ *
+ * This function handles a special case where a new toggleable button is added (or removed) to a list
+ * where previous buttons weren't toggleable. In that case, those previous buttons will
+ * automatically allocate space to align with the new toggleable button.
+ *
+ * Example:
+ * ```
+ * Before adding toggleable button:
+ * +----------------+
+ * | Normal Button  |
+ * +----------------+
+ * | Another Button |
+ * +----------------+
+ *
+ * After adding toggleable button:
+ * +-------------------+
+ * |    Normal Button  |
+ * +-------------------+
+ * |    Another Button |
+ * +-------------------+
+ * | ✓ Toggle Button   |
+ * +-------------------+
+ * ```
+ *
+ * @param listItems Collection of list items to observe for toggleable buttons.
+ */ function bindDropdownToggleableButtonsAlignment(listItems) {
+    // Keep track of how many toggleable buttons are in the list.
+    let toggleableButtonsCount = 0;
+    // Helper function that checks if a view item is a list item button.
+    const pickListItemButtonIfPresent = (item)=>{
+        // Check if the item is a ListItemView with a ListItemButtonView as its first child.
+        if (!(item instanceof ListItemView) || !(item.children.first instanceof ListItemButtonView)) {
+            return null;
+        }
+        return item.children.first;
+    };
+    // Helper function that checks if a view item is a toggleable button.
+    // Returns the button if it's toggleable - otherwise, returns null.
+    const pickListItemToggleableButtonIfPresent = (item)=>{
+        const listItemButtonView = pickListItemButtonIfPresent(item);
+        // Only return buttons that are configured as toggleable.
+        if (!listItemButtonView || !listItemButtonView.isToggleable) {
+            return null;
+        }
+        return listItemButtonView;
+    };
+    // Updates all buttons in the list to either allocate space for check marks or not.
+    // This ensures all buttons are properly aligned regardless of their toggleable state.
+    const updateAllButtonsCheckSpace = (hasSpace)=>{
+        for (const listItem of listItems){
+            const listItemButton = pickListItemButtonIfPresent(listItem);
+            if (listItemButton) {
+                listItemButton.hasCheckSpace = hasSpace;
+            }
+        }
+    };
+    // Listen for changes in the list items collection.
+    listItems.on('change', (evt, data)=>{
+        // Remember the current state - whether we have any toggleable buttons.
+        const prevToggleable = toggleableButtonsCount > 0;
+        // Process removed items - decrease count for each toggleable button removed.
+        for (const item of data.removed){
+            if (pickListItemToggleableButtonIfPresent(item)) {
+                toggleableButtonsCount--;
+            }
+        }
+        // Process added items - increase count for each toggleable button added.
+        for (const item of data.added){
+            const button = pickListItemButtonIfPresent(item);
+            if (!button) {
+                continue;
+            }
+            if (button.isToggleable) {
+                // Check if the button is toggleable and increase the count.
+                toggleableButtonsCount++;
+            }
+            // Depending on the current state, set the check space for the button.
+            button.hasCheckSpace = toggleableButtonsCount > 0;
+        }
+        // Check if the current state has changed.
+        const currentToggleable = toggleableButtonsCount > 0;
+        // Only update button alignment if we've crossed the threshold between
+        // having no toggleable buttons and having at least one.
+        if (prevToggleable !== currentToggleable) {
+            updateAllButtonsCheckSpace(currentToggleable);
+        }
+    });
+}
 
 /**
  * A helper for creating labeled inputs.
@@ -10634,14 +10715,15 @@ class ColorPickerInputRowView extends View {
 	 * Creates an instance of the view.
 	 *
 	 * @param locale The localization services instance.
-	 * @param colors An array with definitions of colors to be displayed in the table.
-	 * @param columns The number of columns in the color grid.
-	 * @param removeButtonLabel The label of the button responsible for removing the color.
-	 * @param colorPickerLabel The label of the button responsible for color picker appearing.
-	 * @param documentColorsLabel The label for the section with the document colors.
-	 * @param documentColorsCount The number of colors in the document colors section inside the color dropdown.
-	 * @param focusTracker Tracks information about the DOM focus in the list.
-	 * @param focusables A collection of views that can be focused in the view.
+	 * @param options Constructor options.
+	 * @param options.colors An array with definitions of colors to be displayed in the table.
+	 * @param options.columns The number of columns in the color grid.
+	 * @param options.removeButtonLabel The label of the button responsible for removing the color.
+	 * @param options.colorPickerLabel The label of the button responsible for color picker appearing.
+	 * @param options.documentColorsLabel The label for the section with the document colors.
+	 * @param options.documentColorsCount The number of colors in the document colors section inside the color dropdown.
+	 * @param options.focusTracker Tracks information about the DOM focus in the list.
+	 * @param options.focusables A collection of views that can be focused in the view.
 	 */ constructor(locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount, colorPickerLabel, focusTracker, focusables }){
         super(locale);
         const bind = this.bindTemplate;
@@ -10927,10 +11009,11 @@ class ColorPickerInputRowView extends View {
 	 * Creates an instance of the view.
 	 *
 	 * @param locale The localization services instance.
-	 * @param focusTracker Tracks information about the DOM focus in the list.
-	 * @param focusables A collection of views that can be focused in the view..
-	 * @param keystrokes An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-	 * @param colorPickerViewConfig The configuration of color picker feature. If set to `false`, the color picker
+	 * @param options Constructor options.
+	 * @param options.focusTracker Tracks information about the DOM focus in the list.
+	 * @param options.focusables A collection of views that can be focused in the view.
+	 * @param options.keystrokes An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	 * @param options.colorPickerViewConfig The configuration of color picker feature. If set to `false`, the color picker
 	 * will not be rendered.
 	 */ constructor(locale, { focusTracker, focusables, keystrokes, colorPickerViewConfig }){
         super(locale);
@@ -11186,13 +11269,14 @@ class ColorPickerInputRowView extends View {
 	 * Creates a view to be inserted as a child of {@link module:ui/dropdown/dropdownview~DropdownView}.
 	 *
 	 * @param locale The localization services instance.
-	 * @param colors An array with definitions of colors to be displayed in the table.
-	 * @param columns The number of columns in the color grid.
-	 * @param removeButtonLabel The label of the button responsible for removing the color.
-	 * @param colorPickerLabel The label of the button responsible for color picker appearing.
-	 * @param documentColorsLabel The label for the section with the document colors.
-	 * @param documentColorsCount The number of colors in the document colors section inside the color dropdown.
-	 * @param colorPickerViewConfig The configuration of color picker feature. If set to `false`, the color picker will be hidden.
+	 * @param options Constructor options.
+	 * @param options.colors An array with definitions of colors to be displayed in the table.
+	 * @param options.columns The number of columns in the color grid.
+	 * @param options.removeButtonLabel The label of the button responsible for removing the color.
+	 * @param options.colorPickerLabel The label of the button responsible for color picker appearing.
+	 * @param options.documentColorsLabel The label for the section with the document colors.
+	 * @param options.documentColorsCount The number of colors in the document colors section inside the color dropdown.
+	 * @param options.colorPickerViewConfig The configuration of color picker feature. If set to `false`, the color picker will be hidden.
 	 */ constructor(locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount, colorPickerLabel, colorPickerViewConfig }){
         super(locale);
         this.items = this.createCollection();
@@ -11234,7 +11318,7 @@ class ColorPickerInputRowView extends View {
         this.colorPickerFragmentView.bind('isVisible').to(this, '_isColorPickerFragmentVisible');
         /**
 		 * This is kind of bindings. Unfortunately we could not use this.bind() method because the same property
-		 * can not be bound twice. So this is work around how to bind 'selectedColor' property between components.
+		 * cannot be bound twice. So this is work around how to bind 'selectedColor' property between components.
 		 */ this.on('change:selectedColor', (evt, evtName, data)=>{
             this.colorGridsFragmentView.set('selectedColor', data);
             this.colorPickerFragmentView.set('selectedColor', data);
@@ -11444,7 +11528,7 @@ class ColorPickerInputRowView extends View {
 			 * {@link module:ui/componentfactory~ComponentFactory#add added} to the factory.
 			 *
 			 * @error componentfactory-item-missing
-			 * @param name The name of the missing component.
+			 * @param {string} name The name of the missing component.
 			 */ throw new CKEditorError('componentfactory-item-missing', this, {
                 name
             });
@@ -11801,6 +11885,8 @@ const BALLOON_CLASS = 'ck-tooltip';
     /**
 	 * Pins the tooltip to a specific DOM element.
 	 *
+	 * @param targetDomElement Element to be pinned to.
+	 * @param options Options for the tooltip.
 	 * @param options.text Text of the tooltip to display.
 	 * @param options.position The position of the tooltip.
 	 * @param options.cssClass Additional CSS class of the balloon with the tooltip.
@@ -13608,8 +13694,8 @@ const DefaultMenuBarItems = [
 			 * {@link module:core/editor/editorconfig~EditorConfig#menuBar menu bar configuration}.
 			 *
 			 * @error menu-bar-item-could-not-be-removed
-			 * @param menuBarConfig The full configuration of the menu bar.
-			 * @param itemName The name of the item that was not removed from the menu bar.
+			 * @param {object} menuBarConfig The full configuration of the menu bar.
+			 * @param {object} addedItemConfig The name of the item that was not removed from the menu bar.
 			 */ logWarning('menu-bar-item-could-not-be-added', {
                 menuBarConfig: originalConfig,
                 addedItemConfig
@@ -13681,9 +13767,9 @@ const DefaultMenuBarItems = [
 					 * menu bar item.
 					 *
 					 * @error menu-bar-item-unavailable
-					 * @param menuBarConfig The full configuration of the menu bar.
-					 * @param parentMenuConfig The config of the menu the unavailable component was defined in.
-					 * @param componentName The name of the unavailable component.
+					 * @param {object} menuBarConfig The full configuration of the menu bar.
+					 * @param {object} parentMenuConfig The config of the menu the unavailable component was defined in.
+					 * @param {string} componentName The name of the unavailable component.
 					 */ logWarning('menu-bar-item-unavailable', {
                         menuBarConfig: originalConfig,
                         parentMenuConfig: cloneDeep(menuDefinition),
@@ -13760,8 +13846,8 @@ function warnAboutEmptyMenu(originalConfig, emptyMenuConfig, isUsingDefaultConfi
 	 * to account for the missing menu items.
 	 *
 	 * @error menu-bar-menu-empty
-	 * @param menuBarConfig The full configuration of the menu bar.
-	 * @param emptyMenuConfig The definition of the menu that has no child items.
+	 * @param {object} menuBarConfig The full configuration of the menu bar.
+	 * @param {object} emptyMenuConfig The definition of the menu that has no child items.
 	 */ logWarning('menu-bar-menu-empty', {
         menuBarConfig: originalConfig,
         emptyMenuConfig
@@ -13912,6 +13998,9 @@ function isMenuDefinition(definition) {
     /**
 	 * The last focused element to which focus should return on `Esc` press.
 	 */ _lastFocusedForeignElement = null;
+    /**
+	 * The DOM emitter instance used for visual viewport watching.
+	 */ _domEmitter;
     /**
 	 * Creates an instance of the editor UI class.
 	 *
@@ -13926,7 +14015,7 @@ function isMenuDefinition(definition) {
         this.poweredBy = new PoweredBy(editor);
         this.evaluationBadge = new EvaluationBadge(editor);
         this.ariaLiveAnnouncer = new AriaLiveAnnouncer(editor);
-        this.set('viewportOffset', this._readViewportOffsetFromConfig());
+        this._initViewportOffset(this._readViewportOffsetFromConfig());
         this.once('ready', ()=>{
             this._bindBodyCollectionWithFocusTracker();
             this.isReady = true;
@@ -13935,6 +14024,7 @@ function isMenuDefinition(definition) {
         this.listenTo(editingView.document, 'layoutChanged', this.update.bind(this));
         this.listenTo(editingView, 'scrollToTheSelection', this._handleScrollToTheSelection.bind(this));
         this._initFocusTracking();
+        this._initVisualViewportSupport();
     }
     /**
 	 * The main (outermost) DOM element of the editor UI.
@@ -13973,6 +14063,9 @@ function isMenuDefinition(definition) {
         }
         this._editableElementsMap = new Map();
         this._focusableToolbarDefinitions = [];
+        if (this._domEmitter) {
+            this._domEmitter.stopListening();
+        }
     }
     /**
 	 * Stores the native DOM editable element used by the editor under a unique name.
@@ -14109,7 +14202,7 @@ function isMenuDefinition(definition) {
 		 * {@link module:ui/editorui/editorui~EditorUI#getEditableElement `getEditableElement()`} methods instead.
 		 *
 		 * @error editor-ui-deprecated-editable-elements
-		 * @param editorUI Editor UI instance the deprecated property belongs to.
+		 * @param {module:ui/editorui/editorui~EditorUI} editorUI Editor UI instance the deprecated property belongs to.
 		 */ console.warn('editor-ui-deprecated-editable-elements: ' + 'The EditorUI#_editableElements property has been deprecated and will be removed in the near future.', {
             editorUI: this
         });
@@ -14342,6 +14435,54 @@ function isMenuDefinition(definition) {
             this.focusTracker.remove(view.element);
         });
     }
+    /**
+	 * Set initial viewport offset and setup visualTop augmentation.
+	 */ _initViewportOffset(viewportOffsetConfig) {
+        // Augment the viewport offset set from outside the editor with the visualTop property.
+        this.on('set:viewportOffset', (evt, name, value)=>{
+            const visualTop = this._getVisualViewportTopOffset(value);
+            // Update only if there is a change in a value, so we do not trigger
+            // listeners to the viewportOffset observable.
+            if (value.visualTop !== visualTop) {
+                evt.return = {
+                    ...value,
+                    visualTop
+                };
+            }
+        });
+        // Set the initial value after augmenting the setter.
+        this.set('viewportOffset', viewportOffsetConfig);
+    }
+    /**
+	 * Listen to visual viewport changes and update the viewportOffset with the visualTop property
+	 * according to the visible part of it (visual viewport).
+	 */ _initVisualViewportSupport() {
+        if (!global.window.visualViewport) {
+            return;
+        }
+        const updateViewport = ()=>{
+            const visualTop = this._getVisualViewportTopOffset(this.viewportOffset);
+            // Update only if there is a change in a value, so we do not trigger
+            // listeners to the viewportOffset observable.
+            if (this.viewportOffset.visualTop !== visualTop) {
+                this.viewportOffset = {
+                    ...this.viewportOffset,
+                    visualTop
+                };
+            }
+        };
+        // Listen to the changes in the visual viewport to adjust the visualTop of viewport offset.
+        this._domEmitter = new (DomEmitterMixin())();
+        this._domEmitter.listenTo(global.window.visualViewport, 'scroll', updateViewport);
+        this._domEmitter.listenTo(global.window.visualViewport, 'resize', updateViewport);
+    }
+    /**
+	 * Calculate the viewport top offset according to the visible part of it (visual viewport).
+	 */ _getVisualViewportTopOffset(viewportOffset) {
+        const visualViewportOffsetTop = getVisualViewportOffset().top;
+        const viewportTopOffset = viewportOffset.top || 0;
+        return visualViewportOffsetTop > viewportTopOffset ? 0 : viewportTopOffset - visualViewportOffsetTop;
+    }
 }
 /**
  * Returns a number (weight) for a toolbar definition. Visible toolbars have a higher priority and so do
@@ -15233,7 +15374,10 @@ const toPx$4 = /* #__PURE__ */ toUnit('px');
             }
             // Don't modify the original options object.
             position = Object.assign({}, position, {
-                viewportOffsetConfig: this.editor.ui.viewportOffset
+                viewportOffsetConfig: {
+                    ...this.editor.ui.viewportOffset,
+                    top: this.editor.ui.viewportOffset.visualTop
+                }
             });
         }
         return position;
@@ -15660,7 +15804,7 @@ const toPx$3 = /* #__PURE__ */ toUnit('px');
         this.listenTo(this, 'change:isActive', ()=>{
             this.checkIfShouldBeSticky();
         });
-        if ((env.isiOS || env.isSafari) && global.window.visualViewport) {
+        if (global.window.visualViewport) {
             this.listenTo(global.window.visualViewport, 'scroll', ()=>{
                 this.checkIfShouldBeSticky();
             });
@@ -15673,24 +15817,20 @@ const toPx$3 = /* #__PURE__ */ toUnit('px');
 	 * Analyzes the environment to decide whether the panel should be sticky or not.
 	 * Then handles the positioning of the panel.
 	 */ checkIfShouldBeSticky() {
+        // @if CK_DEBUG_STICKYPANEL // RectDrawer.clear();
         if (!this.limiterElement || !this.isActive) {
             this._unstick();
             return;
         }
-        const { left: visualViewportOffsetLeft, top: visualViewportOffsetTop } = this._getVisualViewportOffset();
         const limiterRect = new Rect(this.limiterElement);
         let visibleLimiterRect = limiterRect.getVisible();
         if (visibleLimiterRect) {
             const windowRect = new Rect(global.window);
-            let viewportTopOffset = this.viewportTopOffset;
-            if (env.isiOS || env.isSafari) {
-                // Adjust the viewport top offset to height visible in the visual viewport.
-                viewportTopOffset = visualViewportOffsetTop > this.viewportTopOffset ? 0 : this.viewportTopOffset - visualViewportOffsetTop;
-            }
-            windowRect.top += viewportTopOffset;
-            windowRect.height -= viewportTopOffset;
+            windowRect.top += this.viewportTopOffset;
+            windowRect.height -= this.viewportTopOffset;
             visibleLimiterRect = visibleLimiterRect.getIntersection(windowRect);
         }
+        const { left: visualViewportOffsetLeft, top: visualViewportOffsetTop } = getVisualViewportOffset();
         limiterRect.moveBy(visualViewportOffsetLeft, visualViewportOffsetTop);
         if (visibleLimiterRect) {
             visibleLimiterRect.moveBy(visualViewportOffsetLeft, visualViewportOffsetTop);
@@ -15699,20 +15839,29 @@ const toPx$3 = /* #__PURE__ */ toUnit('px');
         // * the limiter's ancestors are intersecting with each other so that some of their rects are visible,
         // * and the limiter's top edge is above the visible ancestors' top edge.
         if (visibleLimiterRect && limiterRect.top < visibleLimiterRect.top) {
-            const visibleLimiterTop = visibleLimiterRect.top;
             // Check if there's a change the panel can be sticky to the bottom of the limiter.
-            if (visibleLimiterTop + this._contentPanelRect.height + this.limiterBottomOffset > visibleLimiterRect.bottom) {
+            if (this._contentPanelRect.height + this.limiterBottomOffset > visibleLimiterRect.height) {
                 const stickyBottomOffset = Math.max(limiterRect.bottom - visibleLimiterRect.bottom, 0) + this.limiterBottomOffset;
+                // @if CK_DEBUG_STICKYPANEL // const stickyBottomOffsetRect = new Rect( {
+                // @if CK_DEBUG_STICKYPANEL // 	top: limiterRect.bottom - stickyBottomOffset, left: 0, right: 2000,
+                // @if CK_DEBUG_STICKYPANEL // 	bottom: limiterRect.bottom - stickyBottomOffset, width: 2000, height: 1
+                // @if CK_DEBUG_STICKYPANEL // } );
+                // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( stickyBottomOffsetRect,
+                // @if CK_DEBUG_STICKYPANEL // 	{ outlineWidth: '1px', opacity: '.8', outlineColor: 'black' },
+                // @if CK_DEBUG_STICKYPANEL // 	'Sticky bottom offset',
+                // @if CK_DEBUG_STICKYPANEL // 	{ visualViewportOrigin: true }
+                // @if CK_DEBUG_STICKYPANEL // );
                 // Check if sticking the panel to the bottom of the limiter does not cause it to suddenly
                 // move upwards if there's not enough space for it.
-                // Adding 1 avoids rounding problems and toolbar flickering when offset almost equals the height.
-                if (limiterRect.bottom - stickyBottomOffset > limiterRect.top + this._contentPanelRect.height + 1) {
+                // To avoid toolbar flickering we are adding 1 for potential style change (sticky has all borders set,
+                // non-sticky lacks bottom border).
+                if (this._contentPanelRect.height + stickyBottomOffset + 1 < limiterRect.height) {
                     this._stickToBottomOfLimiter(stickyBottomOffset);
                 } else {
                     this._unstick();
                 }
             } else if (this._contentPanelRect.height + this.limiterBottomOffset < limiterRect.height) {
-                this._stickToTopOfAncestors(visibleLimiterTop);
+                this._stickToTopOfAncestors(visibleLimiterRect.top);
             } else {
                 this._unstick();
             }
@@ -15724,6 +15873,15 @@ const toPx$3 = /* #__PURE__ */ toUnit('px');
     // @if CK_DEBUG_STICKYPANEL // console.log( '_isStickyToTheBottomOfLimiter', this._isStickyToTheBottomOfLimiter );
     // @if CK_DEBUG_STICKYPANEL // console.log( '_stickyTopOffset', this._stickyTopOffset );
     // @if CK_DEBUG_STICKYPANEL // console.log( '_stickyBottomOffset', this._stickyBottomOffset );
+    // @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {
+    // @if CK_DEBUG_STICKYPANEL // 	RectDrawer.draw( visibleLimiterRect,
+    // @if CK_DEBUG_STICKYPANEL // 		{ ...diagonalStylesBlack,
+    // @if CK_DEBUG_STICKYPANEL // 			outlineWidth: '3px', opacity: '.8', outlineColor: 'orange', outlineOffset: '-3px',
+    // @if CK_DEBUG_STICKYPANEL // 			backgroundColor: 'rgba(0, 0, 255, .2)', zIndex: 2000 },
+    // @if CK_DEBUG_STICKYPANEL // 		'visibleLimiterRect',
+    // @if CK_DEBUG_STICKYPANEL // 		{ visualViewportOrigin: true }
+    // @if CK_DEBUG_STICKYPANEL // 	);
+    // @if CK_DEBUG_STICKYPANEL // }
     }
     /**
 	 * Sticks the panel at the given CSS `top` offset.
@@ -15735,7 +15893,7 @@ const toPx$3 = /* #__PURE__ */ toUnit('px');
         this._isStickyToTheBottomOfLimiter = false;
         this._stickyTopOffset = topOffset;
         this._stickyBottomOffset = null;
-        this._marginLeft = toPx$3(-global.window.scrollX + this._getVisualViewportOffset().left);
+        this._marginLeft = toPx$3(-global.window.scrollX + getVisualViewportOffset().left);
     }
     /**
 	 * Sticks the panel at the bottom of the limiter with a given CSS `bottom` offset.
@@ -15747,7 +15905,7 @@ const toPx$3 = /* #__PURE__ */ toUnit('px');
         this._isStickyToTheBottomOfLimiter = true;
         this._stickyTopOffset = null;
         this._stickyBottomOffset = stickyBottomOffset;
-        this._marginLeft = toPx$3(-global.window.scrollX + this._getVisualViewportOffset().left);
+        this._marginLeft = toPx$3(-global.window.scrollX + getVisualViewportOffset().left);
     }
     /**
 	 * Unsticks the panel putting it back to its original position.
@@ -15767,23 +15925,6 @@ const toPx$3 = /* #__PURE__ */ toUnit('px');
 	 */ get _contentPanelRect() {
         return new Rect(this.contentPanelElement);
     }
-    /**
-	 * Returns normalized visual viewport offsets (only for Safari and iOS).
-	 */ _getVisualViewportOffset() {
-        const visualViewport = global.window.visualViewport;
-        if (!(env.isiOS || env.isSafari) || !visualViewport) {
-            return {
-                left: 0,
-                top: 0
-            };
-        }
-        const left = Math.max(Math.round(visualViewport.offsetLeft), 0);
-        const top = Math.max(Math.round(visualViewport.offsetTop), 0);
-        return {
-            left,
-            top
-        };
-    }
 }
 
 /**
@@ -17886,8 +18027,8 @@ const EVENT_NAME_DELEGATES = [
 			 * {@link module:ui/menubar/menubarmenulistitembuttonview~MenuBarMenuListItemButtonView} (button).
 			 *
 			 * @error menu-bar-component-unsupported
-			 * @param componentName A name of the unsupported component used in the configuration.
-			 * @param componentView An unsupported component view.
+			 * @param {string} componentName A name of the unsupported component used in the configuration.
+			 * @param {module:ui/view~View} componentView An unsupported component view.
 			 */ logWarning('menu-bar-component-unsupported', {
                 componentName,
                 componentView