@0xsequence/marketplace-sdk 1.1.0 → 1.1.1

package/src/react/hooks/data/orders/useListItemsOrdersForCollectionPaginated.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import type { Optional } from '../../../_internal';
+import {
+	type FetchListItemsOrdersForCollectionPaginatedParams,
+	type fetchListItemsOrdersForCollectionPaginated,
+	type ListItemsOrdersForCollectionPaginatedQueryOptions,
+	listItemsOrdersForCollectionPaginatedQueryOptions,
+} from '../../../queries/orders/listItemsOrdersForCollectionPaginated';
+import { useConfig } from '../../config/useConfig';
+
+export type UseListItemsOrdersForCollectionPaginatedParams = Optional<
+	ListItemsOrdersForCollectionPaginatedQueryOptions,
+	'config'
+>;
+
+/**
+ * Hook to fetch all listings for a collection with pagination support
+ *
+ * Fetches active listings (sales) for all tokens in a collection from the marketplace
+ * with support for filtering and pagination. Unlike the infinite query version,
+ * this hook fetches a specific page of results.
+ *
+ * @param params - Configuration parameters
+ * @param params.chainId - The chain ID (must be number, e.g., 1 for Ethereum, 137 for Polygon)
+ * @param params.collectionAddress - The collection contract address
+ * @param params.side - Order side (listing or bid)
+ * @param params.filter - Optional filtering parameters (marketplace, currencies, etc.)
+ * @param params.page - Page number to fetch (default: 1)
+ * @param params.pageSize - Number of items per page (default: 30)
+ * @param params.query - Optional React Query configuration
+ *
+ * @returns Query result containing listings data for the specific page
+ *
+ * @example
+ * Basic usage:
+ * ```typescript
+ * const { data, isLoading } = useListItemsOrdersForCollectionPaginated({
+ *   chainId: 137,
+ *   collectionAddress: '0x...',
+ *   side: OrderSide.listing,
+ *   page: 1,
+ *   pageSize: 20
+ * })
+ * ```
+ *
+ * @example
+ * With filtering:
+ * ```typescript
+ * const { data } = useListItemsOrdersForCollectionPaginated({
+ *   chainId: 1,
+ *   collectionAddress: '0x...',
+ *   side: OrderSide.listing,
+ *   page: 2,
+ *   pageSize: 50,
+ *   filter: {
+ *     marketplace: [MarketplaceKind.sequence_marketplace_v2],
+ *     currencies: ['0x...']
+ *   }
+ * })
+ * ```
+ *
+ * @example
+ * Controlled pagination:
+ * ```typescript
+ * const [currentPage, setCurrentPage] = useState(1);
+ * const { data, isLoading } = useListItemsOrdersForCollectionPaginated({
+ *   chainId: 137,
+ *   collectionAddress: '0x...',
+ *   side: OrderSide.listing,
+ *   page: currentPage,
+ *   pageSize: 25
+ * });
+ *
+ * const hasMorePages = data?.page?.more;
+ * ```
+ */
+export function useListItemsOrdersForCollectionPaginated(
+	params: UseListItemsOrdersForCollectionPaginatedParams,
+) {
+	const defaultConfig = useConfig();
+
+	const { config = defaultConfig, ...rest } = params;
+
+	const queryOptions = listItemsOrdersForCollectionPaginatedQueryOptions({
+		config,
+		...rest,
+	});
+
+	return useQuery({
+		...queryOptions,
+	});
+}
+
+export { listItemsOrdersForCollectionPaginatedQueryOptions };
+
+export type {
+	FetchListItemsOrdersForCollectionPaginatedParams,
+	ListItemsOrdersForCollectionPaginatedQueryOptions,
+};
+
+// Legacy exports for backward compatibility during migration
+export type UseListItemsOrdersForCollectionPaginatedArgs =
+	UseListItemsOrdersForCollectionPaginatedParams;
+export type UseListItemsOrdersForCollectionPaginatedReturn = Awaited<
+	ReturnType<typeof fetchListItemsOrdersForCollectionPaginated>
+>;

package/src/react/hooks/data/orders/useListListingsForCollectible.tsx

@@ -7,7 +7,7 @@ import {
 	type fetchListListingsForCollectible,
 	type ListListingsForCollectibleQueryOptions,
 	listListingsForCollectibleQueryOptions,
-} from '../../../queries/listListingsForCollectible';
+} from '../../../queries/orders/listListingsForCollectible';
 import { useConfig } from '../../config/useConfig';
 
 export type UseListListingsForCollectibleParams = Optional<

package/src/react/hooks/data/orders/useListOffersForCollectible.tsx

@@ -6,7 +6,7 @@ import {
 	type FetchListOffersForCollectibleParams,
 	type ListOffersForCollectibleQueryOptions,
 	listOffersForCollectibleQueryOptions,
-} from '../../../queries/listOffersForCollectible';
+} from '../../../queries/orders/listOffersForCollectible';
 import { useConfig } from '../../config/useConfig';
 
 export type UseListOffersForCollectibleParams = Optional<

package/src/react/hooks/data/orders/useLowestListing.tsx

@@ -6,7 +6,7 @@ import {
 	type FetchLowestListingParams,
 	type LowestListingQueryOptions,
 	lowestListingQueryOptions,
-} from '../../../queries/lowestListing';
+} from '../../../queries/orders/lowestListing';
 import { useConfig } from '../../config/useConfig';
 
 export type UseLowestListingParams = Optional<

package/src/react/hooks/data/primary-sales/useGetCountOfPrimarySaleItems.tsx

@@ -2,8 +2,8 @@
 
 import { useQuery } from '@tanstack/react-query';
 import type { Optional } from '../../../_internal';
-import type { ListPrimarySaleItemsQueryOptions } from '../../../queries/primarySaleItems';
-import { primarySaleItemsCountQueryOptions } from '../../../queries/primarySaleItemsCount';
+import type { ListPrimarySaleItemsQueryOptions } from '../../../queries/primary-sales/primarySaleItems';
+import { primarySaleItemsCountQueryOptions } from '../../../queries/primary-sales/primarySaleItemsCount';
 import { useConfig } from '../../config/useConfig';
 
 export type UseGetCountParams = Optional<

package/src/react/hooks/data/primary-sales/useListPrimarySaleItems.tsx

@@ -5,7 +5,7 @@ import type { Optional } from '../../../_internal';
 import {
 	type ListPrimarySaleItemsQueryOptions,
 	listPrimarySaleItemsQueryOptions,
-} from '../../../queries/primarySaleItems';
+} from '../../../queries/primary-sales/primarySaleItems';
 import { useConfig } from '../../config/useConfig';
 
 export type UseListPrimarySaleItemsParams = Optional<

package/src/react/hooks/data/tokens/useGetTokenRanges.tsx

@@ -7,7 +7,7 @@ import {
 	type FetchGetTokenRangesParams,
 	type GetTokenRangesQueryOptions,
 	getTokenRangesQueryOptions,
-} from '../../../queries/getTokenRanges';
+} from '../../../queries/tokens/getTokenRanges';
 import { useConfig } from '../../config/useConfig';
 
 export type UseGetTokenRangesParams = Optional<
@@ -89,6 +89,6 @@ export type UseGetTokenRangesProps = {
 
 export type UseGetTokenRangesReturn = Awaited<
 	ReturnType<
-		typeof import('../../../queries/getTokenRanges').fetchGetTokenRanges
+		typeof import('../../../queries/tokens/getTokenRanges').fetchGetTokenRanges
 	>
 >;

package/src/react/hooks/data/tokens/useListBalances.tsx

@@ -1,7 +1,7 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { ContractType } from '../../../_internal';
-import type { UseListBalancesArgs } from '../../../queries/listBalances';
-import { listBalancesOptions } from '../../../queries/listBalances';
+import type { UseListBalancesArgs } from '../../../queries/tokens/listBalances';
+import { listBalancesOptions } from '../../../queries/tokens/listBalances';
 import { useConfig } from '../../config/useConfig';
 import { useMarketplaceConfig } from '../../config/useMarketplaceConfig';
 

package/src/react/hooks/data/tokens/useListTokenMetadata.tsx

@@ -6,7 +6,7 @@ import {
 	type FetchListTokenMetadataParams,
 	type ListTokenMetadataQueryOptions,
 	listTokenMetadataQueryOptions,
-} from '../../../queries/listTokenMetadata';
+} from '../../../queries/tokens/listTokenMetadata';
 import { useConfig } from '../../config/useConfig';
 
 export type UseListTokenMetadataParams = Optional<

package/src/react/hooks/data/tokens/useSearchTokenMetadata.tsx

@@ -5,7 +5,7 @@ import type { Optional } from '../../../_internal';
 import {
 	type SearchTokenMetadataQueryOptions,
 	searchTokenMetadataQueryOptions,
-} from '../../../queries/searchTokenMetadata';
+} from '../../../queries/tokens/searchTokenMetadata';
 import { useConfig } from '../../config/useConfig';
 import { useTokenSupplies } from './useTokenSupplies';
 

package/src/react/hooks/data/tokens/useTokenSupplies.ts

@@ -6,7 +6,7 @@ import {
 	type FetchTokenSuppliesParams,
 	type TokenSuppliesQueryOptions,
 	tokenSuppliesQueryOptions,
-} from '../../../queries/tokenSupplies';
+} from '../../../queries/tokens/tokenSupplies';
 import { useConfig } from '../../config/useConfig';
 
 export type UseTokenSuppliesParams = Optional<

package/src/react/hooks/transactions/useGenerateCancelTransaction.test.tsx

@@ -126,6 +126,7 @@ describe('useGenerateCancelTransaction', () => {
 				createMockSteps([StepType.cancel]),
 				defaultArgs,
 				undefined,
+				expect.any(Object), // React Query context
 			);
 		});
 	});

package/src/react/hooks/transactions/useGenerateListingTransaction.test.tsx

@@ -31,6 +31,7 @@ describe('useGenerateListingTransaction', () => {
 		contractType: ContractType.ERC721,
 		orderbook: OrderbookKind.sequence_marketplace_v2,
 		listing: mockListing,
+		additionalFees: [],
 	};
 
 	const defaultArgs = {
@@ -64,6 +65,7 @@ describe('useGenerateListingTransaction', () => {
 			    },
 			  ],
 			  {
+			    "additionalFees": [],
 			    "collectionAddress": "0x0000000000000000000000000000000000000000",
 			    "contractType": "ERC721",
 			    "listing": {
@@ -77,6 +79,11 @@ describe('useGenerateListingTransaction', () => {
 			    "owner": "0x0000000000000000000000000000000000000000",
 			  },
 			  undefined,
+			  {
+			    "client": QueryClient {},
+			    "meta": undefined,
+			    "mutationKey": undefined,
+			  },
 			]
 		`);
 	});
@@ -111,6 +118,7 @@ describe('useGenerateListingTransaction', () => {
 			    },
 			  ],
 			  {
+			    "additionalFees": [],
 			    "collectionAddress": "0x0000000000000000000000000000000000000000",
 			    "contractType": "ERC721",
 			    "listing": {
@@ -124,6 +132,11 @@ describe('useGenerateListingTransaction', () => {
 			    "owner": "0x0000000000000000000000000000000000000000",
 			  },
 			  undefined,
+			  {
+			    "client": QueryClient {},
+			    "meta": undefined,
+			    "mutationKey": undefined,
+			  },
 			]
 		`);
 	});

package/src/react/hooks/transactions/useGenerateOfferTransaction.test.tsx

@@ -32,6 +32,7 @@ describe('useGenerateOfferTransaction', () => {
 		contractType: ContractType.ERC721,
 		orderbook: OrderbookKind.sequence_marketplace_v2,
 		offer: mockOffer,
+		additionalFees: [],
 	};
 
 	const defaultArgs = {

package/src/react/hooks/transactions/useGenerateSellTransaction.test.tsx

@@ -77,6 +77,11 @@ describe('useGenerateSellTransaction', () => {
 			    "seller": "0x0000000000000000000000000000000000000000",
 			  },
 			  undefined,
+			  {
+			    "client": QueryClient {},
+			    "meta": undefined,
+			    "mutationKey": undefined,
+			  },
 			]
 		`);
 	});
@@ -93,6 +98,7 @@ describe('useGenerateSellTransaction', () => {
 				createMockSteps([StepType.tokenApproval, StepType.sell]),
 				mockTransactionProps,
 				undefined,
+				expect.any(Object), // React Query context
 			);
 		});
 	});

package/src/react/hooks/ui/useFilterState.tsx

@@ -6,7 +6,11 @@ import {
 	useQueryState,
 } from 'nuqs';
 import { useMemo } from 'react';
-import { type PropertyFilter, PropertyType } from '../../_internal';
+import {
+	type PriceFilter,
+	type PropertyFilter,
+	PropertyType,
+} from '../../_internal';
 
 interface StringFilterValues {
 	type: PropertyType.STRING;
@@ -31,21 +35,38 @@ const validateFilters = (value: unknown): PropertyFilter[] => {
 	);
 };
 
+const validatePriceFilters = (value: unknown): PriceFilter[] => {
+	if (!Array.isArray(value)) return [];
+	return value.filter(
+		(f): f is PriceFilter =>
+			typeof f === 'object' &&
+			typeof f.contractAddress === 'string' &&
+			(f.min === undefined || typeof f.min === 'string') &&
+			(f.max === undefined || typeof f.max === 'string'),
+	);
+};
+
 const filtersParser = parseAsJson(validateFilters).withDefault([]);
 const searchParser = parseAsString.withDefault('');
 const listedOnlyParser = parseAsBoolean.withDefault(false);
+const priceFilterParser = parseAsBoolean.withDefault(false);
+const priceFiltersParser = parseAsJson(validatePriceFilters).withDefault([]);
 
 const serialize = createSerializer(
 	{
 		filters: filtersParser,
 		search: searchParser,
 		listedOnly: listedOnlyParser,
+		priceFilter: priceFilterParser,
+		priceFilters: priceFiltersParser,
 	},
 	{
 		urlKeys: {
 			filters: 'f',
 			search: 'q',
 			listedOnly: 'l',
+			priceFilter: 'p',
+			priceFilters: 'pf',
 		},
 	},
 );
@@ -60,6 +81,14 @@ export function useFilterState() {
 		'listedOnly',
 		listedOnlyParser,
 	);
+	const [showPriceFilter, setShowPriceFilter] = useQueryState(
+		'priceFilter',
+		priceFilterParser,
+	);
+	const [priceFilters, setPriceFilters] = useQueryState(
+		'priceFilters',
+		priceFiltersParser,
+	);
 
 	const helpers = useMemo(
 		() => ({
@@ -158,22 +187,63 @@ export function useFilterState() {
 				]);
 			},
 
+			setPriceFilter: (contractAddress: string, min?: string, max?: string) => {
+				const otherPriceFilters =
+					priceFilters?.filter((f) => f.contractAddress !== contractAddress) ??
+					[];
+
+				if (!min && !max) {
+					setPriceFilters(otherPriceFilters);
+					return;
+				}
+
+				const newPriceFilter: PriceFilter = {
+					contractAddress,
+					...(min && { min }),
+					...(max && { max }),
+				};
+
+				setPriceFilters([...otherPriceFilters, newPriceFilter]);
+			},
+
+			getPriceFilter: (contractAddress: string): PriceFilter | undefined => {
+				return priceFilters?.find((f) => f.contractAddress === contractAddress);
+			},
+
+			clearPriceFilters: () => {
+				setPriceFilters([]);
+			},
+
 			clearAllFilters: () => {
 				void setShowListedOnly(false);
+				void setShowPriceFilter(false);
 				void setFilterOptions([]);
 				void setSearchText('');
+				void setPriceFilters([]);
 			},
 		}),
-		[filterOptions, setFilterOptions, setShowListedOnly, setSearchText],
+		[
+			filterOptions,
+			setFilterOptions,
+			setShowListedOnly,
+			setSearchText,
+			setShowPriceFilter,
+			priceFilters,
+			setPriceFilters,
+		],
 	);
 
 	return {
 		filterOptions,
 		searchText,
 		showListedOnly,
+		showPriceFilter,
+		priceFilters,
 		setFilterOptions,
 		setSearchText,
 		setShowListedOnly,
+		setShowPriceFilter,
+		setPriceFilters,
 		...helpers,
 		serialize,
 	};

package/src/react/hooks/ui/useFilters.tsx

@@ -7,7 +7,7 @@ import {
 	type FetchFiltersParams,
 	type FiltersQueryOptions,
 	filtersQueryOptions,
-} from '../../queries/filters';
+} from '../../queries/market/filters';
 import { useConfig } from '../config/useConfig';
 
 export type UseFiltersParams = Optional<FiltersQueryOptions, 'config'>;

package/src/react/hooks/utils/useCheckoutOptions.tsx

@@ -8,7 +8,7 @@ import {
 	type CheckoutOptionsQueryOptions,
 	checkoutOptionsQueryOptions,
 	type FetchCheckoutOptionsParams,
-} from '../../queries/checkoutOptions';
+} from '../../queries/market/checkoutOptions';
 import { useConfig } from '../config/useConfig';
 
 export type UseCheckoutOptionsParams = Optional<
@@ -93,6 +93,6 @@ export type UseCheckoutOptionsArgs = {
 
 export type UseCheckoutOptionsReturn = Awaited<
 	ReturnType<
-		typeof import('../../queries/checkoutOptions').fetchCheckoutOptions
+		typeof import('../../queries/market/checkoutOptions').fetchCheckoutOptions
 	>
 >;

package/src/react/hooks/utils/useCheckoutOptionsSalesContract.tsx

@@ -9,7 +9,7 @@ import {
 	checkoutOptionsSalesContractQueryOptions,
 	type FetchCheckoutOptionsSalesContractParams,
 	type fetchCheckoutOptionsSalesContract,
-} from '../../queries/checkoutOptionsSalesContract';
+} from '../../queries/market/checkoutOptionsSalesContract';
 import { useConfig } from '../config/useConfig';
 
 export type UseCheckoutOptionsSalesContractParams = Optional<

package/src/react/hooks/utils/useComparePrices.tsx

@@ -7,7 +7,7 @@ import {
 	type ComparePricesQueryOptions,
 	comparePricesQueryOptions,
 	type FetchComparePricesParams,
-} from '../../queries/comparePrices';
+} from '../../queries/utils/comparePrices';
 import { useConfig } from '../config/useConfig';
 
 export type UseComparePricesParams = Optional<

package/src/react/hooks/utils/useConvertPriceToUSD.tsx

@@ -8,7 +8,7 @@ import {
 	type ConvertPriceToUSDReturn,
 	convertPriceToUSDQueryOptions,
 	type FetchConvertPriceToUSDParams,
-} from '../../queries/convertPriceToUSD';
+} from '../../queries/utils/convertPriceToUSD';
 import { useConfig } from '../config/useConfig';
 
 export type UseConvertPriceToUSDParams = Optional<

package/src/react/providers/analytics-provider.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import type { Auth } from '@databeat/tracker';
+import { useEffect, useMemo } from 'react';
+import { useAccount } from 'wagmi';
+import type { SdkConfig } from '../../types';
+import { DatabeatAnalytics } from '../_internal/databeat';
+
+interface AnalyticsProviderProps {
+	config: SdkConfig;
+	children: (analytics: DatabeatAnalytics) => React.ReactNode;
+}
+
+export function AnalyticsProvider({
+	config,
+	children,
+}: AnalyticsProviderProps) {
+	const { address, isConnected } = useAccount();
+	const isWindowDefined = typeof window !== 'undefined';
+
+	const analytics = useMemo(() => {
+		const server = 'https://nodes.sequence.app';
+		const auth: Auth = {};
+		auth.headers = { 'X-Access-Key': config.projectAccessKey };
+
+		return new DatabeatAnalytics(server, auth, {
+			defaultEnabled: true,
+			initProps: () => {
+				return {
+					origin: isWindowDefined ? window.location.origin : '',
+				};
+			},
+		});
+	}, [config.projectAccessKey, isWindowDefined]);
+
+	useEffect(() => {
+		if (!isConnected || !address) {
+			analytics?.reset();
+			return;
+		}
+		analytics?.identify(address.toLowerCase());
+	}, [analytics, address, isConnected]);
+
+	return <>{children(analytics)}</>;
+}

package/src/react/providers/index.tsx

@@ -1,17 +1,17 @@
 'use client';
 
 import { useOpenConnectModal } from '@0xsequence/connect';
-import type { Auth } from '@databeat/tracker';
 import { QueryClientProvider } from '@tanstack/react-query';
-import { createContext, useMemo } from 'react';
+import { createContext } from 'react';
 import type {
 	MarketplaceSdkContext as MarketplaceSdkContextType,
 	SdkConfig,
 } from '../../types';
 import { InvalidProjectAccessKeyError } from '../../utils/_internal/error/config';
 import { getQueryClient } from '../_internal/api/get-query-client';
-import { DatabeatAnalytics } from '../_internal/databeat';
+import type { DatabeatAnalytics } from '../_internal/databeat';
 import { PROVIDER_ID } from '../_internal/get-provider';
+import { AnalyticsProvider } from './analytics-provider';
 import { ThemeProvider } from './theme-provider';
 
 export const MarketplaceSdkContext = createContext(
@@ -33,46 +33,35 @@ export function MarketplaceProvider({
 		throw new InvalidProjectAccessKeyError(config.projectAccessKey);
 	}
 
-	const isWindowDefined = typeof window !== 'undefined';
-
-	const analytics = useMemo(() => {
-		const server = 'https://nodes.sequence.app';
-		const auth: Auth = {};
-		auth.headers = { 'X-Access-Key': config.projectAccessKey };
-
-		return new DatabeatAnalytics(server, auth, {
-			defaultEnabled: true,
-			initProps: () => {
-				return {
-					origin: isWindowDefined ? window.location.origin : '',
-				};
-			},
-		});
-	}, [config.projectAccessKey, isWindowDefined]);
-
-	if (openConnectModal) {
-		const context: MarketplaceSdkContextType = {
-			...config,
-			openConnectModal,
-			analytics,
-		};
+	return (
+		<AnalyticsProvider config={config}>
+			{(analytics) => {
+				if (openConnectModal) {
+					const context: MarketplaceSdkContextType = {
+						...config,
+						openConnectModal,
+						analytics,
+					};
 
-		return (
-			<MarketplaceSdkContext.Provider value={context}>
-				<ThemeProvider>
-					<div id={PROVIDER_ID}>{children}</div>
-				</ThemeProvider>
-			</MarketplaceSdkContext.Provider>
-		);
-	}
+					return (
+						<MarketplaceSdkContext.Provider value={context}>
+							<ThemeProvider>
+								<div id={PROVIDER_ID}>{children}</div>
+							</ThemeProvider>
+						</MarketplaceSdkContext.Provider>
+					);
+				}
 
-	return (
-		<MarketplaceProviderWithSequenceConnect
-			config={config}
-			analytics={analytics}
-		>
-			<ThemeProvider>{children}</ThemeProvider>
-		</MarketplaceProviderWithSequenceConnect>
+				return (
+					<MarketplaceProviderWithSequenceConnect
+						config={config}
+						analytics={analytics}
+					>
+						<ThemeProvider>{children}</ThemeProvider>
+					</MarketplaceProviderWithSequenceConnect>
+				);
+			}}
+		</AnalyticsProvider>
 	);
 }
 

package/src/react/providers/modal-provider.tsx

@@ -1,6 +1,7 @@
 import { SequenceCheckoutProvider } from '@0xsequence/checkout';
 import { observer } from '@legendapp/state/react';
 import type { ReactNode } from 'react';
+import { marketplaceApiURL } from '../_internal';
 import { useConfig } from '../hooks';
 import SwitchChainErrorModal from '../ui/modals/_internal/components/switchChainErrorModal';
 import TransactionStatusModal from '../ui/modals/_internal/components/transactionStatusModal';
@@ -17,12 +18,22 @@ interface ModalProviderProps {
 }
 
 export const ModalProvider = observer(({ children }: ModalProviderProps) => {
-	const { shadowDom, experimentalShadowDomCssOverride } = useConfig();
+	const sdkConfig = useConfig();
+	const { shadowDom, experimentalShadowDomCssOverride } = sdkConfig;
+
+	const overrides = sdkConfig._internal?.overrides?.api?.marketplace;
+	const marketplaceApiUrl = overrides?.url || marketplaceApiURL(overrides?.env || 'production');
 
 	return (
 		<>
 			{children}
-			<SequenceCheckoutProvider>
+			<SequenceCheckoutProvider
+				config={{
+					env: {
+						marketplaceApiUrl,
+					},
+				}}
+			>
 				<ShadowRoot
 					enabled={shadowDom ?? true}
 					customCSS={experimentalShadowDomCssOverride}