ninegrid2 6.1301.0 → 6.1302.0

package/dist/bundle.cjs.js

@@ -2,21 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _mergeNamespaces(n, m) {
-	m.forEach(function (e) {
-		e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
-			if (k !== 'default' && !(k in n)) {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	});
-	return Object.freeze(n);
-}
-
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -29133,10 +29118,7 @@ const env = {
     isSafari: /* #__PURE__ */ isSafari(userAgent),
     isiOS: /* #__PURE__ */ isiOS(userAgent),
     isAndroid: /* #__PURE__ */ isAndroid(userAgent),
-    isBlink: /* #__PURE__ */ isBlink(userAgent),
-    get isMediaForcedColors() {
-        return isMediaForcedColors();
-    }};
+    isBlink: /* #__PURE__ */ isBlink(userAgent)};
 /**
  * Checks if User Agent represented by the string is running on Macintosh.
  *
@@ -29203,14 +29185,6 @@ function isBlink(userAgent) {
     // but after switching to the Blink it replaced "Edge/" with "Edg/".
     return userAgent.indexOf('chrome/') > -1 && userAgent.indexOf('edge/') < 0;
 }
-/**
- * Checks if the user agent has enabled a forced colors mode (e.g. Windows High Contrast mode).
- *
- * Returns `false` in environments where `window` global object is not available.
- */
-function isMediaForcedColors() {
-    return global$1.window.matchMedia ? global$1.window.matchMedia('(forced-colors: active)').matches : false;
-}
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -41562,8 +41536,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$1e = "@import \"./_hidden.css\";@import \"./_zindex.css\";@import \"./_transition.css\";@import \"./_poweredby.css\";@import \"./_evaluationbadge.css\";";
-styleInject(css_248z$1e);
+var css_248z$1d = "@import \"./_hidden.css\";@import \"./_zindex.css\";@import \"./_transition.css\";@import \"./_poweredby.css\";@import \"./_evaluationbadge.css\";";
+styleInject(css_248z$1d);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -42116,7 +42090,7 @@ function submitHandler({ view }) {
  * @param options.uiLanguageDirection String of ui language direction.
  */
 function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }) {
-    const getNumberOfColumns = typeof numberOfColumns === 'number' ? () => numberOfColumns : numberOfColumns;
+    const getNumberOfColumns = () => numberOfColumns ;
     keystrokeHandler.set('arrowright', getGridItemFocuser((focusedElementIndex, gridItems) => {
         return uiLanguageDirection === 'rtl' ?
             getLeftElementIndex(focusedElementIndex, gridItems.length) :
@@ -43214,8 +43188,8 @@ let Context$1 = class Context {
     }
 };
 
-var css_248z$1d = ".ck .ck-placeholder,.ck.ck-placeholder{position:relative;&:before{content:attr(data-placeholder);left:0;pointer-events:none;position:absolute;right:0}}.ck.ck-read-only .ck-placeholder{&:before{display:none}}.ck.ck-reset_all .ck-placeholder{position:relative}";
-styleInject(css_248z$1d);
+var css_248z$1c = ".ck .ck-placeholder,.ck.ck-placeholder{position:relative;&:before{content:attr(data-placeholder);left:0;pointer-events:none;position:absolute;right:0}}.ck.ck-read-only .ck-placeholder{&:before{display:none}}.ck.ck-reset_all .ck-placeholder{position:relative}";
+styleInject(css_248z$1c);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -50951,8 +50925,8 @@ function jumpOverInlineFiller(evt, data) {
     }
 }
 
-var css_248z$1c = ".ck.ck-editor__editable span[data-ck-unsafe-element]{display:none}";
-styleInject(css_248z$1c);
+var css_248z$1b = ".ck.ck-editor__editable span[data-ck-unsafe-element]{display:none}";
+styleInject(css_248z$1b);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -79620,193 +79594,6 @@ class MouseObserver extends DomEventObserver {
     }
 }
 
-/**
- * @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-licensing-options
- */
-const HEX_COLOR_REGEXP = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
-const RGB_COLOR_REGEXP = /^rgb\([ ]?([0-9]{1,3}[ %]?,[ ]?){2,3}[0-9]{1,3}[ %]?\)$/i;
-const RGBA_COLOR_REGEXP = /^rgba\([ ]?([0-9]{1,3}[ %]?,[ ]?){3}(1|[0-9]+%|[0]?\.?[0-9]+)\)$/i;
-const HSL_COLOR_REGEXP = /^hsl\([ ]?([0-9]{1,3}[ %]?[,]?[ ]*){3}(1|[0-9]+%|[0]?\.?[0-9]+)?\)$/i;
-const HSLA_COLOR_REGEXP = /^hsla\([ ]?([0-9]{1,3}[ %]?,[ ]?){2,3}(1|[0-9]+%|[0]?\.?[0-9]+)\)$/i;
-// Note: This regexp hardcodes a single level of nested () for values such as `calc( var( ...) + ...)`.
-// If this gets more complex, a proper parser should be used instead.
-const CSS_SHORTHAND_VALUE_REGEXP = /\w+\((?:[^()]|\([^()]*\))*\)|\S+/gi;
-const COLOR_NAMES = new Set([
-    // CSS Level 1
-    'black', 'silver', 'gray', 'white', 'maroon', 'red', 'purple', 'fuchsia',
-    'green', 'lime', 'olive', 'yellow', 'navy', 'blue', 'teal', 'aqua',
-    // CSS Level 2 (Revision 1)
-    'orange',
-    // CSS Color Module Level 3
-    'aliceblue', 'antiquewhite', 'aquamarine', 'azure', 'beige', 'bisque', 'blanchedalmond', 'blueviolet', 'brown',
-    'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan',
-    'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta',
-    'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue',
-    'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey',
-    'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod',
-    'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush',
-    'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray',
-    'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray',
-    'lightslategrey', 'lightsteelblue', 'lightyellow', 'limegreen', 'linen', 'magenta', 'mediumaquamarine',
-    'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen',
-    'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite',
-    'oldlace', 'olivedrab', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred',
-    'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon',
-    'sandybrown', 'seagreen', 'seashell', 'sienna', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow',
-    'springgreen', 'steelblue', 'tan', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'whitesmoke', 'yellowgreen',
-    // CSS Color Module Level 3 (System Colors)
-    'activeborder', 'activecaption', 'appworkspace', 'background', 'buttonface', 'buttonhighlight', 'buttonshadow',
-    'buttontext', 'captiontext', 'graytext', 'highlight', 'highlighttext', 'inactiveborder', 'inactivecaption',
-    'inactivecaptiontext', 'infobackground', 'infotext', 'menu', 'menutext', 'scrollbar', 'threeddarkshadow',
-    'threedface', 'threedhighlight', 'threedlightshadow', 'threedshadow', 'window', 'windowframe', 'windowtext',
-    // CSS Color Module Level 4
-    'rebeccapurple',
-    // Keywords
-    'currentcolor', 'transparent'
-]);
-/**
- * Checks if string contains [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) CSS value.
- *
- * ```ts
- * isColor( '#f00' );						// true
- * isColor( '#AA00BB33' );					// true
- * isColor( 'rgb(0, 0, 250)' );				// true
- * isColor( 'hsla(240, 100%, 50%, .7)' );	// true
- * isColor( 'deepskyblue' );				// true
- * ```
- *
- * **Note**: It does not support CSS Level 4 whitespace syntax, system colors and radius values for HSL colors.
- */
-function isColor(string) {
-    // As far as I was able to test checking some pre-conditions is faster than joining each test with ||.
-    if (string.startsWith('#')) {
-        return HEX_COLOR_REGEXP.test(string);
-    }
-    if (string.startsWith('rgb')) {
-        return RGB_COLOR_REGEXP.test(string) || RGBA_COLOR_REGEXP.test(string);
-    }
-    if (string.startsWith('hsl')) {
-        return HSL_COLOR_REGEXP.test(string) || HSLA_COLOR_REGEXP.test(string);
-    }
-    // Array check > RegExp test.
-    return COLOR_NAMES.has(string.toLowerCase());
-}
-const repeatValues = ['repeat-x', 'repeat-y', 'repeat', 'space', 'round', 'no-repeat'];
-/**
- * Checks if string contains [background repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) CSS value.
- */
-function isRepeat(string) {
-    return repeatValues.includes(string);
-}
-const positionValues = ['center', 'top', 'bottom', 'left', 'right'];
-/**
- * Checks if string contains [background position](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) CSS value.
- */
-function isPosition(string) {
-    return positionValues.includes(string);
-}
-const attachmentValues = ['fixed', 'scroll', 'local'];
-/**
- * Checks if string contains [background attachment](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment) CSS value.
- */
-function isAttachment(string) {
-    return attachmentValues.includes(string);
-}
-const urlRegExp = /^url\(/;
-/**
- * Checks if string contains [URL](https://developer.mozilla.org/en-US/docs/Web/CSS/url) CSS value.
- */
-function isURL(string) {
-    return urlRegExp.test(string);
-}
-/**
- * Parses parts of a 1-to-4 value notation - handles some CSS values with spaces (like RGB()).
- *
- * ```ts
- * getShorthandValues( 'red blue RGB(0, 0, 0)');
- * // will return [ 'red', 'blue', 'RGB(0, 0, 0)' ]
- * ```
- */
-function getShorthandValues(string) {
-    const matches = string.trim().slice(0, 1500).matchAll(CSS_SHORTHAND_VALUE_REGEXP);
-    return Array.from(matches).map(i => i[0]);
-}
-
-/**
- * @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-licensing-options
- */
-/**
- * Adds a background CSS styles processing rules.
- *
- * ```ts
- * editor.data.addStyleProcessorRules( addBackgroundRules );
- * ```
- *
- * The normalized value is stored as:
- *
- * ```ts
- * const styles = {
- * 	background: {
- * 		color,
- * 		repeat,
- * 		position,
- * 		attachment,
- * 		image
- * 	}
- * };
- * ````
- *
- * **Note**: Currently only `'background-color'` longhand value is parsed besides `'background'` shorthand. The reducer also supports only
- * `'background-color'` value.
- */
-function addBackgroundRules(stylesProcessor) {
-    stylesProcessor.setNormalizer('background', getBackgroundNormalizer());
-    stylesProcessor.setNormalizer('background-color', getBackgroundColorNormalizer());
-    stylesProcessor.setReducer('background', getBackgroundReducer());
-    stylesProcessor.setStyleRelation('background', ['background-color']);
-}
-function getBackgroundNormalizer() {
-    return value => {
-        const background = {};
-        const parts = getShorthandValues(value);
-        for (const part of parts) {
-            if (isRepeat(part)) {
-                background.repeat = background.repeat || [];
-                background.repeat.push(part);
-            }
-            else if (isPosition(part)) {
-                background.position = background.position || [];
-                background.position.push(part);
-            }
-            else if (isAttachment(part)) {
-                background.attachment = part;
-            }
-            else if (isColor(part)) {
-                background.color = part;
-            }
-            else if (isURL(part)) {
-                background.image = part;
-            }
-        }
-        return {
-            path: 'background',
-            value: background
-        };
-    };
-}
-function getBackgroundColorNormalizer() {
-    return value => ({ path: 'background.color', value });
-}
-function getBackgroundReducer() {
-    return value => {
-        const ret = [];
-        ret.push(['background-color', value.color]);
-        return ret;
-    };
-}
-
 /**
  * @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-licensing-options
@@ -82367,10 +82154,6 @@ var cancel = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><p
 
 var check = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.972 16.615a.997.997 0 0 1-.744-.292l-4.596-4.596a1 1 0 1 1 1.414-1.414l3.926 3.926 9.937-9.937a1 1 0 0 1 1.414 1.415L7.717 16.323a.997.997 0 0 1-.745.292z\"/></svg>";
 
-var colorPalette = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.209 18.717A8.5 8.5 0 1 1 18.686 9.6h-.008l.002.12a3 3 0 0 1-2.866 2.997h-.268l-.046-.002v.002h-4.791a2 2 0 1 0 0 4 1 1 0 1 1-.128 1.992 8.665 8.665 0 0 1-.372.008Zm-3.918-7.01a1.25 1.25 0 1 0-2.415-.648 1.25 1.25 0 0 0 2.415.647ZM5.723 8.18a1.25 1.25 0 1 0 .647-2.414 1.25 1.25 0 0 0-.647 2.414ZM9.76 6.155a1.25 1.25 0 1 0 .647-2.415 1.25 1.25 0 0 0-.647 2.415Zm4.028 1.759a1.25 1.25 0 1 0 .647-2.415 1.25 1.25 0 0 0-.647 2.415Z\"/></svg>";
-
-var eraser = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m8.636 9.531-2.758 3.94a.5.5 0 0 0 .122.696l3.224 2.284h1.314l2.636-3.736L8.636 9.53zm.288 8.451L5.14 15.396a2 2 0 0 1-.491-2.786l6.673-9.53a2 2 0 0 1 2.785-.49l3.742 2.62a2 2 0 0 1 .491 2.785l-7.269 10.053-2.147-.066z\"/><path d=\"M4 18h5.523v-1H4zm-2 0h1v-1H2z\"/></svg>";
-
 var loupe = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.68 13.74h-.001l4.209 4.208a1 1 0 1 0 1.414-1.414l-4.267-4.268a6 6 0 1 0-1.355 1.474ZM13 9a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z\"/></svg>";
 
 var previousArrow = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.463 5.187a.888.888 0 1 1 1.254 1.255L9.16 10l3.557 3.557a.888.888 0 1 1-1.254 1.255L7.26 10.61a.888.888 0 0 1 .16-1.382l4.043-4.042z\"/></svg>";
@@ -82420,8 +82203,6 @@ const icons = {
     bold,
     cancel,
     check,
-    colorPalette,
-    eraser,
     loupe,
     previousArrow,
     nextArrow,
@@ -82441,8 +82222,8 @@ const icons = {
     numberedList,
     table};
 
-var css_248z$1b = ".ck.ck-icon{vertical-align:middle}";
-styleInject(css_248z$1b);
+var css_248z$1a = ".ck.ck-icon{vertical-align:middle}";
+styleInject(css_248z$1a);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -82600,8 +82381,8 @@ class ButtonLabelView extends View$1 {
     }
 }
 
-var css_248z$1a = "@import \"../../mixins/_unselectable.css\";@import \"../../mixins/_dir.css\";.ck.ck-button,a.ck.ck-button{@mixin ck-unselectable;align-items:center;display:inline-flex;position:relative;@mixin ck-dir ltr{justify-content:left}@mixin ck-dir rtl{justify-content:right}& .ck-button__label{display:none}&.ck-button_with-text{& .ck-button__label{display:inline-block}}&:not(.ck-button_with-text){justify-content:center}}";
-styleInject(css_248z$1a);
+var css_248z$19 = "@import \"../../mixins/_unselectable.css\";@import \"../../mixins/_dir.css\";.ck.ck-button,a.ck.ck-button{@mixin ck-unselectable;align-items:center;display:inline-flex;position:relative;@mixin ck-dir ltr{justify-content:left}@mixin ck-dir rtl{justify-content:right}& .ck-button__label{display:none}&.ck-button_with-text{& .ck-button__label{display:inline-block}}&:not(.ck-button_with-text){justify-content:center}}";
+styleInject(css_248z$19);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -82847,8 +82628,8 @@ function isCheckableRole(role) {
     }
 }
 
-var css_248z$19 = ".ck.ck-form__header{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;& h2.ck-form__header__label{flex-grow:1}}";
-styleInject(css_248z$19);
+var css_248z$18 = ".ck.ck-form__header{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;& h2.ck-form__header__label{flex-grow:1}}";
+styleInject(css_248z$18);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -83413,8 +83194,8 @@ function DraggableViewMixin(view) {
     return DraggableMixin;
 }
 
-var css_248z$18 = ".ck.ck-dialog{& .ck.ck-dialog__actions{display:flex;justify-content:flex-end}}";
-styleInject(css_248z$18);
+var css_248z$17 = ".ck.ck-dialog{& .ck.ck-dialog__actions{display:flex;justify-content:flex-end}}";
+styleInject(css_248z$17);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -83544,8 +83325,8 @@ class DialogContentView extends View$1 {
     }
 }
 
-var css_248z$17 = ".ck.ck-dialog-overlay{bottom:0;left:0;overscroll-behavior:none;position:fixed;right:0;top:0;user-select:none;&.ck-dialog-overlay__transparent{animation:none;background:none;pointer-events:none}}.ck.ck-dialog{overscroll-behavior:none;position:absolute;width:fit-content;& .ck.ck-form__header{flex-shrink:0}&:not(.ck-dialog_modal){& .ck.ck-form__header .ck-form__header__label{cursor:grab}}.ck.ck-dialog-overlay.ck-dialog-overlay__transparent &{pointer-events:all}}";
-styleInject(css_248z$17);
+var css_248z$16 = ".ck.ck-dialog-overlay{bottom:0;left:0;overscroll-behavior:none;position:fixed;right:0;top:0;user-select:none;&.ck-dialog-overlay__transparent{animation:none;background:none;pointer-events:none}}.ck.ck-dialog{overscroll-behavior:none;position:absolute;width:fit-content;& .ck.ck-form__header{flex-shrink:0}&:not(.ck-dialog_modal){& .ck.ck-form__header .ck-form__header__label{cursor:grab}}.ck.ck-dialog-overlay.ck-dialog-overlay__transparent &{pointer-events:all}}";
+styleInject(css_248z$16);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -84305,8 +84086,8 @@ class Dialog extends Plugin {
     }
 }
 
-var css_248z$16 = "@import \"../../mixins/_dir.css\";.ck.ck-list-item-button{border-radius:0;min-height:unset;width:100%;@mixin ck-dir ltr{text-align:left}@mixin ck-dir rtl{text-align:right}&.ck-list-item-button_toggleable{@mixin ck-dir ltr{padding-left:var(--ck-spacing-small)}@mixin ck-dir rtl{padding-right:var(--ck-spacing-small)}}& .ck-list-item-button__check-holder{display:inline-flex;height:.9em;width:.9em;@mixin ck-dir ltr{margin-right:var(--ck-spacing-small)}@mixin ck-dir rtl{margin-left:var(--ck-spacing-small)}}& .ck-list-item-button__check-icon{height:100%}}";
-styleInject(css_248z$16);
+var css_248z$15 = "@import \"../../mixins/_dir.css\";.ck.ck-list-item-button{border-radius:0;min-height:unset;width:100%;@mixin ck-dir ltr{text-align:left}@mixin ck-dir rtl{text-align:right}&.ck-list-item-button_toggleable{@mixin ck-dir ltr{padding-left:var(--ck-spacing-small)}@mixin ck-dir rtl{padding-right:var(--ck-spacing-small)}}& .ck-list-item-button__check-holder{display:inline-flex;height:.9em;width:.9em;@mixin ck-dir ltr{margin-right:var(--ck-spacing-small)}@mixin ck-dir rtl{margin-left:var(--ck-spacing-small)}}& .ck-list-item-button__check-icon{height:100%}}";
+styleInject(css_248z$15);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -84432,8 +84213,8 @@ class CheckIconHolderView extends View$1 {
     }
 }
 
-var css_248z$15 = "";
-styleInject(css_248z$15);
+var css_248z$14 = "";
+styleInject(css_248z$14);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -84464,8 +84245,8 @@ class MenuBarMenuListItemButtonView extends ListItemButtonView {
     }
 }
 
-var css_248z$14 = ".ck.ck-label{display:block}.ck.ck-voice-label{display:none}";
-styleInject(css_248z$14);
+var css_248z$13 = ".ck.ck-label{display:block}.ck.ck-voice-label{display:none}";
+styleInject(css_248z$13);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -84618,8 +84399,8 @@ function normalizeKeystrokeDefinition(definition) {
 
 var accessibilityIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 6.628a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\"/><path d=\"M8.5 9.125a.3.3 0 0 0-.253-.296L5.11 8.327a.75.75 0 1 1 .388-1.449l4.04.716c.267.072.624.08.893.009l4.066-.724a.75.75 0 1 1 .388 1.45l-3.132.5a.3.3 0 0 0-.253.296v1.357a.3.3 0 0 0 .018.102l1.615 4.438a.75.75 0 0 1-1.41.513l-1.35-3.71a.3.3 0 0 0-.281-.197h-.209a.3.3 0 0 0-.282.198l-1.35 3.711a.75.75 0 0 1-1.41-.513l1.64-4.509a.3.3 0 0 0 .019-.103V9.125Z\"/><path clip-rule=\"evenodd\" d=\"M10 18.5a8.5 8.5 0 1 1 0-17 8.5 8.5 0 0 1 0 17Zm0 1.5c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10Z\"/></svg>";
 
-var css_248z$13 = "";
-styleInject(css_248z$13);
+var css_248z$12 = "";
+styleInject(css_248z$12);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -84873,8 +84654,8 @@ class BodyCollection extends ViewCollection {
     }
 }
 
-var css_248z$12 = ".ck.ck-button.ck-switchbutton{& .ck-button__toggle{display:block;& .ck-button__toggle__inner{display:block}}}";
-styleInject(css_248z$12);
+var css_248z$11 = ".ck.ck-button.ck-switchbutton{& .ck-button__toggle{display:block;& .ck-button__toggle__inner{display:block}}}";
+styleInject(css_248z$11);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -85068,258 +84849,11 @@ class FileInputView extends View$1 {
 
 var dropdownArrowIcon = "<svg viewBox=\"0 0 10 10\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M.941 4.523a.75.75 0 1 1 1.06-1.06l3.006 3.005 3.005-3.005a.75.75 0 1 1 1.06 1.06l-3.549 3.55a.75.75 0 0 1-1.168-.136L.941 4.523z\"/></svg>";
 
-var css_248z$11 = ".ck.ck-collapsible.ck-collapsible_collapsed{&>.ck-collapsible__children{display:none}}";
-styleInject(css_248z$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-licensing-options
- */
-/**
- * Returns color configuration options as defined in `editor.config.(fontColor|fontBackgroundColor).colors` or
- * `editor.config.table.(tableProperties|tableCellProperties).(background|border).colors
- * but processed to account for editor localization in the correct language.
- *
- * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
- * when the user configuration is defined because the editor does not exist yet.
- *
- * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
- */
-function getLocalizedColorOptions(locale, options) {
-    const t = locale.t;
-    const localizedColorNames = {
-        Black: t('Black'),
-        'Dim grey': t('Dim grey'),
-        Grey: t('Grey'),
-        'Light grey': t('Light grey'),
-        White: t('White'),
-        Red: t('Red'),
-        Orange: t('Orange'),
-        Yellow: t('Yellow'),
-        'Light green': t('Light green'),
-        Green: t('Green'),
-        Aquamarine: t('Aquamarine'),
-        Turquoise: t('Turquoise'),
-        'Light blue': t('Light blue'),
-        Blue: t('Blue'),
-        Purple: t('Purple')
-    };
-    return options.map(colorOption => {
-        const label = localizedColorNames[colorOption.label];
-        if (label && label != colorOption.label) {
-            colorOption.label = label;
-        }
-        return colorOption;
-    });
-}
-/**
- * Creates a unified color definition object from color configuration options.
- * The object contains the information necessary to both render the UI and initialize the conversion.
- */
-function normalizeColorOptions(options) {
-    return options
-        .map(normalizeSingleColorDefinition)
-        .filter(option => !!option);
-}
-/**
- * Creates a normalized color definition from the user-defined configuration.
- * The "normalization" means it will create full
- * {@link module:ui/colorgrid/colorgridview~ColorDefinition `ColorDefinition-like`}
- * object for string values, and add a `view` property, for each definition.
- */
-function normalizeSingleColorDefinition(color) {
-    if (typeof color === 'string') {
-        return {
-            model: color,
-            label: color,
-            hasBorder: false,
-            view: {
-                name: 'span',
-                styles: {
-                    color
-                }
-            }
-        };
-    }
-    else {
-        return {
-            model: color.color,
-            label: color.label || color.color,
-            hasBorder: color.hasBorder === undefined ? false : color.hasBorder,
-            view: {
-                name: 'span',
-                styles: {
-                    color: `${color.color}`
-                }
-            }
-        };
-    }
-}
-
-var checkIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path class=\"ck-icon__fill\" d=\"M16.935 5.328a2 2 0 0 1 0 2.829l-7.778 7.778a2 2 0 0 1-2.829 0L3.5 13.107a1.999 1.999 0 1 1 2.828-2.829l.707.707a1 1 0 0 0 1.414 0l5.658-5.657a2 2 0 0 1 2.828 0z\"/><path d=\"M14.814 6.035 8.448 12.4a1 1 0 0 1-1.414 0l-1.413-1.415A1 1 0 1 0 4.207 12.4l2.829 2.829a1 1 0 0 0 1.414 0l7.778-7.778a1 1 0 1 0-1.414-1.415z\"/></svg>";
-
-/**
- * @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-licensing-options
- */
-/**
- * @module ui/colorgrid/colortileview
- */
-/**
- * This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
- */
-class ColorTileView extends ButtonView {
-    constructor(locale) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set('color', undefined);
-        this.set('hasBorder', false);
-        this.icon = checkIcon;
-        this.extendTemplate({
-            attributes: {
-                style: {
-                    // https://github.com/ckeditor/ckeditor5/issues/14907
-                    backgroundColor: bind.to('color', color => env.isMediaForcedColors ? null : color)
-                },
-                class: [
-                    'ck',
-                    'ck-color-grid__tile',
-                    bind.if('hasBorder', 'ck-color-selector__color-tile_bordered')
-                ]
-            }
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        this.iconView.fillColor = 'hsl(0, 0%, 100%)';
-    }
-}
-
-var css_248z$10 = ".ck.ck-color-grid{display:grid}";
+var css_248z$10 = ".ck.ck-collapsible.ck-collapsible_collapsed{&>.ck-collapsible__children{display:none}}";
 styleInject(css_248z$10);
 
-/**
- * @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-licensing-options
- */
-/**
- * @module ui/colorgrid/colorgridview
- */
-/**
- * A grid of {@link module:ui/colorgrid/colortileview~ColorTileView color tiles}.
- */
-class ColorGridView extends View$1 {
-    /**
-     * Creates an instance of a color grid containing {@link module:ui/colorgrid/colortileview~ColorTileView tiles}.
-     *
-     * @fires execute
-     * @param locale The localization services instance.
-     * @param options Component configuration
-     * @param options.colorDefinitions Array with definitions
-     * required to create the {@link module:ui/colorgrid/colortileview~ColorTileView tiles}.
-     * @param options.columns A number of columns to display the tiles.
-     */
-    constructor(locale, options) {
-        super(locale);
-        const colorDefinitions = options && options.colorDefinitions ? options.colorDefinitions : [];
-        this.columns = options && options.columns ? options.columns : 5;
-        const viewStyleAttribute = {
-            gridTemplateColumns: `repeat( ${this.columns}, 1fr)`
-        };
-        this.set('selectedColor', undefined);
-        this.items = this.createCollection();
-        this.focusTracker = new FocusTracker();
-        this.keystrokes = new KeystrokeHandler();
-        this.items.on('add', (evt, colorTile) => {
-            colorTile.isOn = colorTile.color === this.selectedColor;
-        });
-        colorDefinitions.forEach(color => {
-            const colorTile = new ColorTileView();
-            colorTile.set({
-                color: color.color,
-                label: color.label,
-                tooltip: true,
-                hasBorder: color.options.hasBorder
-            });
-            colorTile.on('execute', () => {
-                this.fire('execute', {
-                    value: color.color,
-                    hasBorder: color.options.hasBorder,
-                    label: color.label
-                });
-            });
-            this.items.add(colorTile);
-        });
-        this.setTemplate({
-            tag: 'div',
-            children: this.items,
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-color-grid'
-                ],
-                style: viewStyleAttribute
-            }
-        });
-        this.on('change:selectedColor', (evt, name, selectedColor) => {
-            for (const item of this.items) {
-                item.isOn = item.color === selectedColor;
-            }
-        });
-    }
-    /**
-     * Focuses the first focusable in {@link #items}.
-     */
-    focus() {
-        if (this.items.length) {
-            this.items.first.focus();
-        }
-    }
-    /**
-     * Focuses the last focusable in {@link #items}.
-     */
-    focusLast() {
-        if (this.items.length) {
-            this.items.last.focus();
-        }
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        // Items added before rendering should be known to the #focusTracker.
-        for (const item of this.items) {
-            this.focusTracker.add(item.element);
-        }
-        this.items.on('add', (evt, item) => {
-            this.focusTracker.add(item.element);
-        });
-        this.items.on('remove', (evt, item) => {
-            this.focusTracker.remove(item.element);
-        });
-        // Start listening for the keystrokes coming from #element.
-        this.keystrokes.listenTo(this.element);
-        addKeyboardHandlingForGrid({
-            keystrokeHandler: this.keystrokes,
-            focusTracker: this.focusTracker,
-            gridItems: this.items,
-            numberOfColumns: this.columns,
-            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-}
+var css_248z$$ = ".ck.ck-color-grid{display:grid}";
+styleInject(css_248z$$);
 
 var colorName;
 var hasRequiredColorName;
@@ -85481,174 +85015,7 @@ function requireColorName () {
 	return colorName;
 }
 
-var colorNameExports = requireColorName();
-var names = /*@__PURE__*/getDefaultExportFromCjs(colorNameExports);
-
-/**
- * @module color-parse
- */
-
-/**
- * Base hues
- * http://dev.w3.org/csswg/css-color/#typedef-named-hue
- */
-//FIXME: use external hue detector
-var baseHues = {
-	red: 0,
-	orange: 60,
-	yellow: 120,
-	green: 180,
-	blue: 240,
-	purple: 300
-};
-
-/**
- * Parse color from the string passed
- *
- * @return {Object} A space indicator `space`, an array `values` and `alpha`
- */
-function parse$2 (cstr) {
-	var m, parts = [], alpha = 1, space;
-
-	if (typeof cstr === 'string') {
-		//keyword
-		if (names[cstr]) {
-			parts = names[cstr].slice();
-			space = 'rgb';
-		}
-
-		//reserved words
-		else if (cstr === 'transparent') {
-			alpha = 0;
-			space = 'rgb';
-			parts = [0,0,0];
-		}
-
-		//hex
-		else if (/^#[A-Fa-f0-9]+$/.test(cstr)) {
-			var base = cstr.slice(1);
-			var size = base.length;
-			var isShort = size <= 4;
-			alpha = 1;
-
-			if (isShort) {
-				parts = [
-					parseInt(base[0] + base[0], 16),
-					parseInt(base[1] + base[1], 16),
-					parseInt(base[2] + base[2], 16)
-				];
-				if (size === 4) {
-					alpha = parseInt(base[3] + base[3], 16) / 255;
-				}
-			}
-			else {
-				parts = [
-					parseInt(base[0] + base[1], 16),
-					parseInt(base[2] + base[3], 16),
-					parseInt(base[4] + base[5], 16)
-				];
-				if (size === 8) {
-					alpha = parseInt(base[6] + base[7], 16) / 255;
-				}
-			}
-
-			if (!parts[0]) parts[0] = 0;
-			if (!parts[1]) parts[1] = 0;
-			if (!parts[2]) parts[2] = 0;
-
-			space = 'rgb';
-		}
-
-		//color space
-		else if (m = /^((?:rgb|hs[lvb]|hwb|cmyk?|xy[zy]|gray|lab|lchu?v?|[ly]uv|lms)a?)\s*\(([^\)]*)\)/.exec(cstr)) {
-			var name = m[1];
-			var isRGB = name === 'rgb';
-			var base = name.replace(/a$/, '');
-			space = base;
-			var size = base === 'cmyk' ? 4 : base === 'gray' ? 1 : 3;
-			parts = m[2].trim()
-				.split(/\s*[,\/]\s*|\s+/)
-				.map(function (x, i) {
-					//<percentage>
-					if (/%$/.test(x)) {
-						//alpha
-						if (i === size)	return parseFloat(x) / 100
-						//rgb
-						if (base === 'rgb') return parseFloat(x) * 255 / 100
-						return parseFloat(x)
-					}
-					//hue
-					else if (base[i] === 'h') {
-						//<deg>
-						if (/deg$/.test(x)) {
-							return parseFloat(x)
-						}
-						//<base-hue>
-						else if (baseHues[x] !== undefined) {
-							return baseHues[x]
-						}
-					}
-					return parseFloat(x)
-				});
-
-			if (name === base) parts.push(1);
-			alpha = (isRGB) ? 1 : (parts[size] === undefined) ? 1 : parts[size];
-			parts = parts.slice(0, size);
-		}
-
-		//named channels case
-		else if (cstr.length > 10 && /[0-9](?:\s|\/)/.test(cstr)) {
-			parts = cstr.match(/([0-9]+)/g).map(function (value) {
-				return parseFloat(value)
-			});
-
-			space = cstr.match(/([a-z])/ig).join('').toLowerCase();
-		}
-	}
-
-	//numeric case
-	else if (!isNaN(cstr)) {
-		space = 'rgb';
-		parts = [cstr >>> 16, (cstr & 0x00ff00) >>> 8, cstr & 0x0000ff];
-	}
-
-	//array-like
-	else if (Array.isArray(cstr) || cstr.length) {
-		parts = [cstr[0], cstr[1], cstr[2]];
-		space = 'rgb';
-		alpha = cstr.length === 4 ? cstr[3] : 1;
-	}
-
-	//object case - detects css cases of rgb and hsl
-	else if (cstr instanceof Object) {
-		if (cstr.r != null || cstr.red != null || cstr.R != null) {
-			space = 'rgb';
-			parts = [
-				cstr.r || cstr.red || cstr.R || 0,
-				cstr.g || cstr.green || cstr.G || 0,
-				cstr.b || cstr.blue || cstr.B || 0
-			];
-		}
-		else {
-			space = 'hsl';
-			parts = [
-				cstr.h || cstr.hue || cstr.H || 0,
-				cstr.s || cstr.saturation || cstr.S || 0,
-				cstr.l || cstr.lightness || cstr.L || cstr.b || cstr.brightness
-			];
-		}
-
-		alpha = cstr.a || cstr.alpha || cstr.opacity || 1;
-
-		if (cstr.opacity != null) alpha /= 100;
-	}
-
-	return {
-		space: space,
-		values: parts,
-		alpha: alpha
-	}
-}
+requireColorName();
 
 /* MIT license */
 
@@ -86694,123 +86061,10 @@ function requireColorConvert () {
 	return colorConvert;
 }
 
-var colorConvertExports = requireColorConvert();
-var index = /*@__PURE__*/getDefaultExportFromCjs(colorConvertExports);
+requireColorConvert();
 
-var convert = /*#__PURE__*/_mergeNamespaces({
-	__proto__: null,
-	default: index
-}, [colorConvertExports]);
-
-/**
- * @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-licensing-options
- */
-/**
- * @module ui/colorpicker/utils
- */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// There are no available types for 'color-parse' module.
-// @ts-ignore
-/**
- * Parses and converts the color string to requested format. Handles variety of color spaces
- * like `hsl`, `hex` or `rgb`.
- *
- * @param color
- * @returns A color string.
- */
-function convertColor(color, outputFormat) {
-    if (!color) {
-        return '';
-    }
-    const colorObject = parseColorString(color);
-    if (!colorObject) {
-        return '';
-    }
-    if (colorObject.space === outputFormat) {
-        return color;
-    }
-    if (!canConvertParsedColor(colorObject)) {
-        return '';
-    }
-    const fromColorSpace = convert[colorObject.space];
-    const toColorSpace = fromColorSpace[outputFormat];
-    if (!toColorSpace) {
-        return '';
-    }
-    const convertedColorChannels = toColorSpace(colorObject.space === 'hex' ? colorObject.hexValue : colorObject.values);
-    return formatColorOutput(convertedColorChannels, outputFormat);
-}
-/**
- * Converts a color string to hex format.
- *
- * @param color
- * @returns A color string.
- */
-function convertToHex(color) {
-    if (!color) {
-        return '';
-    }
-    const colorObject = parseColorString(color);
-    if (!colorObject) {
-        return '#000';
-    }
-    if (colorObject.space === 'hex') {
-        return colorObject.hexValue;
-    }
-    return convertColor(color, 'hex');
-}
-/**
- * Registers the custom element in the
- * [CustomElementsRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry).
- */
-function registerCustomElement(elementName, constructor) {
-    if (customElements.get(elementName) === undefined) {
-        customElements.define(elementName, constructor);
-    }
-}
-/**
- * Formats the passed color channels according to the requested format.
- *
- * @param values
- * @param format
- * @returns A color string.
- */
-function formatColorOutput(values, format) {
-    switch (format) {
-        case 'hex': return `#${values}`;
-        case 'rgb': return `rgb(${values[0]}, ${values[1]}, ${values[2]})`;
-        case 'hsl': return `hsl(${values[0]}, ${values[1]}%, ${values[2]}%)`;
-        case 'hwb': return `hwb(${values[0]}, ${values[1]}, ${values[2]})`;
-        case 'lab': return `lab(${values[0]}% ${values[1]} ${values[2]})`;
-        case 'lch': return `lch(${values[0]}% ${values[1]} ${values[2]})`;
-        default: return '';
-    }
-}
-function parseColorString(colorString) {
-    // Parser library treats `hex` format as belonging to `rgb` space | which messes up further conversion.
-    // Let's parse such strings on our own.
-    if (colorString.startsWith('#')) {
-        const parsedHex = parse$2(colorString);
-        return {
-            space: 'hex',
-            values: parsedHex.values,
-            hexValue: colorString,
-            alpha: parsedHex.alpha
-        };
-    }
-    const parsed = parse$2(colorString);
-    if (!parsed.space) {
-        return null;
-    }
-    return parsed;
-}
-function canConvertParsedColor(parsedColor) {
-    return Object.keys(convert).includes(parsedColor.space);
-}
-
-var css_248z$$ = ".ck.ck-labeled-field-view{&>.ck.ck-labeled-field-view__input-wrapper{display:flex;position:relative}& .ck.ck-label{display:block;position:absolute}}";
-styleInject(css_248z$$);
+var css_248z$_ = ".ck.ck-labeled-field-view{&>.ck.ck-labeled-field-view__input-wrapper{display:flex;position:relative}& .ck.ck-label{display:block;position:absolute}}";
+styleInject(css_248z$_);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -87079,8 +86333,8 @@ function isInputElementEmpty(domElement) {
     return !domElement.value;
 }
 
-var css_248z$_ = "";
-styleInject(css_248z$_);
+var css_248z$Z = "";
+styleInject(css_248z$Z);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -87132,8 +86386,8 @@ class InputTextView extends InputView {
     }
 }
 
-var css_248z$Z = "";
-styleInject(css_248z$Z);
+var css_248z$Y = "";
+styleInject(css_248z$Y);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -87231,8 +86485,8 @@ class DropdownPanelView extends View$1 {
     }
 }
 
-var css_248z$Y = ":root{--ck-dropdown-max-width:75vw}.ck.ck-dropdown{display:inline-block;position:relative;& .ck-dropdown__arrow{pointer-events:none;z-index:var(--ck-z-default)}& .ck-button.ck-dropdown__button{width:100%}& .ck-dropdown__panel{display:none;max-width:var(--ck-dropdown-max-width);position:absolute;z-index:var(--ck-z-panel);&.ck-dropdown__panel-visible{display:inline-block}&.ck-dropdown__panel_n,&.ck-dropdown__panel_ne,&.ck-dropdown__panel_nme,&.ck-dropdown__panel_nmw,&.ck-dropdown__panel_nw{bottom:100%}&.ck-dropdown__panel_s,&.ck-dropdown__panel_se,&.ck-dropdown__panel_sme,&.ck-dropdown__panel_smw,&.ck-dropdown__panel_sw{bottom:auto;top:100%}&.ck-dropdown__panel_ne,&.ck-dropdown__panel_se{left:0}&.ck-dropdown__panel_nw,&.ck-dropdown__panel_sw{right:0}&.ck-dropdown__panel_n,&.ck-dropdown__panel_s{left:50%;transform:translateX(-50%)}&.ck-dropdown__panel_nmw,&.ck-dropdown__panel_smw{left:75%;transform:translateX(-75%)}&.ck-dropdown__panel_nme,&.ck-dropdown__panel_sme{left:25%;transform:translateX(-25%)}}}.ck.ck-toolbar .ck-dropdown__panel{z-index:calc(var(--ck-z-panel) + 1)}";
-styleInject(css_248z$Y);
+var css_248z$X = ":root{--ck-dropdown-max-width:75vw}.ck.ck-dropdown{display:inline-block;position:relative;& .ck-dropdown__arrow{pointer-events:none;z-index:var(--ck-z-default)}& .ck-button.ck-dropdown__button{width:100%}& .ck-dropdown__panel{display:none;max-width:var(--ck-dropdown-max-width);position:absolute;z-index:var(--ck-z-panel);&.ck-dropdown__panel-visible{display:inline-block}&.ck-dropdown__panel_n,&.ck-dropdown__panel_ne,&.ck-dropdown__panel_nme,&.ck-dropdown__panel_nmw,&.ck-dropdown__panel_nw{bottom:100%}&.ck-dropdown__panel_s,&.ck-dropdown__panel_se,&.ck-dropdown__panel_sme,&.ck-dropdown__panel_smw,&.ck-dropdown__panel_sw{bottom:auto;top:100%}&.ck-dropdown__panel_ne,&.ck-dropdown__panel_se{left:0}&.ck-dropdown__panel_nw,&.ck-dropdown__panel_sw{right:0}&.ck-dropdown__panel_n,&.ck-dropdown__panel_s{left:50%;transform:translateX(-50%)}&.ck-dropdown__panel_nmw,&.ck-dropdown__panel_smw{left:75%;transform:translateX(-75%)}&.ck-dropdown__panel_nme,&.ck-dropdown__panel_sme{left:25%;transform:translateX(-25%)}}}.ck.ck-toolbar .ck-dropdown__panel{z-index:calc(var(--ck-z-panel) + 1)}";
+styleInject(css_248z$X);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -87683,12 +86937,12 @@ class DropdownButtonView extends ButtonView {
     }
 }
 
-var css_248z$X = "";
-styleInject(css_248z$X);
-
-var css_248z$W = ".ck.ck-dropdown-menu-list__nested-menu__button>.ck-dropdown-menu-list__nested-menu__button__arrow{pointer-events:none;z-index:var(--ck-z-default)}";
+var css_248z$W = "";
 styleInject(css_248z$W);
 
+var css_248z$V = ".ck.ck-dropdown-menu-list__nested-menu__button>.ck-dropdown-menu-list__nested-menu__button__arrow{pointer-events:none;z-index:var(--ck-z-default)}";
+styleInject(css_248z$V);
+
 /**
  * @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-licensing-options
@@ -87885,8 +87139,8 @@ class ListItemGroupView extends View$1 {
     }
 }
 
-var css_248z$V = "@import \"../../mixins/_unselectable.css\";.ck.ck-list{@mixin ck-unselectable;display:flex;flex-direction:column;& .ck-list__item,& .ck-list__separator{display:block}& .ck-list__item>:focus{position:relative;z-index:var(--ck-z-default)}}";
-styleInject(css_248z$V);
+var css_248z$U = "@import \"../../mixins/_unselectable.css\";.ck.ck-list{@mixin ck-unselectable;display:flex;flex-direction:column;& .ck-list__item,& .ck-list__separator{display:block}& .ck-list__item>:focus{position:relative;z-index:var(--ck-z-default)}}";
+styleInject(css_248z$U);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -88161,8 +87415,8 @@ const DropdownMenuPanelPositioningFunctions = {
     })
 };
 
-var css_248z$U = "";
-styleInject(css_248z$U);
+var css_248z$T = "";
+styleInject(css_248z$T);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -88247,8 +87501,8 @@ const DropdownMenuBehaviors = {
     }
 };
 
-var css_248z$T = ":root{--ck-balloon-panel-arrow-z-index:calc(var(--ck-z-default) - 3)}.ck.ck-balloon-panel{display:none;position:absolute;z-index:var(--ck-z-panel);&.ck-balloon-panel_with-arrow{&:after,&:before{content:\"\";position:absolute}&:before{z-index:var(--ck-balloon-panel-arrow-z-index)}&:after{z-index:calc(var(--ck-balloon-panel-arrow-z-index) + 1)}}&[class*=arrow_n]{&:before{z-index:var(--ck-balloon-panel-arrow-z-index)}&:after{z-index:calc(var(--ck-balloon-panel-arrow-z-index) + 1)}}&[class*=arrow_s]{&:before{z-index:var(--ck-balloon-panel-arrow-z-index)}&:after{z-index:calc(var(--ck-balloon-panel-arrow-z-index) + 1)}}&.ck-balloon-panel_visible{display:block}}";
-styleInject(css_248z$T);
+var css_248z$S = ":root{--ck-balloon-panel-arrow-z-index:calc(var(--ck-z-default) - 3)}.ck.ck-balloon-panel{display:none;position:absolute;z-index:var(--ck-z-panel);&.ck-balloon-panel_with-arrow{&:after,&:before{content:\"\";position:absolute}&:before{z-index:var(--ck-balloon-panel-arrow-z-index)}&:after{z-index:calc(var(--ck-balloon-panel-arrow-z-index) + 1)}}&[class*=arrow_n]{&:before{z-index:var(--ck-balloon-panel-arrow-z-index)}&:after{z-index:calc(var(--ck-balloon-panel-arrow-z-index) + 1)}}&[class*=arrow_s]{&:before{z-index:var(--ck-balloon-panel-arrow-z-index)}&:after{z-index:calc(var(--ck-balloon-panel-arrow-z-index) + 1)}}&.ck-balloon-panel_visible{display:block}}";
+styleInject(css_248z$S);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -89301,8 +88555,8 @@ function getDomElement(object) {
     return null;
 }
 
-var css_248z$S = ".ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel{max-height:314px;overflow-y:auto;position:absolute;z-index:calc(var(--ck-z-panel) + 1)}";
-styleInject(css_248z$S);
+var css_248z$R = ".ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel{max-height:314px;overflow-y:auto;position:absolute;z-index:calc(var(--ck-z-panel) + 1)}";
+styleInject(css_248z$R);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -89366,8 +88620,8 @@ class DropdownMenuNestedMenuPanelView extends BalloonPanelView {
     }
 }
 
-var css_248z$R = ".ck.ck-dropdown-menu-list__nested-menu{display:block}";
-styleInject(css_248z$R);
+var css_248z$Q = ".ck.ck-dropdown-menu-list__nested-menu{display:block}";
+styleInject(css_248z$Q);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -89697,8 +88951,8 @@ function normalizeToolbarConfig(config) {
     };
 }
 
-var css_248z$Q = "@import \"../../mixins/_unselectable.css\";.ck.ck-toolbar{@mixin ck-unselectable;align-items:center;display:flex;flex-flow:row nowrap;&>.ck-toolbar__items{align-items:center;display:flex;flex-flow:row wrap;flex-grow:1}& .ck.ck-toolbar__separator{display:inline-block;&:first-child,&:last-child{display:none}}& .ck-toolbar__line-break{flex-basis:100%}&.ck-toolbar_grouping>.ck-toolbar__items{flex-wrap:nowrap}&.ck-toolbar_vertical>.ck-toolbar__items{flex-direction:column}&.ck-toolbar_floating>.ck-toolbar__items{flex-wrap:nowrap}&>.ck.ck-toolbar__grouped-dropdown{&>.ck-dropdown__button .ck-dropdown__arrow{display:none}}}";
-styleInject(css_248z$Q);
+var css_248z$P = "@import \"../../mixins/_unselectable.css\";.ck.ck-toolbar{@mixin ck-unselectable;align-items:center;display:flex;flex-flow:row nowrap;&>.ck-toolbar__items{align-items:center;display:flex;flex-flow:row wrap;flex-grow:1}& .ck.ck-toolbar__separator{display:inline-block;&:first-child,&:last-child{display:none}}& .ck-toolbar__line-break{flex-basis:100%}&.ck-toolbar_grouping>.ck-toolbar__items{flex-wrap:nowrap}&.ck-toolbar_vertical>.ck-toolbar__items{flex-direction:column}&.ck-toolbar_floating>.ck-toolbar__items{flex-wrap:nowrap}&>.ck.ck-toolbar__grouped-dropdown{&>.ck-dropdown__button .ck-dropdown__arrow{display:none}}}";
+styleInject(css_248z$P);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -90411,8 +89665,8 @@ class DynamicGrouping {
     }
 }
 
-var css_248z$P = ".ck.ck-splitbutton{font-size:inherit;& .ck-splitbutton__action:focus{z-index:calc(var(--ck-z-default) + 1)}}";
-styleInject(css_248z$P);
+var css_248z$O = ".ck.ck-splitbutton{font-size:inherit;& .ck-splitbutton__action:focus{z-index:calc(var(--ck-z-default) + 1)}}";
+styleInject(css_248z$O);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -90564,12 +89818,12 @@ class SplitButtonView extends View$1 {
     }
 }
 
-var css_248z$O = ":root{--ck-toolbar-dropdown-max-width:60vw}.ck.ck-toolbar-dropdown>.ck-dropdown__panel{max-width:var(--ck-toolbar-dropdown-max-width);width:max-content;& .ck-button{&:focus{z-index:calc(var(--ck-z-default) + 1)}}}";
-styleInject(css_248z$O);
-
-var css_248z$N = "";
+var css_248z$N = ":root{--ck-toolbar-dropdown-max-width:60vw}.ck.ck-toolbar-dropdown>.ck-dropdown__panel{max-width:var(--ck-toolbar-dropdown-max-width);width:max-content;& .ck-button{&:focus{z-index:calc(var(--ck-z-default) + 1)}}}";
 styleInject(css_248z$N);
 
+var css_248z$M = "";
+styleInject(css_248z$M);
+
 /**
  * @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-licensing-options
@@ -91100,1480 +90354,11 @@ const createLabeledInputText = (labeledFieldView, viewUid, statusUid) => {
     return inputView;
 };
 
-// Clamps a value between an upper and lower bound.
-// We use ternary operators because it makes the minified code
-// 2 times shorter then `Math.min(Math.max(a,b),c)`
-const clamp = (number, min = 0, max = 1) => {
-    return number > max ? max : number < min ? min : number;
-};
-const round = (number, digits = 0, base = Math.pow(10, digits)) => {
-    return Math.round(base * number) / base;
-};
-
-const hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));
-const hexToRgba = (hex) => {
-    if (hex[0] === '#')
-        hex = hex.substring(1);
-    if (hex.length < 6) {
-        return {
-            r: parseInt(hex[0] + hex[0], 16),
-            g: parseInt(hex[1] + hex[1], 16),
-            b: parseInt(hex[2] + hex[2], 16),
-            a: hex.length === 4 ? round(parseInt(hex[3] + hex[3], 16) / 255, 2) : 1
-        };
-    }
-    return {
-        r: parseInt(hex.substring(0, 2), 16),
-        g: parseInt(hex.substring(2, 4), 16),
-        b: parseInt(hex.substring(4, 6), 16),
-        a: hex.length === 8 ? round(parseInt(hex.substring(6, 8), 16) / 255, 2) : 1
-    };
-};
-const hsvaToHex = (hsva) => rgbaToHex(hsvaToRgba(hsva));
-const hsvaToHsla = ({ h, s, v, a }) => {
-    const hh = ((200 - s) * v) / 100;
-    return {
-        h: round(h),
-        s: round(hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0),
-        l: round(hh / 2),
-        a: round(a, 2)
-    };
-};
-const hsvaToHslString = (hsva) => {
-    const { h, s, l } = hsvaToHsla(hsva);
-    return `hsl(${h}, ${s}%, ${l}%)`;
-};
-const hsvaToRgba = ({ h, s, v, a }) => {
-    h = (h / 360) * 6;
-    s = s / 100;
-    v = v / 100;
-    const hh = Math.floor(h), b = v * (1 - s), c = v * (1 - (h - hh) * s), d = v * (1 - (1 - h + hh) * s), module = hh % 6;
-    return {
-        r: round([v, c, b, b, d, v][module] * 255),
-        g: round([d, v, v, c, b, b][module] * 255),
-        b: round([b, b, d, v, v, c][module] * 255),
-        a: round(a, 2)
-    };
-};
-const format = (number) => {
-    const hex = number.toString(16);
-    return hex.length < 2 ? '0' + hex : hex;
-};
-const rgbaToHex = ({ r, g, b, a }) => {
-    const alphaHex = a < 1 ? format(round(a * 255)) : '';
-    return '#' + format(r) + format(g) + format(b) + alphaHex;
-};
-const rgbaToHsva = ({ r, g, b, a }) => {
-    const max = Math.max(r, g, b);
-    const delta = max - Math.min(r, g, b);
-    // prettier-ignore
-    const hh = delta
-        ? max === r
-            ? (g - b) / delta
-            : max === g
-                ? 2 + (b - r) / delta
-                : 4 + (r - g) / delta
-        : 0;
-    return {
-        h: round(60 * (hh < 0 ? hh + 6 : hh)),
-        s: round(max ? (delta / max) * 100 : 0),
-        v: round((max / 255) * 100),
-        a
-    };
-};
-
-const equalColorObjects = (first, second) => {
-    if (first === second)
-        return true;
-    for (const prop in first) {
-        // The following allows for a type-safe calling of this function (first & second have to be HSL, HSV, or RGB)
-        // with type-unsafe iterating over object keys. TS does not allow this without an index (`[key: string]: number`)
-        // on an object to define how iteration is normally done. To ensure extra keys are not allowed on our types,
-        // we must cast our object to unknown (as RGB demands `r` be a key, while `Record<string, x>` does not care if
-        // there is or not), and then as a type TS can iterate over.
-        if (first[prop] !==
-            second[prop])
-            return false;
-    }
-    return true;
-};
-const equalHex = (first, second) => {
-    if (first.toLowerCase() === second.toLowerCase())
-        return true;
-    // To compare colors like `#FFF` and `ffffff` we convert them into RGB objects
-    return equalColorObjects(hexToRgba(first), hexToRgba(second));
-};
-
-const cache$1 = {};
-const tpl = (html) => {
-    let template = cache$1[html];
-    if (!template) {
-        template = document.createElement('template');
-        template.innerHTML = html;
-        cache$1[html] = template;
-    }
-    return template;
-};
-const fire = (target, type, detail) => {
-    target.dispatchEvent(new CustomEvent(type, {
-        bubbles: true,
-        detail
-    }));
-};
-
-let hasTouched = false;
-// Check if an event was triggered by touch
-const isTouch = (e) => 'touches' in e;
-// Prevent mobile browsers from handling mouse events (conflicting with touch ones).
-// If we detected a touch interaction before, we prefer reacting to touch events only.
-const isValid$1 = (event) => {
-    if (hasTouched && !isTouch(event))
-        return false;
-    if (!hasTouched)
-        hasTouched = isTouch(event);
-    return true;
-};
-const pointerMove = (target, event) => {
-    const pointer = isTouch(event) ? event.touches[0] : event;
-    const rect = target.el.getBoundingClientRect();
-    fire(target.el, 'move', target.getMove({
-        x: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
-        y: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height)
-    }));
-};
-const keyMove = (target, event) => {
-    // We use `keyCode` instead of `key` to reduce the size of the library.
-    const keyCode = event.keyCode;
-    // Ignore all keys except arrow ones, Page Up, Page Down, Home and End.
-    if (keyCode > 40 || (target.xy && keyCode < 37) || keyCode < 33)
-        return;
-    // Do not scroll page by keys when color picker element has focus.
-    event.preventDefault();
-    // Send relative offset to the parent component.
-    fire(target.el, 'move', target.getMove({
-        x: keyCode === 39 // Arrow Right
-            ? 0.01
-            : keyCode === 37 // Arrow Left
-                ? -0.01
-                : keyCode === 34 // Page Down
-                    ? 0.05
-                    : keyCode === 33 // Page Up
-                        ? -0.05
-                        : keyCode === 35 // End
-                            ? 1
-                            : keyCode === 36 // Home
-                                ? -1
-                                : 0,
-        y: keyCode === 40 // Arrow down
-            ? 0.01
-            : keyCode === 38 // Arrow Up
-                ? -0.01
-                : 0
-    }, true));
-};
-class Slider {
-    constructor(root, part, aria, xy) {
-        const template = tpl(`<div role="slider" tabindex="0" part="${part}" ${aria}><div part="${part}-pointer"></div></div>`);
-        root.appendChild(template.content.cloneNode(true));
-        const el = root.querySelector(`[part=${part}]`);
-        el.addEventListener('mousedown', this);
-        el.addEventListener('touchstart', this);
-        el.addEventListener('keydown', this);
-        this.el = el;
-        this.xy = xy;
-        this.nodes = [el.firstChild, el];
-    }
-    set dragging(state) {
-        const toggleEvent = state ? document.addEventListener : document.removeEventListener;
-        toggleEvent(hasTouched ? 'touchmove' : 'mousemove', this);
-        toggleEvent(hasTouched ? 'touchend' : 'mouseup', this);
-    }
-    handleEvent(event) {
-        switch (event.type) {
-            case 'mousedown':
-            case 'touchstart':
-                event.preventDefault();
-                // event.button is 0 in mousedown for left button activation
-                if (!isValid$1(event) || (!hasTouched && event.button != 0))
-                    return;
-                this.el.focus();
-                pointerMove(this, event);
-                this.dragging = true;
-                break;
-            case 'mousemove':
-            case 'touchmove':
-                event.preventDefault();
-                pointerMove(this, event);
-                break;
-            case 'mouseup':
-            case 'touchend':
-                this.dragging = false;
-                break;
-            case 'keydown':
-                keyMove(this, event);
-                break;
-        }
-    }
-    style(styles) {
-        styles.forEach((style, i) => {
-            for (const p in style) {
-                this.nodes[i].style.setProperty(p, style[p]);
-            }
-        });
-    }
-}
-
-class Hue extends Slider {
-    constructor(root) {
-        super(root, 'hue', 'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"', false);
-    }
-    update({ h }) {
-        this.h = h;
-        this.style([
-            {
-                left: `${(h / 360) * 100}%`,
-                color: hsvaToHslString({ h, s: 100, v: 100, a: 1 })
-            }
-        ]);
-        this.el.setAttribute('aria-valuenow', `${round(h)}`);
-    }
-    getMove(offset, key) {
-        // Hue measured in degrees of the color circle ranging from 0 to 360
-        return { h: key ? clamp(this.h + offset.x * 360, 0, 360) : 360 * offset.x };
-    }
-}
-
-class Saturation extends Slider {
-    constructor(root) {
-        super(root, 'saturation', 'aria-label="Color"', true);
-    }
-    update(hsva) {
-        this.hsva = hsva;
-        this.style([
-            {
-                top: `${100 - hsva.v}%`,
-                left: `${hsva.s}%`,
-                color: hsvaToHslString(hsva)
-            },
-            {
-                'background-color': hsvaToHslString({ h: hsva.h, s: 100, v: 100, a: 1 })
-            }
-        ]);
-        this.el.setAttribute('aria-valuetext', `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`);
-    }
-    getMove(offset, key) {
-        // Saturation and brightness always fit into [0, 100] range
-        return {
-            s: key ? clamp(this.hsva.s + offset.x * 100, 0, 100) : offset.x * 100,
-            v: key ? clamp(this.hsva.v - offset.y * 100, 0, 100) : Math.round(100 - offset.y * 100)
-        };
-    }
-}
-
-var css = `:host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}`;
-
-var hueCss = `[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}`;
-
-var saturationCss = `[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}`;
-
-const $isSame = Symbol('same');
-const $color = Symbol('color');
-const $hsva = Symbol('hsva');
-const $update = Symbol('update');
-const $parts = Symbol('parts');
-const $css = Symbol('css');
-const $sliders = Symbol('sliders');
-class ColorPicker extends HTMLElement {
-    static get observedAttributes() {
-        return ['color'];
-    }
-    get [$css]() {
-        return [css, hueCss, saturationCss];
-    }
-    get [$sliders]() {
-        return [Saturation, Hue];
-    }
-    get color() {
-        return this[$color];
-    }
-    set color(newColor) {
-        if (!this[$isSame](newColor)) {
-            const newHsva = this.colorModel.toHsva(newColor);
-            this[$update](newHsva);
-            this[$color] = newColor;
-        }
-    }
-    constructor() {
-        super();
-        const template = tpl(`<style>${this[$css].join('')}</style>`);
-        const root = this.attachShadow({ mode: 'open' });
-        root.appendChild(template.content.cloneNode(true));
-        root.addEventListener('move', this);
-        this[$parts] = this[$sliders].map((slider) => new slider(root));
-    }
-    connectedCallback() {
-        // A user may set a property on an _instance_ of an element,
-        // before its prototype has been connected to this class.
-        // If so, we need to run it through the proper class setter.
-        if (this.hasOwnProperty('color')) {
-            const value = this.color;
-            delete this['color'];
-            this.color = value;
-        }
-        else if (!this.color) {
-            this.color = this.colorModel.defaultColor;
-        }
-    }
-    attributeChangedCallback(_attr, _oldVal, newVal) {
-        const color = this.colorModel.fromAttr(newVal);
-        if (!this[$isSame](color)) {
-            this.color = color;
-        }
-    }
-    handleEvent(event) {
-        // Merge the current HSV color object with updated params.
-        const oldHsva = this[$hsva];
-        const newHsva = { ...oldHsva, ...event.detail };
-        this[$update](newHsva);
-        let newColor;
-        if (!equalColorObjects(newHsva, oldHsva) &&
-            !this[$isSame]((newColor = this.colorModel.fromHsva(newHsva)))) {
-            this[$color] = newColor;
-            fire(this, 'color-changed', { value: newColor });
-        }
-    }
-    [$isSame](color) {
-        return this.color && this.colorModel.equal(color, this.color);
-    }
-    [$update](hsva) {
-        this[$hsva] = hsva;
-        this[$parts].forEach((part) => part.update(hsva));
-    }
-}
-
-const colorModel = {
-    defaultColor: '#000',
-    toHsva: hexToHsva,
-    fromHsva: ({ h, s, v }) => hsvaToHex({ h, s, v, a: 1 }),
-    equal: equalHex,
-    fromAttr: (color) => color
-};
-class HexBase extends ColorPicker {
-    get colorModel() {
-        return colorModel;
-    }
-}
-
-var css_248z$M = ".color-picker-hex-input{width:max-content;& .ck.ck-input{min-width:unset}}.ck.ck-color-picker__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;margin:var(--ck-spacing-large) 0 0;width:unset;& .ck.ck-labeled-field-view{padding-top:unset}& .ck.ck-input-text{width:unset}& .ck-color-picker__hash-view{padding-right:var(--ck-spacing-medium);padding-top:var(--ck-spacing-tiny)}}";
-styleInject(css_248z$M);
-
-/**
- * @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-licensing-options
- */
-/**
- * @module ui/colorpicker/colorpickerview
- */
-const waitingTime = 150;
-/**
- * A class which represents a color picker with an input field for defining custom colors.
- */
-class ColorPickerView extends View$1 {
-    /**
-     * Creates a view of color picker.
-     *
-     * @param locale
-     * @param config
-     */
-    constructor(locale, config = {}) {
-        super(locale);
-        this.set({
-            color: '',
-            _hexColor: ''
-        });
-        this.hexInputRow = this._createInputRow();
-        const children = this.createCollection();
-        if (!config.hideInput) {
-            children.add(this.hexInputRow);
-        }
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: ['ck', 'ck-color-picker'],
-                tabindex: -1
-            },
-            children
-        });
-        this._config = config;
-        this._debounceColorPickerEvent = debounce((color) => {
-            // At first, set the color internally in the component. It's converted to the configured output format.
-            this.set('color', color);
-            // Then let the outside world know that the user changed the color.
-            this.fire('colorSelected', { color: this.color });
-        }, waitingTime, {
-            leading: true
-        });
-        // The `color` property holds the color in the configured output format.
-        // Ensure it before actually setting the value.
-        this.on('set:color', (evt, propertyName, newValue) => {
-            evt.return = convertColor(newValue, this._config.format || 'hsl');
-        });
-        // The `_hexColor` property is bound to the `color` one, but requires conversion.
-        this.on('change:color', () => {
-            this._hexColor = convertColorToCommonHexFormat(this.color);
-        });
-        this.on('change:_hexColor', () => {
-            // Update the selected color in the color picker palette when it's not focused.
-            // It means the user typed the color in the input.
-            if (document.activeElement !== this.picker) {
-                this.picker.setAttribute('color', this._hexColor);
-            }
-            // There has to be two way binding between properties.
-            // Extra precaution has to be taken to trigger change back only when the color really changes.
-            if (convertColorToCommonHexFormat(this.color) != convertColorToCommonHexFormat(this._hexColor)) {
-                this.color = this._hexColor;
-            }
-        });
-    }
-    /**
-     * Renders color picker in the view.
-     */
-    render() {
-        super.render();
-        // Extracted to the helper to make it testable.
-        registerCustomElement('hex-color-picker', HexBase);
-        this.picker = global$1.document.createElement('hex-color-picker');
-        this.picker.setAttribute('class', 'hex-color-picker');
-        this.picker.setAttribute('tabindex', '-1');
-        this._createSlidersView();
-        if (this.element) {
-            if (this.hexInputRow.element) {
-                this.element.insertBefore(this.picker, this.hexInputRow.element);
-            }
-            else {
-                this.element.appendChild(this.picker);
-            }
-            // Create custom stylesheet with a look of focused pointer in color picker and append it into the color picker shadowDom
-            const styleSheetForFocusedColorPicker = document.createElement('style');
-            styleSheetForFocusedColorPicker.textContent = '[role="slider"]:focus [part$="pointer"] {' +
-                'border: 1px solid #fff;' +
-                'outline: 1px solid var(--ck-color-focus-border);' +
-                'box-shadow: 0 0 0 2px #fff;' +
-                '}';
-            this.picker.shadowRoot.appendChild(styleSheetForFocusedColorPicker);
-        }
-        this.picker.addEventListener('color-changed', event => {
-            const color = event.detail.value;
-            this._debounceColorPickerEvent(color);
-        });
-    }
-    /**
-     * Focuses the first pointer in color picker.
-     *
-     */
-    focus() {
-        // In some browsers we need to move the focus to the input first.
-        // Otherwise, the color picker doesn't behave as expected.
-        // In FF, after selecting the color via slider, it instantly moves back to the previous color.
-        // In all iOS browsers and desktop Safari, once the saturation slider is moved for the first time,
-        // editor collapses the selection and doesn't apply the color change.
-        // See: https://github.com/cksource/ckeditor5-internal/issues/3245, https://github.com/ckeditor/ckeditor5/issues/14119,
-        // https://github.com/cksource/ckeditor5-internal/issues/3268.
-        /* istanbul ignore next -- @preserve */
-        if (!this._config.hideInput && (env.isGecko || env.isiOS || env.isSafari)) {
-            const input = this.hexInputRow.children.get(1);
-            input.focus();
-        }
-        const firstSlider = this.slidersView.first;
-        firstSlider.focus();
-    }
-    /**
-     * Creates collection of sliders in color picker.
-     *
-     * @private
-     */
-    _createSlidersView() {
-        const colorPickersChildren = [...this.picker.shadowRoot.children];
-        const sliders = colorPickersChildren.filter(item => item.getAttribute('role') === 'slider');
-        const slidersView = sliders.map(slider => {
-            const view = new SliderView(slider);
-            return view;
-        });
-        this.slidersView = this.createCollection();
-        slidersView.forEach(item => {
-            this.slidersView.add(item);
-        });
-    }
-    /**
-     * Creates input row for defining custom colors in color picker.
-     *
-     * @private
-     */
-    _createInputRow() {
-        const colorInput = this._createColorInput();
-        return new ColorPickerInputRowView(this.locale, colorInput);
-    }
-    /**
-     * Creates the input where user can type or paste the color in hex format.
-     *
-     * @private
-     */
-    _createColorInput() {
-        const labeledInput = new LabeledFieldView(this.locale, createLabeledInputText);
-        const { t } = this.locale;
-        labeledInput.set({
-            label: t('HEX'),
-            class: 'color-picker-hex-input'
-        });
-        labeledInput.fieldView.bind('value').to(this, '_hexColor', pickerColor => {
-            if (labeledInput.isFocused) {
-                // Text field shouldn't be updated with color change if the text field is focused.
-                // Imagine user typing hex code and getting the value of field changed.
-                return labeledInput.fieldView.value;
-            }
-            else {
-                return pickerColor.startsWith('#') ? pickerColor.substring(1) : pickerColor;
-            }
-        });
-        // Only accept valid hex colors as input.
-        labeledInput.fieldView.on('input', () => {
-            const inputValue = labeledInput.fieldView.element.value;
-            if (inputValue) {
-                const maybeHexColor = tryParseHexColor(inputValue);
-                if (maybeHexColor) {
-                    // If so, set the color.
-                    // Otherwise, do nothing.
-                    this._debounceColorPickerEvent(maybeHexColor);
-                }
-            }
-        });
-        return labeledInput;
-    }
-    /**
-     * Validates the view and returns `false` when some fields are invalid.
-     */
-    isValid() {
-        const { t } = this.locale;
-        // If the input is hidden, it's always valid, because there is no way to select
-        // invalid color value using diagram color picker.
-        if (this._config.hideInput) {
-            return true;
-        }
-        this.resetValidationStatus();
-        // One error per field is enough.
-        if (!this.hexInputRow.getParsedColor()) {
-            // Apply updated error.
-            this.hexInputRow.inputView.errorText = t('Please enter a valid color (e.g. "ff0000").');
-            return false;
-        }
-        return true;
-    }
-    /**
-     * Cleans up the supplementary error and information text of input inside the {@link #hexInputRow}
-     * bringing them back to the state when the form has been displayed for the first time.
-     *
-     * See {@link #isValid}.
-     */
-    resetValidationStatus() {
-        this.hexInputRow.inputView.errorText = null;
-    }
-}
-// Converts any color format to a unified hex format.
-//
-// @param inputColor
-// @returns An unified hex string.
-function convertColorToCommonHexFormat(inputColor) {
-    let ret = convertToHex(inputColor);
-    if (!ret) {
-        ret = '#000';
-    }
-    if (ret.length === 4) {
-        // Unfold shortcut format.
-        ret = '#' + [ret[1], ret[1], ret[2], ret[2], ret[3], ret[3]].join('');
-    }
-    return ret.toLowerCase();
-}
-// View abstraction over pointer in color picker.
-class SliderView extends View$1 {
-    /**
-     * @param element HTML element of slider in color picker.
-     */
-    constructor(element) {
-        super();
-        this.element = element;
-    }
-    /**
-     * Focuses element.
-     */
-    focus() {
-        this.element.focus();
-    }
-}
-// View abstraction over the `#` character before color input.
-class HashView extends View$1 {
-    constructor(locale) {
-        super(locale);
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-color-picker__hash-view'
-                ]
-            },
-            children: '#'
-        });
-    }
-}
-// The class representing a row containing hex color input field.
-// **Note**: For now this class is private. When more use cases appear (beyond `ckeditor5-table` and `ckeditor5-image`),
-// it will become a component in `ckeditor5-ui`.
-//
-// @private
-class ColorPickerInputRowView extends View$1 {
-    /**
-     * Creates an instance of the form row class.
-     *
-     * @param locale The locale instance.
-     * @param inputView Hex color input element.
-     */
-    constructor(locale, inputView) {
-        super(locale);
-        this.inputView = inputView;
-        this.children = this.createCollection([
-            new HashView(),
-            this.inputView
-        ]);
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-color-picker__row'
-                ]
-            },
-            children: this.children
-        });
-    }
-    /**
-     * Returns false if color input value is not in hex format.
-     */
-    getParsedColor() {
-        return tryParseHexColor(this.inputView.fieldView.element.value);
-    }
-}
-/**
- * Trim spaces from provided color and check if hex is valid.
- *
- * @param color Unsafe color string.
- * @returns Null if provided color is not hex value.
- * @export
- */
-function tryParseHexColor(color) {
-    if (!color) {
-        return null;
-    }
-    const hashLessColor = color.trim().replace(/^#/, '');
-    // Incorrect length.
-    if (![3, 4, 6, 8].includes(hashLessColor.length)) {
-        return null;
-    }
-    // Incorrect characters.
-    if (!/^(([0-9a-fA-F]{2}){3,4}|([0-9a-fA-F]){3,4})$/.test(hashLessColor)) {
-        return null;
-    }
-    return `#${hashLessColor}`;
-}
-
-/**
- * @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-licensing-options
- */
-/**
- * A collection to store document colors. It enforces colors to be unique.
- */
-class DocumentColorCollection extends /* #__PURE__ */ ObservableMixin((Collection)) {
-    constructor(options) {
-        super(options);
-        this.set('isEmpty', true);
-        this.on('change', () => {
-            this.set('isEmpty', this.length === 0);
-        });
-    }
-    /**
-     * Adds a color to the document color collection.
-     *
-     * This method ensures that no color duplicates are inserted (compared using
-     * the color value of the {@link module:ui/colorgrid/colorgridview~ColorDefinition}).
-     *
-     * If the item does not have an ID, it will be automatically generated and set on the item.
-     *
-     * @param index The position of the item in the collection. The item is pushed to the collection when `index` is not specified.
-     * @fires add
-     * @fires change
-     */
-    add(item, index) {
-        if (this.find(element => element.color === item.color)) {
-            // No duplicates are allowed.
-            return this;
-        }
-        return super.add(item, index);
-    }
-    /**
-     * Checks if an object with given colors is present in the document color collection.
-     */
-    hasColor(color) {
-        return !!this.find(item => item.color === color);
-    }
-}
-
-/**
- * @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-licensing-options
- */
-/**
- * @module ui/colorselector/colorgridsfragmentview
- */
-/**
- * One of the fragments of {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
- *
- * It provides a UI that allows users to select colors from the a predefined set and from existing document colors.
- *
- * It consists of the following sub–components:
- *
- * * A "Remove color" button,
- * * A static {@link module:ui/colorgrid/colorgridview~ColorGridView} of colors defined in the configuration,
- * * A dynamic {@link module:ui/colorgrid/colorgridview~ColorGridView} of colors used in the document.
- * * If color picker is configured, the "Color Picker" button is visible too.
- */
-class ColorGridsFragmentView extends View$1 {
-    /**
-     * 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.
-     */
-    constructor(locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount, colorPickerLabel, focusTracker, focusables }) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set('isVisible', true);
-        this.focusTracker = focusTracker;
-        this.items = this.createCollection();
-        this.colorDefinitions = colors;
-        this.columns = columns;
-        this.documentColors = new DocumentColorCollection();
-        this.documentColorsCount = documentColorsCount;
-        this._focusables = focusables;
-        this._removeButtonLabel = removeButtonLabel;
-        this._colorPickerLabel = colorPickerLabel;
-        this._documentColorsLabel = documentColorsLabel;
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck-color-grids-fragment',
-                    bind.if('isVisible', 'ck-hidden', value => !value)
-                ]
-            },
-            children: this.items
-        });
-        this.removeColorButtonView = this._createRemoveColorButton();
-        this.items.add(this.removeColorButtonView);
-    }
-    /**
-     * Scans through the editor model and searches for text node attributes with the given attribute name.
-     * Found entries are set as document colors.
-     *
-     * All the previously stored document colors will be lost in the process.
-     *
-     * @param model The model used as a source to obtain the document colors.
-     * @param attributeName Determines the name of the related model's attribute for a given dropdown.
-     */
-    updateDocumentColors(model, attributeName) {
-        const document = model.document;
-        const maxCount = this.documentColorsCount;
-        this.documentColors.clear();
-        for (const root of document.getRoots()) {
-            const range = model.createRangeIn(root);
-            for (const node of range.getItems()) {
-                if (node.is('$textProxy') && node.hasAttribute(attributeName)) {
-                    this._addColorToDocumentColors(node.getAttribute(attributeName));
-                    if (this.documentColors.length >= maxCount) {
-                        return;
-                    }
-                }
-            }
-        }
-    }
-    /**
-     * Refreshes the state of the selected color in one or both {@link module:ui/colorgrid/colorgridview~ColorGridView}s
-     * available in the {@link module:ui/colorselector/colorselectorview~ColorSelectorView}. It guarantees that the selection will
-     * occur only in one of them.
-     */
-    updateSelectedColors() {
-        const documentColorsGrid = this.documentColorsGrid;
-        const staticColorsGrid = this.staticColorsGrid;
-        const selectedColor = this.selectedColor;
-        staticColorsGrid.selectedColor = selectedColor;
-        if (documentColorsGrid) {
-            documentColorsGrid.selectedColor = selectedColor;
-        }
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        this.staticColorsGrid = this._createStaticColorsGrid();
-        this.items.add(this.staticColorsGrid);
-        if (this.documentColorsCount) {
-            // Create a label for document colors.
-            const bind = Template.bind(this.documentColors, this.documentColors);
-            const label = new View$1(this.locale);
-            label.setTemplate({
-                tag: 'span',
-                attributes: {
-                    class: [
-                        'ck',
-                        'ck-color-grid__label',
-                        bind.if('isEmpty', 'ck-hidden')
-                    ]
-                },
-                children: [
-                    {
-                        text: this._documentColorsLabel
-                    }
-                ]
-            });
-            this.items.add(label);
-            this.documentColorsGrid = this._createDocumentColorsGrid();
-            this.items.add(this.documentColorsGrid);
-        }
-        this._createColorPickerButton();
-        this._addColorSelectorElementsToFocusTracker();
-    }
-    /**
-     * Focuses the component.
-     */
-    focus() {
-        this.removeColorButtonView.focus();
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-    }
-    /**
-     * Handles displaying the color picker button (if it was previously created) and making it focusable.
-     */
-    addColorPickerButton() {
-        if (this.colorPickerButtonView) {
-            this.items.add(this.colorPickerButtonView);
-            this.focusTracker.add(this.colorPickerButtonView.element);
-            this._focusables.add(this.colorPickerButtonView);
-        }
-    }
-    /**
-     * Adds color selector elements to focus tracker.
-     */
-    _addColorSelectorElementsToFocusTracker() {
-        this.focusTracker.add(this.removeColorButtonView.element);
-        this._focusables.add(this.removeColorButtonView);
-        if (this.staticColorsGrid) {
-            this.focusTracker.add(this.staticColorsGrid.element);
-            this._focusables.add(this.staticColorsGrid);
-        }
-        if (this.documentColorsGrid) {
-            this.focusTracker.add(this.documentColorsGrid.element);
-            this._focusables.add(this.documentColorsGrid);
-        }
-    }
-    /**
-     * Creates the button responsible for displaying the color picker component.
-     */
-    _createColorPickerButton() {
-        this.colorPickerButtonView = new ButtonView();
-        this.colorPickerButtonView.set({
-            label: this._colorPickerLabel,
-            withText: true,
-            icon: icons.colorPalette,
-            class: 'ck-color-selector__color-picker'
-        });
-        this.colorPickerButtonView.on('execute', () => {
-            this.fire('colorPicker:show');
-        });
-    }
-    /**
-     * Adds the remove color button as a child of the current view.
-     */
-    _createRemoveColorButton() {
-        const buttonView = new ButtonView();
-        buttonView.set({
-            withText: true,
-            icon: icons.eraser,
-            label: this._removeButtonLabel
-        });
-        buttonView.class = 'ck-color-selector__remove-color';
-        buttonView.on('execute', () => {
-            this.fire('execute', {
-                value: null,
-                source: 'removeColorButton'
-            });
-        });
-        buttonView.render();
-        return buttonView;
-    }
-    /**
-     * Creates a static color grid based on the editor configuration.
-     */
-    _createStaticColorsGrid() {
-        const colorGrid = new ColorGridView(this.locale, {
-            colorDefinitions: this.colorDefinitions,
-            columns: this.columns
-        });
-        colorGrid.on('execute', (evt, data) => {
-            this.fire('execute', {
-                value: data.value,
-                source: 'staticColorsGrid'
-            });
-        });
-        return colorGrid;
-    }
-    /**
-     * Creates the document colors section view and binds it to {@link #documentColors}.
-     */
-    _createDocumentColorsGrid() {
-        const bind = Template.bind(this.documentColors, this.documentColors);
-        const documentColorsGrid = new ColorGridView(this.locale, {
-            columns: this.columns
-        });
-        documentColorsGrid.extendTemplate({
-            attributes: {
-                class: bind.if('isEmpty', 'ck-hidden')
-            }
-        });
-        documentColorsGrid.items.bindTo(this.documentColors).using(colorObj => {
-            const colorTile = new ColorTileView();
-            colorTile.set({
-                color: colorObj.color,
-                hasBorder: colorObj.options && colorObj.options.hasBorder
-            });
-            if (colorObj.label) {
-                colorTile.set({
-                    label: colorObj.label,
-                    tooltip: true
-                });
-            }
-            colorTile.on('execute', () => {
-                this.fire('execute', {
-                    value: colorObj.color,
-                    source: 'documentColorsGrid'
-                });
-            });
-            return colorTile;
-        });
-        // Selected color should be cleared when document colors became empty.
-        this.documentColors.on('change:isEmpty', (evt, name, val) => {
-            if (val) {
-                documentColorsGrid.selectedColor = null;
-            }
-        });
-        return documentColorsGrid;
-    }
-    /**
-     * Adds a given color to the document colors list. If possible, the method will attempt to use
-     * data from the {@link #colorDefinitions} (label, color options).
-     *
-     * @param color A string that stores the value of the recently applied color.
-     */
-    _addColorToDocumentColors(color) {
-        const predefinedColor = this.colorDefinitions
-            .find(definition => definition.color === color);
-        if (!predefinedColor) {
-            this.documentColors.add({
-                color,
-                label: color,
-                options: {
-                    hasBorder: false
-                }
-            });
-        }
-        else {
-            this.documentColors.add(Object.assign({}, predefinedColor));
-        }
-    }
-}
-
-/**
- * @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-licensing-options
- */
-/**
- * @module ui/colorselector/colorpickerfragmentview
- */
-/**
- * One of the fragments of {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
- *
- * It allows users to select a color from a color picker.
- *
- * It consists of the following sub–components:
- *
- * * A color picker saturation and hue sliders,
- * * A text input accepting colors in HEX format,
- * * "Save" and "Cancel" action buttons.
- */
-class ColorPickerFragmentView extends View$1 {
-    /**
-     * 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
-     * will not be rendered.
-     */
-    constructor(locale, { focusTracker, focusables, keystrokes, colorPickerViewConfig }) {
-        super(locale);
-        this.items = this.createCollection();
-        this.focusTracker = focusTracker;
-        this.keystrokes = keystrokes;
-        this.set('isVisible', false);
-        this.set('selectedColor', undefined);
-        this._focusables = focusables;
-        this._colorPickerViewConfig = colorPickerViewConfig;
-        const bind = this.bindTemplate;
-        const { saveButtonView, cancelButtonView } = this._createActionButtons();
-        this.saveButtonView = saveButtonView;
-        this.cancelButtonView = cancelButtonView;
-        this.actionBarView = this._createActionBarView({ saveButtonView, cancelButtonView });
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck-color-picker-fragment',
-                    bind.if('isVisible', 'ck-hidden', value => !value)
-                ]
-            },
-            children: this.items
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        const colorPickerView = new ColorPickerView(this.locale, {
-            ...this._colorPickerViewConfig
-        });
-        this.colorPickerView = colorPickerView;
-        this.colorPickerView.render();
-        if (this.selectedColor) {
-            colorPickerView.color = this.selectedColor;
-        }
-        this.listenTo(this, 'change:selectedColor', (evt, name, value) => {
-            colorPickerView.color = value;
-        });
-        this.items.add(this.colorPickerView);
-        this.items.add(this.actionBarView);
-        this._addColorPickersElementsToFocusTracker();
-        this._stopPropagationOnArrowsKeys();
-        this._executeOnEnterPress();
-        this._executeUponColorChange();
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-    }
-    /**
-     * Focuses the color picker.
-     */
-    focus() {
-        this.colorPickerView.focus();
-    }
-    /**
-     * Reset validation messages.
-     */
-    resetValidationStatus() {
-        this.colorPickerView.resetValidationStatus();
-    }
-    /**
-     * When color picker is focused and "enter" is pressed it executes command.
-     */
-    _executeOnEnterPress() {
-        this.keystrokes.set('enter', evt => {
-            if (this.isVisible && this.focusTracker.focusedElement !== this.cancelButtonView.element && this.colorPickerView.isValid()) {
-                this.fire('execute', {
-                    value: this.selectedColor
-                });
-                evt.stopPropagation();
-                evt.preventDefault();
-            }
-        });
-    }
-    /**
-     * Removes default behavior of arrow keys in dropdown.
-     */
-    _stopPropagationOnArrowsKeys() {
-        const stopPropagation = (data) => data.stopPropagation();
-        this.keystrokes.set('arrowright', stopPropagation);
-        this.keystrokes.set('arrowleft', stopPropagation);
-        this.keystrokes.set('arrowup', stopPropagation);
-        this.keystrokes.set('arrowdown', stopPropagation);
-    }
-    /**
-     * Adds color picker elements to focus tracker.
-     */
-    _addColorPickersElementsToFocusTracker() {
-        for (const slider of this.colorPickerView.slidersView) {
-            this.focusTracker.add(slider.element);
-            this._focusables.add(slider);
-        }
-        const input = this.colorPickerView.hexInputRow.children.get(1);
-        if (input.element) {
-            this.focusTracker.add(input.element);
-            this._focusables.add(input);
-        }
-        this.focusTracker.add(this.saveButtonView.element);
-        this._focusables.add(this.saveButtonView);
-        this.focusTracker.add(this.cancelButtonView.element);
-        this._focusables.add(this.cancelButtonView);
-    }
-    /**
-     * Creates bar containing "Save" and "Cancel" buttons.
-     */
-    _createActionBarView({ saveButtonView, cancelButtonView }) {
-        const actionBarRow = new View$1();
-        const children = this.createCollection();
-        children.add(saveButtonView);
-        children.add(cancelButtonView);
-        actionBarRow.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-color-selector_action-bar'
-                ]
-            },
-            children
-        });
-        return actionBarRow;
-    }
-    /**
-     * Creates "Save" and "Cancel" buttons.
-     */
-    _createActionButtons() {
-        const locale = this.locale;
-        const t = locale.t;
-        const saveButtonView = new ButtonView(locale);
-        const cancelButtonView = new ButtonView(locale);
-        saveButtonView.set({
-            icon: icons.check,
-            class: 'ck-button-save',
-            type: 'button',
-            withText: false,
-            label: t('Accept')
-        });
-        cancelButtonView.set({
-            icon: icons.cancel,
-            class: 'ck-button-cancel',
-            type: 'button',
-            withText: false,
-            label: t('Cancel')
-        });
-        saveButtonView.on('execute', () => {
-            if (this.colorPickerView.isValid()) {
-                this.fire('execute', {
-                    source: 'colorPickerSaveButton',
-                    value: this.selectedColor
-                });
-            }
-        });
-        cancelButtonView.on('execute', () => {
-            this.fire('colorPicker:cancel');
-        });
-        return {
-            saveButtonView, cancelButtonView
-        };
-    }
-    /**
-     * Fires the `execute` event if color in color picker has been changed
-     * by the user.
-     */
-    _executeUponColorChange() {
-        this.colorPickerView.on('colorSelected', (evt, data) => {
-            this.fire('execute', {
-                value: data.color,
-                source: 'colorPicker'
-            });
-            this.set('selectedColor', data.color);
-        });
-    }
-}
-
-var css_248z$L = "@import \"@ckeditor/ckeditor5-ui/theme/mixins/_dir.css\";.ck.ck-color-selector{& .ck-color-grids-fragment{& .ck-button.ck-color-selector__color-picker,& .ck-button.ck-color-selector__remove-color{align-items:center;display:flex;@mixin ck-dir rtl{justify-content:flex-start}}}& .ck-color-picker-fragment{& .ck.ck-color-selector_action-bar{display:flex;flex-direction:row;justify-content:space-around;& .ck-button-cancel,& .ck-button-save{flex:1}}}}";
+var css_248z$L = ".color-picker-hex-input{width:max-content;& .ck.ck-input{min-width:unset}}.ck.ck-color-picker__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;margin:var(--ck-spacing-large) 0 0;width:unset;& .ck.ck-labeled-field-view{padding-top:unset}& .ck.ck-input-text{width:unset}& .ck-color-picker__hash-view{padding-right:var(--ck-spacing-medium);padding-top:var(--ck-spacing-tiny)}}";
 styleInject(css_248z$L);
 
-/**
- * @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-licensing-options
- */
-/**
- * @module ui/colorselector/colorselectorview
- */
-/**
- * The configurable color selector view class. It allows users to select colors from a predefined set of colors as well as from
- * a color picker.
- *
- * This meta-view is is made of two components (fragments):
- *
- * * {@link module:ui/colorselector/colorselectorview~ColorSelectorView#colorGridsFragmentView},
- * * {@link module:ui/colorselector/colorselectorview~ColorSelectorView#colorPickerFragmentView}.
- *
- * ```ts
- * const colorDefinitions = [
- * 	{ color: '#000', label: 'Black', options: { hasBorder: false } },
- * 	{ color: 'rgb(255, 255, 255)', label: 'White', options: { hasBorder: true } },
- * 	{ color: 'red', label: 'Red', options: { hasBorder: false } }
- * ];
- *
- * const selectorView = new ColorSelectorView( locale, {
- * 	colors: colorDefinitions,
- * 	columns: 5,
- * 	removeButtonLabel: 'Remove color',
- * 	documentColorsLabel: 'Document colors',
- * 	documentColorsCount: 4,
- * 	colorPickerViewConfig: {
- * 		format: 'hsl'
- * 	}
- * } );
- *
- * selectorView.appendUI();
- * selectorView.selectedColor = 'red';
- * selectorView.updateSelectedColors();
- *
- * selectorView.on<ColorSelectorExecuteEvent>( 'execute', ( evt, data ) => {
- * 	console.log( 'Color changed', data.value, data.source );
- * } );
- *
- * selectorView.on<ColorSelectorColorPickerShowEvent>( 'colorPicker:show', ( evt ) => {
- * 	console.log( 'Color picker showed up', evt );
- * } );
- *
- * selectorView.on<ColorSelectorColorPickerCancelEvent>( 'colorPicker:cancel', ( evt ) => {
- * 	console.log( 'Color picker cancel', evt );
- * } );
- *
- * selectorView.render();
- *
- * document.body.appendChild( selectorView.element );
- * ```
- */
-class ColorSelectorView extends View$1 {
-    /**
-     * 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.
-     */
-    constructor(locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount, colorPickerLabel, colorPickerViewConfig }) {
-        super(locale);
-        this.items = this.createCollection();
-        this.focusTracker = new FocusTracker();
-        this.keystrokes = new KeystrokeHandler();
-        this._focusables = new ViewCollection();
-        this._colorPickerViewConfig = colorPickerViewConfig;
-        this._focusCycler = new FocusCycler({
-            focusables: this._focusables,
-            focusTracker: this.focusTracker,
-            keystrokeHandler: this.keystrokes,
-            actions: {
-                // Navigate list items backwards using the <kbd>Shift</kbd> + <kbd>Tab</kbd> keystroke.
-                focusPrevious: 'shift + tab',
-                // Navigate list items forwards using the <kbd>Tab</kbd> key.
-                focusNext: 'tab'
-            }
-        });
-        this.colorGridsFragmentView = new ColorGridsFragmentView(locale, {
-            colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount, colorPickerLabel,
-            focusTracker: this.focusTracker,
-            focusables: this._focusables
-        });
-        this.colorPickerFragmentView = new ColorPickerFragmentView(locale, {
-            focusables: this._focusables,
-            focusTracker: this.focusTracker,
-            keystrokes: this.keystrokes,
-            colorPickerViewConfig
-        });
-        this.set('_isColorGridsFragmentVisible', true);
-        this.set('_isColorPickerFragmentVisible', false);
-        this.set('selectedColor', undefined);
-        this.colorGridsFragmentView.bind('isVisible').to(this, '_isColorGridsFragmentVisible');
-        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.
-         */
-        this.on('change:selectedColor', (evt, evtName, data) => {
-            this.colorGridsFragmentView.set('selectedColor', data);
-            this.colorPickerFragmentView.set('selectedColor', data);
-        });
-        this.colorGridsFragmentView.on('change:selectedColor', (evt, evtName, data) => {
-            this.set('selectedColor', data);
-        });
-        this.colorPickerFragmentView.on('change:selectedColor', (evt, evtName, data) => {
-            this.set('selectedColor', data);
-        });
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-color-selector'
-                ]
-            },
-            children: this.items
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        // Start listening for the keystrokes coming from #element.
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-    /**
-     * Renders the internals of the component on demand:
-     * * {@link #colorPickerFragmentView},
-     * * {@link #colorGridsFragmentView}.
-     *
-     * It allows for deferring component initialization to improve the performance.
-     *
-     * See {@link #showColorPickerFragment}, {@link #showColorGridsFragment}.
-     */
-    appendUI() {
-        this._appendColorGridsFragment();
-        if (this._colorPickerViewConfig) {
-            this._appendColorPickerFragment();
-        }
-    }
-    /**
-     * Shows the {@link #colorPickerFragmentView} and hides the {@link #colorGridsFragmentView}.
-     *
-     * **Note**: It requires {@link #appendUI} to be called first.
-     *
-     * See {@link #showColorGridsFragment}, {@link ~ColorSelectorView#event:colorPicker:show}.
-     */
-    showColorPickerFragment() {
-        if (!this.colorPickerFragmentView.colorPickerView || this._isColorPickerFragmentVisible) {
-            return;
-        }
-        this._isColorPickerFragmentVisible = true;
-        this.colorPickerFragmentView.focus();
-        this.colorPickerFragmentView.resetValidationStatus();
-        this._isColorGridsFragmentVisible = false;
-    }
-    /**
-     * Shows the {@link #colorGridsFragmentView} and hides the {@link #colorPickerFragmentView}.
-     *
-     * See {@link #showColorPickerFragment}.
-     *
-     * **Note**: It requires {@link #appendUI} to be called first.
-     */
-    showColorGridsFragment() {
-        if (this._isColorGridsFragmentVisible) {
-            return;
-        }
-        this._isColorGridsFragmentVisible = true;
-        this.colorGridsFragmentView.focus();
-        this._isColorPickerFragmentVisible = false;
-    }
-    /**
-     * Focuses the first focusable element in {@link #items}.
-     */
-    focus() {
-        this._focusCycler.focusFirst();
-    }
-    /**
-     * Focuses the last focusable element in {@link #items}.
-     */
-    focusLast() {
-        this._focusCycler.focusLast();
-    }
-    /**
-     * Scans through the editor model and searches for text node attributes with the given `attributeName`.
-     * Found entries are set as document colors in {@link #colorGridsFragmentView}.
-     *
-     * All the previously stored document colors will be lost in the process.
-     *
-     * @param model The model used as a source to obtain the document colors.
-     * @param attributeName Determines the name of the related model's attribute for a given dropdown.
-     */
-    updateDocumentColors(model, attributeName) {
-        this.colorGridsFragmentView.updateDocumentColors(model, attributeName);
-    }
-    /**
-     * Refreshes the state of the selected color in one or both grids located in {@link #colorGridsFragmentView}.
-     *
-     * It guarantees that the selection will occur only in one of them.
-     */
-    updateSelectedColors() {
-        this.colorGridsFragmentView.updateSelectedColors();
-    }
-    /**
-     * Appends the view containing static and document color grid views.
-     */
-    _appendColorGridsFragment() {
-        if (this.items.length) {
-            return;
-        }
-        this.items.add(this.colorGridsFragmentView);
-        this.colorGridsFragmentView.delegate('execute').to(this);
-        this.colorGridsFragmentView.delegate('colorPicker:show').to(this);
-    }
-    /**
-     * Appends the view with the color picker.
-     */
-    _appendColorPickerFragment() {
-        if (this.items.length === 2) {
-            return;
-        }
-        this.items.add(this.colorPickerFragmentView);
-        if (this.colorGridsFragmentView.colorPickerButtonView) {
-            this.colorGridsFragmentView.colorPickerButtonView.on('execute', () => {
-                this.showColorPickerFragment();
-            });
-        }
-        this.colorGridsFragmentView.addColorPickerButton();
-        this.colorPickerFragmentView.delegate('execute').to(this);
-        this.colorPickerFragmentView.delegate('colorPicker:cancel').to(this);
-    }
-}
+var css_248z$K = "@import \"@ckeditor/ckeditor5-ui/theme/mixins/_dir.css\";.ck.ck-color-selector{& .ck-color-grids-fragment{& .ck-button.ck-color-selector__color-picker,& .ck-button.ck-color-selector__remove-color{align-items:center;display:flex;@mixin ck-dir rtl{justify-content:flex-start}}}& .ck-color-picker-fragment{& .ck.ck-color-selector_action-bar{display:flex;flex-direction:row;justify-content:space-around;& .ck-button-cancel,& .ck-button-save{flex:1}}}}";
+styleInject(css_248z$K);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -92679,8 +90464,8 @@ function getNormalized(name) {
     return String(name).toLowerCase();
 }
 
-var css_248z$K = "@import \"../../mixins/_unselectable.css\";.ck.ck-balloon-panel.ck-tooltip{@mixin ck-unselectable;z-index:calc(var(--ck-z-dialog) + 100)}";
-styleInject(css_248z$K);
+var css_248z$J = "@import \"../../mixins/_unselectable.css\";.ck.ck-balloon-panel.ck-tooltip{@mixin ck-unselectable;z-index:calc(var(--ck-z-dialog) + 100)}";
+styleInject(css_248z$J);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -93518,8 +91303,8 @@ function getLicenseTypeFromLicenseKey(licenseKey) {
     return licenseContent.licenseType || 'production';
 }
 
-var css_248z$J = ".ck.ck-aria-live-announcer{left:-10000px;position:absolute;top:-10000px}.ck.ck-aria-live-region-list{list-style-type:none}";
-styleInject(css_248z$J);
+var css_248z$I = ".ck.ck-aria-live-announcer{left:-10000px;position:absolute;top:-10000px}.ck.ck-aria-live-region-list{list-style-type:none}";
+styleInject(css_248z$I);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -93685,8 +91470,8 @@ class AriaLiveAnnouncerRegionView extends View$1 {
     }
 }
 
-var css_248z$I = "";
-styleInject(css_248z$I);
+var css_248z$H = "";
+styleInject(css_248z$H);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -95624,8 +93409,8 @@ function getToolbarDefinitionWeight(toolbarDef) {
     return weight;
 }
 
-var css_248z$H = "";
-styleInject(css_248z$H);
+var css_248z$G = "";
+styleInject(css_248z$G);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -95956,12 +93741,12 @@ class Model extends /* #__PURE__ */ ObservableMixin() {
     }
 }
 
-var css_248z$G = ".ck .ck-balloon-rotator__navigation{align-items:center;display:flex;justify-content:center}.ck .ck-balloon-rotator__content .ck-toolbar{justify-content:center}";
-styleInject(css_248z$G);
-
-var css_248z$F = ".ck .ck-fake-panel{position:absolute;z-index:calc(var(--ck-z-panel) - 1)}.ck .ck-fake-panel div{position:absolute}.ck .ck-fake-panel div:first-child{z-index:2}.ck .ck-fake-panel div:nth-child(2){z-index:1}";
+var css_248z$F = ".ck .ck-balloon-rotator__navigation{align-items:center;display:flex;justify-content:center}.ck .ck-balloon-rotator__content .ck-toolbar{justify-content:center}";
 styleInject(css_248z$F);
 
+var css_248z$E = ".ck .ck-fake-panel{position:absolute;z-index:calc(var(--ck-z-panel) - 1)}.ck .ck-fake-panel div{position:absolute}.ck .ck-fake-panel div:first-child{z-index:2}.ck .ck-fake-panel div:nth-child(2){z-index:1}";
+styleInject(css_248z$E);
+
 /**
  * @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-licensing-options
@@ -96532,8 +94317,8 @@ class FakePanelsView extends View$1 {
     }
 }
 
-var css_248z$E = ".ck.ck-sticky-panel{& .ck-sticky-panel__content_sticky{position:fixed;top:0;z-index:var(--ck-z-panel)}& .ck-sticky-panel__content_sticky_bottom-limit{position:absolute;top:auto}}";
-styleInject(css_248z$E);
+var css_248z$D = ".ck.ck-sticky-panel{& .ck-sticky-panel__content_sticky{position:fixed;top:0;z-index:var(--ck-z-panel)}& .ck-sticky-panel__content_sticky_bottom-limit{position:absolute;top:auto}}";
+styleInject(css_248z$D);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -96955,8 +94740,8 @@ class SearchResultsView extends View$1 {
     }
 }
 
-var css_248z$D = "@import \"@ckeditor/ckeditor5-ui/theme/mixins/_dir.css\";.ck.ck-search{&>.ck-labeled-field-view{& .ck-search__reset,&>.ck-labeled-field-view__input-wrapper>.ck-icon{position:absolute;top:50%;transform:translateY(-50%)}}&>.ck-search__results{&>.ck-search__info{&>span:first-child{display:block}&:not(.ck-hidden)~*{display:none}}}}";
-styleInject(css_248z$D);
+var css_248z$C = "@import \"@ckeditor/ckeditor5-ui/theme/mixins/_dir.css\";.ck.ck-search{&>.ck-labeled-field-view{& .ck-search__reset,&>.ck-labeled-field-view__input-wrapper>.ck-icon{position:absolute;top:50%;transform:translateY(-50%)}}&>.ck-search__results{&>.ck-search__info{&>span:first-child{display:block}&:not(.ck-hidden)~*{display:none}}}}";
+styleInject(css_248z$C);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -97153,8 +94938,8 @@ class SearchTextView extends View$1 {
     }
 }
 
-var css_248z$C = ".ck.ck-autocomplete{position:relative;&>.ck-search__results{position:absolute;z-index:var(--ck-z-panel);&.ck-search__results_n{bottom:100%}&.ck-search__results_s{bottom:auto;top:100%}}}";
-styleInject(css_248z$C);
+var css_248z$B = ".ck.ck-autocomplete{position:relative;&>.ck-search__results{position:absolute;z-index:var(--ck-z-panel);&.ck-search__results_n{bottom:100%}&.ck-search__results_s{bottom:auto;top:100%}}}";
+styleInject(css_248z$B);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -97307,18 +95092,18 @@ AutocompleteView.defaultResultsPositions = [
  */
 AutocompleteView._getOptimalPosition = getOptimalPosition;
 
-var css_248z$B = ".ck.ck-highlighted-text mark{background:var(--ck-color-highlight-background);font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:initial}";
-styleInject(css_248z$B);
-
-var css_248z$A = ":root{--ck-toolbar-spinner-size:18px}.ck.ck-spinner-container{display:block;position:relative}.ck.ck-spinner{left:0;margin:0 auto;position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:1}";
+var css_248z$A = ".ck.ck-highlighted-text mark{background:var(--ck-color-highlight-background);font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:initial}";
 styleInject(css_248z$A);
 
-var css_248z$z = ".ck.ck-block-toolbar-button{position:absolute;z-index:var(--ck-z-default)}";
+var css_248z$z = ":root{--ck-toolbar-spinner-size:18px}.ck.ck-spinner-container{display:block;position:relative}.ck.ck-spinner{left:0;margin:0 auto;position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:1}";
 styleInject(css_248z$z);
 
-var css_248z$y = ".ck.ck-menu-bar__menu{&>.ck-menu-bar__menu__button>.ck-menu-bar__menu__button__arrow{pointer-events:none;z-index:var(--ck-z-default)}}";
+var css_248z$y = ".ck.ck-block-toolbar-button{position:absolute;z-index:var(--ck-z-default)}";
 styleInject(css_248z$y);
 
+var css_248z$x = ".ck.ck-menu-bar__menu{&>.ck-menu-bar__menu__button>.ck-menu-bar__menu__button__arrow{pointer-events:none;z-index:var(--ck-z-default)}}";
+styleInject(css_248z$x);
+
 /**
  * @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-licensing-options
@@ -97380,8 +95165,8 @@ class MenuBarMenuButtonView extends ListItemButtonView {
     }
 }
 
-var css_248z$x = ":root{--ck-menu-bar-menu-max-width:75vw;--ck-menu-bar-nested-menu-horizontal-offset:5px}.ck.ck-menu-bar__menu>.ck.ck-menu-bar__menu__panel{max-width:var(--ck-menu-bar-menu-max-width);position:absolute;z-index:var(--ck-z-panel);&.ck-menu-bar__menu__panel_position_ne,&.ck-menu-bar__menu__panel_position_nw{bottom:100%}&.ck-menu-bar__menu__panel_position_se,&.ck-menu-bar__menu__panel_position_sw{bottom:auto;top:100%}&.ck-menu-bar__menu__panel_position_ne,&.ck-menu-bar__menu__panel_position_se{left:0}&.ck-menu-bar__menu__panel_position_nw,&.ck-menu-bar__menu__panel_position_sw{right:0}&.ck-menu-bar__menu__panel_position_en,&.ck-menu-bar__menu__panel_position_es{left:calc(100% - var(--ck-menu-bar-nested-menu-horizontal-offset))}&.ck-menu-bar__menu__panel_position_es{top:0}&.ck-menu-bar__menu__panel_position_en{bottom:0}&.ck-menu-bar__menu__panel_position_wn,&.ck-menu-bar__menu__panel_position_ws{right:calc(100% - var(--ck-menu-bar-nested-menu-horizontal-offset))}&.ck-menu-bar__menu__panel_position_ws{top:0}&.ck-menu-bar__menu__panel_position_wn{bottom:0}}";
-styleInject(css_248z$x);
+var css_248z$w = ":root{--ck-menu-bar-menu-max-width:75vw;--ck-menu-bar-nested-menu-horizontal-offset:5px}.ck.ck-menu-bar__menu>.ck.ck-menu-bar__menu__panel{max-width:var(--ck-menu-bar-menu-max-width);position:absolute;z-index:var(--ck-z-panel);&.ck-menu-bar__menu__panel_position_ne,&.ck-menu-bar__menu__panel_position_nw{bottom:100%}&.ck-menu-bar__menu__panel_position_se,&.ck-menu-bar__menu__panel_position_sw{bottom:auto;top:100%}&.ck-menu-bar__menu__panel_position_ne,&.ck-menu-bar__menu__panel_position_se{left:0}&.ck-menu-bar__menu__panel_position_nw,&.ck-menu-bar__menu__panel_position_sw{right:0}&.ck-menu-bar__menu__panel_position_en,&.ck-menu-bar__menu__panel_position_es{left:calc(100% - var(--ck-menu-bar-nested-menu-horizontal-offset))}&.ck-menu-bar__menu__panel_position_es{top:0}&.ck-menu-bar__menu__panel_position_en{bottom:0}&.ck-menu-bar__menu__panel_position_wn,&.ck-menu-bar__menu__panel_position_ws{right:calc(100% - var(--ck-menu-bar-nested-menu-horizontal-offset))}&.ck-menu-bar__menu__panel_position_ws{top:0}&.ck-menu-bar__menu__panel_position_wn{bottom:0}}";
+styleInject(css_248z$w);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -97442,8 +95227,8 @@ class MenuBarMenuPanelView extends View$1 {
     }
 }
 
-var css_248z$w = ".ck.ck-menu-bar__menu{display:block;position:relative}";
-styleInject(css_248z$w);
+var css_248z$v = ".ck.ck-menu-bar__menu{display:block;position:relative}";
+styleInject(css_248z$v);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -97721,8 +95506,8 @@ class MenuBarMenuListItemFileDialogButtonView extends FileDialogListItemButtonVi
     }
 }
 
-var css_248z$v = "";
-styleInject(css_248z$v);
+var css_248z$u = "";
+styleInject(css_248z$u);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -98207,8 +95992,8 @@ class ClassicEditorUI extends EditorUI {
     }
 }
 
-var css_248z$u = ".ck.ck-editor{position:relative;& .ck-editor__top .ck-sticky-panel .ck-toolbar{z-index:var(--ck-z-panel)}}";
-styleInject(css_248z$u);
+var css_248z$t = ".ck.ck-editor{position:relative;& .ck-editor__top .ck-sticky-panel .ck-toolbar{z-index:var(--ck-z-panel)}}";
+styleInject(css_248z$t);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -102496,8 +100281,8 @@ function getTypeAroundFakeCaretPosition(selection) {
 
 var returnIcon = "<svg viewBox=\"0 0 10 8\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038\"/></svg>";
 
-var css_248z$t = ".ck .ck-widget{& .ck-widget__type-around__button{display:block;overflow:hidden;position:absolute;z-index:var(--ck-z-default);& svg{left:50%;position:absolute;top:50%;z-index:calc(var(--ck-z-default) + 2)}&.ck-widget__type-around__button_before{left:min(10%,30px);top:calc(var(--ck-widget-outline-thickness)*-.5);transform:translateY(-50%)}&.ck-widget__type-around__button_after{bottom:calc(var(--ck-widget-outline-thickness)*-.5);right:min(10%,30px);transform:translateY(50%)}}&.ck-widget_selected>.ck-widget__type-around>.ck-widget__type-around__button,&>.ck-widget__type-around>.ck-widget__type-around__button:hover{&:after{content:\"\";display:block;left:1px;position:absolute;top:1px;z-index:calc(var(--ck-z-default) + 1)}}&>.ck-widget__type-around>.ck-widget__type-around__fake-caret{display:none;left:0;position:absolute;right:0}&:hover>.ck-widget__type-around>.ck-widget__type-around__fake-caret{left:calc(var(--ck-widget-outline-thickness)*-1);right:calc(var(--ck-widget-outline-thickness)*-1)}&.ck-widget_type-around_show-fake-caret_before>.ck-widget__type-around>.ck-widget__type-around__fake-caret{display:block;top:calc(var(--ck-widget-outline-thickness)*-1 - 1px)}&.ck-widget_type-around_show-fake-caret_after>.ck-widget__type-around>.ck-widget__type-around__fake-caret{bottom:calc(var(--ck-widget-outline-thickness)*-1 - 1px);display:block}}.ck.ck-editor__editable.ck-read-only .ck-widget__type-around,.ck.ck-editor__editable.ck-restricted-editing_mode_restricted .ck-widget__type-around,.ck.ck-editor__editable.ck-widget__type-around_disabled .ck-widget__type-around{display:none}";
-styleInject(css_248z$t);
+var css_248z$s = ".ck .ck-widget{& .ck-widget__type-around__button{display:block;overflow:hidden;position:absolute;z-index:var(--ck-z-default);& svg{left:50%;position:absolute;top:50%;z-index:calc(var(--ck-z-default) + 2)}&.ck-widget__type-around__button_before{left:min(10%,30px);top:calc(var(--ck-widget-outline-thickness)*-.5);transform:translateY(-50%)}&.ck-widget__type-around__button_after{bottom:calc(var(--ck-widget-outline-thickness)*-.5);right:min(10%,30px);transform:translateY(50%)}}&.ck-widget_selected>.ck-widget__type-around>.ck-widget__type-around__button,&>.ck-widget__type-around>.ck-widget__type-around__button:hover{&:after{content:\"\";display:block;left:1px;position:absolute;top:1px;z-index:calc(var(--ck-z-default) + 1)}}&>.ck-widget__type-around>.ck-widget__type-around__fake-caret{display:none;left:0;position:absolute;right:0}&:hover>.ck-widget__type-around>.ck-widget__type-around__fake-caret{left:calc(var(--ck-widget-outline-thickness)*-1);right:calc(var(--ck-widget-outline-thickness)*-1)}&.ck-widget_type-around_show-fake-caret_before>.ck-widget__type-around>.ck-widget__type-around__fake-caret{display:block;top:calc(var(--ck-widget-outline-thickness)*-1 - 1px)}&.ck-widget_type-around_show-fake-caret_after>.ck-widget__type-around>.ck-widget__type-around__fake-caret{bottom:calc(var(--ck-widget-outline-thickness)*-1 - 1px);display:block}}.ck.ck-editor__editable.ck-read-only .ck-widget__type-around,.ck.ck-editor__editable.ck-restricted-editing_mode_restricted .ck-widget__type-around,.ck.ck-editor__editable.ck-widget__type-around_disabled .ck-widget__type-around{display:none}";
+styleInject(css_248z$s);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -103466,8 +101251,8 @@ function selectionWillShrink(selection, isForward) {
     return !selection.isCollapsed && selection.isBackward == isForward;
 }
 
-var css_248z$s = ":root{--ck-color-resizer:var(--ck-color-focus-border);--ck-color-resizer-tooltip-background:#262626;--ck-color-resizer-tooltip-text:#f2f2f2;--ck-resizer-border-radius:var(--ck-border-radius);--ck-resizer-tooltip-offset:10px;--ck-resizer-tooltip-height:calc(var(--ck-spacing-small)*2 + 10px)}.ck .ck-widget,.ck .ck-widget.ck-widget_with-selection-handle{position:relative;& .ck-widget__selection-handle{position:absolute;& .ck-icon{display:block}}&.ck-widget_selected>.ck-widget__selection-handle,&:hover>.ck-widget__selection-handle{visibility:visible}}.ck .ck-size-view{background:var(--ck-color-resizer-tooltip-background);border:1px solid var(--ck-color-resizer-tooltip-text);border-radius:var(--ck-resizer-border-radius);color:var(--ck-color-resizer-tooltip-text);display:block;font-size:var(--ck-font-size-tiny);height:var(--ck-resizer-tooltip-height);line-height:var(--ck-resizer-tooltip-height);padding:0 var(--ck-spacing-small);&.ck-orientation-above-center,&.ck-orientation-bottom-left,&.ck-orientation-bottom-right,&.ck-orientation-top-left,&.ck-orientation-top-right{position:absolute}&.ck-orientation-top-left{left:var(--ck-resizer-tooltip-offset);top:var(--ck-resizer-tooltip-offset)}&.ck-orientation-top-right{right:var(--ck-resizer-tooltip-offset);top:var(--ck-resizer-tooltip-offset)}&.ck-orientation-bottom-right{bottom:var(--ck-resizer-tooltip-offset);right:var(--ck-resizer-tooltip-offset)}&.ck-orientation-bottom-left{bottom:var(--ck-resizer-tooltip-offset);left:var(--ck-resizer-tooltip-offset)}&.ck-orientation-above-center{left:50%;top:calc(var(--ck-resizer-tooltip-height)*-1);transform:translate(-50%)}}";
-styleInject(css_248z$s);
+var css_248z$r = ":root{--ck-color-resizer:var(--ck-color-focus-border);--ck-color-resizer-tooltip-background:#262626;--ck-color-resizer-tooltip-text:#f2f2f2;--ck-resizer-border-radius:var(--ck-border-radius);--ck-resizer-tooltip-offset:10px;--ck-resizer-tooltip-height:calc(var(--ck-spacing-small)*2 + 10px)}.ck .ck-widget,.ck .ck-widget.ck-widget_with-selection-handle{position:relative;& .ck-widget__selection-handle{position:absolute;& .ck-icon{display:block}}&.ck-widget_selected>.ck-widget__selection-handle,&:hover>.ck-widget__selection-handle{visibility:visible}}.ck .ck-size-view{background:var(--ck-color-resizer-tooltip-background);border:1px solid var(--ck-color-resizer-tooltip-text);border-radius:var(--ck-resizer-border-radius);color:var(--ck-color-resizer-tooltip-text);display:block;font-size:var(--ck-font-size-tiny);height:var(--ck-resizer-tooltip-height);line-height:var(--ck-resizer-tooltip-height);padding:0 var(--ck-spacing-small);&.ck-orientation-above-center,&.ck-orientation-bottom-left,&.ck-orientation-bottom-right,&.ck-orientation-top-left,&.ck-orientation-top-right{position:absolute}&.ck-orientation-top-left{left:var(--ck-resizer-tooltip-offset);top:var(--ck-resizer-tooltip-offset)}&.ck-orientation-top-right{right:var(--ck-resizer-tooltip-offset);top:var(--ck-resizer-tooltip-offset)}&.ck-orientation-bottom-right{bottom:var(--ck-resizer-tooltip-offset);right:var(--ck-resizer-tooltip-offset)}&.ck-orientation-bottom-left{bottom:var(--ck-resizer-tooltip-offset);left:var(--ck-resizer-tooltip-offset)}&.ck-orientation-above-center{left:50%;top:calc(var(--ck-resizer-tooltip-height)*-1);transform:translate(-50%)}}";
+styleInject(css_248z$r);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -104336,8 +102121,8 @@ function isWidgetSelected(selection) {
     return !!(viewElement && isWidget(viewElement));
 }
 
-var css_248z$r = ".ck .ck-widget_with-resizer{position:relative}.ck .ck-widget__resizer{display:none;left:0;pointer-events:none;position:absolute;top:0}.ck-focused .ck-widget_with-resizer.ck-widget_selected{&>.ck-widget__resizer{display:block}}.ck .ck-widget__resizer__handle{pointer-events:all;position:absolute;&.ck-widget__resizer__handle-bottom-right,&.ck-widget__resizer__handle-top-left{cursor:nwse-resize}&.ck-widget__resizer__handle-bottom-left,&.ck-widget__resizer__handle-top-right{cursor:nesw-resize}}";
-styleInject(css_248z$r);
+var css_248z$q = ".ck .ck-widget_with-resizer{position:relative}.ck .ck-widget__resizer{display:none;left:0;pointer-events:none;position:absolute;top:0}.ck-focused .ck-widget_with-resizer.ck-widget_selected{&>.ck-widget__resizer{display:block}}.ck .ck-widget__resizer__handle{pointer-events:all;position:absolute;&.ck-widget__resizer__handle-bottom-right,&.ck-widget__resizer__handle-top-left{cursor:nwse-resize}&.ck-widget__resizer__handle-bottom-left,&.ck-widget__resizer__handle-top-right{cursor:nesw-resize}}";
+styleInject(css_248z$q);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -104889,8 +102674,8 @@ class DragDropBlockToolbar extends Plugin {
     }
 }
 
-var css_248z$q = ".ck.ck-editor__editable{& .ck.ck-clipboard-drop-target-position{display:inline;pointer-events:none;position:relative;& span{position:absolute;width:0}}& .ck-widget:-webkit-drag{&>.ck-widget__selection-handle,&>.ck-widget__type-around{display:none}}}.ck.ck-clipboard-drop-target-line{pointer-events:none;position:absolute}";
-styleInject(css_248z$q);
+var css_248z$p = ".ck.ck-editor__editable{& .ck.ck-clipboard-drop-target-position{display:inline;pointer-events:none;position:relative;& span{position:absolute;width:0}}& .ck-widget:-webkit-drag{&>.ck-widget__selection-handle,&>.ck-widget__type-around{display:none}}}.ck.ck-clipboard-drop-target-line{pointer-events:none;position:absolute}";
+styleInject(css_248z$p);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -106938,8 +104723,8 @@ function getLocalizedOptions(editor) {
     });
 }
 
-var css_248z$p = ".ck.ck-heading_heading1 .ck-button__label{font-size:20px}.ck.ck-heading_heading2 .ck-button__label{font-size:17px}.ck.ck-heading_heading3 .ck-button__label{font-size:14px}.ck[class*=ck-heading_heading]{font-weight:700}";
-styleInject(css_248z$p);
+var css_248z$o = ".ck.ck-heading_heading1 .ck-button__label{font-size:20px}.ck.ck-heading_heading2 .ck-button__label{font-size:17px}.ck.ck-heading_heading3 .ck-button__label{font-size:14px}.ck[class*=ck-heading_heading]{font-weight:700}";
+styleInject(css_248z$o);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -107448,8 +105233,8 @@ class Bold extends Plugin {
     }
 }
 
-var css_248z$o = ".ck-content code{background-color:hsla(0,0%,78%,.3);border-radius:2px;padding:.15em}.ck.ck-editor__editable .ck-code_selected{background-color:hsla(0,0%,78%,.5)}";
-styleInject(css_248z$o);
+var css_248z$n = ".ck-content code{background-color:hsla(0,0%,78%,.3);border-radius:2px;padding:.15em}.ck.ck-editor__editable .ck-code_selected{background-color:hsla(0,0%,78%,.5)}";
+styleInject(css_248z$n);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -108309,8 +106094,8 @@ class ManualDecorator extends /* #__PURE__ */ ObservableMixin() {
     }
 }
 
-var css_248z$n = "";
-styleInject(css_248z$n);
+var css_248z$m = "";
+styleInject(css_248z$m);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -108599,12 +106384,12 @@ function getLinkAttributesAllowedOnText(schema) {
     return textAttributes.filter(attribute => attribute.startsWith('link'));
 }
 
-var css_248z$m = "@import \"@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css\";.ck-vertical-form .ck-button{&:after{bottom:-1px;content:\"\";position:absolute;right:-1px;top:-1px;width:0;z-index:1}&:focus:after{display:none}}.ck.ck-responsive-form{@mixin ck-media-phone{& .ck-button{&:after{bottom:-1px;content:\"\";position:absolute;right:-1px;top:-1px;width:0;z-index:1}&:focus:after{display:none}}}}";
-styleInject(css_248z$m);
-
-var css_248z$l = "@import \"@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css\";.ck.ck-link-form{align-items:flex-start;display:flex;& .ck-label{display:none}@mixin ck-media-phone{flex-wrap:wrap;& .ck-labeled-field-view{flex-basis:100%}& .ck-button{flex-basis:50%}}}.ck.ck-link-form_layout-vertical{display:block;& .ck-button{&.ck-button-cancel,&.ck-button-save{margin-top:var(--ck-spacing-medium)}}}";
+var css_248z$l = "@import \"@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css\";.ck-vertical-form .ck-button{&:after{bottom:-1px;content:\"\";position:absolute;right:-1px;top:-1px;width:0;z-index:1}&:focus:after{display:none}}.ck.ck-responsive-form{@mixin ck-media-phone{& .ck-button{&:after{bottom:-1px;content:\"\";position:absolute;right:-1px;top:-1px;width:0;z-index:1}&:focus:after{display:none}}}}";
 styleInject(css_248z$l);
 
+var css_248z$k = "@import \"@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css\";.ck.ck-link-form{align-items:flex-start;display:flex;& .ck-label{display:none}@mixin ck-media-phone{flex-wrap:wrap;& .ck-labeled-field-view{flex-basis:100%}& .ck-button{flex-basis:50%}}}.ck.ck-link-form_layout-vertical{display:block;& .ck-button{&.ck-button-cancel,&.ck-button-save{margin-top:var(--ck-spacing-medium)}}}";
+styleInject(css_248z$k);
+
 /**
  * @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-licensing-options
@@ -108872,8 +106657,8 @@ class LinkFormView extends View$1 {
     }
 }
 
-var css_248z$k = "@import \"@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css\";.ck.ck-link-actions{display:flex;flex-direction:row;flex-wrap:nowrap;& .ck-link-actions__preview{display:inline-block;& .ck-button__label{overflow:hidden}}@mixin ck-media-phone{flex-wrap:wrap;& .ck-link-actions__preview{flex-basis:100%}& .ck-button:not(.ck-link-actions__preview){flex-basis:50%}}}";
-styleInject(css_248z$k);
+var css_248z$j = "@import \"@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css\";.ck.ck-link-actions{display:flex;flex-direction:row;flex-wrap:nowrap;& .ck-link-actions__preview{display:inline-block;& .ck-button__label{overflow:hidden}}@mixin ck-media-phone{flex-wrap:wrap;& .ck-link-actions__preview{flex-basis:100%}& .ck-button:not(.ck-link-actions__preview){flex-basis:50%}}}";
+styleInject(css_248z$j);
 
 var unlinkIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.077 15 .991-1.416a.75.75 0 1 1 1.229.86l-1.148 1.64a.748.748 0 0 1-.217.206 5.251 5.251 0 0 1-8.503-5.955.741.741 0 0 1 .12-.274l1.147-1.639a.75.75 0 1 1 1.228.86L4.933 10.7l.006.003a3.75 3.75 0 0 0 6.132 4.294l.006.004zm5.494-5.335a.748.748 0 0 1-.12.274l-1.147 1.639a.75.75 0 1 1-1.228-.86l.86-1.23a3.75 3.75 0 0 0-6.144-4.301l-.86 1.229a.75.75 0 0 1-1.229-.86l1.148-1.64a.748.748 0 0 1 .217-.206 5.251 5.251 0 0 1 8.503 5.955zm-4.563-2.532a.75.75 0 0 1 .184 1.045l-3.155 4.505a.75.75 0 1 1-1.229-.86l3.155-4.506a.75.75 0 0 1 1.045-.184zm4.919 10.562-1.414 1.414a.75.75 0 1 1-1.06-1.06l1.414-1.415-1.415-1.414a.75.75 0 0 1 1.061-1.06l1.414 1.414 1.414-1.415a.75.75 0 0 1 1.061 1.061l-1.414 1.414 1.414 1.415a.75.75 0 0 1-1.06 1.06l-1.415-1.414z\"/></svg>";
 
@@ -110010,8 +107795,8 @@ class Link extends Plugin {
     }
 }
 
-var css_248z$j = ".ck.ck-editor__editable{& a span.image-inline,& figure.image>a{&:after{display:block;position:absolute}}}";
-styleInject(css_248z$j);
+var css_248z$i = ".ck.ck-editor__editable{& a span.image-inline,& figure.image>a{&:after{display:block;position:absolute}}}";
+styleInject(css_248z$i);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -111994,12 +109779,12 @@ function shouldUseBogusParagraph(item, attributeNames, blocks = getAllListItemBl
     return blocks.length < 2;
 }
 
-var css_248z$i = ".ck-editor__editable .ck-list-bogus-paragraph{display:block}";
-styleInject(css_248z$i);
-
-var css_248z$h = ".ck-content ol{list-style-type:decimal;& ol{list-style-type:lower-latin;& ol{list-style-type:lower-roman;& ol{list-style-type:upper-latin;& ol{list-style-type:upper-roman}}}}}.ck-content ul{list-style-type:disc;& ul{list-style-type:circle;& ul{list-style-type:square;& ul{list-style-type:square}}}}";
+var css_248z$h = ".ck-editor__editable .ck-list-bogus-paragraph{display:block}";
 styleInject(css_248z$h);
 
+var css_248z$g = ".ck-content ol{list-style-type:decimal;& ol{list-style-type:lower-latin;& ol{list-style-type:lower-roman;& ol{list-style-type:upper-latin;& ol{list-style-type:upper-roman}}}}}.ck-content ul{list-style-type:disc;& ul{list-style-type:circle;& ul{list-style-type:square;& ul{list-style-type:square}}}}";
+styleInject(css_248z$g);
+
 /**
  * @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-licensing-options
@@ -112810,15 +110595,15 @@ const LIST_STYLE_TYPES = [
 for (const { listStyle, typeAttribute, listType } of LIST_STYLE_TYPES) {
 }
 
-var css_248z$g = "";
-styleInject(css_248z$g);
-
-var css_248z$f = ".ck.ck-list-styles-list{display:grid}";
+var css_248z$f = "";
 styleInject(css_248z$f);
 
-var css_248z$e = ":root{--ck-todo-list-checkmark-size:16px}@define-mixin todo-list-checkbox{-webkit-appearance:none;border:0;display:inline-block;height:var(--ck-todo-list-checkmark-size);left:-25px;margin-left:0;margin-right:-15px;position:relative;right:0;vertical-align:middle;width:var(--ck-todo-list-checkmark-size);[dir=rtl]&{left:0;margin-left:-15px;margin-right:0;right:-25px}&:before{border:1px solid #333;border-radius:2px;box-sizing:border-box;height:100%;transition:box-shadow .25s ease-in-out;width:100%;@media (prefers-reduced-motion:reduce){transition:none}}&:after,&:before{content:\"\";display:block;position:absolute}&:after{border-color:transparent;border-style:solid;border-width:0 calc(var(--ck-todo-list-checkmark-size)/8) calc(var(--ck-todo-list-checkmark-size)/8) 0;box-sizing:content-box;height:calc(var(--ck-todo-list-checkmark-size)/2.6);left:calc(var(--ck-todo-list-checkmark-size)/3);pointer-events:none;top:calc(var(--ck-todo-list-checkmark-size)/5.3);transform:rotate(45deg);width:calc(var(--ck-todo-list-checkmark-size)/5.3)}&[checked]{&:before{background:#26ab33;border-color:#26ab33}&:after{border-color:#fff}}}.ck-content .todo-list{list-style:none;& li{margin-bottom:5px;position:relative;& .todo-list{margin-top:5px}}& .todo-list__label{&>input{@mixin todo-list-checkbox}& .todo-list__label__description{vertical-align:middle}&.todo-list__label_without-description input[type=checkbox]{position:absolute}}}.ck-editor__editable.ck-content .todo-list .todo-list__label{&>input,&>span[contenteditable=false]>input{cursor:pointer;&:hover:before{box-shadow:0 0 0 5px rgba(0,0,0,.1)}}&.todo-list__label_without-description,&>span[contenteditable=false]>input{& input[type=checkbox]{position:absolute}}}";
+var css_248z$e = ".ck.ck-list-styles-list{display:grid}";
 styleInject(css_248z$e);
 
+var css_248z$d = ":root{--ck-todo-list-checkmark-size:16px}@define-mixin todo-list-checkbox{-webkit-appearance:none;border:0;display:inline-block;height:var(--ck-todo-list-checkmark-size);left:-25px;margin-left:0;margin-right:-15px;position:relative;right:0;vertical-align:middle;width:var(--ck-todo-list-checkmark-size);[dir=rtl]&{left:0;margin-left:-15px;margin-right:0;right:-25px}&:before{border:1px solid #333;border-radius:2px;box-sizing:border-box;height:100%;transition:box-shadow .25s ease-in-out;width:100%;@media (prefers-reduced-motion:reduce){transition:none}}&:after,&:before{content:\"\";display:block;position:absolute}&:after{border-color:transparent;border-style:solid;border-width:0 calc(var(--ck-todo-list-checkmark-size)/8) calc(var(--ck-todo-list-checkmark-size)/8) 0;box-sizing:content-box;height:calc(var(--ck-todo-list-checkmark-size)/2.6);left:calc(var(--ck-todo-list-checkmark-size)/3);pointer-events:none;top:calc(var(--ck-todo-list-checkmark-size)/5.3);transform:rotate(45deg);width:calc(var(--ck-todo-list-checkmark-size)/5.3)}&[checked]{&:before{background:#26ab33;border-color:#26ab33}&:after{border-color:#fff}}}.ck-content .todo-list{list-style:none;& li{margin-bottom:5px;position:relative;& .todo-list{margin-top:5px}}& .todo-list__label{&>input{@mixin todo-list-checkbox}& .todo-list__label__description{vertical-align:middle}&.todo-list__label_without-description input[type=checkbox]{position:absolute}}}.ck-editor__editable.ck-content .todo-list .todo-list__label{&>input,&>span[contenteditable=false]>input{cursor:pointer;&:hover:before{box-shadow:0 0 0 5px rgba(0,0,0,.1)}}&.todo-list__label_without-description,&>span[contenteditable=false]>input{& input[type=checkbox]{position:absolute}}}";
+styleInject(css_248z$d);
+
 /**
  * @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-licensing-options
@@ -113111,8 +110896,8 @@ class BlockQuoteEditing extends Plugin {
     }
 }
 
-var css_248z$d = ".ck-content blockquote{border-left:5px solid #ccc;font-style:italic;margin-left:0;margin-right:0;overflow:hidden;padding-left:1.5em;padding-right:1.5em}.ck-content[dir=rtl] blockquote{border-left:0;border-right:5px solid #ccc}";
-styleInject(css_248z$d);
+var css_248z$c = ".ck-content blockquote{border-left:5px solid #ccc;font-style:italic;margin-left:0;margin-right:0;overflow:hidden;padding-left:1.5em;padding-right:1.5em}.ck-content[dir=rtl] blockquote{border-left:0;border-right:5px solid #ccc}";
+styleInject(css_248z$c);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -117141,8 +114926,8 @@ function shouldRefresh(child, mapper) {
     return isSingleParagraphWithoutAttributes(child) !== viewElement.is('element', 'span');
 }
 
-var css_248z$c = "";
-styleInject(css_248z$c);
+var css_248z$b = "";
+styleInject(css_248z$b);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -117321,8 +115106,8 @@ function upcastCellSpan(type) {
     };
 }
 
-var css_248z$b = ".ck .ck-insert-table-dropdown__grid{display:flex;flex-direction:row;flex-wrap:wrap}";
-styleInject(css_248z$b);
+var css_248z$a = ".ck .ck-insert-table-dropdown__grid{display:flex;flex-direction:row;flex-wrap:wrap}";
+styleInject(css_248z$a);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -117837,8 +115622,8 @@ function addListOption(option, editor, commands, itemDefinitions) {
     itemDefinitions.add(option);
 }
 
-var css_248z$a = "";
-styleInject(css_248z$a);
+var css_248z$9 = "";
+styleInject(css_248z$9);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -119122,8 +116907,8 @@ function haveSameTableParent(cellA, cellB) {
     return cellA.parent.parent == cellB.parent.parent;
 }
 
-var css_248z$9 = ".ck-content .table{display:table;margin:.9em auto;& table{border:1px double #b3b3b3;border-collapse:collapse;border-spacing:0;height:100%;width:100%;& td,& th{border:1px solid #bfbfbf;min-width:2em;padding:.4em}& th{background:rgba(0,0,0,.05);font-weight:700}}}@media print{.ck-content .table table{height:auto}}.ck-content[dir=rtl] .table th{text-align:right}.ck-content[dir=ltr] .table th{text-align:left}.ck-editor__editable .ck-table-bogus-paragraph{display:inline-block;width:100%}";
-styleInject(css_248z$9);
+var css_248z$8 = ".ck-content .table{display:table;margin:.9em auto;& table{border:1px double #b3b3b3;border-collapse:collapse;border-spacing:0;height:100%;width:100%;& td,& th{border:1px solid #bfbfbf;min-width:2em;padding:.4em}& th{background:rgba(0,0,0,.05);font-weight:700}}}@media print{.ck-content .table table{height:auto}}.ck-content[dir=rtl] .table th{text-align:right}.ck-content[dir=ltr] .table th{text-align:left}.ck-editor__editable .ck-table-bogus-paragraph{display:inline-block;width:100%}";
+styleInject(css_248z$8);
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -119266,809 +117051,33 @@ class TableToolbar extends Plugin {
     }
 }
 
-var css_248z$8 = ".ck.ck-input-color{display:flex;flex-direction:row-reverse;width:100%;&>input.ck.ck-input-text{flex-grow:1;min-width:auto}&>div.ck.ck-dropdown{min-width:auto;&>.ck-input-color__button .ck-dropdown__arrow{display:none}}& .ck.ck-input-color__button{display:flex;& .ck.ck-input-color__button__preview{overflow:hidden;position:relative;&>.ck.ck-input-color__button__preview__no-color-indicator{display:block;position:absolute}}}}";
-styleInject(css_248z$8);
-
-var css_248z$7 = ".ck.ck-form__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;&>:not(.ck-label){flex-grow:1}&.ck-table-form__action-row{& .ck-button-cancel,& .ck-button-save{justify-content:center}}}";
+var css_248z$7 = ".ck.ck-input-color{display:flex;flex-direction:row-reverse;width:100%;&>input.ck.ck-input-text{flex-grow:1;min-width:auto}&>div.ck.ck-dropdown{min-width:auto;&>.ck-input-color__button .ck-dropdown__arrow{display:none}}& .ck.ck-input-color__button{display:flex;& .ck.ck-input-color__button__preview{overflow:hidden;position:relative;&>.ck.ck-input-color__button__preview__no-color-indicator{display:block;position:absolute}}}}";
 styleInject(css_248z$7);
 
-var css_248z$6 = "";
+var css_248z$6 = ".ck.ck-form__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;&>:not(.ck-label){flex-grow:1}&.ck-table-form__action-row{& .ck-button-cancel,& .ck-button-save{justify-content:center}}}";
 styleInject(css_248z$6);
 
-var css_248z$5 = ".ck.ck-table-form{& .ck-form__row{&.ck-table-form__background-row,&.ck-table-form__border-row{flex-wrap:wrap}&.ck-table-form__dimensions-row{align-items:center;flex-wrap:wrap;& .ck-labeled-field-view{align-items:center;display:flex;flex-direction:column-reverse;& .ck.ck-dropdown{flex-grow:0}}& .ck-table-form__dimension-operator{flex-grow:0}}}& .ck.ck-labeled-field-view{position:relative;& .ck.ck-labeled-field-view__status{bottom:calc(var(--ck-table-properties-error-arrow-size)*-1);left:50%;position:absolute;transform:translate(-50%,100%);z-index:1;&:after{content:\"\";left:50%;position:absolute;top:calc(var(--ck-table-properties-error-arrow-size)*-1);transform:translateX(-50%)}}}}";
+var css_248z$5 = "";
 styleInject(css_248z$5);
 
-var css_248z$4 = ".ck.ck-table-cell-properties-form{& .ck-form__row{&.ck-table-cell-properties-form__alignment-row{flex-wrap:wrap;& .ck.ck-toolbar{&:first-of-type{flex-grow:0.57}&:last-of-type{flex-grow:0.43}& .ck-button{flex-grow:1}}}}}";
+var css_248z$4 = ".ck.ck-table-form{& .ck-form__row{&.ck-table-form__background-row,&.ck-table-form__border-row{flex-wrap:wrap}&.ck-table-form__dimensions-row{align-items:center;flex-wrap:wrap;& .ck-labeled-field-view{align-items:center;display:flex;flex-direction:column-reverse;& .ck.ck-dropdown{flex-grow:0}}& .ck-table-form__dimension-operator{flex-grow:0}}}& .ck.ck-labeled-field-view{position:relative;& .ck.ck-labeled-field-view__status{bottom:calc(var(--ck-table-properties-error-arrow-size)*-1);left:50%;position:absolute;transform:translate(-50%,100%);z-index:1;&:after{content:\"\";left:50%;position:absolute;top:calc(var(--ck-table-properties-error-arrow-size)*-1);transform:translateX(-50%)}}}}";
 styleInject(css_248z$4);
 
-var css_248z$3 = ".ck.ck-table-properties-form{& .ck-form__row{&.ck-table-properties-form__alignment-row{align-content:baseline;flex-basis:0;flex-wrap:wrap;& .ck.ck-toolbar .ck-toolbar__items{flex-wrap:nowrap}}}}";
+var css_248z$3 = ".ck.ck-table-cell-properties-form{& .ck-form__row{&.ck-table-cell-properties-form__alignment-row{flex-wrap:wrap;& .ck.ck-toolbar{&:first-of-type{flex-grow:0.57}&:last-of-type{flex-grow:0.43}& .ck-button{flex-grow:1}}}}}";
 styleInject(css_248z$3);
 
-var css_248z$2 = "@import \"@ckeditor/ckeditor5-ui/theme/mixins/_mediacolors.css\";:root{--ck-color-selector-caption-background:#f7f7f7;--ck-color-selector-caption-text:#333;--ck-color-selector-caption-highlighted-background:#fd0}.ck-content .table>figcaption{background-color:var(--ck-color-selector-caption-background);caption-side:top;color:var(--ck-color-selector-caption-text);display:table-caption;font-size:.75em;outline-offset:-1px;padding:.6em;text-align:center;word-break:break-word;@mixin ck-media-forced-colors{background-color:unset;color:unset}}.ck.ck-editor__editable .table>figcaption{@mixin ck-media-default-colors{&.table__caption_highlighted{animation:ck-table-caption-highlight .6s ease-out}}&.ck-placeholder:before{overflow:hidden;padding-left:inherit;padding-right:inherit;text-overflow:ellipsis;white-space:nowrap}}@keyframes ck-table-caption-highlight{0%{background-color:var(--ck-color-selector-caption-highlighted-background)}to{background-color:var(--ck-color-selector-caption-background)}}";
+var css_248z$2 = ".ck.ck-table-properties-form{& .ck-form__row{&.ck-table-properties-form__alignment-row{align-content:baseline;flex-basis:0;flex-wrap:wrap;& .ck.ck-toolbar .ck-toolbar__items{flex-wrap:nowrap}}}}";
 styleInject(css_248z$2);
 
-var css_248z$1 = ":root{--ck-color-selector-column-resizer-hover:var(--ck-color-base-active);--ck-table-column-resizer-width:7px;--ck-table-column-resizer-position-offset:calc(var(--ck-table-column-resizer-width)*-0.5 - 0.5px)}.ck-content .table .ck-table-resized{table-layout:fixed}.ck-content .table table{overflow:hidden}.ck-content .table td,.ck-content .table th{overflow-wrap:break-word;position:relative}.ck.ck-editor__editable .table .ck-table-column-resizer{bottom:0;cursor:col-resize;position:absolute;right:var(--ck-table-column-resizer-position-offset);top:0;user-select:none;width:var(--ck-table-column-resizer-width);z-index:var(--ck-z-default)}.ck.ck-editor__editable .table[draggable] .ck-table-column-resizer,.ck.ck-editor__editable.ck-column-resize_disabled .table .ck-table-column-resizer{display:none}.ck.ck-editor__editable .table .ck-table-column-resizer:hover,.ck.ck-editor__editable .table .ck-table-column-resizer__active{background-color:var(--ck-color-selector-column-resizer-hover);bottom:-999999px;opacity:.25;top:-999999px}.ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer{left:var(--ck-table-column-resizer-position-offset);right:unset}";
+var css_248z$1 = "@import \"@ckeditor/ckeditor5-ui/theme/mixins/_mediacolors.css\";:root{--ck-color-selector-caption-background:#f7f7f7;--ck-color-selector-caption-text:#333;--ck-color-selector-caption-highlighted-background:#fd0}.ck-content .table>figcaption{background-color:var(--ck-color-selector-caption-background);caption-side:top;color:var(--ck-color-selector-caption-text);display:table-caption;font-size:.75em;outline-offset:-1px;padding:.6em;text-align:center;word-break:break-word;@mixin ck-media-forced-colors{background-color:unset;color:unset}}.ck.ck-editor__editable .table>figcaption{@mixin ck-media-default-colors{&.table__caption_highlighted{animation:ck-table-caption-highlight .6s ease-out}}&.ck-placeholder:before{overflow:hidden;padding-left:inherit;padding-right:inherit;text-overflow:ellipsis;white-space:nowrap}}@keyframes ck-table-caption-highlight{0%{background-color:var(--ck-color-selector-caption-highlighted-background)}to{background-color:var(--ck-color-selector-caption-background)}}";
 styleInject(css_248z$1);
 
-/**
- * @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-licensing-options
- */
-/**
- * @module font/fontcommand
- */
-/**
- * The base font command.
- */
-class FontCommand extends Command {
-    /**
-     * Creates an instance of the command.
-     *
-     * @param editor Editor instance.
-     * @param attributeKey The name of a model attribute on which this command operates.
-     */
-    constructor(editor, attributeKey) {
-        super(editor);
-        this.attributeKey = attributeKey;
-    }
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        const model = this.editor.model;
-        const doc = model.document;
-        this.value = doc.selection.getAttribute(this.attributeKey);
-        this.isEnabled = model.schema.checkAttributeInSelection(doc.selection, this.attributeKey);
-    }
-    /**
-     * Executes the command. Applies the `value` of the {@link #attributeKey} to the selection.
-     * If no `value` is passed, it removes the attribute from the selection.
-     *
-     * @param options Options for the executed command.
-     * @param options.value The value to apply.
-     * @fires execute
-     */
-    execute(options = {}) {
-        const model = this.editor.model;
-        const document = model.document;
-        const selection = document.selection;
-        const value = options.value;
-        const batch = options.batch;
-        const updateAttribute = (writer) => {
-            if (selection.isCollapsed) {
-                if (value) {
-                    writer.setSelectionAttribute(this.attributeKey, value);
-                }
-                else {
-                    writer.removeSelectionAttribute(this.attributeKey);
-                }
-            }
-            else {
-                const ranges = model.schema.getValidRanges(selection.getRanges(), this.attributeKey);
-                for (const range of ranges) {
-                    if (value) {
-                        writer.setAttribute(this.attributeKey, value, range);
-                    }
-                    else {
-                        writer.removeAttribute(this.attributeKey, range);
-                    }
-                }
-            }
-        };
-        // In some scenarios, you may want to use a single undo step for multiple changes (e.g. in color picker).
-        if (batch) {
-            model.enqueueChange(batch, writer => {
-                updateAttribute(writer);
-            });
-        }
-        else {
-            model.change(writer => {
-                updateAttribute(writer);
-            });
-        }
-    }
-}
-
-/**
- * @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-licensing-options
- */
-/**
- * The name of the font color plugin.
- */
-const FONT_COLOR = 'fontColor';
-/**
- * The name of the font background color plugin.
- */
-const FONT_BACKGROUND_COLOR = 'fontBackgroundColor';
-/**
- * A {@link module:font/fontcolor~FontColor font color} and
- * {@link module:font/fontbackgroundcolor~FontBackgroundColor font background color} helper
- * responsible for upcasting data to the model.
- *
- * **Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.
- */
-function renderUpcastAttribute(styleAttr) {
-    return (viewElement) => normalizeColorCode(viewElement.getStyle(styleAttr));
-}
-/**
- * A {@link module:font/fontcolor~FontColor font color} and
- * {@link module:font/fontbackgroundcolor~FontBackgroundColor font background color} helper
- * responsible for downcasting a color attribute to a `<span>` element.
- *
- * **Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.
- */
-function renderDowncastElement(styleAttr) {
-    return (modelAttributeValue, { writer }) => writer.createAttributeElement('span', {
-        style: `${styleAttr}:${modelAttributeValue}`
-    }, { priority: 7 });
-}
-/**
- * A helper that adds {@link module:ui/colorselector/colorselectorview~ColorSelectorView} to the color dropdown with proper initial values.
- *
- * @param config.dropdownView The dropdown view to which a {@link module:ui/colorselector/colorselectorview~ColorSelectorView}
- * will be added.
- * @param config.colors An array with definitions representing colors to be displayed in the color selector.
- * @param config.removeButtonLabel The label for the button responsible for removing the color.
- * @param config.documentColorsLabel The label for the section with document colors.
- * @param config.documentColorsCount The number of document colors inside the dropdown.
- * @param config.colorPickerViewConfig Configuration of the color picker view.
- * @returns The new color selector view.
- */
-function addColorSelectorToDropdown({ dropdownView, colors, columns, removeButtonLabel, colorPickerLabel, documentColorsLabel, documentColorsCount, colorPickerViewConfig }) {
-    const locale = dropdownView.locale;
-    const colorSelectorView = new ColorSelectorView(locale, {
-        colors,
-        columns,
-        removeButtonLabel,
-        colorPickerLabel,
-        documentColorsLabel,
-        documentColorsCount,
-        colorPickerViewConfig
-    });
-    dropdownView.colorSelectorView = colorSelectorView;
-    dropdownView.panelView.children.add(colorSelectorView);
-    return colorSelectorView;
-}
-/**
- * Fixes the color value string.
- */
-function normalizeColorCode(value) {
-    return value.replace(/\s/g, '');
-}
-
-var css_248z = ".ck-content{& .text-tiny{font-size:.7em}& .text-small{font-size:.85em}& .text-big{font-size:1.4em}& .text-huge{font-size:1.8em}}";
+var css_248z = ":root{--ck-color-selector-column-resizer-hover:var(--ck-color-base-active);--ck-table-column-resizer-width:7px;--ck-table-column-resizer-position-offset:calc(var(--ck-table-column-resizer-width)*-0.5 - 0.5px)}.ck-content .table .ck-table-resized{table-layout:fixed}.ck-content .table table{overflow:hidden}.ck-content .table td,.ck-content .table th{overflow-wrap:break-word;position:relative}.ck.ck-editor__editable .table .ck-table-column-resizer{bottom:0;cursor:col-resize;position:absolute;right:var(--ck-table-column-resizer-position-offset);top:0;user-select:none;width:var(--ck-table-column-resizer-width);z-index:var(--ck-z-default)}.ck.ck-editor__editable .table[draggable] .ck-table-column-resizer,.ck.ck-editor__editable.ck-column-resize_disabled .table .ck-table-column-resizer{display:none}.ck.ck-editor__editable .table .ck-table-column-resizer:hover,.ck.ck-editor__editable .table .ck-table-column-resizer__active{background-color:var(--ck-color-selector-column-resizer-hover);bottom:-999999px;opacity:.25;top:-999999px}.ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer{left:var(--ck-table-column-resizer-position-offset);right:unset}";
 styleInject(css_248z);
 
-/**
- * @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-licensing-options
- */
-/**
- * The font color command. It is used by {@link module:font/fontcolor/fontcolorediting~FontColorEditing}
- * to apply the font color.
- *
- * ```ts
- * editor.execute( 'fontColor', { value: 'rgb(250, 20, 20)' } );
- * ```
- *
- * **Note**: Executing the command with the `null` value removes the attribute from the model.
- */
-class FontColorCommand extends FontCommand {
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor, FONT_COLOR);
-    }
-}
-
-/**
- * @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-licensing-options
- */
-/**
- * @module font/fontcolor/fontcolorediting
- */
-/**
- * The font color editing feature.
- *
- * It introduces the {@link module:font/fontcolor/fontcolorcommand~FontColorCommand command} and
- * the `fontColor` attribute in the {@link module:engine/model/model~Model model} which renders
- * in the {@link module:engine/view/view view} as a `<span>` element (`<span style="color: ...">`),
- * depending on the {@link module:font/fontconfig~FontColorConfig configuration}.
- */
-class FontColorEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'FontColorEditing';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        editor.config.define(FONT_COLOR, {
-            colors: [
-                {
-                    color: 'hsl(0, 0%, 0%)',
-                    label: 'Black'
-                },
-                {
-                    color: 'hsl(0, 0%, 30%)',
-                    label: 'Dim grey'
-                },
-                {
-                    color: 'hsl(0, 0%, 60%)',
-                    label: 'Grey'
-                },
-                {
-                    color: 'hsl(0, 0%, 90%)',
-                    label: 'Light grey'
-                },
-                {
-                    color: 'hsl(0, 0%, 100%)',
-                    label: 'White',
-                    hasBorder: true
-                },
-                {
-                    color: 'hsl(0, 75%, 60%)',
-                    label: 'Red'
-                },
-                {
-                    color: 'hsl(30, 75%, 60%)',
-                    label: 'Orange'
-                },
-                {
-                    color: 'hsl(60, 75%, 60%)',
-                    label: 'Yellow'
-                },
-                {
-                    color: 'hsl(90, 75%, 60%)',
-                    label: 'Light green'
-                },
-                {
-                    color: 'hsl(120, 75%, 60%)',
-                    label: 'Green'
-                },
-                {
-                    color: 'hsl(150, 75%, 60%)',
-                    label: 'Aquamarine'
-                },
-                {
-                    color: 'hsl(180, 75%, 60%)',
-                    label: 'Turquoise'
-                },
-                {
-                    color: 'hsl(210, 75%, 60%)',
-                    label: 'Light blue'
-                },
-                {
-                    color: 'hsl(240, 75%, 60%)',
-                    label: 'Blue'
-                },
-                {
-                    color: 'hsl(270, 75%, 60%)',
-                    label: 'Purple'
-                }
-            ],
-            columns: 5
-        });
-        editor.conversion.for('upcast').elementToAttribute({
-            view: {
-                name: 'span',
-                styles: {
-                    'color': /[\s\S]+/
-                }
-            },
-            model: {
-                key: FONT_COLOR,
-                value: renderUpcastAttribute('color')
-            }
-        });
-        // Support legacy `<font color="..">` formatting.
-        editor.conversion.for('upcast').elementToAttribute({
-            view: {
-                name: 'font',
-                attributes: {
-                    'color': /^#?\w+$/
-                }
-            },
-            model: {
-                key: FONT_COLOR,
-                value: (viewElement) => viewElement.getAttribute('color')
-            }
-        });
-        editor.conversion.for('downcast').attributeToElement({
-            model: FONT_COLOR,
-            view: renderDowncastElement('color')
-        });
-        editor.commands.add(FONT_COLOR, new FontColorCommand(editor));
-        // Allow the font color attribute on text nodes.
-        editor.model.schema.extend('$text', { allowAttributes: FONT_COLOR });
-        editor.model.schema.setAttributeProperties(FONT_COLOR, {
-            isFormatting: true,
-            copyOnEnter: true
-        });
-    }
-}
-
-/**
- * @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-licensing-options
- */
-/**
- * @module font/ui/colorui
- */
-/**
- * The color UI plugin which isolates the common logic responsible for displaying dropdowns with color grids.
- *
- * It is used to create the `'fontBackgroundColor'` and `'fontColor'` dropdowns, each hosting
- * a {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
- */
-class ColorUI extends Plugin {
-    /**
-     * Creates a plugin which introduces a dropdown with a pre–configured
-     * {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
-     *
-     * @param config The configuration object.
-     * @param config.commandName The name of the command which will be executed when a color tile is clicked.
-     * @param config.componentName The name of the dropdown in the {@link module:ui/componentfactory~ComponentFactory}
-     * and the configuration scope name in `editor.config`.
-     * @param config.icon The SVG icon used by the dropdown.
-     * @param config.dropdownLabel The label used by the dropdown.
-     */
-    constructor(editor, { commandName, componentName, icon, dropdownLabel }) {
-        super(editor);
-        this.commandName = commandName;
-        this.componentName = componentName;
-        this.icon = icon;
-        this.dropdownLabel = dropdownLabel;
-        this.columns = editor.config.get(`${this.componentName}.columns`);
-    }
-    /**
-    * @inheritDoc
-    */
-    init() {
-        const editor = this.editor;
-        const locale = editor.locale;
-        const t = locale.t;
-        const command = editor.commands.get(this.commandName);
-        const componentConfig = editor.config.get(this.componentName);
-        const colorsConfig = normalizeColorOptions(componentConfig.colors);
-        const localizedColors = getLocalizedColorOptions(locale, colorsConfig);
-        const documentColorsCount = componentConfig.documentColors;
-        const hasColorPicker = componentConfig.colorPicker !== false;
-        // Register the UI component.
-        editor.ui.componentFactory.add(this.componentName, locale => {
-            const dropdownView = createDropdown(locale);
-            // Font color dropdown rendering is deferred once it gets open to improve performance (#6192).
-            let dropdownContentRendered = false;
-            const colorSelectorView = addColorSelectorToDropdown({
-                dropdownView,
-                colors: localizedColors.map(option => ({
-                    label: option.label,
-                    color: option.model,
-                    options: {
-                        hasBorder: option.hasBorder
-                    }
-                })),
-                columns: this.columns,
-                removeButtonLabel: t('Remove color'),
-                colorPickerLabel: t('Color picker'),
-                documentColorsLabel: documentColorsCount !== 0 ? t('Document colors') : '',
-                documentColorsCount: documentColorsCount === undefined ? this.columns : documentColorsCount,
-                colorPickerViewConfig: hasColorPicker ? (componentConfig.colorPicker || {}) : false
-            });
-            colorSelectorView.bind('selectedColor').to(command, 'value');
-            dropdownView.buttonView.set({
-                label: this.dropdownLabel,
-                icon: this.icon,
-                tooltip: true
-            });
-            dropdownView.extendTemplate({
-                attributes: {
-                    class: 'ck-color-ui-dropdown'
-                }
-            });
-            dropdownView.bind('isEnabled').to(command);
-            colorSelectorView.on('execute', (evt, data) => {
-                if (dropdownView.isOpen) {
-                    editor.execute(this.commandName, {
-                        value: data.value,
-                        batch: this._undoStepBatch
-                    });
-                }
-                if (data.source !== 'colorPicker') {
-                    editor.editing.view.focus();
-                }
-                if (data.source === 'colorPickerSaveButton') {
-                    dropdownView.isOpen = false;
-                }
-            });
-            colorSelectorView.on('colorPicker:show', () => {
-                this._undoStepBatch = editor.model.createBatch();
-            });
-            colorSelectorView.on('colorPicker:cancel', () => {
-                if (this._undoStepBatch.operations.length) {
-                    // We need to close the dropdown before the undo batch.
-                    // Otherwise, ColorUI treats undo as a selected color change,
-                    // propagating the update to the whole selection.
-                    // That's an issue if spans with various colors were selected.
-                    dropdownView.isOpen = false;
-                    editor.execute('undo', this._undoStepBatch);
-                }
-                editor.editing.view.focus();
-            });
-            dropdownView.on('change:isOpen', (evt, name, isVisible) => {
-                if (!dropdownContentRendered) {
-                    dropdownContentRendered = true;
-                    dropdownView.colorSelectorView.appendUI();
-                }
-                if (isVisible) {
-                    if (documentColorsCount !== 0) {
-                        colorSelectorView.updateDocumentColors(editor.model, this.componentName);
-                    }
-                    colorSelectorView.updateSelectedColors();
-                    colorSelectorView.showColorGridsFragment();
-                }
-            });
-            // Accessibility: focus the first active color when opening the dropdown.
-            focusChildOnDropdownOpen(dropdownView, () => dropdownView.colorSelectorView.colorGridsFragmentView.staticColorsGrid.items.find((item) => item.isOn));
-            return dropdownView;
-        });
-        // Register menu bar button..
-        editor.ui.componentFactory.add(`menuBar:${this.componentName}`, locale => {
-            const menuView = new MenuBarMenuView(locale);
-            menuView.buttonView.set({
-                label: this.dropdownLabel,
-                icon: this.icon
-            });
-            menuView.bind('isEnabled').to(command);
-            // Font color sub-menu rendering is deferred once it gets open to improve performance (#6192).
-            let contentRendered = false;
-            const colorSelectorView = new ColorSelectorView(locale, {
-                colors: localizedColors.map(option => ({
-                    label: option.label,
-                    color: option.model,
-                    options: {
-                        hasBorder: option.hasBorder
-                    }
-                })),
-                columns: this.columns,
-                removeButtonLabel: t('Remove color'),
-                colorPickerLabel: t('Color picker'),
-                documentColorsLabel: documentColorsCount !== 0 ? t('Document colors') : '',
-                documentColorsCount: documentColorsCount === undefined ? this.columns : documentColorsCount,
-                colorPickerViewConfig: false
-            });
-            colorSelectorView.bind('selectedColor').to(command, 'value');
-            colorSelectorView.delegate('execute').to(menuView);
-            colorSelectorView.on('execute', (evt, data) => {
-                editor.execute(this.commandName, {
-                    value: data.value,
-                    batch: this._undoStepBatch
-                });
-                editor.editing.view.focus();
-            });
-            menuView.on('change:isOpen', (evt, name, isVisible) => {
-                if (!contentRendered) {
-                    contentRendered = true;
-                    colorSelectorView.appendUI();
-                }
-                if (isVisible) {
-                    if (documentColorsCount !== 0) {
-                        colorSelectorView.updateDocumentColors(editor.model, this.componentName);
-                    }
-                    colorSelectorView.updateSelectedColors();
-                    colorSelectorView.showColorGridsFragment();
-                }
-            });
-            menuView.panelView.children.add(colorSelectorView);
-            return menuView;
-        });
-    }
-}
-
-var fontColorIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.4 10.3 10 4.5l-2.4 5.8h4.8zm.5 1.2H7.1L5.7 15H4.2l5-12h1.6l5 12h-1.5L13 11.5zm3.1 7H4a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2z\"/></svg>";
-
-/**
- * @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-licensing-options
- */
-/**
- * @module font/fontcolor/fontcolorui
- */
-/**
- * The font color UI plugin. It introduces the `'fontColor'` dropdown.
- */
-class FontColorUI extends ColorUI {
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        const t = editor.locale.t;
-        super(editor, {
-            commandName: FONT_COLOR,
-            componentName: FONT_COLOR,
-            icon: fontColorIcon,
-            dropdownLabel: t('Font Color')
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'FontColorUI';
-    }
-}
-
-/**
- * @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-licensing-options
- */
-/**
- * @module font/fontcolor
- */
-/**
- * The font color plugin.
- *
- * For a detailed overview, check the {@glink features/font font feature} documentation
- * and the {@glink api/font package page}.
- *
- * This is a "glue" plugin which loads the {@link module:font/fontcolor/fontcolorediting~FontColorEditing} and
- * {@link module:font/fontcolor/fontcolorui~FontColorUI} features in the editor.
- */
-class FontColor extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [FontColorEditing, FontColorUI];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'FontColor';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-}
-
-/**
- * @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-licensing-options
- */
-/**
- * The font background color command. It is used by
- * {@link module:font/fontbackgroundcolor/fontbackgroundcolorediting~FontBackgroundColorEditing}
- * to apply the font background color.
- *
- * ```ts
- * editor.execute( 'fontBackgroundColor', { value: 'rgb(250, 20, 20)' } );
- * ```
- *
- * **Note**: Executing the command with the `null` value removes the attribute from the model.
- */
-class FontBackgroundColorCommand extends FontCommand {
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor, FONT_BACKGROUND_COLOR);
-    }
-}
-
-/**
- * @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-licensing-options
- */
-/**
- * @module font/fontbackgroundcolor/fontbackgroundcolorediting
- */
-/**
- * The font background color editing feature.
- *
- * It introduces the {@link module:font/fontbackgroundcolor/fontbackgroundcolorcommand~FontBackgroundColorCommand command} and
- * the `fontBackgroundColor` attribute in the {@link module:engine/model/model~Model model} which renders
- * in the {@link module:engine/view/view view} as a `<span>` element (`<span style="background-color: ...">`),
- * depending on the {@link module:font/fontconfig~FontColorConfig configuration}.
- */
-class FontBackgroundColorEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'FontBackgroundColorEditing';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        editor.config.define(FONT_BACKGROUND_COLOR, {
-            colors: [
-                {
-                    color: 'hsl(0, 0%, 0%)',
-                    label: 'Black'
-                },
-                {
-                    color: 'hsl(0, 0%, 30%)',
-                    label: 'Dim grey'
-                },
-                {
-                    color: 'hsl(0, 0%, 60%)',
-                    label: 'Grey'
-                },
-                {
-                    color: 'hsl(0, 0%, 90%)',
-                    label: 'Light grey'
-                },
-                {
-                    color: 'hsl(0, 0%, 100%)',
-                    label: 'White',
-                    hasBorder: true
-                },
-                {
-                    color: 'hsl(0, 75%, 60%)',
-                    label: 'Red'
-                },
-                {
-                    color: 'hsl(30, 75%, 60%)',
-                    label: 'Orange'
-                },
-                {
-                    color: 'hsl(60, 75%, 60%)',
-                    label: 'Yellow'
-                },
-                {
-                    color: 'hsl(90, 75%, 60%)',
-                    label: 'Light green'
-                },
-                {
-                    color: 'hsl(120, 75%, 60%)',
-                    label: 'Green'
-                },
-                {
-                    color: 'hsl(150, 75%, 60%)',
-                    label: 'Aquamarine'
-                },
-                {
-                    color: 'hsl(180, 75%, 60%)',
-                    label: 'Turquoise'
-                },
-                {
-                    color: 'hsl(210, 75%, 60%)',
-                    label: 'Light blue'
-                },
-                {
-                    color: 'hsl(240, 75%, 60%)',
-                    label: 'Blue'
-                },
-                {
-                    color: 'hsl(270, 75%, 60%)',
-                    label: 'Purple'
-                }
-            ],
-            columns: 5
-        });
-        editor.data.addStyleProcessorRules(addBackgroundRules);
-        editor.conversion.for('upcast').elementToAttribute({
-            view: {
-                name: 'span',
-                styles: {
-                    'background-color': /[\s\S]+/
-                }
-            },
-            model: {
-                key: FONT_BACKGROUND_COLOR,
-                value: renderUpcastAttribute('background-color')
-            }
-        });
-        editor.conversion.for('downcast').attributeToElement({
-            model: FONT_BACKGROUND_COLOR,
-            view: renderDowncastElement('background-color')
-        });
-        editor.commands.add(FONT_BACKGROUND_COLOR, new FontBackgroundColorCommand(editor));
-        // Allow the font backgroundColor attribute on text nodes.
-        editor.model.schema.extend('$text', { allowAttributes: FONT_BACKGROUND_COLOR });
-        editor.model.schema.setAttributeProperties(FONT_BACKGROUND_COLOR, {
-            isFormatting: true,
-            copyOnEnter: true
-        });
-    }
-}
-
-var fontBackgroundColorIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4 2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8.38 9.262H7.62L10 5.506l2.38 5.756zm.532 1.285L14.34 16h1.426L10.804 4H9.196L4.234 16H5.66l1.428-3.453h5.824z\"/></svg>";
-
-/**
- * @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-licensing-options
- */
-/**
- * @module font/fontbackgroundcolor/fontbackgroundcolorui
- */
-/**
- * The font background color UI plugin. It introduces the `'fontBackgroundColor'` dropdown.
- */
-class FontBackgroundColorUI extends ColorUI {
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        const t = editor.locale.t;
-        super(editor, {
-            commandName: FONT_BACKGROUND_COLOR,
-            componentName: FONT_BACKGROUND_COLOR,
-            icon: fontBackgroundColorIcon,
-            dropdownLabel: t('Font Background Color')
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'FontBackgroundColorUI';
-    }
-}
-
-/**
- * @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-licensing-options
- */
-/**
- * @module font/fontbackgroundcolor
- */
-/**
- * The font background color plugin.
- *
- * For a detailed overview, check the {@glink features/font font feature} documentation
- * and the {@glink api/font package page}.
- *
- * This is a "glue" plugin which loads
- * the {@link module:font/fontbackgroundcolor/fontbackgroundcolorediting~FontBackgroundColorEditing} and
- * {@link module:font/fontbackgroundcolor/fontbackgroundcolorui~FontBackgroundColorUI} features in the editor.
- */
-class FontBackgroundColor extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [FontBackgroundColorEditing, FontBackgroundColorUI];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'FontBackgroundColor';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-}
-
+// 추가하고 싶은 플러그인들
+//import { FontColor, FontBackgroundColor } from '@ckeditor/ckeditor5-font';
+
 class nxEditor extends nxDiv {
 	#editor = null;