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

package/README.md

@@ -3,10 +3,22 @@ CKEditor 5 UI framework
 
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-ui.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-ui)
 [![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5?branch=master)
-[![Build Status](https://travis-ci.com/ckeditor/ckeditor5.svg?branch=master)](https://app.travis-ci.com/github/ckeditor/ckeditor5)
+[![CircleCI](https://circleci.com/gh/ckeditor/ckeditor5.svg?style=shield)](https://app.circleci.com/pipelines/github/ckeditor/ckeditor5?branch=master)
 
 This package implements a simple UI framework and CKEditor 5's standard UI library.
 
+## Installation
+
+This plugin is part of the `ckeditor5` package. Install the whole package to use it.
+
+```bash
+npm install ckeditor5
+```
+
+## Create free account
+
+If you want to check full CKEditor 5 capabilities, sign up for a [free non-commitment 14-day trial](https://portal.ckeditor.com/signup).
+
 ## Demo
 
 Check out the [editor toolbar demo](https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/toolbar/toolbar.html#demo) and [block toolbar demo](https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/toolbar.html#block-toolbar#demo) in CKEditor 5 documentation.
@@ -15,12 +27,6 @@ Check out the [editor toolbar demo](https://ckeditor.com/docs/ckeditor5/latest/g
 
 See the [`@ckeditor/ckeditor5-ui` package](https://ckeditor.com/docs/ckeditor5/latest/api/ui.html) page in [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/).
 
-## Installation
-
-```bash
-npm install ckeditor5
-```
-
 ## License
 
 Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html). For full details about the license, please check the `LICENSE.md` file or [https://ckeditor.com/legal/ckeditor-oss-license](https://ckeditor.com/legal/ckeditor-oss-license).

package/dist/badge/badge.d.ts

@@ -0,0 +1,133 @@
+/**
+ * @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
+ */
+/**
+ * @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/badge/badge
+ */
+import type { Editor } from '@ckeditor/ckeditor5-core';
+import type View from '../view.js';
+declare const Badge_base: {
+    new (): import("@ckeditor/ckeditor5-utils").DomEmitter;
+    prototype: import("@ckeditor/ckeditor5-utils").DomEmitter;
+};
+/**
+ * A helper that enables the badge feature in the editor and renders a custom view next to the bottom of the editable element
+ * (editor root, source editing area, etc.) when the editor is focused.
+ *
+ * @private
+ */
+export default abstract class Badge extends /* #__PURE__ */ Badge_base {
+    /**
+     * Editor instance the helper was created for.
+     */
+    protected readonly editor: Editor;
+    /**
+     * A reference to the balloon panel hosting and positioning the badge content.
+     */
+    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;
+    /**
+     * An additional CSS class added to the `BalloonView`.
+     */
+    private readonly _balloonClass;
+    /**
+     * Creates a badge for a given editor. The feature is initialized on Editor#ready
+     * event.
+     */
+    protected constructor(editor: Editor, options?: {
+        balloonClass?: string;
+    });
+    /**
+     * Destroys the badge along with its view.
+     */
+    destroy(): void;
+    /**
+     * Enables badge label once the editor (ui) is ready.
+     */
+    protected _handleEditorReady(): void;
+    /**
+     * Returns normalized configuration for the badge.
+     */
+    protected _getNormalizedConfig(): BadgeConfig;
+    /**
+     * Creates the badge content.
+     */
+    protected abstract _createBadgeContent(): View<HTMLElement>;
+    /**
+     * Enables the badge feature.
+     */
+    protected abstract _isEnabled(): boolean;
+    /**
+     * Attempts to display the balloon with the badge view.
+     */
+    private _showBalloon;
+    /**
+     * Hides the badge balloon if already visible.
+     */
+    private _hideBalloon;
+    /**
+     * Creates an instance of the {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView balloon panel}
+     * with the badge view inside ready for positioning.
+     */
+    private _createBalloonView;
+    /**
+     * Returns the options for attaching the balloon to the focused editable element.
+     */
+    private _getBalloonAttachOptions;
+    /**
+     * Updates the {@link #_lastFocusedEditableElement} based on the state of the global focus tracker.
+     */
+    private _updateLastFocusedEditableElement;
+}
+/**
+ * The badge configuration options.
+ **/
+export interface BadgeConfig {
+    /**
+     * The position of the badge.
+     *
+     * * When `'inside'`, the badge will be displayed within the boundaries of the editing area.
+     * * When `'border'`, the basge will be displayed over the bottom border of the editing area.
+     *
+     * @default 'border'
+     */
+    position: 'inside' | 'border';
+    /**
+     * Allows choosing the side of the editing area where the badge will be displayed.
+     *
+     * **Note:** If {@link module:core/editor/editorconfig~EditorConfig#language `config.language`} is set to an RTL (right-to-left)
+     * language, the side switches to `'left'` by default.
+     *
+     * @default 'right'
+     */
+    side: 'left' | 'right';
+    /**
+     * The vertical distance the badge can be moved away from its default position.
+     *
+     * **Note:** If `position` is `'border'`, the offset is measured from the (vertical) center of the badge.
+     *
+     * @default 5
+     */
+    verticalOffset: number;
+    /**
+     * The horizontal distance between the side of the editing root and the nearest side of the badge.
+     *
+     * @default 5
+     */
+    horizontalOffset: number;
+}
+export {};

package/dist/dropdown/dropdownview.d.ts

@@ -193,6 +193,12 @@ export default class DropdownView extends View<HTMLDivElement> {
      * utility considering the direction of the language the UI of the editor is displayed in.
      */
     private get _panelPositions();
+    /**
+     * Returns the default position of the dropdown panel based on the direction of the UI language.
+     * It is used when the {@link #panelPosition} is set to `'auto'` and the panel has not found a
+     * suitable position to fit into the viewport.
+     */
+    private get _defaultPanelPositionName();
     /**
      * A set of positioning functions used by the dropdown view to determine
      * the optimal position (i.e. fitting into the browser viewport) of its

package/dist/editorui/bodycollection.d.ts

@@ -10,20 +10,51 @@ import ViewCollection from '../viewcollection.js';
 import type View from '../view.js';
 import { type Locale } from '@ckeditor/ckeditor5-utils';
 /**
- * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached
- * from the DOM structure of the editor, like panels, icons, etc.
+ * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached from the DOM structure of
+ * the editor, like floating panels, floating toolbars, dialogs, etc.
  *
- * The body collection is available in the {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} property.
+ * The body collection is available under the {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} property.
  * Any plugin can add a {@link module:ui/view~View view} to this collection.
- * These views will render in a container placed directly in the `<body>` element.
- * The editor will detach and destroy this collection when the editor will be {@link module:core/editor/editor~Editor#destroy destroyed}.
  *
- * If you need to control the life cycle of the body collection on your own, you can create your own instance of this class.
+ * All views added to a body collection render in a dedicated DOM container (`<div class="ck ck-body ...">...</div>`). All body collection
+ * containers render in a common shared (`<div class="ck-body-wrapper">...</div>`) in the DOM to limit the pollution of
+ * the `<body>` element. The resulting DOM structure is as follows:
  *
- * A body collection will render itself automatically in the DOM body element as soon as you call {@link ~BodyCollection#attachToDom}.
- * If you create multiple body collections, this class will create a special wrapper element in the DOM to limit the number of
- * elements created directly in the body and remove it when the last body collection will be
- * {@link ~BodyCollection#detachFromDom detached}.
+ * ```html
+ * <body>
+ * 	<!-- Content of the webpage... -->
+ *
+ * 	<!-- The shared wrapper for all body collection containers. -->
+ * 	<div class="ck-body-wrapper">
+ * 		<!-- The container of the first body collection instance. -->
+ * 		<div class="ck ck-body ...">
+ * 			<!-- View elements belonging to the first body collection -->
+ * 		</div>
+ *
+ * 		<!-- The container of the second body collection instance. -->
+ * 		<div class="ck ck-body ...">...</div>
+ *
+ * 		<!-- More body collection containers for the rest of instances... -->
+ * 	</div>
+ * </body>
+ * ```
+ *
+ * By default, the {@link module:ui/editorui/editoruiview~EditorUIView `editor.ui.view`} manages the life cycle of the
+ * {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} collection, attaching and detaching it
+ * when the editor gets created or {@link module:core/editor/editor~Editor#destroy destroyed}.
+ *
+ * # Custom body collection instances
+ *
+ * Even though most editor instances come with a built-in body collection
+ * ({@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`}), you can create your own instance of this
+ * class if you need to control their life cycle.
+ *
+ * The life cycle of a custom body collection must be handled manually by the developer using the dedicated API:
+ * * A body collection will render itself automatically in the DOM as soon as you call {@link ~BodyCollection#attachToDom}.
+ * * Calling {@link ~BodyCollection#detachFromDom} will remove the collection from the DOM.
+ *
+ * **Note**: The shared collection wrapper (`<div class="ck-body-wrapper">...</div>`) gets automatically removed from DOM when the
+ * last body collection is {@link ~BodyCollection#detachFromDom detached} and does not require any special handling.
  */
 export default class BodyCollection extends ViewCollection {
     /**
@@ -32,9 +63,13 @@ export default class BodyCollection extends ViewCollection {
      */
     readonly locale: Locale;
     /**
-     * The element holding elements of the body region.
+     * The element holding elements of the body collection.
      */
     private _bodyCollectionContainer?;
+    /**
+     * The wrapper element that holds all of the {@link #_bodyCollectionContainer} elements.
+     */
+    private static _bodyWrapper?;
     /**
      * Creates a new instance of the {@link module:ui/editorui/bodycollection~BodyCollection}.
      *
@@ -43,7 +78,7 @@ export default class BodyCollection extends ViewCollection {
      */
     constructor(locale: Locale, initialItems?: Iterable<View>);
     /**
-     * The element holding elements of the body region.
+     * The element holding elements of the body collection.
      */
     get bodyCollectionContainer(): HTMLElement | undefined;
     /**

package/dist/editorui/editorui.d.ts

@@ -12,6 +12,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 type EditorUIView from './editoruiview.js';
 import type ToolbarView from '../toolbar/toolbarview.js';
@@ -48,6 +49,10 @@ export default abstract class EditorUI extends /* #__PURE__ */ EditorUI_base {
      * A helper that enables the "powered by" feature in the editor and renders a link to the project's webpage.
      */
     readonly poweredBy: PoweredBy;
+    /**
+     * A helper that enables the "evaluation badge" feature in the editor.
+     */
+    readonly evaluationBadge: EvaluationBadge;
     /**
      * A helper that manages the content of an `aria-live` regions used by editor features to announce status changes
      * to screen readers.

package/dist/editorui/evaluationbadge.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @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
+ */
+/**
+ * @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/dist/editorui/poweredby.d.ts

@@ -9,67 +9,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/dist/index-editor.css

@@ -15,13 +15,20 @@
 	transition:none !important;
 }
 :root{
-	--ck-powered-by-line-height:10px;
+	--ck-powered-by-font-size:calc(var(--ck-font-size-base) * 7.5 / 13);
+	--ck-powered-by-line-height:calc(var(--ck-font-size-base) * 10 / 13);
+	--ck-powered-by-letter-spacing:calc(var(--ck-font-size-base) * -0.2 / 13);
 	--ck-powered-by-padding-vertical:2px;
 	--ck-powered-by-padding-horizontal:4px;
 	--ck-powered-by-text-color:hsl(0, 0%, 31%);
 	--ck-powered-by-border-radius:var(--ck-border-radius);
 	--ck-powered-by-background:hsl(0, 0%, 100%);
 	--ck-powered-by-border-color:var(--ck-color-focus-border);
+
+	--ck-powered-by-svg-width:53;
+	--ck-powered-by-svg-height:10;
+	--ck-powered-by-icon-width:calc(var(--ck-font-size-base) * var(--ck-powered-by-svg-width) / 13);
+	--ck-powered-by-icon-height:calc(var(--ck-font-size-base) * var(--ck-powered-by-svg-height) / 13);
 }
 .ck.ck-balloon-panel.ck-powered-by-balloon{
 	--ck-border-radius:var(--ck-powered-by-border-radius);
@@ -44,8 +51,8 @@
 			padding:var(--ck-powered-by-padding-vertical) var(--ck-powered-by-padding-horizontal);
 		}
 .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-powered-by__label{
-			font-size:7.5px;
-			letter-spacing:-.2px;
+			font-size:var(--ck-powered-by-font-size);
+			letter-spacing:var(--ck-powered-by-letter-spacing);
 			padding-left:2px;
 			text-transform:uppercase;
 			font-weight:bold;
@@ -58,6 +65,8 @@
 .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-icon{
 			display:block;
 			cursor:pointer;
+			width:var(--ck-powered-by-icon-width);
+			height:var(--ck-powered-by-icon-height);
 		}
 .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by:hover a{
 				filter:grayscale(0%);
@@ -70,6 +79,46 @@
 		border:var(--ck-focus-ring);
 		border-color:var(--ck-powered-by-border-color);
 	}
+:root{
+	--ck-evaluation-badge-font-size:calc(var(--ck-font-size-base) * 7.5 / 13);
+	--ck-evaluation-badge-line-height:calc(var(--ck-font-size-base) * 7.5 / 13);
+	--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-balloon-panel.ck-evaluation-badge-balloon .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.ck-balloon-panel.ck-evaluation-badge-balloon .ck.ck-evaluation-badge .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);
+		}
+.ck.ck-balloon-panel.ck-evaluation-badge-balloon[class*="position_inside"]{
+		border-color:transparent;
+	}
+.ck.ck-balloon-panel.ck-evaluation-badge-balloon[class*="position_border"]{
+		border:var(--ck-focus-ring);
+		border-color:var(--ck-evaluation-badge-border-color);
+	}
 
 .ck.ck-button,
 a.ck.ck-button{

package/dist/index.css

@@ -46,13 +46,23 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 :root {
-	--ck-powered-by-line-height: 10px;
+	/* where 7.5(px) is the font size of the powered by label and 13(px) is the base font size. */
+	--ck-powered-by-font-size: calc(var(--ck-font-size-base) * 7.5 / 13);
+	/* where 10(px) is the line height of the powered by label and 13(px) is the base font size. */
+	--ck-powered-by-line-height: calc(var(--ck-font-size-base) * 10 / 13);
+	/* where -0.2(px) is the letter spacing of the powered by label and 13(px) is the base font size. */
+	--ck-powered-by-letter-spacing: calc(var(--ck-font-size-base) * -0.2 / 13);
 	--ck-powered-by-padding-vertical: 2px;
 	--ck-powered-by-padding-horizontal: 4px;
 	--ck-powered-by-text-color: hsl(0, 0%, 31%);
 	--ck-powered-by-border-radius: var(--ck-border-radius);
 	--ck-powered-by-background: hsl(0, 0%, 100%);
 	--ck-powered-by-border-color: var(--ck-color-focus-border);
+
+	--ck-powered-by-svg-width: 53;
+	--ck-powered-by-svg-height: 10;
+	--ck-powered-by-icon-width: calc(var(--ck-font-size-base) * var(--ck-powered-by-svg-width) / 13);
+	--ck-powered-by-icon-height: calc(var(--ck-font-size-base) * var(--ck-powered-by-svg-height) / 13);
 }
 .ck.ck-balloon-panel.ck-powered-by-balloon {
 	--ck-border-radius: var(--ck-powered-by-border-radius);
@@ -75,8 +85,8 @@
 			padding: var(--ck-powered-by-padding-vertical) var(--ck-powered-by-padding-horizontal);
 		}
 .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-powered-by__label {
-			font-size: 7.5px;
-			letter-spacing: -.2px;
+			font-size: var(--ck-powered-by-font-size);
+			letter-spacing: var(--ck-powered-by-letter-spacing);
 			padding-left: 2px;
 			text-transform: uppercase;
 			font-weight: bold;
@@ -89,6 +99,8 @@
 .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-icon {
 			display: block;
 			cursor: pointer;
+			width: var(--ck-powered-by-icon-width);
+			height: var(--ck-powered-by-icon-height);
 		}
 .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by:hover a {
 				filter: grayscale(0%);
@@ -101,6 +113,53 @@
 		border: var(--ck-focus-ring);
 		border-color: var(--ck-powered-by-border-color);
 	}
+/*
+ * 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-balloon-panel.ck-evaluation-badge-balloon .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.ck-balloon-panel.ck-evaluation-badge-balloon .ck.ck-evaluation-badge .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);
+		}
+.ck.ck-balloon-panel.ck-evaluation-badge-balloon[class*="position_inside"] {
+		border-color: transparent;
+	}
+.ck.ck-balloon-panel.ck-evaluation-badge-balloon[class*="position_border"] {
+		border: var(--ck-focus-ring);
+		border-color: var(--ck-evaluation-badge-border-color);
+	}
 
 /*
  * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.