@elementor/editor-editing-panel 3.33.0-99 → 3.34.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "3.33.0-99",
+  "version": "3.34.2",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,26 +39,27 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-99",
-    "@elementor/editor-canvas": "3.33.0-99",
-    "@elementor/editor-controls": "3.33.0-99",
-    "@elementor/editor-documents": "3.33.0-99",
-    "@elementor/editor-elements": "3.33.0-99",
-    "@elementor/editor-panels": "3.33.0-99",
-    "@elementor/editor-props": "3.33.0-99",
-    "@elementor/editor-responsive": "3.33.0-99",
-    "@elementor/editor-styles": "3.33.0-99",
-    "@elementor/editor-styles-repository": "3.33.0-99",
-    "@elementor/editor-ui": "3.33.0-99",
-    "@elementor/editor-v1-adapters": "3.33.0-99",
-    "@elementor/icons": "1.46.0",
-    "@elementor/locations": "3.33.0-99",
-    "@elementor/menus": "3.33.0-99",
-    "@elementor/schema": "3.33.0-99",
-    "@elementor/session": "3.33.0-99",
-    "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.33.0-99",
-    "@elementor/wp-media": "3.33.0-99",
+    "@elementor/editor": "3.34.2",
+    "@elementor/editor-canvas": "3.34.2",
+    "@elementor/editor-controls": "3.34.2",
+    "@elementor/editor-documents": "3.34.2",
+    "@elementor/editor-elements": "3.34.2",
+    "@elementor/editor-interactions": "3.34.2",
+    "@elementor/editor-panels": "3.34.2",
+    "@elementor/editor-props": "3.34.2",
+    "@elementor/editor-responsive": "3.34.2",
+    "@elementor/editor-styles": "3.34.2",
+    "@elementor/editor-styles-repository": "3.34.2",
+    "@elementor/editor-ui": "3.34.2",
+    "@elementor/editor-v1-adapters": "3.34.2",
+    "@elementor/icons": "^1.61.0",
+    "@elementor/locations": "3.34.2",
+    "@elementor/menus": "3.34.2",
+    "@elementor/schema": "3.34.2",
+    "@elementor/session": "3.34.2",
+    "@elementor/ui": "1.36.17",
+    "@elementor/utils": "3.34.2",
+    "@elementor/wp-media": "3.34.2",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/apply-unapply-actions.ts

@@ -0,0 +1,30 @@
+import { setDocumentModifiedStatus } from '@elementor/editor-documents';
+import { getElementSetting, updateElementSettings } from '@elementor/editor-elements';
+import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
+import { type StyleDefinitionID } from '@elementor/editor-styles';
+
+// Externalized for use outside of Hooks
+
+export function doGetAppliedClasses( elementId: string, classesPropType = 'classes' ) {
+	return getElementSetting< ClassesPropValue >( elementId, classesPropType )?.value || [];
+}
+
+export function doApplyClasses( elementId: string, classIds: StyleDefinitionID[], classesPropType = 'classes' ) {
+	updateElementSettings( {
+		id: elementId,
+		props: { [ classesPropType ]: classesPropTypeUtil.create( classIds ) },
+		withHistory: false,
+	} );
+	setDocumentModifiedStatus( true );
+}
+
+export function doUnapplyClass( elementId: string, classId: StyleDefinitionID, classesPropType = 'classes' ) {
+	const appliedClasses = getElementSetting< ClassesPropValue >( elementId, classesPropType )?.value || [];
+	if ( ! appliedClasses.includes( classId ) ) {
+		return false;
+	}
+
+	const updatedClassIds = appliedClasses.filter( ( id ) => id !== classId );
+	doApplyClasses( elementId, updatedClassIds, classesPropType );
+	return true;
+}

package/src/components/collapsible-content.tsx

@@ -44,6 +44,7 @@ export const CollapsibleContent = ( { children, defaultOpen = false, titleEnd =
 					onClick={ handleToggle }
 					endIcon={ <CollapseIcon open={ open } /> }
 					sx={ { my: 0.5 } }
+					aria-label={ open ? 'Show less' : 'Show more' }
 				>
 					{ open ? __( 'Show less', 'elementor' ) : __( 'Show more', 'elementor' ) }
 				</Button>

package/src/components/css-classes/css-class-item.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { type ReactElement, useEffect, useState } from 'react';
+import { type ReactElement, useEffect, useMemo, useState } from 'react';
+import { isClassState } from '@elementor/editor-styles';
 import { stylesRepository, useUserStylesCapability, validateStyleLabel } from '@elementor/editor-styles-repository';
 import { EditableField, EllipsisWithTooltip, useEditable } from '@elementor/editor-ui';
 import { DotsVerticalIcon } from '@elementor/icons';
@@ -20,7 +21,7 @@ import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../contexts/style-context';
 import { CssClassProvider } from './css-class-context';
-import { CssClassMenu } from './css-class-menu';
+import { CssClassMenu, useElementStates } from './css-class-menu';
 
 type CssClassItemProps = {
 	id: string | null;
@@ -43,6 +44,8 @@ export function CssClassItem( props: CssClassItemProps ) {
 	const { chipProps, icon, color: colorProp, fixed, ...classProps } = props;
 	const { id, provider, label, isActive, onClickActive, renameLabel, setError } = classProps;
 
+	const { elementStates } = useElementStates();
+
 	const { meta, setMetaState } = useStyle();
 	const popupState = usePopupState( { variant: 'popover' } );
 	const [ chipRef, setChipRef ] = useState< HTMLElement | null >( null );
@@ -75,12 +78,19 @@ export function CssClassItem( props: CssClassItemProps ) {
 
 	const isShowingState = isActive && meta.state;
 
+	const stateLabel = useMemo( () => {
+		if ( isClassState( meta.state ) ) {
+			return elementStates.find( ( state ) => state.value === meta.state )?.label;
+		}
+
+		return meta.state;
+	}, [ meta.state, elementStates ] );
+
 	useEffect( () => {
 		if ( convertedFromLocalId && id === convertedFromLocalId ) {
 			clearConvertedFromLocalId();
 			openEditMode();
 		}
-		// eslint-disable-next-line react-compiler/react-compiler
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ id, convertedFromLocalId ] );
 
@@ -138,7 +148,7 @@ export function CssClassItem( props: CssClassItemProps ) {
 						label={
 							isShowingState ? (
 								<Stack direction="row" gap={ 0.5 } alignItems="center">
-									<Typography variant="inherit">{ meta.state }</Typography>
+									<Typography variant="inherit">{ stateLabel }</Typography>
 									<DotsVerticalIcon fontSize="tiny" />
 								</Stack>
 							) : undefined

package/src/components/css-classes/css-class-menu.tsx

@@ -9,9 +9,11 @@ import { MenuItemInfotip, MenuListItem } from '@elementor/editor-ui';
 import { bindMenu, Divider, Menu, MenuSubheader, type PopupState, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useElement } from '../../contexts/element-context';
 import { useStyle } from '../../contexts/style-context';
 import { type StyleDefinitionStateWithNormal } from '../../styles-inheritance/types';
 import { getTempStylesProviderThemeColor } from '../../utils/get-styles-provider-color';
+import { trackStyles } from '../../utils/tracking/subscribe';
 import { StyleIndicator } from '../style-indicator';
 import { useCssClass } from './css-class-context';
 import { LocalClassSubMenu } from './local-class-sub-menu';
@@ -20,13 +22,14 @@ import { useUnapplyClass } from './use-apply-and-unapply-class';
 type State = {
 	key: StyleDefinitionStateWithNormal;
 	value: StyleDefinitionState | null;
+	label: string;
 };
 
 const STATES: State[] = [
-	{ key: 'normal', value: null },
-	{ key: 'hover', value: 'hover' },
-	{ key: 'focus', value: 'focus' },
-	{ key: 'active', value: 'active' },
+	{ key: 'normal', value: null, label: __( 'normal', 'elementor' ) },
+	{ key: 'hover', value: 'hover', label: __( 'hover', 'elementor' ) },
+	{ key: 'focus', value: 'focus', label: __( 'focus', 'elementor' ) },
+	{ key: 'active', value: 'active', label: __( 'active', 'elementor' ) },
 ];
 
 type CssClassMenuProps = {
@@ -67,15 +70,75 @@ export function CssClassMenu( { popupState, anchorEl, fixed }: CssClassMenuProps
 				{ __( 'States', 'elementor' ) }
 			</MenuSubheader>
 			{ STATES.map( ( state ) => {
-				return <StateMenuItem key={ state.key } state={ state.value } closeMenu={ popupState.close } />;
+				return (
+					<StateMenuItem
+						key={ state.key }
+						state={ state.value }
+						label={ state.label }
+						closeMenu={ popupState.close }
+					/>
+				);
 			} ) }
+			<ClassStatesMenu closeMenu={ popupState.close } />
 		</Menu>
 	);
 }
 
+function ClassStatesMenu( { closeMenu }: { closeMenu: () => void } ) {
+	const { elementStates, elementTitle } = useElementStates();
+
+	if ( ! elementStates.length ) {
+		return null;
+	}
+
+	/* translators: %s: Element type title. */
+	const customTitle = __( '%s States', 'elementor' ).replace( '%s', elementTitle );
+
+	return (
+		<>
+			<Divider />
+			<MenuSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
+				{ customTitle }
+			</MenuSubheader>
+			{ elementStates.map( ( state ) => {
+				return (
+					<StateMenuItem
+						key={ state.key }
+						state={ state.value }
+						label={ state.label }
+						closeMenu={ closeMenu }
+					/>
+				);
+			} ) }
+		</>
+	);
+}
+
+const CLASS_STATES_MAP: Record< string, { label: string } > = {
+	selected: {
+		label: __( 'selected', 'elementor' ),
+	},
+};
+
+export function useElementStates() {
+	const { elementType } = useElement();
+
+	const { styleStates = [] } = elementType;
+
+	const elementStates = styleStates.map( ( { value, name } ) => ( {
+		key: value,
+		value,
+		label: CLASS_STATES_MAP[ value ]?.label ?? name,
+	} ) );
+
+	return {
+		elementStates,
+		elementTitle: elementType.title,
+	};
+}
+
 function useModifiedStates( styleId: string | null ): Partial< Record< StyleDefinitionStateWithNormal, true > > {
 	const { meta } = useStyle();
-
 	const styleDef = stylesRepository.all().find( ( style ) => style.id === styleId );
 
 	return Object.fromEntries(
@@ -126,10 +189,11 @@ function getMenuItemsByProvider( {
 
 type StateMenuItemProps = {
 	state: StyleDefinitionState;
+	label: string;
 	closeMenu: () => void;
 };
 
-function StateMenuItem( { state, closeMenu, ...props }: StateMenuItemProps ) {
+function StateMenuItem( { state, label, closeMenu, ...props }: StateMenuItemProps ) {
 	const { id: styleId, provider } = useCssClass();
 	const { id: activeId, setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
 	const { state: activeState } = meta;
@@ -154,9 +218,12 @@ function StateMenuItem( { state, closeMenu, ...props }: StateMenuItemProps ) {
 				if ( ! isActive ) {
 					setActiveId( styleId );
 				}
-
+				trackStyles( provider ?? '', 'classStateClicked', {
+					classId: styleId,
+					type: label,
+					source: styleId ? 'global' : 'local',
+				} );
 				setActiveMetaState( state );
-
 				closeMenu();
 			} }
 		>
@@ -171,7 +238,7 @@ function StateMenuItem( { state, closeMenu, ...props }: StateMenuItemProps ) {
 							getColor={ getTempStylesProviderThemeColor( provider ?? '' ) }
 						/>
 					) }
-					{ state ?? 'normal' }
+					{ label }
 				</Stack>
 			</MenuItemInfotip>
 		</MenuListItem>
@@ -179,7 +246,7 @@ function StateMenuItem( { state, closeMenu, ...props }: StateMenuItemProps ) {
 }
 
 function UnapplyClassMenuItem( { closeMenu, ...props }: { closeMenu: () => void } ) {
-	const { id: classId, label: classLabel } = useCssClass();
+	const { id: classId, label: classLabel, provider } = useCssClass();
 	const unapplyClass = useUnapplyClass();
 
 	return classId ? (
@@ -187,6 +254,11 @@ function UnapplyClassMenuItem( { closeMenu, ...props }: { closeMenu: () => void
 			{ ...props }
 			onClick={ () => {
 				unapplyClass( { classId, classLabel } );
+				trackStyles( provider ?? '', 'classRemoved', {
+					classId,
+					classTitle: classLabel,
+					source: 'style-tab',
+				} );
 				closeMenu();
 			} }
 		>

package/src/components/css-classes/css-class-selector.tsx

@@ -30,6 +30,7 @@ import { useClassesProp } from '../../contexts/classes-prop-context';
 import { useElement } from '../../contexts/element-context';
 import { useStyle } from '../../contexts/style-context';
 import { getStylesProviderColorName } from '../../utils/get-styles-provider-color';
+import { trackStyles } from '../../utils/tracking/subscribe';
 import {
 	CreatableAutocomplete,
 	type CreatableAutocompleteProps,
@@ -127,6 +128,13 @@ export function CssClassSelector() {
 								if ( ! value.value ) {
 									throw new Error( `Cannot rename a class without style id` );
 								}
+								trackStyles( value.provider ?? '', 'classRenamed', {
+									classId: value.value,
+									newValue: newLabel,
+									oldValue: value.label,
+									source: 'style-tab',
+								} );
+
 								return updateClassByProvider( value.provider, { label: newLabel, id: value.value } );
 							};
 
@@ -244,7 +252,12 @@ function useCreateAction() {
 	}
 
 	const create = ( classLabel: string ) => {
-		createAction( { classLabel } );
+		const { createdId } = createAction( { classLabel } );
+		trackStyles( provider.getKey() ?? '', 'classCreated', {
+			source: 'created',
+			classTitle: classLabel,
+			classId: createdId,
+		} );
 	};
 
 	const validate = ( newClassLabel: string, event: ValidationEvent ): ValidationResult => {
@@ -302,10 +315,18 @@ function useHandleSelect() {
 		switch ( reason ) {
 			case 'selectOption':
 				apply( { classId: option.value, classLabel: option.label } );
+				trackStyles( option.provider ?? '', 'classApplied', {
+					classId: option.value,
+					source: 'style-tab',
+				} );
 				break;
 
 			case 'removeOption':
 				unapply( { classId: option.value, classLabel: option.label } );
+				trackStyles( option.provider ?? '', 'classRemoved', {
+					classId: option.value,
+					source: 'style-tab',
+				} );
 				break;
 		}
 	};

package/src/components/css-classes/use-apply-and-unapply-class.ts

@@ -1,12 +1,11 @@
 import { useCallback, useMemo } from 'react';
-import { setDocumentModifiedStatus } from '@elementor/editor-documents';
-import { getElementLabel, getElementSetting, updateElementSettings } from '@elementor/editor-elements';
-import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
+import { getElementLabel } from '@elementor/editor-elements';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
 import { useGetStylesRepositoryCreateAction } from '@elementor/editor-styles-repository';
 import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
+import { doApplyClasses, doGetAppliedClasses } from '../../apply-unapply-actions';
 import { useClassesProp } from '../../contexts/classes-prop-context';
 import { useElement } from '../../contexts/element-context';
 import { useStyle } from '../../contexts/style-context';
@@ -112,7 +111,6 @@ export function useCreateAndApplyClass() {
 
 					const createdId = createAction( classLabel );
 					applyClass( createdId );
-
 					return { prevActiveId, createdId };
 				},
 				undo: ( _: CreateAndApplyClassPayload, { prevActiveId, createdId }: CreateAndApplyClassUndoData ) => {
@@ -194,17 +192,10 @@ function useClasses() {
 
 	return useMemo( () => {
 		const setClasses = ( ids: StyleDefinitionID[] ) => {
-			updateElementSettings( {
-				id: element.id,
-				props: { [ currentClassesProp ]: classesPropTypeUtil.create( ids ) },
-				withHistory: false,
-			} );
-
-			setDocumentModifiedStatus( true );
+			doApplyClasses( element.id, ids, currentClassesProp );
 		};
 
-		const getAppliedClasses = () =>
-			getElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
+		const getAppliedClasses = () => doGetAppliedClasses( element.id, currentClassesProp ) || [];
 
 		return { setClasses, getAppliedClasses };
 	}, [ currentClassesProp, element.id ] );

package/src/components/custom-css-indicator.tsx

@@ -1,16 +1,83 @@
 import * as React from 'react';
+import { type BreakpointId, type BreakpointNode, getBreakpointsTree } from '@elementor/editor-responsive';
+import { getVariantByMeta, type StyleDefinition, type StyleDefinitionVariant } from '@elementor/editor-styles';
 
+import { useElement } from '../contexts/element-context';
+import { useStyle } from '../contexts/style-context';
 import { useCustomCss } from '../hooks/use-custom-css';
+import { getStylesProviderThemeColor } from '../utils/get-styles-provider-color';
 import { StyleIndicator } from './style-indicator';
 
 export const CustomCssIndicator = () => {
 	const { customCss } = useCustomCss();
+	const { id: styleId, provider, meta } = useStyle();
+	const {
+		element: { id: elementId },
+	} = useElement();
+
+	const style = React.useMemo(
+		() => ( styleId && provider ? provider.actions.get( styleId, { elementId } ) : null ),
+		[ styleId, provider, elementId ]
+	);
 
 	const hasContent = Boolean( customCss?.raw?.trim() );
 
+	const hasInheritedContent = React.useMemo( () => {
+		if ( hasContent ) {
+			return false;
+		}
+
+		return hasInheritedCustomCss( style, meta );
+	}, [ hasContent, style, meta ] );
+
 	if ( ! hasContent ) {
+		if ( hasInheritedContent ) {
+			return <StyleIndicator />;
+		}
 		return null;
 	}
 
-	return <StyleIndicator getColor={ ( theme ) => theme.palette.accent.main } />;
+	return <StyleIndicator getColor={ provider ? getStylesProviderThemeColor( provider.getKey() ) : undefined } />;
+};
+
+const hasInheritedCustomCss = (
+	style: StyleDefinition | null,
+	meta: StyleDefinitionVariant[ 'meta' ] | null
+): boolean => {
+	if ( ! style || ! meta ) {
+		return false;
+	}
+
+	const target = ( meta.breakpoint ?? 'desktop' ) as BreakpointId;
+	const root = getBreakpointsTree();
+	const state = meta.state;
+
+	function search( node: BreakpointNode, ancestorHasCss: boolean ): boolean | undefined {
+		if ( ! style ) {
+			return undefined;
+		}
+
+		const hasHere = Boolean(
+			getVariantByMeta( style, {
+				breakpoint: node.id as BreakpointId,
+				state,
+			} )?.custom_css?.raw?.trim()
+		);
+
+		if ( node.id === target ) {
+			return ancestorHasCss;
+		}
+
+		for ( const child of node.children ?? [] ) {
+			const res = search( child, ancestorHasCss || hasHere );
+
+			if ( res !== undefined ) {
+				return res;
+			}
+		}
+
+		return undefined;
+	}
+
+	return Boolean( search( root, false ) );
 };

package/src/components/editing-panel-tabs.tsx

@@ -1,5 +1,6 @@
-import * as React from 'react';
 import { Fragment } from 'react';
+import * as React from 'react';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Divider, Stack, Tab, TabPanel, Tabs, useTabs } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -7,10 +8,11 @@ import { useElement } from '../contexts/element-context';
 import { ScrollProvider } from '../contexts/scroll-context';
 import { useDefaultPanelSettings } from '../hooks/use-default-panel-settings';
 import { useStateByElement } from '../hooks/use-state-by-element';
+import { InteractionsTab } from './interactions-tab';
 import { SettingsTab } from './settings-tab';
 import { stickyHeaderStyles, StyleTab } from './style-tab';
 
-type TabValue = 'settings' | 'style';
+type TabValue = 'settings' | 'style' | 'interactions';
 
 export const EditingPanelTabs = () => {
 	const { element } = useElement();
@@ -26,6 +28,7 @@ export const EditingPanelTabs = () => {
 const PanelTabContent = () => {
 	const editorDefaults = useDefaultPanelSettings();
 	const defaultComponentTab = editorDefaults.defaultTab as TabValue;
+	const isInteractionsActive = isExperimentActive( 'e_interactions' );
 
 	const [ currentTab, setCurrentTab ] = useStateByElement< TabValue >( 'tab', defaultComponentTab );
 	const { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( currentTab );
@@ -45,6 +48,9 @@ const PanelTabContent = () => {
 					>
 						<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
 						<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
+						{ isInteractionsActive && (
+							<Tab label={ __( 'Interactions', 'elementor' ) } { ...getTabProps( 'interactions' ) } />
+						) }
 					</Tabs>
 					<Divider />
 				</Stack>
@@ -54,6 +60,11 @@ const PanelTabContent = () => {
 				<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
 					<StyleTab />
 				</TabPanel>
+				{ isInteractionsActive && (
+					<TabPanel { ...getTabPanelProps( 'interactions' ) } disablePadding>
+						<InteractionsTab />
+					</TabPanel>
+				) }
 			</Stack>
 		</ScrollProvider>
 	);

package/src/components/interactions-tab.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { InteractionsTab as InteractionsTabContent } from '@elementor/editor-interactions';
+
+import { useElement } from '../contexts/element-context';
+import { SectionsList } from './sections-list';
+
+export const InteractionsTab = () => {
+	const { element } = useElement();
+
+	return (
+		<SectionsList>
+			<InteractionsTabContent elementId={ element.id } />
+		</SectionsList>
+	);
+};

package/src/components/section-content.tsx

@@ -7,10 +7,11 @@ type SectionContentProps = PropsWithChildren< {
 	sx?: {
 		pt?: number;
 	};
+	'aria-label'?: string;
 } >;
 
-export const SectionContent: FC< SectionContentProps > = ( { gap = 2, sx, children } ) => (
-	<Stack gap={ gap } sx={ { ...sx } }>
+export const SectionContent: FC< SectionContentProps > = ( { gap = 2, sx, children, 'aria-label': ariaLabel } ) => (
+	<Stack gap={ gap } sx={ { ...sx } } aria-label={ ariaLabel }>
 		{ children }
 	</Stack>
 );

package/src/components/section.tsx

@@ -31,6 +31,7 @@ export function Section( { title, children, defaultExpanded = false, titleEnd, u
 			<ListItemButton
 				id={ labelId }
 				aria-controls={ contentId }
+				aria-label={ `${ title } section` }
 				onClick={ handleClick }
 				sx={ { '&:hover': { backgroundColor: 'transparent' } } }
 			>
@@ -52,7 +53,7 @@ export function Section( { title, children, defaultExpanded = false, titleEnd, u
 				unmountOnExit={ unmountOnExit }
 			>
 				<SectionRefContext.Provider value={ ref }>
-					<Stack ref={ ref } gap={ 2.5 } p={ 2 }>
+					<Stack ref={ ref } gap={ 2.5 } p={ 2 } aria-label={ `${ title } section content` }>
 						{ children }
 					</Stack>
 				</SectionRefContext.Provider>