@elementor/editor-controls 3.35.0-450 → 3.35.0-452

package/dist/index.d.mts

@@ -166,6 +166,7 @@ type MultiSizePropValue = Record<PropKey, PropValue>;
 type Item$1 = {
     icon: ReactNode;
     label: string;
+    ariaLabel?: string;
     bind: PropKey;
 };
 type EqualUnequalItems = [Item$1, Item$1, Item$1, Item$1];

package/dist/index.d.ts

@@ -166,6 +166,7 @@ type MultiSizePropValue = Record<PropKey, PropValue>;
 type Item$1 = {
     icon: ReactNode;
     label: string;
+    ariaLabel?: string;
     bind: PropKey;
 };
 type EqualUnequalItems = [Item$1, Item$1, Item$1, Item$1];

package/dist/index.js

@@ -2730,7 +2730,8 @@ function EqualUnequalSizesControl({
   ));
 }
 var MultiSizeValueControl = ({ item, rowRef }) => {
-  return /* @__PURE__ */ React56.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React56.createElement(import_ui41.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(import_ui41.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React56.createElement(import_ui41.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React56.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React56.createElement(import_ui41.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React56.createElement(SizeControl, { startIcon: item.icon, anchorRef: rowRef })))));
+  const { bind, label, icon, ariaLabel } = item;
+  return /* @__PURE__ */ React56.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React56.createElement(import_ui41.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(import_ui41.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React56.createElement(import_ui41.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React56.createElement(ControlLabel, null, label)), /* @__PURE__ */ React56.createElement(import_ui41.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React56.createElement(SizeControl, { startIcon: icon, ariaLabel, anchorRef: rowRef })))));
 };
 
 // src/controls/linked-dimensions-control.tsx
@@ -2817,10 +2818,11 @@ var LinkedDimensionsControl = ({ label, isSiteRtl = false, extendedOptions, min
       isPlaceholder: hasPlaceholders
     },
     /* @__PURE__ */ React57.createElement(LinkedIcon, { fontSize: "tiny" })
-  ))), getCssDimensionProps(isSiteRtl).map((row, index) => /* @__PURE__ */ React57.createElement(import_ui42.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React57.createElement(import_ui42.Grid, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React57.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(Label, { ...props })), /* @__PURE__ */ React57.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(
+  ))), getCssDimensionProps(label, isSiteRtl).map((row, index) => /* @__PURE__ */ React57.createElement(import_ui42.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React57.createElement(import_ui42.Grid, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React57.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(Label, { ...props })), /* @__PURE__ */ React57.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(
     Control3,
     {
       bind: props.bind,
+      ariaLabel: props.ariaLabel,
       startIcon: icon,
       isLinked,
       extendedOptions,
@@ -2831,6 +2833,7 @@ var LinkedDimensionsControl = ({ label, isSiteRtl = false, extendedOptions, min
 };
 var Control3 = ({
   bind,
+  ariaLabel,
   startIcon,
   isLinked,
   extendedOptions,
@@ -2841,6 +2844,7 @@ var Control3 = ({
     return /* @__PURE__ */ React57.createElement(
       SizeControl,
       {
+        ariaLabel,
         startIcon,
         extendedOptions,
         anchorRef,
@@ -2851,6 +2855,7 @@ var Control3 = ({
   return /* @__PURE__ */ React57.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React57.createElement(
     SizeControl,
     {
+      ariaLabel,
       startIcon,
       extendedOptions,
       anchorRef,
@@ -2861,17 +2866,26 @@ var Control3 = ({
 var Label = ({ label, bind }) => {
   return /* @__PURE__ */ React57.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React57.createElement(ControlLabel, null, label));
 };
-function getCssDimensionProps(isSiteRtl) {
+function getCssDimensionProps(label, isSiteRtl) {
   return [
     [
       {
         bind: "block-start",
         label: (0, import_i18n18.__)("Top", "elementor"),
+        /* translators: %s is the name of the main group (margin or padding) */
+        ariaLabel: (0, import_i18n18.sprintf)((0, import_i18n18.__)("%s top", "elementor"), label),
         icon: /* @__PURE__ */ React57.createElement(import_icons10.SideTopIcon, { fontSize: "tiny" })
       },
       {
         bind: "inline-end",
         label: isSiteRtl ? (0, import_i18n18.__)("Left", "elementor") : (0, import_i18n18.__)("Right", "elementor"),
+        ariaLabel: isSiteRtl ? (
+          /* translators: %s is the name of the main group (margin or padding) */
+          (0, import_i18n18.sprintf)((0, import_i18n18.__)("%s left", "elementor"), label)
+        ) : (
+          /* translators: %s is the name of the main group (margin or padding) */
+          (0, import_i18n18.sprintf)((0, import_i18n18.__)("%s right", "elementor"), label)
+        ),
         icon: isSiteRtl ? /* @__PURE__ */ React57.createElement(import_icons10.SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React57.createElement(import_icons10.SideRightIcon, { fontSize: "tiny" })
       }
     ],
@@ -2879,11 +2893,20 @@ function getCssDimensionProps(isSiteRtl) {
       {
         bind: "block-end",
         label: (0, import_i18n18.__)("Bottom", "elementor"),
+        /* translators: %s is the name of the main group (margin or padding) */
+        ariaLabel: (0, import_i18n18.sprintf)((0, import_i18n18.__)("%s bottom", "elementor"), label),
         icon: /* @__PURE__ */ React57.createElement(import_icons10.SideBottomIcon, { fontSize: "tiny" })
       },
       {
         bind: "inline-start",
         label: isSiteRtl ? (0, import_i18n18.__)("Right", "elementor") : (0, import_i18n18.__)("Left", "elementor"),
+        ariaLabel: isSiteRtl ? (
+          /* translators: %s is the name of the main group (margin or padding) */
+          (0, import_i18n18.sprintf)((0, import_i18n18.__)("%s right", "elementor"), label)
+        ) : (
+          /* translators: %s is the name of the main group (margin or padding) */
+          (0, import_i18n18.sprintf)((0, import_i18n18.__)("%s left", "elementor"), label)
+        ),
         icon: isSiteRtl ? /* @__PURE__ */ React57.createElement(import_icons10.SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React57.createElement(import_icons10.SideLeftIcon, { fontSize: "tiny" })
       }
     ]
@@ -3761,17 +3784,34 @@ var GapControl = ({ label }) => {
       isPlaceholder: hasPlaceholders
     },
     /* @__PURE__ */ React68.createElement(LinkedIcon, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React68.createElement(import_ui53.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React68.createElement(import_ui53.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React68.createElement(import_ui53.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(ControlFormLabel, null, (0, import_i18n25.__)("Column", "elementor"))), /* @__PURE__ */ React68.createElement(import_ui53.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(Control4, { bind: "column", isLinked, anchorRef: stackRef }))), /* @__PURE__ */ React68.createElement(import_ui53.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React68.createElement(import_ui53.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(ControlFormLabel, null, (0, import_i18n25.__)("Row", "elementor"))), /* @__PURE__ */ React68.createElement(import_ui53.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(Control4, { bind: "row", isLinked, anchorRef: stackRef })))));
+  ))), /* @__PURE__ */ React68.createElement(import_ui53.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React68.createElement(import_ui53.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React68.createElement(import_ui53.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(ControlFormLabel, null, (0, import_i18n25.__)("Column", "elementor"))), /* @__PURE__ */ React68.createElement(import_ui53.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(
+    Control4,
+    {
+      bind: "column",
+      ariaLabel: (0, import_i18n25.__)("Column gap", "elementor"),
+      isLinked,
+      anchorRef: stackRef
+    }
+  ))), /* @__PURE__ */ React68.createElement(import_ui53.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React68.createElement(import_ui53.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(ControlFormLabel, null, (0, import_i18n25.__)("Row", "elementor"))), /* @__PURE__ */ React68.createElement(import_ui53.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(
+    Control4,
+    {
+      bind: "row",
+      ariaLabel: (0, import_i18n25.__)("Row gap", "elementor"),
+      isLinked,
+      anchorRef: stackRef
+    }
+  )))));
 };
 var Control4 = ({
   bind,
+  ariaLabel,
   isLinked,
   anchorRef
 }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React68.createElement(SizeControl, { anchorRef });
+    return /* @__PURE__ */ React68.createElement(SizeControl, { anchorRef, ariaLabel });
   }
-  return /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React68.createElement(SizeControl, { anchorRef }));
+  return /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React68.createElement(SizeControl, { anchorRef, ariaLabel }));
 };
 
 // src/controls/aspect-ratio-control.tsx
@@ -6271,7 +6311,7 @@ var InlineEditorToolbar = ({ editor, elementId }) => {
 var ITALIC_KEYBOARD_SHORTCUT = "i";
 var BOLD_KEYBOARD_SHORTCUT = "b";
 var UNDERLINE_KEYBOARD_SHORTCUT = "u";
-var INITIAL_STYLE = "margin:0;padding:0;";
+var INLINE_EDITOR_RESET_CLASS = "elementor-inline-editor-reset";
 var useOnUpdate = (callback, dependencies) => {
   const hasMounted = (0, import_react56.useRef)(false);
   (0, import_react56.useEffect)(() => {
@@ -6358,6 +6398,7 @@ var InlineEditor = (0, import_react56.forwardRef)(
       const newValue = updatedEditor.getHTML();
       setValue(isEmpty(newValue) ? null : newValue);
     };
+    const classes = `${INLINE_EDITOR_RESET_CLASS} ${elementClasses}`;
     const editor = (0, import_react57.useEditor)({
       extensions: [
         import_extension_document.default.extend({
@@ -6366,20 +6407,16 @@ var InlineEditor = (0, import_react56.forwardRef)(
         import_extension_paragraph.default.extend({
           renderHTML({ HTMLAttributes }) {
             const tag = expectedTag ?? "p";
-            return [tag, { ...HTMLAttributes, style: INITIAL_STYLE, class: elementClasses }, 0];
+            return [tag, { ...HTMLAttributes, class: classes }, 0];
           }
         }),
         import_extension_heading.default.extend({
           renderHTML({ node, HTMLAttributes }) {
             if (expectedTag) {
-              return [
-                expectedTag,
-                { ...HTMLAttributes, style: INITIAL_STYLE, class: elementClasses },
-                0
-              ];
+              return [expectedTag, { ...HTMLAttributes, class: classes }, 0];
             }
             const level = this.options.levels.includes(node.attrs.level) ? node.attrs.level : this.options.levels[0];
-            return [`h${level}`, { ...HTMLAttributes, style: INITIAL_STYLE, class: elementClasses }, 0];
+            return [`h${level}`, { ...HTMLAttributes, class: classes }, 0];
           }
         }).configure({
           levels: [1, 2, 3, 4, 5, 6]
@@ -6492,6 +6529,10 @@ var InlineEditingControl = createControl(
             fontSize: "12px",
             "& a": {
               color: "inherit"
+            },
+            "& .elementor-inline-editor-reset": {
+              margin: 0,
+              padding: 0
             }
           },
           ".strip-styles *": {