@elementor/editor-editing-panel 1.45.0 → 1.46.0

package/src/dynamics/components/dynamic-selection-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ControlFormLabel, useBoundProp } from '@elementor/editor-controls';
 import type { Control, ControlsSection } from '@elementor/editor-elements';
-import { PopoverHeader } from '@elementor/editor-ui';
+import { PopoverHeader, PopoverScrollableContent } from '@elementor/editor-ui';
 import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
 import {
 	bindPopover,
@@ -10,7 +10,6 @@ import {
 	Divider,
 	Grid,
 	IconButton,
-	Paper,
 	Popover,
 	Stack,
 	Tab,
@@ -81,12 +80,7 @@ export const DynamicSelectionControl = () => {
 				{ ...bindPopover( selectionPopoverState ) }
 			>
 				<Stack>
-					<PopoverHeader
-						title={ __( 'Dynamic tags', 'elementor' ) }
-						onClose={ selectionPopoverState.close }
-						icon={ <DatabaseIcon fontSize={ SIZE } /> }
-					/>
-					<DynamicSelection onSelect={ selectionPopoverState.close } />
+					<DynamicSelection close={ selectionPopoverState.close } />
 				</Stack>
 			</Popover>
 		</Box>
@@ -113,14 +107,12 @@ export const DynamicSettingsPopover = ( { dynamicTag }: { dynamicTag: DynamicTag
 				anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
 				{ ...bindPopover( popupState ) }
 			>
-				<Paper component={ Stack } sx={ { minHeight: '300px', width: '220px' } }>
-					<PopoverHeader
-						title={ dynamicTag.label }
-						onClose={ popupState.close }
-						icon={ <DatabaseIcon fontSize={ SIZE } /> }
-					/>
-					<DynamicSettings controls={ dynamicTag.atomic_controls } />
-				</Paper>
+				<PopoverHeader
+					title={ dynamicTag.label }
+					onClose={ popupState.close }
+					icon={ <DatabaseIcon fontSize={ SIZE } /> }
+				/>
+				<DynamicSettings controls={ dynamicTag.atomic_controls } />
 			</Popover>
 		</>
 	);
@@ -136,7 +128,7 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 	}
 
 	return (
-		<>
+		<PopoverScrollableContent>
 			<Tabs size="small" variant="fullWidth" { ...getTabsProps() }>
 				{ tabs.map( ( { value }, index ) => (
 					<Tab key={ index } label={ value.label } sx={ { px: 1, py: 0.5 } } { ...getTabProps( index ) } />
@@ -158,7 +150,7 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 					</TabPanel>
 				);
 			} ) }
-		</>
+		</PopoverScrollableContent>
 	);
 };
 

package/src/dynamics/components/dynamic-selection.tsx

@@ -1,19 +1,9 @@
-import * as React from 'react';
 import { Fragment, useState } from 'react';
+import * as React from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { DatabaseIcon, SearchIcon } from '@elementor/icons';
-import {
-	Box,
-	Divider,
-	InputAdornment,
-	Link,
-	MenuItem,
-	MenuList,
-	MenuSubheader,
-	Stack,
-	TextField,
-	Typography,
-} from '@elementor/ui';
+import { PopoverHeader, PopoverMenuList, PopoverSearch } from '@elementor/editor-ui';
+import { DatabaseIcon } from '@elementor/icons';
+import { Box, Divider, Link, Stack, Typography, useTheme } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
@@ -31,7 +21,7 @@ type OptionEntry = [ string, Option[] ];
 const SIZE = 'tiny';
 
 type DynamicSelectionProps = {
-	onSelect?: () => void;
+	close: () => void;
 };
 
 type NoResultsProps = {
@@ -39,9 +29,10 @@ type NoResultsProps = {
 	onClear?: () => void;
 };
 
-export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
+export const DynamicSelection = ( { close: closePopover }: DynamicSelectionProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
+	const theme = useTheme();
 
 	const { value: anyValue } = useBoundProp();
 	const { bind, value: dynamicValue, setValue } = useBoundProp( dynamicPropTypeUtil );
@@ -54,79 +45,69 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 
 	const hasNoDynamicTags = ! options.length && ! searchValue.trim();
 
-	const handleSearch = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		setSearchValue( event.target.value );
+	const handleSearch = ( value: string ) => {
+		setSearchValue( value );
 	};
 
-	const handleSetDynamicTag = ( value: string, label: string ) => {
+	const handleSetDynamicTag = ( value: string ) => {
 		if ( ! isCurrentValueDynamic ) {
 			updatePropValueHistory( anyValue );
 		}
 
-		setValue( { name: value, settings: { label } } );
+		const selectedOption = options.flatMap( ( [ , items ] ) => items ).find( ( item ) => item.value === value );
+
+		setValue( { name: value, settings: { label: selectedOption?.label } } );
 
-		onSelect?.();
+		closePopover();
 	};
 
+	const virtualizedItems = options.flatMap( ( [ category, items ] ) => [
+		{
+			type: 'category' as const,
+			value: category,
+			label: dynamicGroups?.[ category ]?.title || category,
+		},
+		...items.map( ( item ) => ( {
+			type: 'item' as const,
+			value: item.value,
+			label: item.label,
+		} ) ),
+	] );
+
 	return (
-		<Stack>
-			{ hasNoDynamicTags ? (
-				<NoDynamicTags />
-			) : (
-				<Fragment>
-					<Box px={ 1.5 } pb={ 1 }>
-						<TextField
-							fullWidth
-							size={ SIZE }
+		<>
+			<PopoverHeader
+				title={ __( 'Dynamic tags', 'elementor' ) }
+				onClose={ closePopover }
+				icon={ <DatabaseIcon fontSize={ SIZE } /> }
+			/>
+			<Stack>
+				{ hasNoDynamicTags ? (
+					<NoDynamicTags />
+				) : (
+					<Fragment>
+						<PopoverSearch
 							value={ searchValue }
-							onChange={ handleSearch }
+							onSearch={ handleSearch }
 							placeholder={ __( 'Search dynamic tags…', 'elementor' ) }
-							InputProps={ {
-								startAdornment: (
-									<InputAdornment position="start">
-										<SearchIcon fontSize={ SIZE } />
-									</InputAdornment>
-								),
-							} }
 						/>
-					</Box>
-					<Divider />
-					<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
-						{ options.length > 0 ? (
-							<MenuList role="listbox" tabIndex={ 0 }>
-								{ options.map( ( [ category, items ], index ) => (
-									<Fragment key={ index }>
-										<MenuSubheader
-											sx={ { px: 1.5, typography: 'caption', color: 'text.tertiary' } }
-										>
-											{ dynamicGroups?.[ category ]?.title || category }
-										</MenuSubheader>
-										{ items.map( ( { value, label: tagLabel } ) => {
-											const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
-
-											return (
-												<MenuItem
-													key={ value }
-													selected={ isSelected }
-													// eslint-disable-next-line jsx-a11y/no-autofocus
-													autoFocus={ isSelected }
-													sx={ { px: 3.5, typography: 'caption' } }
-													onClick={ () => handleSetDynamicTag( value, tagLabel ) }
-												>
-													{ tagLabel }
-												</MenuItem>
-											);
-										} ) }
-									</Fragment>
-								) ) }
-							</MenuList>
-						) : (
-							<NoResults searchValue={ searchValue } onClear={ () => setSearchValue( '' ) } />
-						) }
-					</Box>
-				</Fragment>
-			) }
-		</Stack>
+						<Divider />
+						<PopoverMenuList
+							items={ virtualizedItems }
+							onSelect={ handleSetDynamicTag }
+							onClose={ closePopover }
+							selectedValue={ dynamicValue?.name }
+							itemStyle={ ( item ) =>
+								item.type === 'item' ? { paddingInlineStart: theme.spacing( 3.5 ) } : {}
+							}
+							noResultsComponent={
+								<NoResults searchValue={ searchValue } onClear={ () => setSearchValue( '' ) } />
+							}
+						/>
+					</Fragment>
+				) }
+			</Stack>
+		</>
 	);
 };
 
@@ -173,7 +154,7 @@ const NoDynamicTags = () => (
 				{ __( 'Streamline your workflow with dynamic tags', 'elementor' ) }
 			</Typography>
 			<Typography align="center" variant="caption">
-				{ __( 'You’ll need Elementor Pro to use this feature.', 'elementor' ) }
+				{ __( "You'll need Elementor Pro to use this feature.", 'elementor' ) }
 			</Typography>
 		</Stack>
 	</Box>

package/src/dynamics/hooks/use-prop-dynamic-action.tsx

@@ -16,6 +16,6 @@ export const usePropDynamicAction = (): PopoverActionProps => {
 		visible,
 		icon: DatabaseIcon,
 		title: __( 'Dynamic tags', 'elementor' ),
-		popoverContent: ( { closePopover } ) => <DynamicSelection onSelect={ closePopover } />,
+		content: ( { close } ) => <DynamicSelection close={ close } />,
 	};
 };

package/src/hooks/use-styles-field.ts

@@ -2,8 +2,14 @@ import type { PropKey, PropValue } from '@elementor/editor-props';
 
 import { useStylesFields } from './use-styles-fields';
 
-export function useStylesField< T extends PropValue >( propName: PropKey ): [ T | null, ( newValue: T ) => void ] {
-	const [ values, setValues ] = useStylesFields< { [ k: typeof propName ]: T } >( [ propName ] );
+export function useStylesField< T extends PropValue >(
+	propName: PropKey
+): {
+	value: T;
+	setValue: ( newValue: T ) => void;
+	canEdit?: boolean;
+} {
+	const { values, setValues, canEdit } = useStylesFields< { [ k: typeof propName ]: T } >( [ propName ] );
 
 	const value = values?.[ propName ] ?? null;
 
@@ -13,5 +19,5 @@ export function useStylesField< T extends PropValue >( propName: PropKey ): [ T
 		} );
 	};
 
-	return [ value, setValue ];
+	return { value: value as T, setValue, canEdit };
 }

package/src/hooks/use-styles-fields.ts

@@ -21,7 +21,7 @@ import { useStylesRerender } from './use-styles-rerender';
 
 export function useStylesFields< T extends Props >( propNames: ( keyof T & string )[] ) {
 	const { element } = useElement();
-	const { id, meta, provider } = useStyle();
+	const { id, meta, provider, canEdit } = useStyle();
 	const classesProp = useClassesProp();
 
 	const undoableUpdateStyle = useUndoableUpdateStyle();
@@ -29,7 +29,7 @@ export function useStylesFields< T extends Props >( propNames: ( keyof T & strin
 
 	useStylesRerender();
 
-	const value = getProps< T >( {
+	const values = getProps< T >( {
 		elementId: element.id,
 		styleId: id,
 		provider,
@@ -37,7 +37,7 @@ export function useStylesFields< T extends Props >( propNames: ( keyof T & strin
 		propNames,
 	} );
 
-	const setValue = ( props: T ) => {
+	const setValues = ( props: T ) => {
 		if ( id === null ) {
 			undoableCreateElementStyle( {
 				elementId: element.id,
@@ -58,7 +58,7 @@ export function useStylesFields< T extends Props >( propNames: ( keyof T & strin
 		} );
 	};
 
-	return [ value, setValue ] as const;
+	return { values, setValues, canEdit };
 }
 
 type GetPropsArgs = {

package/src/index.ts

@@ -1,6 +1,7 @@
 export { useBoundProp } from '@elementor/editor-controls';
 export type { PopoverActionProps } from './popover-action';
 export { registerControlReplacement } from './control-replacement';
+export { registerStyleProviderToColors } from './provider-colors-registry';
 export { injectIntoClassSelectorActions } from './components/css-classes/css-class-selector';
 export { usePanelActions, usePanelStatus } from './panel';
 export { type ValidationResult, type ValidationEvent } from './components/creatable-autocomplete';

package/src/popover-action.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { type ComponentType, type ElementType as ReactElementType, useId } from 'react';
-import { PopoverHeader } from '@elementor/editor-ui';
 import { bindPopover, bindToggle, IconButton, Popover, Tooltip, usePopupState } from '@elementor/ui';
 
 const SIZE = 'tiny';
@@ -9,14 +8,14 @@ export type PopoverActionProps = {
 	title: string;
 	visible?: boolean;
 	icon: ReactElementType;
-	popoverContent: ComponentType< { closePopover: () => void } >;
+	content: ComponentType< { close: () => void } >;
 };
 
 export default function PopoverAction( {
 	title,
 	visible = true,
 	icon: Icon,
-	popoverContent: PopoverContent,
+	content: PopoverContent,
 }: PopoverActionProps ) {
 	const id = useId();
 	const popupState = usePopupState( {
@@ -44,8 +43,7 @@ export default function PopoverAction( {
 				} }
 				{ ...bindPopover( popupState ) }
 			>
-				<PopoverHeader title={ title } onClose={ popupState.close } icon={ <Icon fontSize={ SIZE } /> } />
-				<PopoverContent closePopover={ popupState.close } />
+				<PopoverContent close={ popupState.close } />
 			</Popover>
 		</>
 	);

package/src/provider-colors-registry.ts

@@ -0,0 +1,20 @@
+import { type ChipProps, type Theme } from '@elementor/ui';
+
+type Colors = {
+	name: ChipProps[ 'color' ];
+	getThemeColor: ( ( theme: Theme ) => string ) | null;
+};
+
+const DEFAULT_COLORS: Colors = {
+	name: 'default',
+	getThemeColor: null,
+};
+
+const providerColorsRegistry = new Map< string, Colors >();
+
+export const registerStyleProviderToColors = ( provider: string, colors: Colors ) => {
+	providerColorsRegistry.set( provider, colors );
+};
+
+export const getStyleProviderColors = ( provider: string ): Colors =>
+	providerColorsRegistry.get( provider ) ?? DEFAULT_COLORS;

package/src/styles-inheritance/components/infotip/label-chip.tsx

@@ -4,17 +4,16 @@ import { InfoCircleIcon } from '@elementor/icons';
 import { Chip, type Theme, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { type ChipColors } from '../../types';
+import { getStylesProviderColorName } from '../../../utils/get-styles-provider-color';
 
 type Props = {
 	displayLabel: string;
-	provider?: string;
-	chipColor: ChipColors;
+	provider: string;
 };
 
 const SIZE = 'tiny';
 
-export const LabelChip = ( { displayLabel, provider, chipColor }: Props ) => {
+export const LabelChip = ( { displayLabel, provider }: Props ) => {
 	const isBaseStyle = provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY;
 
 	const chipIcon = isBaseStyle ? (
@@ -27,7 +26,7 @@ export const LabelChip = ( { displayLabel, provider, chipColor }: Props ) => {
 		<Chip
 			label={ displayLabel }
 			size={ SIZE }
-			color={ chipColor }
+			color={ getStylesProviderColorName( provider ) }
 			variant="standard"
 			state="enabled"
 			icon={ chipIcon }

package/src/styles-inheritance/components/styles-inheritance-indicator.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { type ComponentProps } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { isEmpty } from '@elementor/editor-props';
-import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider } from '@elementor/editor-styles-repository';
+import { isEmpty, type PropType } from '@elementor/editor-props';
+import { ELEMENTS_BASE_STYLES_PROVIDER_KEY } from '@elementor/editor-styles-repository';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -10,12 +11,14 @@ import { StyleIndicator } from '../../components/style-indicator';
 import { useStyle } from '../../contexts/style-context';
 import { useStylesInheritanceChain } from '../../contexts/styles-inheritance-context';
 import { EXPERIMENTAL_FEATURES } from '../../sync/experiments-flags';
+import { getStylesProviderThemeColor } from '../../utils/get-styles-provider-color';
 import { isUsingIndicatorPopover } from '../consts';
+import { type SnapshotPropValue } from '../types';
+import { getValueFromInheritanceChain } from '../utils';
 import { StylesInheritanceInfotip } from './styles-inheritance-infotip';
 
 export const StylesInheritanceIndicator = () => {
 	const { path, propType } = useBoundProp();
-	const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
 
 	const isUsingNestedProps = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
 
@@ -27,17 +30,21 @@ export const StylesInheritanceIndicator = () => {
 		return null;
 	}
 
-	const currentItem = inheritanceChain.find(
-		( {
-			style,
-			variant: {
-				meta: { breakpoint, state },
-			},
-		} ) =>
-			style.id === currentStyleId &&
-			breakpoint === currentStyleMeta.breakpoint &&
-			state === currentStyleMeta.state
-	);
+	return <Indicator inheritanceChain={ inheritanceChain } path={ finalPath } propType={ propType } />;
+};
+
+type IndicatorProps = {
+	inheritanceChain: SnapshotPropValue[];
+	path: string[];
+	propType: PropType;
+};
+
+const Indicator = ( { inheritanceChain, path, propType }: IndicatorProps ) => {
+	const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
+
+	const currentItem = currentStyleId
+		? getValueFromInheritanceChain( inheritanceChain, currentStyleId, currentStyleMeta )
+		: null;
 
 	const hasValue = ! isEmpty( currentItem?.value );
 
@@ -50,12 +57,19 @@ export const StylesInheritanceIndicator = () => {
 	const isFinalValue = currentItem === actualStyle;
 
 	const label = getLabel( { isFinalValue, hasValue } );
-	const variantType = getVariant( { isFinalValue, hasValue, currentStyleProvider } );
+
+	const styleIndicatorProps: ComponentProps< typeof StyleIndicator > = {
+		getColor:
+			isFinalValue && currentStyleProvider
+				? getStylesProviderThemeColor( currentStyleProvider.getKey() )
+				: undefined,
+		isOverridden: hasValue && ! isFinalValue ? true : undefined,
+	};
 
 	if ( ! isUsingIndicatorPopover() ) {
 		return (
 			<Tooltip title={ __( 'Style origin', 'elementor' ) } placement="top">
-				<StyleIndicator variant={ variantType } aria-label={ label } />
+				<StyleIndicator { ...styleIndicatorProps } aria-label={ label } />
 			</Tooltip>
 		);
 	}
@@ -63,11 +77,11 @@ export const StylesInheritanceIndicator = () => {
 	return (
 		<StylesInheritanceInfotip
 			inheritanceChain={ inheritanceChain }
-			path={ finalPath }
+			path={ path }
 			propType={ propType }
 			label={ label }
 		>
-			<StyleIndicator variant={ variantType } />
+			<StyleIndicator { ...styleIndicatorProps } />
 		</StylesInheritanceInfotip>
 	);
 };
@@ -83,25 +97,3 @@ const getLabel = ( { isFinalValue, hasValue }: { isFinalValue: boolean; hasValue
 
 	return __( 'This has value from another style', 'elementor' );
 };
-
-const getVariant = ( {
-	isFinalValue,
-	hasValue,
-	currentStyleProvider,
-}: {
-	isFinalValue: boolean;
-	hasValue: boolean;
-	currentStyleProvider: object | null;
-} ): 'local' | 'global' | 'overridden' | undefined => {
-	if ( isFinalValue ) {
-		return isElementsStylesProvider( ( currentStyleProvider as { getKey: () => string } )?.getKey?.() )
-			? 'local'
-			: 'global';
-	}
-
-	if ( hasValue ) {
-		return 'overridden';
-	}
-
-	return undefined;
-};

package/src/styles-inheritance/components/styles-inheritance-infotip.tsx

@@ -105,11 +105,7 @@ export const StylesInheritanceInfotip = ( { inheritanceChain, propType, path, la
 								>
 									<Box display="flex" gap={ 0.5 } sx={ { flexWrap: 'wrap', width: '100%' } }>
 										<BreakpointIcon breakpoint={ item.breakpoint } />
-										<LabelChip
-											displayLabel={ item.displayLabel }
-											provider={ item.provider }
-											chipColor={ item.chipColor }
-										/>
+										<LabelChip displayLabel={ item.displayLabel } provider={ item.provider } />
 										<ValueComponent index={ index } value={ item.value } />
 									</Box>
 									<ActionIcons />

package/src/styles-inheritance/components/styles-inheritance-section-indicators.tsx

@@ -1,58 +1,54 @@
 import * as React from 'react';
 import { type PropKey } from '@elementor/editor-props';
 import { type StyleDefinitionVariant } from '@elementor/editor-styles';
-import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider } from '@elementor/editor-styles-repository';
+import { isElementsStylesProvider } from '@elementor/editor-styles-repository';
 import { Stack, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StyleIndicator } from '../../components/style-indicator';
 import { useStyle } from '../../contexts/style-context';
 import { useStylesInheritanceSnapshot } from '../../contexts/styles-inheritance-context';
+import { getStylesProviderThemeColor } from '../../utils/get-styles-provider-color';
 import { type SnapshotPropValue } from '../types';
-
 type Props = {
 	fields: PropKey[];
 };
 
-type Indicators = {
-	global?: true;
-	local?: true;
-	overridden?: true;
-};
-
-const orderedVariants = [ 'global', 'local', 'overridden' ] as ( keyof Indicators )[];
-
 export const StylesInheritanceSectionIndicators = ( { fields }: Props ) => {
-	const { id, meta } = useStyle();
+	const { id, meta, provider } = useStyle();
 	const snapshot = useStylesInheritanceSnapshot();
 
 	const snapshotFields = Object.fromEntries(
 		Object.entries( snapshot ?? {} ).filter( ( [ key ] ) => fields.includes( key as PropKey ) )
 	);
 
-	const indicators = getIndicators( snapshotFields, id ?? '', meta );
+	const { hasValues, hasOverrides } = getIndicators( snapshotFields, id ?? '', meta );
 
-	if ( Object.values( indicators ).filter( Boolean ).length === 0 ) {
+	if ( ! hasValues && ! hasOverrides ) {
 		return null;
 	}
 
-	const hasActualValues = __( 'Has effective styles', 'elementor' );
-	const hasOverriddenValues = __( 'Has overridden styles', 'elementor' );
+	const hasValueLabel = __( 'Has effective styles', 'elementor' );
+	const hasOverridesLabel = __( 'Has overridden styles', 'elementor' );
 
 	return (
 		<Tooltip title={ __( 'Has styles', 'elementor' ) } placement="top">
 			<Stack direction="row" sx={ { '& > *': { marginInlineStart: -0.25 } } } role="list">
-				{ orderedVariants.map(
-					( variant ) =>
-						indicators[ variant ] && (
-							<StyleIndicator
-								key={ variant }
-								variant={ variant }
-								data-variant={ variant }
-								role="listitem"
-								aria-label={ variant === 'overridden' ? hasOverriddenValues : hasActualValues }
-							/>
-						)
+				{ hasValues && provider && (
+					<StyleIndicator
+						getColor={ getStylesProviderThemeColor( provider.getKey() ) }
+						data-variant={ isElementsStylesProvider( provider.getKey() ) ? 'local' : 'global' }
+						role="listitem"
+						aria-label={ hasValueLabel }
+					/>
+				) }
+				{ hasOverrides && (
+					<StyleIndicator
+						isOverridden
+						data-variant="overridden"
+						role="listitem"
+						aria-label={ hasOverridesLabel }
+					/>
 				) }
 			</Stack>
 		</Tooltip>
@@ -63,8 +59,9 @@ function getIndicators(
 	snapshotFields: Record< PropKey, SnapshotPropValue[] >,
 	styleId: string,
 	meta: StyleDefinitionVariant[ 'meta' ]
-): Indicators {
-	const indicators: Indicators = {};
+): { hasValues: boolean; hasOverrides: boolean } {
+	let hasValues = false;
+	let hasOverrides = false;
 
 	Object.values( snapshotFields ).forEach( ( inheritanceChain ) => {
 		const currentStyle = getCurrentStyleFromChain( inheritanceChain, styleId, meta );
@@ -76,25 +73,13 @@ function getIndicators(
 		const [ actualStyle ] = inheritanceChain;
 
 		if ( currentStyle === actualStyle ) {
-			const providerKey = actualStyle.provider ?? '';
-
-			if ( isElementsStylesProvider( providerKey ) ) {
-				indicators.local = true;
-
-				return;
-			}
-
-			if ( providerKey !== ELEMENTS_BASE_STYLES_PROVIDER_KEY ) {
-				indicators.global = true;
-			}
-
-			return;
+			hasValues = true;
+		} else {
+			hasOverrides = true;
 		}
-
-		indicators.overridden = true;
 	} );
 
-	return indicators;
+	return { hasValues, hasOverrides };
 }
 
 function getCurrentStyleFromChain(