@wix/editor-react-components 1.2197.0 → 1.2198.0

package/dist/site/components/Button/Button.types.d.ts

@@ -49,6 +49,7 @@ export type ButtonProps = {
     link?: ButtonLinkProps;
     type?: 'button' | 'submit';
     label?: string;
+    labelContent?: React.ReactNode;
     disabled?: boolean;
     className?: string;
     direction?: Direction;

package/dist/site/components/Slideshow/NavigationButtons.d.ts

@@ -9,6 +9,8 @@ type NavigationButtonsProps = {
     parentDirection?: Direction;
     siteDirection?: Direction;
     navigationButtonsProps?: Partial<ButtonProps>;
+    nextButtonLabel?: string;
+    prevButtonLabel?: string;
 };
-export declare const NavigationButtons: ({ nextDisabled, onNextClick, prevDisabled, onPrevClick, parentDirection, navigationButtonsProps, siteDirection, }: NavigationButtonsProps) => React.JSX.Element | null;
+export declare const NavigationButtons: ({ nextDisabled, onNextClick, prevDisabled, onPrevClick, parentDirection, navigationButtonsProps, siteDirection, nextButtonLabel, prevButtonLabel, }: NavigationButtonsProps) => React.JSX.Element | null;
 export {};

package/dist/site/components/Slideshow/Slideshow.d.ts

@@ -29,6 +29,8 @@ type SlideshowDataProps = SdkFunctionClickableProps & SdkFunctionMouseHoverProps
     onChange?: (event?: React.SyntheticEvent) => void;
     onPlay?: () => void;
     onPause?: () => void;
+    nextButtonLabel?: string;
+    prevButtonLabel?: string;
     /** Utility prop that is not stored in the manifest data namespace. */
     rawAutoplay?: boolean;
 };

package/dist/site/components/Slideshow/component.js

@@ -1,7 +1,7 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback, useMemo } from "react";
 import { c as clsx } from "../chunks/clsx.js";
-import { M as MOVEMENT_DIRECTION, A as AUTOPLAY_STATE, s as semanticClassNames, a as slideshowDataDefaults, S as SLIDESHOW_SLIDE_LTR_DIRECTION_EXPERIMENT } from "../chunks/Slideshow.semanticClassNames.js";
+import { M as MOVEMENT_DIRECTION, A as AUTOPLAY_STATE, s as slideshowDataDefaults, a as semanticClassNames, S as SLIDESHOW_SLIDE_LTR_DIRECTION_EXPERIMENT } from "../chunks/Slideshow.semanticClassNames.js";
 import { B as Button } from "../chunks/Button.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
@@ -145,6 +145,7 @@ const fadeIn = "fadeIn__CsW3Y";
 const fadeOut = "fadeOut__w2xZR";
 const transitionTypeInOut = "transition-type-in-out__W25dJ";
 const buttons = "buttons__Fx7T8";
+const labelSizer = "labelSizer__RyeL0";
 const btnWrapper = "btnWrapper__T0ETG";
 const button = "button__y4atu";
 const prev = "prev__qz5A6";
@@ -195,6 +196,7 @@ const styles = {
   "transition-type-in-out": "transition-type-in-out__W25dJ",
   transitionTypeInOut,
   buttons,
+  labelSizer,
   btnWrapper,
   button,
   prev,
@@ -211,6 +213,10 @@ const styles = {
   controlsWrapper,
   controlsWrapperContent
 };
+const LabelWithSizer = ({ visibleLabel, sizerLabel }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("span", { children: visibleLabel }),
+  /* @__PURE__ */ jsx("span", { className: styles.labelSizer, "aria-hidden": "true", children: sizerLabel })
+] });
 const NavigationButtons = ({
   nextDisabled,
   onNextClick,
@@ -218,7 +224,9 @@ const NavigationButtons = ({
   onPrevClick,
   parentDirection,
   navigationButtonsProps,
-  siteDirection
+  siteDirection,
+  nextButtonLabel = slideshowDataDefaults.nextButtonLabel,
+  prevButtonLabel = slideshowDataDefaults.prevButtonLabel
 }) => {
   var _a;
   const direction = navigationButtonsProps == null ? void 0 : navigationButtonsProps.direction;
@@ -248,8 +256,17 @@ const NavigationButtons = ({
             ),
             disabled: prevDisabled,
             ...navigationButtonsProps,
+            label: prevButtonLabel || void 0,
+            labelContent: prevButtonLabel ? /* @__PURE__ */ jsx(
+              LabelWithSizer,
+              {
+                visibleLabel: prevButtonLabel,
+                sizerLabel: nextButtonLabel
+              }
+            ) : void 0,
             a11y: {
-              ariaLabel: "Previous"
+              ...navigationButtonsProps == null ? void 0 : navigationButtonsProps.a11y,
+              ariaLabel: prevButtonLabel || slideshowDataDefaults.prevButtonLabel
             }
           }
         ),
@@ -263,8 +280,17 @@ const NavigationButtons = ({
             ),
             disabled: nextDisabled,
             ...navigationButtonsProps,
+            label: nextButtonLabel || void 0,
+            labelContent: nextButtonLabel ? /* @__PURE__ */ jsx(
+              LabelWithSizer,
+              {
+                visibleLabel: nextButtonLabel,
+                sizerLabel: prevButtonLabel
+              }
+            ) : void 0,
             a11y: {
-              ariaLabel: "Next"
+              ...navigationButtonsProps == null ? void 0 : navigationButtonsProps.a11y,
+              ariaLabel: nextButtonLabel || slideshowDataDefaults.nextButtonLabel
             }
           }
         )
@@ -508,6 +534,8 @@ const Slideshow = (props) => {
     showPauseButton = slideshowDataDefaults.showPauseButton,
     rawAutoplay = true,
     a11y,
+    nextButtonLabel,
+    prevButtonLabel,
     onChange: onChangeCallback,
     onPlay: onPlayCallback,
     onPause: onPauseCallback,
@@ -696,7 +724,9 @@ const Slideshow = (props) => {
                       prevDisabled: !loop && activeSlideIndex === 0,
                       parentDirection: direction,
                       siteDirection,
-                      navigationButtonsProps
+                      navigationButtonsProps,
+                      nextButtonLabel,
+                      prevButtonLabel
                     }
                   ),
                   /* @__PURE__ */ jsx(

package/dist/site/components/Slideshow/constants.d.ts

@@ -1,96 +1,112 @@
 export declare const DisplayNames: {
-    root: {
-        elementDisplayName: string;
-        actions: {
-            manageItems: string;
-        };
-        customActions: {
-            animatedIcon: string;
-        };
-        data: {
-            content: string;
-            autoplay: string;
-            loop: string;
-            autoplayDelay: string;
-            pauseOnHover: string;
-            transitionType: string;
-            transitionDirection: string;
-            transitionDuration: string;
-            slides: string;
-            activeSlide: string;
-            showPauseButton: string;
-        };
-        displayGroups: {
-            slides: string;
-        };
-        cssCustomProperties: {
-            'animation-duration': string;
-            orientation: string;
-            'navigation-buttons-position': string;
-            'navigation-buttons-arrangement': string;
-            'navigation-buttons-alignment': string;
-            'slide-indicators-position': string;
-            'controls-padding': string;
+    readonly root: {
+        readonly elementDisplayName: "Slideshow";
+        readonly actions: {
+            readonly manageItems: "Manage Slideshow";
+        };
+        readonly customActions: {
+            readonly animatedIcon: "Customize Icon";
+        };
+        readonly data: {
+            readonly content: "Box";
+            readonly autoplay: "Autoplay";
+            readonly loop: "Continuous loop";
+            readonly autoplayDelay: "Time on each slide (seconds)";
+            readonly pauseOnHover: "Pause on hover";
+            readonly transitionType: "Transitions";
+            readonly transitionDirection: "Transition direction";
+            readonly transitionDuration: "Transition duration (seconds)";
+            readonly slides: "Slide";
+            readonly activeSlide: "Active slide";
+            readonly showPauseButton: "Show pause & play button";
+            readonly nextButtonLabel: "Next navigation button text";
+            readonly prevButtonLabel: "Previous navigation button text";
+        };
+        readonly displayGroups: {
+            readonly slides: "Slides";
+            readonly buttonsText: "Buttons text";
+        };
+        readonly cssCustomProperties: {
+            readonly 'animation-duration': "Transition duration";
+            readonly orientation: "Orientation";
+            readonly 'icon-placement': "Icon placement";
+            readonly 'navigation-buttons-position': "Navigation button position";
+            readonly 'navigation-buttons-arrangement': "Navigation button arrangement";
+            readonly 'navigation-buttons-alignment': "Navigation button alignment";
+            readonly 'slide-indicators-position': "Slide indicator position";
+            readonly 'controls-padding': "Padding";
         };
     };
-    transitionType: {
-        options: {
-            none: string;
-            slide: string;
-            crossFade: string;
-            inOut: string;
+    readonly transitionType: {
+        readonly options: {
+            readonly none: "None";
+            readonly slide: "Slide";
+            readonly crossFade: "Cross-fade";
+            readonly inOut: "In-and-out";
         };
     };
-    transitionDirection: {
-        options: {
-            rtl: string;
-            ltr: string;
-            ttb: string;
-            btt: string;
+    readonly transitionDirection: {
+        readonly options: {
+            readonly rtl: "Right-to-left";
+            readonly ltr: "Left-to-right";
+            readonly ttb: "Top-to-bottom";
+            readonly btt: "Bottom-to-top";
         };
     };
-    orientation: {
-        options: {
-            horizontal: string;
-            vertical: string;
+    readonly orientation: {
+        readonly options: {
+            readonly horizontal: "Horizontal";
+            readonly vertical: "Vertical";
+        };
+    };
+    readonly iconPlacement: {
+        readonly horizontal: {
+            readonly nextToText: "Next to text";
+            readonly aboveText: "Above text";
+            readonly belowText: "Below text";
+        };
+        readonly vertical: {
+            readonly verticallyStacked: "Vertically stacked";
+            readonly beforeText: "Before text";
+            readonly afterText: "After text";
         };
     };
-    position: {
-        options: {
-            top: string;
-            center: string;
-            bottom: string;
-            end: string;
-            middle: string;
-            start: string;
+    readonly position: {
+        readonly options: {
+            readonly top: "Top";
+            readonly center: "Center";
+            readonly bottom: "Bottom";
+            readonly end: "End";
+            readonly middle: "Middle";
+            readonly start: "Start";
         };
     };
-    arrangement: {
-        options: {
-            separated: string;
-            together: string;
+    readonly arrangement: {
+        readonly options: {
+            readonly separated: "Separated";
+            readonly together: "Together";
         };
     };
-    navigationButtons: {
-        elementDisplayName: string;
-        data: {
-            icon: string;
+    readonly navigationButtons: {
+        readonly elementDisplayName: "Navigation buttons";
+        readonly data: {
+            readonly icon: "Icon";
         };
     };
-    slideIndicators: {
-        elementDisplayName: string;
-        data: {
-            indicatorMode: string;
+    readonly slideIndicators: {
+        readonly elementDisplayName: "Slide indicators";
+        readonly data: {
+            readonly indicatorMode: "Display slide indicators";
         };
-        cssCustomProperties: {
-            'dot-width': string;
-            'dot-gap': string;
+        readonly cssCustomProperties: {
+            readonly 'dot-width': "Width";
+            readonly 'dot-gap': "Space between slide indicators";
         };
     };
-    indicatorMode: {
-        options: {
-            max5: string;
-            all: string;
+    readonly indicatorMode: {
+        readonly options: {
+            readonly max5: "Max 5";
+            readonly all: "All";
         };
     };
 };
@@ -104,6 +120,8 @@ export declare const slideshowDataDefaults: {
     readonly activeSlide: 0;
     readonly transitionDuration: 0;
     readonly showPauseButton: true;
+    readonly nextButtonLabel: "Next";
+    readonly prevButtonLabel: "Previous";
 };
 export declare const slideshowCssPropertiesDefaults: {
     readonly border: "none";
@@ -113,6 +131,8 @@ export declare const slideshowCssPropertiesDefaults: {
 export declare const slideshowCssCustomPropertiesDefaults: {
     readonly 'animation-duration': "0.5s";
     readonly orientation: "horizontal";
+    readonly 'icon-placement-horizontal': "next-to-text";
+    readonly 'icon-placement-vertical': "vertically-stacked";
     readonly 'navigation-buttons-position': "center";
     readonly 'navigation-buttons-arrangement': "separated";
     readonly 'navigation-buttons-alignment': "center";
@@ -124,6 +144,7 @@ export declare const navigationButtonsPositionFields: readonly ["navigation-butt
 export declare const navigationButtonsArrangementFields: readonly ["navigation-buttons-arrangement"];
 export declare const navigationButtonsAlignmentFields: readonly ["navigation-buttons-alignment"];
 export declare const slideIndicatorsPositionFields: readonly ["slide-indicators-position-horizontal", "slide-indicators-position-vertical"];
+export declare const iconPlacementFields: readonly ["icon-placement-horizontal", "icon-placement-vertical"];
 export declare const AUTOPLAY_STATE: {
     readonly RUNNING: "running";
     readonly CANCELLED: "cancelled";

package/dist/site/components/Slideshow/css.css

@@ -195,9 +195,11 @@
   height: var(--navigation-height, auto);
   flex-direction: var(--navigation-flex-direction, row);
   justify-content: var(--navigation-justify-content, space-between);
-  align-items: var(--navigation-align-items, center);
+  align-items: var(--navigation-align-items, stretch);
   gap: var(--gap, 20px);
   isolation: isolate;
+  min-width: 0;
+  max-width: 100%;
   --base-font: var(--font, 14px sans-serif);
   --base-color: var(--color, rgba(0, 0, 0, 1));
   --base-alpha-color: var(--alpha-color, 1);
@@ -260,6 +262,12 @@
   --base-btn-min-width: var(--btn-min-width, min-content);
   --icon-direction-offset: 0deg;
 }
+.buttons__Fx7T8 .labelSizer__RyeL0 {
+  display: block;
+  visibility: hidden;
+  height: 0;
+  overflow: hidden;
+}
 .buttons__Fx7T8 .btnWrapper__T0ETG {
   display: flex;
   justify-content: var(--base-container-justify-content);
@@ -298,7 +306,7 @@
   --label-white-space: var(--base-label-white-space);
   --label-overflow: var(--base-label-overflow);
   --label-text-overflow: var(--base-label-text-overflow);
-  --container-flex-direction: var(--base-container-flex-direction);
+  --container-flex-direction: var(--base-container-flex-direction) !important;
   --container-align-items: var(--base-container-align-items);
   --container-justify-content: var(--base-container-justify-content);
   --icon-order: var(--base-icon-order);
@@ -308,6 +316,11 @@
   );
   --btn-min-width: var(--base-btn-min-width);
   pointer-events: auto;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  min-width: 0 !important;
+  max-width: 100%;
+  justify-content: center;
 }
 .buttons__Fx7T8 .button__y4atu svg {
   --computed-icon-rotation: calc(
@@ -323,7 +336,9 @@
   --border-start-end-radius: var(--base-border-start-start-radius);
   --border-end-start-radius: var(--base-border-end-end-radius);
   --border-end-end-radius: var(--base-border-end-start-radius);
-  --container-flex-direction: var(--base-prev-container-flex-direction);
+  --container-flex-direction: var(
+    --base-prev-container-flex-direction
+  ) !important;
 }
 .buttons__Fx7T8 .prev__qz5A6 svg {
   --computed-icon-rotation: calc(

package/dist/site/components/Slideshow/manifest.js

@@ -1,6 +1,6 @@
 import { E as ELEMENTS, C as CSS_PROPERTIES, D as DATA, a as ACTIONS, I as INTERACTIONS, b as DISPLAY_GROUPS, L as LAYOUT, c as ContainerType, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
 import { g as getSelector } from "../chunks/manifest.js";
-import { D as DisplayNames, s as semanticClassNames, b as slideshowCssCustomPropertiesDefaults, c as slideshowCssPropertiesDefaults, a as slideshowDataDefaults } from "../chunks/Slideshow.semanticClassNames.js";
+import { D as DisplayNames, a as semanticClassNames, b as slideshowCssCustomPropertiesDefaults, c as slideshowCssPropertiesDefaults, s as slideshowDataDefaults } from "../chunks/Slideshow.semanticClassNames.js";
 import { a as manifestMouseHover, b as manifestClickable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
 const navigationButtons = {
   elementType: ELEMENTS.ELEMENT_TYPE.refElement,
@@ -9,15 +9,9 @@ const navigationButtons = {
     type: "wixEditorElements.Button",
     displayName: DisplayNames.navigationButtons.elementDisplayName,
     displayFilters: {
-      elements: {
-        hide: ["label"]
-      },
       data: {
         hide: ["a11y", "link", "label", "iconCollapsed", "disabled"]
       },
-      cssProperties: {
-        hide: ["rowGap", "columnGap"]
-      },
       cssCustomProperties: {
         hide: ["icon-position", "content-horizontal-alignment"]
       }
@@ -31,10 +25,6 @@ const navigationButtons = {
       iconCollapsed: { disableEditing: true },
       disabled: { disableEditing: true }
     },
-    cssProperties: {
-      rowGap: { disableEditing: true },
-      columnGap: { disableEditing: true }
-    },
     cssCustomProperties: {
       "icon-position": { disableEditing: true },
       "content-horizontal-alignment": { disableEditing: true }
@@ -139,7 +129,39 @@ const manifest = {
     presets: {
       [basePresetName]: {
         presetCssUrl: `./site/components/Slideshow/presets/${basePresetName}.css`,
-        displayName: basePresetName
+        displayName: basePresetName,
+        presetDefaults: {
+          elements: {
+            navigationButtons: {
+              cssProperties: {
+                rowGap: { defaultValue: "4px" },
+                columnGap: { defaultValue: "4px" }
+              },
+              elements: {
+                label: {
+                  cssProperties: {
+                    display: { defaultValue: "none" },
+                    font: {
+                      defaultValue: "var(--wst-paragraph-3-font)"
+                    },
+                    color: {
+                      defaultValue: "#650000"
+                    },
+                    letterSpacing: {
+                      defaultValue: "0em"
+                    },
+                    lineHeight: {
+                      defaultValue: "normal"
+                    },
+                    textTransform: {
+                      defaultValue: "none"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
       }
     },
     layout: {
@@ -285,6 +307,16 @@ const manifest = {
         displayName: DisplayNames.root.data.showPauseButton,
         defaultValue: slideshowDataDefaults.showPauseButton
       },
+      nextButtonLabel: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.nextButtonLabel,
+        defaultValue: slideshowDataDefaults.nextButtonLabel
+      },
+      prevButtonLabel: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.prevButtonLabel,
+        defaultValue: slideshowDataDefaults.prevButtonLabel
+      },
       ...manifestChangeable(),
       onPlay: {
         dataType: DATA.DATA_TYPE.function,
@@ -327,6 +359,8 @@ const manifest = {
         cssDataType: {
           items: [
             "orientation",
+            "icon-placement-horizontal",
+            "icon-placement-vertical",
             "navigation-buttons-arrangement",
             "navigation-buttons-position-together-horizontal",
             "navigation-buttons-position-together-vertical",
@@ -388,18 +422,21 @@ const manifest = {
                 },
                 { property: "--navigation-width", value: "100%" },
                 { property: "--navigation-height", value: "auto" },
-                { property: "--container-flex-direction", value: "row" },
+                {
+                  property: "--container-flex-direction",
+                  value: "var(--icon-placement-h-flex-direction, row)"
+                },
                 {
                   property: "--container-rtl-flex-direction",
-                  value: "row-reverse"
+                  value: "var(--icon-placement-h-rtl-flex-direction, row-reverse)"
                 },
                 {
                   property: "--prev-container-flex-direction",
-                  value: "row-reverse"
+                  value: "var(--icon-placement-h-prev-flex-direction, row-reverse)"
                 },
                 {
                   property: "--prev-container-rtl-flex-direction",
-                  value: "row"
+                  value: "var(--icon-placement-h-prev-rtl-flex-direction, row)"
                 },
                 {
                   property: "--container-justify-content",
@@ -409,6 +446,10 @@ const manifest = {
                 { property: "--icon-orientation-offset", value: "0deg" },
                 { property: "--icon-orientation-scale", value: "scaleX(-1)" },
                 { property: "--icon-rtl-offset", value: "180deg" },
+                {
+                  property: "--icon-order",
+                  value: "var(--icon-placement-h-icon-order, initial)"
+                },
                 {
                   property: "--slide-indicators-separated-align-self",
                   value: "var(--slide-indicators-horizontal-align-self)"
@@ -449,15 +490,21 @@ const manifest = {
                 },
                 { property: "--navigation-width", value: "auto" },
                 { property: "--navigation-height", value: "100%" },
-                { property: "--container-flex-direction", value: "column" },
-                { property: "--container-rtl-flex-direction", value: "column" },
+                {
+                  property: "--container-flex-direction",
+                  value: "var(--icon-placement-v-flex-direction, column)"
+                },
+                {
+                  property: "--container-rtl-flex-direction",
+                  value: "var(--icon-placement-v-rtl-flex-direction, column)"
+                },
                 {
                   property: "--prev-container-flex-direction",
-                  value: "column-reverse"
+                  value: "var(--icon-placement-v-prev-flex-direction, column-reverse)"
                 },
                 {
                   property: "--prev-container-rtl-flex-direction",
-                  value: "column-reverse"
+                  value: "var(--icon-placement-v-prev-rtl-flex-direction, column-reverse)"
                 },
                 { property: "--container-justify-content", value: "center" },
                 {
@@ -467,6 +514,10 @@ const manifest = {
                 { property: "--icon-orientation-offset", value: "90deg" },
                 { property: "--icon-orientation-scale", value: "scaleY(-1)" },
                 { property: "--icon-rtl-offset", value: "0deg" },
+                {
+                  property: "--icon-order",
+                  value: "var(--icon-placement-v-icon-order, initial)"
+                },
                 {
                   property: "--slide-indicators-separated-align-self",
                   value: "var(--slide-indicators-vertical-align-self)"
@@ -488,6 +539,118 @@ const manifest = {
           ]
         }
       },
+      "icon-placement-horizontal": {
+        displayName: DisplayNames.root.cssCustomProperties["icon-placement"],
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
+        defaultValue: slideshowCssCustomPropertiesDefaults["icon-placement-horizontal"],
+        customEnum: {
+          cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.string,
+          options: [
+            {
+              value: "next-to-text",
+              displayName: DisplayNames.iconPlacement.horizontal.nextToText
+            },
+            {
+              value: "above-text",
+              displayName: DisplayNames.iconPlacement.horizontal.aboveText,
+              appliedStyles: [
+                {
+                  property: "--icon-placement-h-flex-direction",
+                  value: "column-reverse"
+                },
+                {
+                  property: "--icon-placement-h-prev-flex-direction",
+                  value: "column-reverse"
+                },
+                {
+                  property: "--icon-placement-h-rtl-flex-direction",
+                  value: "column-reverse"
+                },
+                {
+                  property: "--icon-placement-h-prev-rtl-flex-direction",
+                  value: "column-reverse"
+                }
+              ]
+            },
+            {
+              value: "below-text",
+              displayName: DisplayNames.iconPlacement.horizontal.belowText,
+              appliedStyles: [
+                {
+                  property: "--icon-placement-h-flex-direction",
+                  value: "column"
+                },
+                {
+                  property: "--icon-placement-h-prev-flex-direction",
+                  value: "column"
+                },
+                {
+                  property: "--icon-placement-h-rtl-flex-direction",
+                  value: "column"
+                },
+                {
+                  property: "--icon-placement-h-prev-rtl-flex-direction",
+                  value: "column"
+                }
+              ]
+            }
+          ]
+        }
+      },
+      "icon-placement-vertical": {
+        displayName: DisplayNames.root.cssCustomProperties["icon-placement"],
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
+        defaultValue: slideshowCssCustomPropertiesDefaults["icon-placement-vertical"],
+        customEnum: {
+          cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.string,
+          options: [
+            {
+              value: "vertically-stacked",
+              displayName: DisplayNames.iconPlacement.vertical.verticallyStacked
+            },
+            {
+              value: "before-text",
+              displayName: DisplayNames.iconPlacement.vertical.beforeText,
+              appliedStyles: [
+                { property: "--icon-placement-v-flex-direction", value: "row" },
+                {
+                  property: "--icon-placement-v-prev-flex-direction",
+                  value: "row"
+                },
+                {
+                  property: "--icon-placement-v-rtl-flex-direction",
+                  value: "row-reverse"
+                },
+                {
+                  property: "--icon-placement-v-prev-rtl-flex-direction",
+                  value: "row-reverse"
+                },
+                { property: "--icon-placement-v-icon-order", value: "-1" }
+              ]
+            },
+            {
+              value: "after-text",
+              displayName: DisplayNames.iconPlacement.vertical.afterText,
+              appliedStyles: [
+                { property: "--icon-placement-v-flex-direction", value: "row" },
+                {
+                  property: "--icon-placement-v-prev-flex-direction",
+                  value: "row"
+                },
+                {
+                  property: "--icon-placement-v-rtl-flex-direction",
+                  value: "row-reverse"
+                },
+                {
+                  property: "--icon-placement-v-prev-rtl-flex-direction",
+                  value: "row-reverse"
+                },
+                { property: "--icon-placement-v-icon-order", value: "initial" }
+              ]
+            }
+          ]
+        }
+      },
       "navigation-buttons-position-together-horizontal": {
         cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
         displayName: DisplayNames.root.cssCustomProperties["navigation-buttons-position"],

package/dist/site/components/chunks/Button.js

@@ -173,6 +173,7 @@ const Button = (props) => {
     link: link2,
     type = "button",
     label: label2 = "",
+    labelContent,
     disabled: isDisabled = false,
     onClick: propsOnClick,
     className,
@@ -238,6 +239,7 @@ const Button = (props) => {
     onBlur
   });
   const a11yAttr = useButtonA11y({ propsA11y, ariaAttributes, label: label2 });
+  const renderedLabel = labelContent ?? label2;
   const wrapperAttributes = {
     id,
     ...getDataAttributes(props),
@@ -247,7 +249,7 @@ const Button = (props) => {
     ...direction && { dir: direction }
   };
   const renderButtonContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
-    label2 && /* @__PURE__ */ jsx("span", { className: labelClassName, "data-testid": TestIds.buttonLabel, children: label2 }),
+    renderedLabel && /* @__PURE__ */ jsx("span", { className: labelClassName, "data-testid": TestIds.buttonLabel, children: renderedLabel }),
     /* @__PURE__ */ jsx(
       AnimatedButtonIcon,
       {

package/dist/site/components/chunks/Slideshow.semanticClassNames.js

@@ -18,7 +18,9 @@ const DisplayNames = {
       transitionDuration: "Transition duration (seconds)",
       slides: "Slide",
       activeSlide: "Active slide",
-      showPauseButton: "Show pause & play button"
+      showPauseButton: "Show pause & play button",
+      nextButtonLabel: "Next navigation button text",
+      prevButtonLabel: "Previous navigation button text"
     },
     displayGroups: {
       slides: "Slides"
@@ -26,6 +28,7 @@ const DisplayNames = {
     cssCustomProperties: {
       "animation-duration": "Transition duration",
       orientation: "Orientation",
+      "icon-placement": "Icon placement",
       "navigation-buttons-position": "Navigation button position",
       "navigation-buttons-arrangement": "Navigation button arrangement",
       "navigation-buttons-alignment": "Navigation button alignment",
@@ -55,6 +58,18 @@ const DisplayNames = {
       vertical: "Vertical"
     }
   },
+  iconPlacement: {
+    horizontal: {
+      nextToText: "Next to text",
+      aboveText: "Above text",
+      belowText: "Below text"
+    },
+    vertical: {
+      verticallyStacked: "Vertically stacked",
+      beforeText: "Before text",
+      afterText: "After text"
+    }
+  },
   position: {
     options: {
       top: "Top",
@@ -100,7 +115,9 @@ const slideshowDataDefaults = {
   transitionDirection: "rtl",
   activeSlide: 0,
   transitionDuration: 0,
-  showPauseButton: true
+  showPauseButton: true,
+  nextButtonLabel: "Next",
+  prevButtonLabel: "Previous"
 };
 const slideshowCssPropertiesDefaults = {
   border: "none",
@@ -110,6 +127,8 @@ const slideshowCssPropertiesDefaults = {
 const slideshowCssCustomPropertiesDefaults = {
   "animation-duration": "0.5s",
   orientation: "horizontal",
+  "icon-placement-horizontal": "next-to-text",
+  "icon-placement-vertical": "vertically-stacked",
   "navigation-buttons-arrangement": "separated",
   "navigation-buttons-alignment": "center",
   "controls-padding": "0px"
@@ -137,8 +156,8 @@ export {
   DisplayNames as D,
   MOVEMENT_DIRECTION as M,
   SLIDESHOW_SLIDE_LTR_DIRECTION_EXPERIMENT as S,
-  slideshowDataDefaults as a,
+  semanticClassNames as a,
   slideshowCssCustomPropertiesDefaults as b,
   slideshowCssPropertiesDefaults as c,
-  semanticClassNames as s
+  slideshowDataDefaults as s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2197.0",
+  "version": "1.2198.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -188,5 +188,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "44bd0ada60203ef7f5670961095b2f459d97782526a479e91f061870"
+  "falconPackageHash": "4438c33ccf024b6c1f78aea0b993496c17457af84edba516269366b7"
 }