@ckeditor/ckeditor5-ui 46.1.1 → 47.0.0-alpha.0

package/dist/index.js

@@ -717,7 +717,8 @@ const xhtmlNs = 'http://www.w3.org/1999/xhtml';
 	 * ```ts
 	 * attributes: {
 	 * 	style: {
-	 * 		color: 'red'
+	 * 		color: 'red',
+	 * 		'--color': 'red'
 	 * 	}
 	 * }
 	 * ```
@@ -727,7 +728,8 @@ const xhtmlNs = 'http://www.w3.org/1999/xhtml';
 	 * ```ts
 	 * attributes: {
 	 * 	style: {
-	 * 		color: bind.to( ... )
+	 * 		color: bind.to( ... ),
+	 * 		'--color': bind.to( ... )
 	 * 	}
 	 * }
 	 * ```
@@ -755,6 +757,8 @@ const xhtmlNs = 'http://www.w3.org/1999/xhtml';
                     updater: getStyleUpdater(node, styleName),
                     data
                 });
+            } else if (isCssVariable(styleName)) {
+                node.style.setProperty(styleName, styleValue);
             } else {
                 node.style[styleName] = styleValue;
             }
@@ -1040,6 +1044,19 @@ const xhtmlNs = 'http://www.w3.org/1999/xhtml';
     }
     return false;
 }
+/**
+ * Checks whether the given name is a valid CSS variable name.
+ *
+ * A valid CSS variable name starts with two dashes (`--`), followed by a letter, underscore (`_`),
+ * or dash (`-`), and can be followed by any combination of letters, digits, underscores, dashes,
+ * or additional dashes.
+ *
+ * @param name The name to validate as a CSS variable.
+ * @returns True if the name is a valid CSS variable, false otherwise.
+ */ function isCssVariable(name) {
+    const regex = /^--[a-zA-Z_-][\w-]*$/;
+    return regex.test(name);
+}
 /**
  * Assembles the value using {@link module:ui/template~TemplateValueSchema} and stores it in a form of
  * an Array. Each entry of the Array corresponds to one of {@link module:ui/template~TemplateValueSchema}
@@ -1124,10 +1141,18 @@ const xhtmlNs = 'http://www.w3.org/1999/xhtml';
  */ function getStyleUpdater(el, styleName) {
     return {
         set (value) {
-            el.style[styleName] = value;
+            if (isCssVariable(styleName)) {
+                el.style.setProperty(styleName, value);
+            } else {
+                el.style[styleName] = value;
+            }
         },
         remove () {
-            el.style[styleName] = null;
+            if (isCssVariable(styleName)) {
+                el.style.removeProperty(styleName);
+            } else {
+                el.style[styleName] = null;
+            }
         }
     };
 }
@@ -3865,6 +3890,13 @@ const toPx$6 = /* #__PURE__ */ toUnit('px');
         }
         const defaultOffset = DialogView.defaultOffset;
         const dialogRect = this._getDialogRect();
+        if (this.position == null) {
+            return;
+        } else if (typeof this.position == 'function') {
+            const coords = this.position(dialogRect, domRootRect);
+            this._moveTo(coords.left, coords.top);
+            return;
+        }
         // @if CK_DEBUG_DIALOG // RectDrawer.clear();
         // @if CK_DEBUG_DIALOG // RectDrawer.draw( viewportRect, { outlineColor: 'blue' }, 'Viewport' );
         switch(configuredPosition){
@@ -10406,7 +10438,7 @@ function addMenuToOpenDropdown(dropdownView, options) {
             const listItemView = new ListItemView(locale);
             let buttonView;
             if (def.type === 'button') {
-                buttonView = new ListItemButtonView(locale);
+                buttonView = new ListItemButtonView(locale, def.labelView);
                 buttonView.set({
                     isToggleable
                 });