@wix/editor-react-components 1.2480.0 → 1.2482.0

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

@@ -4,11 +4,11 @@ import React__default, { useRef, useEffect, useMemo, useState, useCallback } fro
 import "react-dom";
 import { c as clsx } from "../chunks/clsx.js";
 import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
+import { D as DesignStates, a as DEFAULT_PROPS } from "../chunks/constants40.js";
 import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";
 import { a as requireEq, d as requireIsFunction, r as requireIsObject, e as requireIsLength, c as require_isIndex, b as requireIsArrayLike } from "../chunks/isArrayLike.js";
 import { c as require_root, r as require_Symbol, a as require_baseGetTag, b as requireIsObjectLike, d as require_freeGlobal } from "../chunks/isObjectLike.js";
 import { r as requireIsArray } from "../chunks/isArray.js";
-import { D as DEFAULT_PROPS } from "../chunks/constants40.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 var _overArg;
 var hasRequired_overArg;
@@ -2463,7 +2463,8 @@ const AccordionItem = (props) => {
     {
       className: clsx(
         "accordion-item",
-        (_c = elementProps == null ? void 0 : elementProps.accordionItem) == null ? void 0 : _c.className
+        (_c = elementProps == null ? void 0 : elementProps.accordionItem) == null ? void 0 : _c.className,
+        isOpen && DesignStates.accordionItem.selected.className
       ),
       value: item.id,
       children: [
@@ -2473,7 +2474,8 @@ const AccordionItem = (props) => {
             className: clsx(
               "item-title",
               styles["accordion-header"],
-              (_d = elementProps == null ? void 0 : elementProps.itemTitle) == null ? void 0 : _d.className
+              (_d = elementProps == null ? void 0 : elementProps.itemTitle) == null ? void 0 : _d.className,
+              isOpen && DesignStates.itemTitle.selected.className
             ),
             children: [
               /* @__PURE__ */ jsx("span", { className: styles["accordion-item-label"], children: item.name }),

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

@@ -1,5 +1,5 @@
 import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, L as LAYOUT, c as ContainerType, a as ACTIONS, E as ELEMENTS, N as NativeStateType, A as Archetype } from "../chunks/chunk-V7QOLP3D.js";
-import { a as DesignStates, b as DISPLAY_NAMES, c as accordionManifestDefaults, C as CONTAINER_INITIAL_HEIGHT } from "../chunks/constants40.js";
+import { D as DesignStates, b as DISPLAY_NAMES, c as accordionManifestDefaults, C as CONTAINER_INITIAL_HEIGHT } from "../chunks/constants40.js";
 import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";

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

@@ -6,7 +6,7 @@ import { $ as $cf2482eff2eeeec2$export$f12b703ca79dfbb1 } from "../chunks/useLoc
 import { createPortal } from "react-dom";
 import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
-import { s as semanticClassNames } from "../chunks/constants38.js";
+import { s as semanticClassNames, D as DesignStates } from "../chunks/constants38.js";
 import { A as AnimatedIcon } from "../chunks/AnimatedIcon.js";
 import { useService } from "@wix/services-manager-react";
 import { d as defineService } from "../chunks/index8.js";
@@ -1380,7 +1380,8 @@ function BreadcrumbItemComponent({
             className: clsx(
               semanticClassNames.itemLabel,
               styles.label,
-              (_c = elementProps == null ? void 0 : elementProps.item) == null ? void 0 : _c.className
+              (_c = elementProps == null ? void 0 : elementProps.item) == null ? void 0 : _c.className,
+              isCurrent && DesignStates.item.selected.className
             ),
             children: [
               homeIcon2,

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

@@ -4,12 +4,11 @@ import { useService } from "@wix/services-manager-react";
 import { U as UrlDefinition } from "../chunks/index12.js";
 import { d as defineService } from "../chunks/index8.js";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
-import { M as MenuAnimationName, d as defaultTranslations, a as MenuOrientation, A as AnimationPhase, V as VerticalDropdownDisplay, D as DropdownAnimationName, H as HamburgerMenuAnimationName, b as MenuParts, s as selectors, u as useAnimationState, c as ARIA_LABEL_NAMESPACE, t as translationsKeys } from "../chunks/constants27.js";
+import { M as MenuAnimationName, d as defaultTranslations, a as MenuOrientation, A as AnimationPhase, V as VerticalDropdownDisplay, D as DropdownAnimationName, H as HamburgerMenuAnimationName, b as MenuParts, s as selectors, c as DesignStates, u as useAnimationState, e as ARIA_LABEL_NAMESPACE, t as translationsKeys } from "../chunks/constants27.js";
 import React__default, { createContext, useContext, useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from "react";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { g as getItemDepthSelector, r as rootItemDepthLevel, s as subItemDepthLevel, a as subSubItemDepthLevel } from "../chunks/utils2.js";
 import { d as debounce } from "../chunks/performanceUtils.js";
-import { f as formatClassNames } from "../chunks/classNames.js";
 import { L as Link } from "../chunks/Link.js";
 import { i as isEmptyObject, a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useResizeObserver } from "../chunks/useResizeObserver.js";
@@ -24,7 +23,6 @@ const MenuContext = createContext({
   currentUrl: EMPTY_ANCHOR_URL,
   translations: defaultTranslations,
   menuStyleId: "",
-  customClassNames: [],
   getAnimationPackage: () => MenuAnimationName.None,
   navAriaLabel: "",
   isHamburgerMenuOpened: void 0,
@@ -40,7 +38,6 @@ const MenuContextProvider = ({
   activeAnchor,
   translations,
   menuStyleId,
-  customClassNames,
   getAnimationPackage,
   navAriaLabel,
   isHamburgerMenuOpened,
@@ -65,7 +62,6 @@ const MenuContextProvider = ({
       activeAnchor,
       translations,
       menuStyleId,
-      customClassNames,
       getAnimationPackage,
       navAriaLabel,
       isHamburgerMenuOpened,
@@ -82,7 +78,6 @@ const MenuContextProvider = ({
       activeAnchor,
       translations,
       menuStyleId,
-      customClassNames,
       getAnimationPackage,
       navAriaLabel,
       isHamburgerMenuOpened,
@@ -275,10 +270,10 @@ const useScroll = (ref) => {
     isScrollForwardButtonVisible
   };
 };
-const createSDKAction = (item2, selected2, sdkAction) => sdkAction && ((e) => {
+const createSDKAction = (item2, selected, sdkAction) => sdkAction && ((e) => {
   sdkAction == null ? void 0 : sdkAction(e, {
     ...item2,
-    selected: selected2
+    selected
   });
 });
 const getMenuOrientation = (itemRef) => {
@@ -676,26 +671,6 @@ const isCurrentItem = (item2, currentItem) => {
   }
   return firstLink.href === secondLink.href;
 };
-const menuSemanticClassNames = {
-  root: "menu",
-  item: "menu__item",
-  itemLabel: "menu__item-label",
-  scrollButton: "menu__scroll-button",
-  scrollButtonIcon: "menu__scroll-button-icon",
-  itemIcon: "menu__item-icon"
-};
-const shmSemanticClassNames = {
-  root: "horizontal-menu",
-  menuItemWrapper: "horizontal-menu__item",
-  menuItemLabel: "horizontal-menu__item-label"
-};
-const dropdownSemanticClassNames = {
-  root: "dropdown-menu",
-  dropdownItem: "dropdown-menu__item",
-  dropdownItemLabel: "dropdown-menu__item-label",
-  dropdownSubItem: "dropdown-menu__subitem",
-  dropdownSubItemLabel: "dropdown-menu__subitem-label"
-};
 const DropdownIcon = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -745,10 +720,7 @@ const MenuItemDropdownIcon = ({
         {
           "data-part": MenuParts.DropdownIcon,
           "data-open": isDropdownIconOpen ? "true" : void 0,
-          className: clsx(
-            classes$6.dropdownIcon,
-            formatClassNames(menuSemanticClassNames.itemIcon)
-          )
+          className: classes$6.dropdownIcon
         }
       )
     }
@@ -786,11 +758,6 @@ const MenuItemLabel = (props) => {
     submenuToggleId,
     itemClassName
   } = props;
-  const itemLabelClassNames = clsx(
-    classes$6.label,
-    formatClassNames(shmSemanticClassNames.menuItemLabel),
-    formatClassNames(menuSemanticClassNames.itemLabel)
-  );
   const isCurrentPage = isCurrentItem(item2, currentItem);
   const { label: label2, link } = item2;
   const hasLink = !isEmptyObject(link);
@@ -798,9 +765,8 @@ const MenuItemLabel = (props) => {
   const labelContainerClassNames = clsx(
     selectors.item,
     classes$6.labelContainer,
-    formatClassNames(shmSemanticClassNames.menuItemWrapper),
-    formatClassNames(menuSemanticClassNames.item),
-    itemClassName
+    itemClassName,
+    isCurrentPage && DesignStates.item.selected.className
   );
   const isInteractive = (hasSubItems || hasLink) && !isCurrentPage;
   const isDropdownIconOpen = isOpen && dropdownAnimationState.phase !== AnimationPhase.ExitActive;
@@ -827,7 +793,7 @@ const MenuItemLabel = (props) => {
             ...isCurrentPage && {
               "aria-current": "page"
             },
-            children: /* @__PURE__ */ jsx("div", { className: itemLabelClassNames, "data-part": MenuParts.Label, children: label2 })
+            children: /* @__PURE__ */ jsx("div", { className: classes$6.label, "data-part": MenuParts.Label, children: label2 })
           }
         ),
         hasDropdownMenu && ["default", "srOnly"].map((variant) => {
@@ -1237,9 +1203,8 @@ const list = "list__HKOkk";
 const subList = "subList__uWPaR";
 const listItem = "listItem__nFgdQ";
 const item = "item__nS3PO";
-const selected = "selected__YFkZs";
-const itemLabel = "itemLabel__d2L8o";
 const subItem = "subItem__3ieV0";
+const itemLabel = "itemLabel__d2L8o";
 const subItemLabel = "subItemLabel__v6zMr";
 const styles = {
   root: root$3,
@@ -1247,9 +1212,8 @@ const styles = {
   subList,
   listItem,
   item,
-  selected,
-  itemLabel,
   subItem,
+  itemLabel,
   subItemLabel
 };
 const TestIds = {
@@ -1266,7 +1230,6 @@ const ItemList = ({
   isRootLevel = true,
   partToPreviewStateMap,
   onEscKeyDown,
-  customClassNames = [],
   onItemClick,
   onItemMouseIn,
   onItemMouseOut,
@@ -1276,28 +1239,24 @@ const ItemList = ({
 }) => {
   const subMenuContainerClasses = clsx(
     isRootLevel ? styles.list : styles.subList,
-    classes$6.dropdownMenu,
-    {
-      [formatClassNames(dropdownSemanticClassNames.root, ...customClassNames)]: isRootLevel
-    }
+    classes$6.dropdownMenu
+  );
+  const submenuItemLinkClasses = (isCurrent) => clsx(
+    isRootLevel ? [
+      styles.item,
+      selectors.dropdownItem,
+      dropdownItemClassName,
+      isCurrent && DesignStates.dropdownItem.selected.className
+    ] : [
+      styles.subItem,
+      selectors.dropdownSubItem,
+      dropdownSubItemClassName,
+      isCurrent && DesignStates.dropdownSubItem.selected.className
+    ],
+    INNER_FOCUS_RING_CLASSNAME
   );
-  const submenuItemLinkClasses = (isCurrent) => {
-    return clsx(
-      isRootLevel ? [styles.item, selectors.dropdownItem, dropdownItemClassName] : [styles.subItem, selectors.dropdownSubItem, dropdownSubItemClassName],
-      {
-        [styles.selected]: isCurrent
-      },
-      isRootLevel ? {
-        [formatClassNames(dropdownSemanticClassNames.dropdownItem)]: true
-      } : {
-        [formatClassNames(dropdownSemanticClassNames.dropdownSubItem)]: true
-      },
-      INNER_FOCUS_RING_CLASSNAME
-    );
-  };
   const submenuItemLabelClasses = clsx(
-    isRootLevel ? styles.itemLabel : styles.subItemLabel,
-    isRootLevel ? formatClassNames(dropdownSemanticClassNames.dropdownItemLabel) : formatClassNames(dropdownSemanticClassNames.dropdownSubItemLabel)
+    isRootLevel ? styles.itemLabel : styles.subItemLabel
   );
   return /* @__PURE__ */ jsx(
     "ul",
@@ -1385,7 +1344,6 @@ const Submenu = (props) => {
   const {
     id,
     partToPreviewStateMap,
-    customClassNames = [],
     className,
     onItemClick,
     onItemMouseIn,
@@ -1409,7 +1367,6 @@ const Submenu = (props) => {
           items: item2.items || [],
           currentItem,
           onEscKeyDown,
-          customClassNames,
           onItemClick,
           onItemMouseIn,
           onItemMouseOut,
@@ -1734,10 +1691,6 @@ const classes$3 = {
   visible,
   hidden
 };
-const iconClasses = clsx(
-  classes$3.icon,
-  formatClassNames(menuSemanticClassNames.scrollButtonIcon)
-);
 const ScrollButton = (props) => {
   const {
     className: propClassName,
@@ -1751,7 +1704,6 @@ const ScrollButton = (props) => {
     classes$3.root,
     propClassName,
     isHidden ? classes$3.hidden : classes$3.visible,
-    formatClassNames(menuSemanticClassNames.scrollButton),
     "scroll-button"
   );
   return /* @__PURE__ */ jsx(
@@ -1765,7 +1717,7 @@ const ScrollButton = (props) => {
       "data-hidden": isHidden,
       "data-preview": previewState,
       "data-part": dataPart,
-      children: /* @__PURE__ */ jsx("span", { className: iconClasses, children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 6 12", children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx("span", { className: classes$3.icon, children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 6 12", children: /* @__PURE__ */ jsx(
         "path",
         {
           d: direction === "forward" ? "M6 6L.8 0 0 .7 4.7 6 0 11.3l.8.7z" : "M0 6L5.2 0 6 .7 1.3 6 6 11.3 5.2 12z"
@@ -1839,7 +1791,6 @@ const MenuContent = (props) => {
     currentUrl,
     activeAnchor,
     translations,
-    customClassNames = [],
     getAnimationPackage,
     navAriaLabel,
     a11yProps
@@ -1847,9 +1798,7 @@ const MenuContent = (props) => {
   const rootClassName = clsx(
     classes$4.root,
     navbarClassName,
-    !direction && (directionClassName ?? classes$4.rootDirection),
-    formatClassNames(shmSemanticClassNames.root),
-    formatClassNames(menuSemanticClassNames.root, ...customClassNames)
+    !direction && (directionClassName ?? classes$4.rootDirection)
   );
   const menuContainerRef = React__default.useRef(null);
   const lastValidAnchorMenuItemRef = useRef(

package/dist/site/components/Menu/components/Submenu/types.d.ts

@@ -10,7 +10,6 @@ export type SubmenuPreviewMapperProps = {
 type SubmenuBaseProps = {
     id?: string;
     className?: string;
-    customClassNames?: Array<string>;
     containerRootClassName?: string;
     containerProps?: any;
     onItemClick?: IMenuItemSDKAction;

package/dist/site/components/Menu/contexts/MenuContext.d.ts

@@ -12,7 +12,6 @@ export type MenuContextValue = {
         hamburgerOpenButtonAriaLabel?: string;
         hamburgerCloseButtonAriaLabel?: string;
     };
-    customClassNames?: Array<string>;
     navAriaLabel: string;
     menuStyleId?: string;
     getAnimationPackage: () => MenuAnimationNameType;

package/dist/site/components/Menu/css.css

@@ -395,44 +395,18 @@
   padding-inline-start: var(--dropdown-menu-item-padding-inline-start);
   padding-inline-end: var(--dropdown-menu-item-padding-inline-end);
 }
-.item__nS3PO.selected__YFkZs, .item__nS3PO[data-preview=selected], .item__nS3PO.menu__dropdown-item--selected {
-  font: var(--dropdown-menu-item-selected-font, var(--dropdown-menu-item-font));
-  color: var(--dropdown-menu-item-selected-color, var(--dropdown-menu-item-color));
-  letter-spacing: var(--dropdown-menu-item-selected-letter-spacing, var(--dropdown-menu-item-letter-spacing));
-  line-height: var(--dropdown-menu-item-selected-line-height, var(--dropdown-menu-item-line-height));
+.item__nS3PO.menu__dropdown-item--selected {
   text-decoration-line: var(--dropdown-menu-item-selected-text-decoration, var(--dropdown-menu-item-text-decoration));
-  text-transform: var(--dropdown-menu-item-selected-text-transform, var(--dropdown-menu-item-text-transform));
-  text-shadow: var(--dropdown-menu-item-selected-text-outline, var(--dropdown-menu-item-text-outline)), var(--dropdown-menu-item-selected-text-shadow, var(--dropdown-menu-item-text-shadow));
-  background: var(--dropdown-menu-item-selected-background, var(--dropdown-menu-item-background));
-  border-top: var(--dropdown-menu-item-selected-border-top, var(--dropdown-menu-item-border-top));
-  border-bottom: var(--dropdown-menu-item-selected-border-bottom, var(--dropdown-menu-item-border-bottom));
-  box-shadow: var(--dropdown-menu-item-selected-box-shadow, var(--dropdown-menu-item-box-shadow));
-}
-.item__nS3PO.selected__YFkZs .itemLabel__d2L8o, .item__nS3PO[data-preview=selected] .itemLabel__d2L8o, .item__nS3PO.menu__dropdown-item--selected .itemLabel__d2L8o {
-  background-color: var(--dropdown-menu-item-selected-text-highlight, var(--dropdown-menu-item-text-highlight));
-}
-.item__nS3PO:hover, .item__nS3PO.hover__Uh49s, .item__nS3PO[data-preview=hover], .item__nS3PO.menu__dropdown-item--hover {
-  font: var(--dropdown-menu-item-hover-font, var(--dropdown-menu-item-font));
-  color: var(--dropdown-menu-item-hover-color, var(--dropdown-menu-item-color));
-  letter-spacing: var(--dropdown-menu-item-hover-letter-spacing, var(--dropdown-menu-item-letter-spacing));
-  line-height: var(--dropdown-menu-item-hover-line-height, var(--dropdown-menu-item-line-height));
-  text-decoration-line: var(--dropdown-menu-item-hover-text-decoration, var(--dropdown-menu-item-text-decoration));
-  text-transform: var(--dropdown-menu-item-hover-text-transform, var(--dropdown-menu-item-text-transform));
-  text-shadow: var(--dropdown-menu-item-hover-text-outline, var(--dropdown-menu-item-text-outline)), var(--dropdown-menu-item-hover-text-shadow, var(--dropdown-menu-item-text-shadow));
-  background: var(--dropdown-menu-item-hover-background, var(--dropdown-menu-item-background));
-  border-top: var(--dropdown-menu-item-hover-border-top, var(--dropdown-menu-item-border-top));
-  border-bottom: var(--dropdown-menu-item-hover-border-bottom, var(--dropdown-menu-item-border-bottom));
-  box-shadow: var(--dropdown-menu-item-hover-box-shadow, var(--dropdown-menu-item-box-shadow));
 }
-.item__nS3PO:hover .itemLabel__d2L8o, .item__nS3PO.hover__Uh49s .itemLabel__d2L8o, .item__nS3PO[data-preview=hover] .itemLabel__d2L8o, .item__nS3PO.menu__dropdown-item--hover .itemLabel__d2L8o {
-  background-color: var(--dropdown-menu-item-hover-text-highlight, var(--dropdown-menu-item-text-highlight));
+.item__nS3PO:hover, .item__nS3PO.menu__dropdown-item--hover {
+  text-decoration-line: var(--dropdown-menu-item-hover-text-decoration, var(--dropdown-menu-item-text-decoration));
 }
 @media (forced-colors: active) {
   .item__nS3PO {
     outline: 2px solid ButtonText;
     outline-offset: 0px;
   }
-  .item__nS3PO.selected__YFkZs, .item__nS3PO[data-preview=selected], .item__nS3PO.menu__dropdown-item--selected, .item__nS3PO:hover, .item__nS3PO.hover__Uh49s, .item__nS3PO[data-preview=hover], .item__nS3PO.menu__dropdown-item--hover {
+  .item__nS3PO.menu__dropdown-item--selected, .item__nS3PO:hover, .item__nS3PO.menu__dropdown-item--hover {
     outline: 3px solid Highlight;
     outline-offset: -2px;
   }
@@ -448,44 +422,18 @@
   display: block;
   text-align: var(--dropdown-menu-item-align);
 }
-.subItem__3ieV0.selected__YFkZs, .subItem__3ieV0[data-preview=selected], .subItem__3ieV0.menu__dropdown-sub-item--selected {
-  font: var(--sub-item-selected-font, var(--sub-item-font));
-  color: var(--sub-item-selected-color, var(--sub-item-color));
-  letter-spacing: var(--sub-item-selected-letter-spacing, var(--sub-item-letter-spacing));
-  line-height: var(--sub-item-selected-line-height, var(--sub-item-line-height));
+.subItem__3ieV0.menu__dropdown-sub-item--selected {
   text-decoration-line: var(--sub-item-selected-text-decoration, var(--sub-item-text-decoration));
-  text-transform: var(--sub-item-selected-text-transform, var(--sub-item-text-transform));
-  text-shadow: var(--sub-item-selected-text-outline, var(--sub-item-text-outline)), var(--sub-item-selected-text-shadow, var(--sub-item-text-shadow));
-  background: var(--sub-item-selected-background, var(--sub-item-background));
-  border-top: var(--sub-item-selected-border-top, var(--sub-item-border-top));
-  border-bottom: var(--sub-item-selected-border-bottom, var(--sub-item-border-bottom));
-  box-shadow: var(--sub-item-selected-box-shadow, var(--sub-item-box-shadow));
-}
-.subItem__3ieV0.selected__YFkZs .subItemLabel__v6zMr, .subItem__3ieV0[data-preview=selected] .subItemLabel__v6zMr, .subItem__3ieV0.menu__dropdown-sub-item--selected .subItemLabel__v6zMr {
-  background-color: var(--sub-item-selected-text-highlight, var(--sub-item-text-highlight));
-}
-.subItem__3ieV0:hover, .subItem__3ieV0.hover__Uh49s, .subItem__3ieV0[data-preview=hover], .subItem__3ieV0.menu__dropdown-sub-item--hover {
-  font: var(--sub-item-hover-font, var(--sub-item-font));
-  color: var(--sub-item-hover-color, var(--sub-item-color));
-  letter-spacing: var(--sub-item-hover-letter-spacing, var(--sub-item-letter-spacing));
-  line-height: var(--sub-item-hover-line-height, var(--sub-item-line-height));
-  text-decoration-line: var(--sub-item-hover-text-decoration, var(--sub-item-text-decoration));
-  text-transform: var(--sub-item-hover-text-transform, var(--sub-item-text-transform));
-  text-shadow: var(--sub-item-hover-text-outline, var(--sub-item-text-outline)), var(--sub-item-hover-text-shadow, var(--sub-item-text-shadow));
-  background: var(--sub-item-hover-background, var(--sub-item-background));
-  border-top: var(--sub-item-hover-border-top, var(--sub-item-border-top));
-  border-bottom: var(--sub-item-hover-border-bottom, var(--sub-item-border-bottom));
-  box-shadow: var(--sub-item-hover-box-shadow, var(--sub-item-box-shadow));
 }
-.subItem__3ieV0:hover .subItemLabel__v6zMr, .subItem__3ieV0.hover__Uh49s .subItemLabel__v6zMr, .subItem__3ieV0[data-preview=hover] .subItemLabel__v6zMr, .subItem__3ieV0.menu__dropdown-sub-item--hover .subItemLabel__v6zMr {
-  background-color: var(--sub-item-hover-text-highlight, var(--sub-item-text-highlight));
+.subItem__3ieV0:hover, .subItem__3ieV0.menu__dropdown-sub-item--hover {
+  text-decoration-line: var(--sub-item-hover-text-decoration, var(--sub-item-text-decoration));
 }
 @media (forced-colors: active) {
   .subItem__3ieV0 {
     outline: 2px solid ButtonText;
     outline-offset: 0px;
   }
-  .subItem__3ieV0.selected__YFkZs, .subItem__3ieV0[data-preview=selected], .subItem__3ieV0.menu__dropdown-sub-item--selected, .subItem__3ieV0:hover, .subItem__3ieV0.hover__Uh49s, .subItem__3ieV0[data-preview=hover], .subItem__3ieV0.menu__dropdown-sub-item--hover {
+  .subItem__3ieV0.menu__dropdown-sub-item--selected, .subItem__3ieV0:hover, .subItem__3ieV0.menu__dropdown-sub-item--hover {
     outline: 3px solid Highlight;
     outline-offset: -2px;
   }

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

@@ -1,5 +1,5 @@
 import { E as ELEMENTS, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, N as NativeStateType, a as ACTIONS, D as DATA, L as LAYOUT, I as INTERACTIONS, A as Archetype } from "../chunks/chunk-V7QOLP3D.js";
-import { e as DesignStates, f as DisplayNames, s as selectors, g as DropdownAnchorPositions, h as DropdownAppliedStyleProperties, i as elementKeys, j as states, p as presets } from "../chunks/constants27.js";
+import { c as DesignStates, f as DisplayNames, s as selectors, g as DropdownAnchorPositions, h as DropdownAppliedStyleProperties, i as elementKeys, j as states, p as presets } from "../chunks/constants27.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";

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

@@ -3282,6 +3282,7 @@ function tvControllerFactory({
   };
   return controller;
 }
+const isActivationKey = (event) => event.key === " " || event.key === "Enter";
 function useTransparentVideo(props) {
   const {
     a11y,
@@ -3378,6 +3379,16 @@ function useTransparentVideo(props) {
       (_b = videoRef.current) == null ? void 0 : _b.play();
     }
   }, [playingState, isPlaying, shouldReplay]);
+  const onKeyDownHandler = useCallback(
+    (event) => {
+      if (isActivationKey(event)) {
+        event.stopPropagation();
+        event.preventDefault();
+        onClickHandler();
+      }
+    },
+    [onClickHandler]
+  );
   const onMouseEnterHandler = useCallback(() => {
     var _a;
     if (playingState === VideoPlayingState.ended && !shouldReplay) {
@@ -3400,6 +3411,16 @@ function useTransparentVideo(props) {
     },
     []
   );
+  const onAudioToggleKeyDownHandler = useCallback(
+    (event) => {
+      if (isActivationKey(event)) {
+        event.stopPropagation();
+        event.preventDefault();
+        setIsMuted((prev) => !prev);
+      }
+    },
+    []
+  );
   return {
     a11y,
     className,
@@ -3409,7 +3430,9 @@ function useTransparentVideo(props) {
     id,
     shouldMuteVideo,
     onAudioToggleClickHandler,
+    onAudioToggleKeyDownHandler,
     onClickHandler,
+    onKeyDownHandler,
     onMouseEnterHandler,
     onMouseOutHandler,
     shouldAutoplay,
@@ -3510,7 +3533,9 @@ function TransparentVideo(props) {
     isPlaying,
     shouldMuteVideo,
     onAudioToggleClickHandler,
+    onAudioToggleKeyDownHandler,
     onClickHandler,
+    onKeyDownHandler,
     onMouseEnterHandler,
     onMouseOutHandler,
     shouldAutoplay,
@@ -3538,7 +3563,10 @@ function TransparentVideo(props) {
       className: clsx(styles.mainWrapper, className, "wixui-transparent-video"),
       "data-has-alpha": "true",
       "data-playing": shouldAutoplay ? "" : void 0,
+      tabIndex: 0,
+      "aria-label": (a11y == null ? void 0 : a11y.ariaLabel) || void 0,
       onClick: onClickHandler,
+      onKeyDown: onKeyDownHandler,
       onMouseEnter: onMouseEnterHandler,
       onMouseLeave: onMouseOutHandler,
       children: [
@@ -3584,7 +3612,11 @@ function TransparentVideo(props) {
           "div",
           {
             className: clsx(styles.audioToggle),
+            tabIndex: 0,
+            "aria-label": isMuted ? "Unmute video" : "Mute video",
             onClick: onAudioToggleClickHandler,
+            onKeyDown: onAudioToggleKeyDownHandler,
+            "data-testid": "audio-toggle",
             children: isMuted ? /* @__PURE__ */ jsx(MutedIcon, {}) : /* @__PURE__ */ jsx(UnMutedIcon, {})
           }
         ),
@@ -3592,6 +3624,10 @@ function TransparentVideo(props) {
           "div",
           {
             className: clsx(styles.playWrapper, { [styles.isShown]: !isPlaying }),
+            tabIndex: 0,
+            "aria-label": (a11y == null ? void 0 : a11y.ariaLabel) || void 0,
+            onKeyDown: onKeyDownHandler,
+            "data-testid": "play-button",
             children: isPlaying ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
           }
         )

package/dist/site/components/TransparentVideo/css.css

@@ -12,6 +12,9 @@
 .mainWrapper__gc4Bd:hover .playWrapper__yH3ix svg {
   transform: scale(1.05);
 }
+.mainWrapper__gc4Bd:focus-visible .playWrapper__yH3ix {
+  opacity: 1;
+}
 
 .videoWrapper__e-kgj {
   width: 100%;
@@ -52,7 +55,7 @@
   opacity: 0;
   transition: opacity 500ms ease;
 }
-.playWrapper__yH3ix.isShown__QBpcz, .playWrapper__yH3ix:hover {
+.playWrapper__yH3ix.isShown__QBpcz, .playWrapper__yH3ix:hover, .playWrapper__yH3ix:focus-visible {
   opacity: 1;
 }
 .playWrapper__yH3ix svg {
@@ -66,6 +69,9 @@
   bottom: 0;
   right: 0;
 }
+.audioToggle__k2EqB:focus-visible {
+  opacity: 1;
+}
 
 .filterEffectSvg__B9Lye {
   height: 0;

package/dist/site/components/TransparentVideo/useTransparentVideo.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import { KeyboardEvent, MouseEvent } from 'react';
 import { TransparentVideoProps, VideoEndType } from './TransparentVideo.types';
 export declare function useTransparentVideo(props: TransparentVideoProps): {
     a11y: Pick<typeof import('@wix/ambassador-devcenter-v1-component-type-data/types').A11yAttributes, "ariaLabel"> | undefined;
@@ -9,7 +9,9 @@ export declare function useTransparentVideo(props: TransparentVideoProps): {
     id: string;
     shouldMuteVideo: boolean;
     onAudioToggleClickHandler: (event: MouseEvent<HTMLDivElement>) => void;
+    onAudioToggleKeyDownHandler: (event: KeyboardEvent<HTMLDivElement>) => void;
     onClickHandler: () => void;
+    onKeyDownHandler: (event: KeyboardEvent<HTMLDivElement>) => void;
     onMouseEnterHandler: () => void;
     onMouseOutHandler: () => void;
     shouldAutoplay: boolean;

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

@@ -411,9 +411,9 @@ export {
   VerticalDropdownDisplay as V,
   MenuOrientation as a,
   MenuParts as b,
-  ARIA_LABEL_NAMESPACE as c,
+  DesignStates as c,
   defaultTranslations as d,
-  DesignStates as e,
+  ARIA_LABEL_NAMESPACE as e,
   DisplayNames as f,
   DropdownAnchorPositions as g,
   DropdownAppliedStyleProperties as h,

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

@@ -65,8 +65,8 @@ const DesignStates = {
 };
 export {
   CONTAINER_INITIAL_HEIGHT as C,
-  DEFAULT_PROPS as D,
-  DesignStates as a,
+  DesignStates as D,
+  DEFAULT_PROPS as a,
   DISPLAY_NAMES as b,
   accordionManifestDefaults as c
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2480.0",
+  "version": "1.2482.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -197,5 +197,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "69893529805957b9c1fc5462a9b8964610b9dfd35cd23a5d3de3dc4d"
+  "falconPackageHash": "b747799e602beb519b1cf73c00ce222b5a928999eb3f20f857f9e21b"
 }

package/dist/site/components/Menu/semanticClassNames.d.ts

@@ -1,20 +0,0 @@
-export declare const menuSemanticClassNames: {
-    readonly root: "menu";
-    readonly item: "menu__item";
-    readonly itemLabel: "menu__item-label";
-    readonly scrollButton: "menu__scroll-button";
-    readonly scrollButtonIcon: "menu__scroll-button-icon";
-    readonly itemIcon: "menu__item-icon";
-};
-export declare const shmSemanticClassNames: {
-    readonly root: "horizontal-menu";
-    readonly menuItemWrapper: "horizontal-menu__item";
-    readonly menuItemLabel: "horizontal-menu__item-label";
-};
-export declare const dropdownSemanticClassNames: {
-    readonly root: "dropdown-menu";
-    readonly dropdownItem: "dropdown-menu__item";
-    readonly dropdownItemLabel: "dropdown-menu__item-label";
-    readonly dropdownSubItem: "dropdown-menu__subitem";
-    readonly dropdownSubItemLabel: "dropdown-menu__subitem-label";
-};