@ckeditor/ckeditor5-ui 43.3.1 → 44.0.0-alpha.1

package/src/editorui/editorui.js

@@ -9,6 +9,7 @@
 import ComponentFactory from '../componentfactory.js';
 import TooltipManager from '../tooltipmanager.js';
 import PoweredBy from './poweredby.js';
+import EvaluationBadge from './evaluationbadge.js';
 import AriaLiveAnnouncer from '../arialiveannouncer.js';
 import { ObservableMixin, isVisible, FocusTracker } from '@ckeditor/ckeditor5-utils';
 import { normalizeMenuBarConfig } from '../menubar/utils.js';
@@ -52,6 +53,7 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
         this.focusTracker = new FocusTracker();
         this.tooltipManager = new TooltipManager(editor);
         this.poweredBy = new PoweredBy(editor);
+        this.evaluationBadge = new EvaluationBadge(editor);
         this.ariaLiveAnnouncer = new AriaLiveAnnouncer(editor);
         this.set('viewportOffset', this._readViewportOffsetFromConfig());
         this.once('ready', () => {
@@ -95,6 +97,7 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
         this.focusTracker.destroy();
         this.tooltipManager.destroy(this.editor);
         this.poweredBy.destroy();
+        this.evaluationBadge.destroy();
         // Clean–up the references to the CKEditor instance stored in the native editable DOM elements.
         for (const domElement of this._editableElementsMap.values()) {
             domElement.ckeditorInstance = null;

package/src/editorui/evaluationbadge.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/editorui/evaluationbadge
+ */
+import type { Editor } from '@ckeditor/ckeditor5-core';
+import View from '../view.js';
+import Badge, { type BadgeConfig } from '../badge/badge.js';
+/**
+ * A helper that enables the "evaluation badge" feature in the editor at the bottom of the editable element
+ * (editor root, source editing area, etc.) when the editor is focused.
+ *
+ * @private
+ */
+export default class EvaluationBadge extends Badge {
+    private licenseTypeMessage;
+    constructor(editor: Editor);
+    /**
+     * Enables "evaluation badge" label.
+     */
+    protected _isEnabled(): boolean;
+    /**
+     * Creates the content of the "evaluation badge".
+     */
+    protected _createBadgeContent(): View<HTMLElement>;
+    /**
+     * Returns the normalized configuration for the "evaluation badge".
+     * It takes 'ui.poweredBy' configuration into account to determine the badge position and side.
+     */
+    protected _getNormalizedConfig(): BadgeConfig;
+}

package/src/editorui/evaluationbadge.js

@@ -0,0 +1,99 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { parseBase64EncodedObject } from '@ckeditor/ckeditor5-utils';
+import View from '../view.js';
+import Badge from '../badge/badge.js';
+/**
+ * A helper that enables the "evaluation badge" feature in the editor at the bottom of the editable element
+ * (editor root, source editing area, etc.) when the editor is focused.
+ *
+ * @private
+ */
+export default class EvaluationBadge extends Badge {
+    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.
+     */
+    _isEnabled() {
+        const editor = this.editor;
+        const licenseKey = editor.config.get('licenseKey');
+        const licenseType = getLicenseTypeFromLicenseKey(licenseKey);
+        return Boolean(licenseType && this.licenseTypeMessage[licenseType]);
+    }
+    /**
+     * Creates the content of the "evaluation badge".
+     */
+    _createBadgeContent() {
+        const licenseKey = this.editor.config.get('licenseKey');
+        const licenseType = getLicenseTypeFromLicenseKey(licenseKey);
+        return new EvaluationBadgeView(this.editor.locale, this.licenseTypeMessage[licenseType]);
+    }
+    /**
+     * Returns the normalized configuration for the "evaluation badge".
+     * It takes 'ui.poweredBy' configuration into account to determine the badge position and side.
+     */
+    _getNormalizedConfig() {
+        const badgeConfig = super._getNormalizedConfig();
+        const userConfig = this.editor.config.get('ui.poweredBy') || {};
+        const position = userConfig.position || badgeConfig.position;
+        const poweredBySide = userConfig.side || badgeConfig.side;
+        return {
+            position,
+            side: poweredBySide === 'left' ? 'right' : 'left',
+            verticalOffset: badgeConfig.verticalOffset,
+            horizontalOffset: badgeConfig.horizontalOffset
+        };
+    }
+}
+/**
+ * A view displaying the "evaluation badge".
+ */
+class EvaluationBadgeView extends View {
+    /**
+     * Creates an instance of the "evaluation badge" view.
+     *
+     * @param locale The localization services instance.
+     * @param label The label text.
+     */
+    constructor(locale, label) {
+        super(locale);
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: ['ck', 'ck-evaluation-badge'],
+                'aria-hidden': true
+            },
+            children: [
+                {
+                    tag: 'span',
+                    attributes: {
+                        class: ['ck', 'ck-evaluation-badge__label']
+                    },
+                    children: [label]
+                }
+            ]
+        });
+    }
+}
+/**
+ * Returns the license type based on the license key.
+ */
+function getLicenseTypeFromLicenseKey(licenseKey) {
+    if (licenseKey == 'GPL') {
+        return 'GPL';
+    }
+    const licenseContent = parseBase64EncodedObject(licenseKey.split('.')[1]);
+    if (!licenseContent) {
+        return null;
+    }
+    return licenseContent.licenseType || 'production';
+}

package/src/editorui/poweredby.d.ts

@@ -5,67 +5,30 @@
 /**
  * @module ui/editorui/poweredby
  */
-import type { Editor } from '@ckeditor/ckeditor5-core';
-declare const PoweredBy_base: {
-    new (): import("@ckeditor/ckeditor5-utils").DomEmitter;
-    prototype: import("@ckeditor/ckeditor5-utils").DomEmitter;
-};
+import type { Editor, UiConfig } from '@ckeditor/ckeditor5-core';
+import View from '../view.js';
+import Badge from '../badge/badge.js';
+type PoweredByConfig = Required<UiConfig>['poweredBy'];
 /**
  * A helper that enables the "powered by" feature in the editor and renders a link to the project's
  * webpage next to the bottom of the editable element (editor root, source editing area, etc.) when the editor is focused.
  *
  * @private
  */
-export default class PoweredBy extends /* #__PURE__ */ PoweredBy_base {
-    /**
-     * Editor instance the helper was created for.
-     */
-    private readonly editor;
-    /**
-     * A reference to the balloon panel hosting and positioning the "powered by" link and logo.
-     */
-    private _balloonView;
-    /**
-     * A throttled version of the {@link #_showBalloon} method meant for frequent use to avoid performance loss.
-     */
-    private _showBalloonThrottled;
-    /**
-     * A reference to the last editable element (root, source editing area, etc.) focused by the user.
-     * Since the focus can move to other focusable elements in the UI, this reference allows positioning the balloon over the
-     * right element whether the user is typing or using the UI.
-     */
-    private _lastFocusedEditableElement;
-    /**
-     * Creates a "powered by" helper for a given editor. The feature is initialized on Editor#ready
-     * event.
-     *
-     * @param editor
-     */
+export default class PoweredBy extends Badge {
     constructor(editor: Editor);
     /**
-     * Destroys the "powered by" helper along with its view.
-     */
-    destroy(): void;
-    /**
-     * Enables "powered by" label once the editor (ui) is ready.
-     */
-    private _handleEditorReady;
-    /**
-     * Creates an instance of the {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView balloon panel}
-     * with the "powered by" view inside ready for positioning.
-     */
-    private _createBalloonView;
-    /**
-     * Attempts to display the balloon with the "powered by" view.
+     * Enables "powered by" label.
      */
-    private _showBalloon;
+    protected _isEnabled(): boolean;
     /**
-     * Hides the "powered by" balloon if already visible.
+     * Creates a "powered by" badge content.
      */
-    private _hideBalloon;
+    protected _createBadgeContent(): View<HTMLElement>;
     /**
-     * Updates the {@link #_lastFocusedEditableElement} based on the state of the global focus tracker.
+     * Returns the normalized configuration for the "powered by" badge.
+     * It takes the user configuration into account and falls back to the default one.
      */
-    private _updateLastFocusedEditableElement;
+    protected _getNormalizedConfig(): Required<PoweredByConfig>;
 }
 export {};

package/src/editorui/poweredby.js

@@ -2,18 +2,11 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import { DomEmitterMixin, Rect, verifyLicense } from '@ckeditor/ckeditor5-utils';
-import BalloonPanelView from '../panel/balloon/balloonpanelview.js';
-import IconView from '../icon/iconview.js';
+import { parseBase64EncodedObject } from '@ckeditor/ckeditor5-utils';
 import View from '../view.js';
-import { throttle } from 'lodash-es';
+import Badge from '../badge/badge.js';
+import IconView from '../icon/iconview.js';
 import poweredByIcon from '../../theme/icons/project-logo.svg';
-const ICON_WIDTH = 53;
-const ICON_HEIGHT = 10;
-// ⚠ Note, whenever changing the threshold, make sure to update the docs/support/managing-ckeditor-logo.md docs
-// as this information is also mentioned there ⚠.
-const NARROW_ROOT_HEIGHT_THRESHOLD = 50;
-const NARROW_ROOT_WIDTH_THRESHOLD = 350;
 const DEFAULT_LABEL = 'Powered by';
 /**
  * A helper that enables the "powered by" feature in the editor and renders a link to the project's
@@ -21,129 +14,52 @@ const DEFAULT_LABEL = 'Powered by';
  *
  * @private
  */
-export default class PoweredBy extends /* #__PURE__ */ DomEmitterMixin() {
-    /**
-     * Creates a "powered by" helper for a given editor. The feature is initialized on Editor#ready
-     * event.
-     *
-     * @param editor
-     */
+export default class PoweredBy extends Badge {
     constructor(editor) {
-        super();
-        this.editor = editor;
-        this._balloonView = null;
-        this._lastFocusedEditableElement = null;
-        this._showBalloonThrottled = throttle(this._showBalloon.bind(this), 50, { leading: true });
-        editor.on('ready', this._handleEditorReady.bind(this));
+        super(editor, { balloonClass: 'ck-powered-by-balloon' });
     }
     /**
-     * Destroys the "powered by" helper along with its view.
+     * Enables "powered by" label.
      */
-    destroy() {
-        const balloon = this._balloonView;
-        if (balloon) {
-            // Balloon gets destroyed by the body collection.
-            // The powered by view gets destroyed by the balloon.
-            balloon.unpin();
-            this._balloonView = null;
-        }
-        this._showBalloonThrottled.cancel();
-        this.stopListening();
-    }
-    /**
-     * Enables "powered by" label once the editor (ui) is ready.
-     */
-    _handleEditorReady() {
+    _isEnabled() {
         const editor = this.editor;
-        const forceVisible = !!editor.config.get('ui.poweredBy.forceVisible');
-        /* istanbul ignore next -- @preserve */
-        if (!forceVisible && verifyLicense(editor.config.get('licenseKey')) === 'VALID') {
-            return;
+        const forceVisible = editor.config.get('ui.poweredBy.forceVisible');
+        if (forceVisible) {
+            return true;
         }
-        // No view means no body collection to append the powered by balloon to.
-        if (!editor.ui.view) {
-            return;
-        }
-        editor.ui.focusTracker.on('change:isFocused', (evt, data, isFocused) => {
-            this._updateLastFocusedEditableElement();
-            if (isFocused) {
-                this._showBalloon();
-            }
-            else {
-                this._hideBalloon();
-            }
-        });
-        editor.ui.focusTracker.on('change:focusedElement', (evt, data, focusedElement) => {
-            this._updateLastFocusedEditableElement();
-            if (focusedElement) {
-                this._showBalloon();
-            }
-        });
-        editor.ui.on('update', () => {
-            this._showBalloonThrottled();
-        });
-    }
-    /**
-     * Creates an instance of the {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView balloon panel}
-     * with the "powered by" view inside ready for positioning.
-     */
-    _createBalloonView() {
-        const editor = this.editor;
-        const balloon = this._balloonView = new BalloonPanelView();
-        const poweredByConfig = getNormalizedConfig(editor);
-        const view = new PoweredByView(editor.locale, poweredByConfig.label);
-        balloon.content.add(view);
-        balloon.set({
-            class: 'ck-powered-by-balloon'
-        });
-        editor.ui.view.body.add(balloon);
-        this._balloonView = balloon;
-    }
-    /**
-     * Attempts to display the balloon with the "powered by" view.
-     */
-    _showBalloon() {
-        if (!this._lastFocusedEditableElement) {
-            return;
+        const licenseKey = editor.config.get('licenseKey');
+        if (licenseKey == 'GPL') {
+            return true;
         }
-        const attachOptions = getBalloonAttachOptions(this.editor, this._lastFocusedEditableElement);
-        if (attachOptions) {
-            if (!this._balloonView) {
-                this._createBalloonView();
-            }
-            this._balloonView.pin(attachOptions);
+        const licenseContent = parseBase64EncodedObject(licenseKey.split('.')[1]);
+        if (!licenseContent) {
+            return true;
         }
+        return !licenseContent.whiteLabel;
     }
     /**
-     * Hides the "powered by" balloon if already visible.
+     * Creates a "powered by" badge content.
      */
-    _hideBalloon() {
-        if (this._balloonView) {
-            this._balloonView.unpin();
-        }
+    _createBadgeContent() {
+        return new PoweredByView(this.editor.locale, this._getNormalizedConfig().label);
     }
     /**
-     * Updates the {@link #_lastFocusedEditableElement} based on the state of the global focus tracker.
+     * Returns the normalized configuration for the "powered by" badge.
+     * It takes the user configuration into account and falls back to the default one.
      */
-    _updateLastFocusedEditableElement() {
-        const editor = this.editor;
-        const isFocused = editor.ui.focusTracker.isFocused;
-        const focusedElement = editor.ui.focusTracker.focusedElement;
-        if (!isFocused || !focusedElement) {
-            this._lastFocusedEditableElement = null;
-            return;
-        }
-        const editableEditorElements = Array.from(editor.ui.getEditableElementsNames()).map(name => {
-            return editor.ui.getEditableElement(name);
-        });
-        if (editableEditorElements.includes(focusedElement)) {
-            this._lastFocusedEditableElement = focusedElement;
-        }
-        else {
-            // If it's none of the editable element, then the focus is somewhere in the UI. Let's display powered by
-            // over the first element then.
-            this._lastFocusedEditableElement = editableEditorElements[0];
-        }
+    _getNormalizedConfig() {
+        const badgeConfig = super._getNormalizedConfig();
+        const userConfig = this.editor.config.get('ui.poweredBy') || {};
+        const position = userConfig.position || badgeConfig.position;
+        const verticalOffset = position === 'inside' ? 5 : badgeConfig.verticalOffset;
+        return {
+            position,
+            side: userConfig.side || badgeConfig.side,
+            label: userConfig.label === undefined ? DEFAULT_LABEL : userConfig.label,
+            verticalOffset: userConfig.verticalOffset !== undefined ? userConfig.verticalOffset : verticalOffset,
+            horizontalOffset: userConfig.horizontalOffset !== undefined ? userConfig.horizontalOffset : badgeConfig.horizontalOffset,
+            forceVisible: !!userConfig.forceVisible
+        };
     }
 }
 /**
@@ -151,7 +67,7 @@ export default class PoweredBy extends /* #__PURE__ */ DomEmitterMixin() {
  */
 class PoweredByView extends View {
     /**
-     * Created an instance of the "powered by" view.
+     * Creates an instance of the "powered by" view.
      *
      * @param locale The localization services instance.
      * @param label The label text.
@@ -164,14 +80,6 @@ class PoweredByView extends View {
             content: poweredByIcon,
             isColorInherited: false
         });
-        iconView.extendTemplate({
-            attributes: {
-                style: {
-                    width: ICON_WIDTH + 'px',
-                    height: ICON_HEIGHT + 'px'
-                }
-            }
-        });
         this.setTemplate({
             tag: 'div',
             attributes: {
@@ -207,69 +115,3 @@ class PoweredByView extends View {
         });
     }
 }
-function getBalloonAttachOptions(editor, focusedEditableElement) {
-    const poweredByConfig = getNormalizedConfig(editor);
-    const positioningFunction = poweredByConfig.side === 'right' ?
-        getLowerRightCornerPosition(focusedEditableElement, poweredByConfig) :
-        getLowerLeftCornerPosition(focusedEditableElement, poweredByConfig);
-    return {
-        target: focusedEditableElement,
-        positions: [positioningFunction]
-    };
-}
-function getLowerRightCornerPosition(focusedEditableElement, config) {
-    return getLowerCornerPosition(focusedEditableElement, config, (rootRect, balloonRect) => {
-        return rootRect.left + rootRect.width - balloonRect.width - config.horizontalOffset;
-    });
-}
-function getLowerLeftCornerPosition(focusedEditableElement, config) {
-    return getLowerCornerPosition(focusedEditableElement, config, rootRect => rootRect.left + config.horizontalOffset);
-}
-function getLowerCornerPosition(focusedEditableElement, config, getBalloonLeft) {
-    return (visibleEditableElementRect, balloonRect) => {
-        const editableElementRect = new Rect(focusedEditableElement);
-        if (editableElementRect.width < NARROW_ROOT_WIDTH_THRESHOLD || editableElementRect.height < NARROW_ROOT_HEIGHT_THRESHOLD) {
-            return null;
-        }
-        let balloonTop;
-        if (config.position === 'inside') {
-            balloonTop = editableElementRect.bottom - balloonRect.height;
-        }
-        else {
-            balloonTop = editableElementRect.bottom - balloonRect.height / 2;
-        }
-        balloonTop -= config.verticalOffset;
-        const balloonLeft = getBalloonLeft(editableElementRect, balloonRect);
-        // Clone the editable element rect and place it where the balloon would be placed.
-        // This will allow getVisible() to work from editable element's perspective (rect source).
-        // and yield a result as if the balloon was on the same (scrollable) layer as the editable element.
-        const newBalloonPositionRect = visibleEditableElementRect
-            .clone()
-            .moveTo(balloonLeft, balloonTop)
-            .getIntersection(balloonRect.clone().moveTo(balloonLeft, balloonTop));
-        const newBalloonPositionVisibleRect = newBalloonPositionRect.getVisible();
-        if (!newBalloonPositionVisibleRect || newBalloonPositionVisibleRect.getArea() < balloonRect.getArea()) {
-            return null;
-        }
-        return {
-            top: balloonTop,
-            left: balloonLeft,
-            name: `position_${config.position}-side_${config.side}`,
-            config: {
-                withArrow: false
-            }
-        };
-    };
-}
-function getNormalizedConfig(editor) {
-    const userConfig = editor.config.get('ui.poweredBy');
-    const position = userConfig && userConfig.position || 'border';
-    return {
-        position,
-        label: DEFAULT_LABEL,
-        verticalOffset: position === 'inside' ? 5 : 0,
-        horizontalOffset: 5,
-        side: editor.locale.contentLanguageDirection === 'ltr' ? 'right' : 'left',
-        ...userConfig
-    };
-}

package/src/menubar/menubarmenupanelview.d.ts

@@ -50,4 +50,4 @@ export default class MenuBarMenuPanelView extends View implements FocusableView
  *
  * They are reflected as CSS class suffixes on the panel view element.
  */
-export type MenuBarMenuPanelPosition = 'se' | 'sw' | 'ne' | 'nw' | 'w' | 'e';
+export type MenuBarMenuPanelPosition = 'se' | 'sw' | 'ne' | 'nw' | 'w' | 'ws' | 'e' | 'es';

package/src/menubar/menubarmenuview.d.ts

@@ -100,6 +100,11 @@ export default class MenuBarMenuView extends View implements FocusableView {
      * the {@link module:ui/menubar/menubarview~MenuBarView menu bar} and the UI language direction.
      */
     get _panelPositions(): Array<PositioningFunction>;
+    /**
+     * The default position of the panel when the menu is opened.
+     * It is used when the optimal position cannot be calculated.
+     */
+    private get _defaultMenuPositionName();
     /**
      * A function used to calculate the optimal position for the dropdown panel.
      *

package/src/menubar/menubarmenuview.js

@@ -118,7 +118,7 @@ class MenuBarMenuView extends View {
                 fitInViewport: true,
                 positions: this._panelPositions
             });
-            this.panelView.position = (optimalPanelPosition ? optimalPanelPosition.name : this._panelPositions[0].name);
+            this.panelView.position = (optimalPanelPosition ? optimalPanelPosition.name : this._defaultMenuPositionName);
         });
     }
     /**
@@ -150,6 +150,28 @@ class MenuBarMenuView extends View {
             }
         }
     }
+    /**
+     * The default position of the panel when the menu is opened.
+     * It is used when the optimal position cannot be calculated.
+     */
+    get _defaultMenuPositionName() {
+        if (this.locale.uiLanguageDirection === 'ltr') {
+            if (this.parentMenuView) {
+                return 'es';
+            }
+            else {
+                return 'se';
+            }
+        }
+        else {
+            if (this.parentMenuView) {
+                return 'ws';
+            }
+            else {
+                return 'sw';
+            }
+        }
+    }
 }
 /**
  * A function used to calculate the optimal position for the dropdown panel.

package/src/menubar/utils.d.ts

@@ -268,6 +268,7 @@ export declare const MenuBarMenuViewPanelPositioningFunctions: Record<string, Po
  * 				groupId: 'insertInline',
  * 				items: [
  * 					'menuBar:link',
+ * 					'menuBar:bookmark',
  * 					'menuBar:comment',
  * 					'menuBar:insertMergeField'
  * 				]

package/src/menubar/utils.js

@@ -496,6 +496,7 @@ export const MenuBarMenuViewPanelPositioningFunctions = {
  * 				groupId: 'insertInline',
  * 				items: [
  * 					'menuBar:link',
+ * 					'menuBar:bookmark',
  * 					'menuBar:comment',
  * 					'menuBar:insertMergeField'
  * 				]
@@ -753,6 +754,7 @@ export const DefaultMenuBarItems = [
                 groupId: 'insertInline',
                 items: [
                     'menuBar:link',
+                    'menuBar:bookmark',
                     'menuBar:comment',
                     'menuBar:insertMergeField'
                 ]

package/theme/globals/_evaluationbadge.css

@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	/* where 7.5(px) is the font size of the evaluation badge label and 13(px) is the base font size. */
+	--ck-evaluation-badge-font-size: calc(var(--ck-font-size-base) * 7.5 / 13);
+	/* where 7.5(px) is the line height of the evaluation badge label and 13(px) is the base font size. */
+	--ck-evaluation-badge-line-height: calc(var(--ck-font-size-base) * 7.5 / 13);
+	/* where -0.2(px) is the letter spacing of the evaluation badge label and 13(px) is the base font size. */
+	--ck-evaluation-badge-letter-spacing: calc(var(--ck-font-size-base) * -0.2 / 13);
+	--ck-evaluation-badge-padding-vertical: 2px;
+	--ck-evaluation-badge-padding-horizontal: 4px;
+	--ck-evaluation-badge-text-color: hsl(0, 0%, 31%);
+	--ck-evaluation-badge-border-radius: var(--ck-border-radius);
+	--ck-evaluation-badge-background: hsl(0, 0%, 100%);
+	--ck-evaluation-badge-border-color: var(--ck-color-focus-border);
+}
+
+.ck.ck-balloon-panel.ck-evaluation-badge-balloon {
+	--ck-border-radius: var(--ck-evaluation-badge-border-radius);
+
+	box-shadow: none;
+	background: var(--ck-evaluation-badge-background);
+	min-height: unset;
+	z-index: calc( var(--ck-z-panel) - 1 );
+
+	& .ck.ck-evaluation-badge {
+		line-height: var(--ck-evaluation-badge-line-height);
+		padding: var(--ck-evaluation-badge-padding-vertical) var(--ck-evaluation-badge-padding-horizontal);
+
+		& .ck-evaluation-badge__label {
+			display: block;
+			padding: 0 2px;
+			font-size: var(--ck-evaluation-badge-font-size);
+			letter-spacing: var(--ck-evaluation-badge-letter-spacing);
+			font-weight: bold;
+			line-height: normal;
+			text-transform: uppercase;
+			color: var(--ck-evaluation-badge-text-color);
+		}
+	}
+
+	&[class*="position_inside"] {
+		border-color: transparent;
+	}
+
+	&[class*="position_border"] {
+		border: var(--ck-focus-ring);
+		border-color: var(--ck-evaluation-badge-border-color);
+	}
+}
+